/* ========================================================================= */
/* File: css/reset.css                                                       */
/* ========================================================================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* ========================================================================= */
/* File: css/base.css                                                        */
/* ========================================================================= */
:root {
  /* Accessibility */
  --target-min-size--pointer: 24px;
  --target-min-size--tap: 44px;
  --tap-size--base: max(var(--target-min-size--tap), 3rem);
  --tap-width: var(--tap-size--base);
  --tap-height: var(--tap-size--base);

  /* Borders */
  --border-width--base: .125rem;
  --border-width--thin: calc(var(--border-width--base) / 2);
  --border-width--thick: calc(var(--border-width--base) * 2);
  --border-radius: .25rem;
}

/* ========================================================================= */
/* File: css/color.css                                                       */
/* ========================================================================= */
:root {
  --color--tone-000: lch(9.77% 0 296.81);
  --color--tone-000: oklch(98% 0 0);
  --color--tone-100: oklch(90% 0 0);
  --color--tone-200: oklch(80% 0 0);
  --color--tone-300: oklch(70% 0 0);
  --color--tone-400: oklch(60% 0 0);
  --color--tone-500: oklch(50% 0 0);
  --color--tone-600: oklch(40% 0 0);
  --color--tone-700: oklch(30% 0 0);
  --color--tone-800: oklch(20% 0 0);
  --color--tone-900: oklch(10% 0 0);

  --color--hue-orange: oklch(65% .2 35);
  --color--hue-blue: oklch(50% .2 265);

  --color--primary-background: var(--color--tone-000);
  --color--primary-text: var(--color--tone-700);
  --color--primary-anchor: var(--color--hue-blue);
  --color--primary-anchor-hover: color-mix(
    in lch,
    var(--color--hue-blue),
    var(--color--tone-800)
  );

  --color--secondary-background: var(--color--tone-700);
  --color--secondary-text: var(--color--tone-000);
  --color--secondary-anchor: var(--color--tone-100);
  --color--secondary-anchor-hover: var(--color--tone-000);

  --color--accent: var(--color--hue-orange);
  --color--accent-background: var(--color--hue-orange);
  --color--accent-text: var(--color--tone-000);
  --color--accent-hover: var(--color--hue-orange);
  --color--accent-border: var(--color--hue-orange);

  /* Menus */
  --color--menu-text: var(--color--tone-700);
  --color--menu-hover-background: color-mix(
    in lch,
    var(--color--tone-000) 95%,
    var(--color--tone-700) 5%
  );
  --color--menu-hover-text: var(--color--tone-700);
  --color--menu-selected-background: color-mix(
    in lch,
    var(--color--tone-000) 95%,
    var(--color--hue-orange) 5%
  );
  --color--menu-selected-text: color-mix(
    in lch,
    var(--color--tone-700) 60%,
    var(--color--hue-orange) 40%
  );
  --color--menu-hover-border: var(--color--tone-700);
  --color--menu-selected-border: var(--color--hue-orange);
  --color--menu-drop-shadow: oklch(0% 0 0 / 0.3);

  /* Pagination */
  --color--pages-base-background: var(--color--tone-100);
  --color--pages-base-text: var(--color--tone-700);
  --color--pages-hover-background: var(--color--tone-200);
  --color--pages-hover-text: var(--color--tone-700);
  --color--pages-selected-background: color-mix(
    in lch,
    var(--color--tone-000) 95%,
    var(--color--hue-orange) 5%
  );
  --color--pages-selected-text: color-mix(
    in lch,
    var(--color--tone-700) 60%,
    var(--color--hue-orange) 40%
  );
}

html {
  background: var(--color--primary-background);
}

/* ========================================================================= */
/* File: css/iconography.css                                                 */
/* ========================================================================= */
:root {
  --icon--close: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjZjhmOGY4IiBkPSJNMTgzLjEgMTM3LjRDMTcwLjYgMTI0LjkgMTUwLjMgMTI0LjkgMTM3LjggMTM3LjRDMTI1LjMgMTQ5LjkgMTI1LjMgMTcwLjIgMTM3LjggMTgyLjdMMjc1LjIgMzIwTDEzNy45IDQ1Ny40QzEyNS40IDQ2OS45IDEyNS40IDQ5MC4yIDEzNy45IDUwMi43QzE1MC40IDUxNS4yIDE3MC43IDUxNS4yIDE4My4yIDUwMi43TDMyMC41IDM2NS4zTDQ1Ny45IDUwMi42QzQ3MC40IDUxNS4xIDQ5MC43IDUxNS4xIDUwMy4yIDUwMi42QzUxNS43IDQ5MC4xIDUxNS43IDQ2OS44IDUwMy4yIDQ1Ny4zTDM2NS44IDMyMEw1MDMuMSAxODIuNkM1MTUuNiAxNzAuMSA1MTUuNiAxNDkuOCA1MDMuMSAxMzcuM0M0OTAuNiAxMjQuOCA0NzAuMyAxMjQuOCA0NTcuOCAxMzcuM0wzMjAuNSAyNzQuN0wxODMuMSAxMzcuNHoiLz48L3N2Zz4=');
  --icon--list: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjZjhmOGY4IiBkPSJNMTA0IDExMkM5MC43IDExMiA4MCAxMjIuNyA4MCAxMzZMODAgMTg0QzgwIDE5Ny4zIDkwLjcgMjA4IDEwNCAyMDhMMTUyIDIwOEMxNjUuMyAyMDggMTc2IDE5Ny4zIDE3NiAxODRMMTc2IDEzNkMxNzYgMTIyLjcgMTY1LjMgMTEyIDE1MiAxMTJMMTA0IDExMnpNMjU2IDEyOEMyMzguMyAxMjggMjI0IDE0Mi4zIDIyNCAxNjBDMjI0IDE3Ny43IDIzOC4zIDE5MiAyNTYgMTkyTDU0NCAxOTJDNTYxLjcgMTkyIDU3NiAxNzcuNyA1NzYgMTYwQzU3NiAxNDIuMyA1NjEuNyAxMjggNTQ0IDEyOEwyNTYgMTI4ek0yNTYgMjg4QzIzOC4zIDI4OCAyMjQgMzAyLjMgMjI0IDMyMEMyMjQgMzM3LjcgMjM4LjMgMzUyIDI1NiAzNTJMNTQ0IDM1MkM1NjEuNyAzNTIgNTc2IDMzNy43IDU3NiAzMjBDNTc2IDMwMi4zIDU2MS43IDI4OCA1NDQgMjg4TDI1NiAyODh6TTI1NiA0NDhDMjM4LjMgNDQ4IDIyNCA0NjIuMyAyMjQgNDgwQzIyNCA0OTcuNyAyMzguMyA1MTIgMjU2IDUxMkw1NDQgNTEyQzU2MS43IDUxMiA1NzYgNDk3LjcgNTc2IDQ4MEM1NzYgNDYyLjMgNTYxLjcgNDQ4IDU0NCA0NDhMMjU2IDQ0OHpNODAgMjk2TDgwIDM0NEM4MCAzNTcuMyA5MC43IDM2OCAxMDQgMzY4TDE1MiAzNjhDMTY1LjMgMzY4IDE3NiAzNTcuMyAxNzYgMzQ0TDE3NiAyOTZDMTc2IDI4Mi43IDE2NS4zIDI3MiAxNTIgMjcyTDEwNCAyNzJDOTAuNyAyNzIgODAgMjgyLjcgODAgMjk2ek0xMDQgNDMyQzkwLjcgNDMyIDgwIDQ0Mi43IDgwIDQ1Nkw4MCA1MDRDODAgNTE3LjMgOTAuNyA1MjggMTA0IDUyOEwxNTIgNTI4QzE2NS4zIDUyOCAxNzYgNTE3LjMgMTc2IDUwNEwxNzYgNDU2QzE3NiA0NDIuNyAxNjUuMyA0MzIgMTUyIDQzMkwxMDQgNDMyeiIvPjwvc3ZnPg==');
  --icon--phone: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjZjA1MzJhIiBkPSJNMjI0LjIgODlDMjE2LjMgNzAuMSAxOTUuNyA2MC4xIDE3Ni4xIDY1LjRMMTcwLjYgNjYuOUMxMDYgODQuNSA1MC44IDE0Ny4xIDY2LjkgMjIzLjNDMTA0IDM5OC4zIDI0MS43IDUzNiA0MTYuNyA1NzMuMUM0OTMgNTg5LjMgNTU1LjUgNTM0IDU3My4xIDQ2OS40TDU3NC42IDQ2My45QzU4MCA0NDQuMiA1NjkuOSA0MjMuNiA1NTEuMSA0MTUuOEw0NTMuOCAzNzUuM0M0MzcuMyAzNjguNCA0MTguMiAzNzMuMiA0MDYuOCAzODcuMUwzNjguMiA0MzQuM0MyOTcuOSAzOTkuNCAyNDEuMyAzNDEgMjA4LjggMjY5LjNMMjUzIDIzMy4zQzI2Ni45IDIyMiAyNzEuNiAyMDIuOSAyNjQuOCAxODYuM0wyMjQuMiA4OXoiLz48L3N2Zz4=');
  --icon--arrow-left: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjMmUyZTJlIiBkPSJNNzMuNCAyOTcuNEM2MC45IDMwOS45IDYwLjkgMzMwLjIgNzMuNCAzNDIuN0wyMzMuNCA1MDIuN0MyNDUuOSA1MTUuMiAyNjYuMiA1MTUuMiAyNzguNyA1MDIuN0MyOTEuMiA0OTAuMiAyOTEuMiA0NjkuOSAyNzguNyA0NTcuNEwxNzMuMyAzNTJMNTQ0IDM1MkM1NjEuNyAzNTIgNTc2IDMzNy43IDU3NiAzMjBDNTc2IDMwMi4zIDU2MS43IDI4OCA1NDQgMjg4TDE3My4zIDI4OEwyNzguNyAxODIuNkMyOTEuMiAxNzAuMSAyOTEuMiAxNDkuOCAyNzguNyAxMzcuM0MyNjYuMiAxMjQuOCAyNDUuOSAxMjQuOCAyMzMuNCAxMzcuM0w3My40IDI5Ny4zeiIvPjwvc3ZnPg==');
  --icon--arrow-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjMmUyZTJlIiBkPSJNNTY2LjYgMzQyLjZDNTc5LjEgMzMwLjEgNTc5LjEgMzA5LjggNTY2LjYgMjk3LjNMNDA2LjYgMTM3LjNDMzk0LjEgMTI0LjggMzczLjggMTI0LjggMzYxLjMgMTM3LjNDMzQ4LjggMTQ5LjggMzQ4LjggMTcwLjEgMzYxLjMgMTgyLjZMNDY2LjcgMjg4TDk2IDI4OEM3OC4zIDI4OCA2NCAzMDIuMyA2NCAzMjBDNjQgMzM3LjcgNzguMyAzNTIgOTYgMzUyTDQ2Ni43IDM1MkwzNjEuMyA0NTcuNEMzNDguOCA0NjkuOSAzNDguOCA0OTAuMiAzNjEuMyA1MDIuN0MzNzMuOCA1MTUuMiAzOTQuMSA1MTUuMiA0MDYuNiA1MDIuN0w1NjYuNiAzNDIuN3oiLz48L3N2Zz4=');
  --icon--calendar: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjMmUyZTJlIiBkPSJNMjE2IDY0QzIyOS4zIDY0IDI0MCA3NC43IDI0MCA4OEwyNDAgMTI4TDQwMCAxMjhMNDAwIDg4QzQwMCA3NC43IDQxMC43IDY0IDQyNCA2NEM0MzcuMyA2NCA0NDggNzQuNyA0NDggODhMNDQ4IDEyOEw0ODAgMTI4QzUxNS4zIDEyOCA1NDQgMTU2LjcgNTQ0IDE5Mkw1NDQgNDgwQzU0NCA1MTUuMyA1MTUuMyA1NDQgNDgwIDU0NEwxNjAgNTQ0QzEyNC43IDU0NCA5NiA1MTUuMyA5NiA0ODBMOTYgMTkyQzk2IDE1Ni43IDEyNC43IDEyOCAxNjAgMTI4TDE5MiAxMjhMMTkyIDg4QzE5MiA3NC43IDIwMi43IDY0IDIxNiA2NHpNNDgwIDQ5NkM0ODguOCA0OTYgNDk2IDQ4OC44IDQ5NiA0ODBMNDk2IDQxNkw0MDggNDE2TDQwOCA0OTZMNDgwIDQ5NnpNNDk2IDM2OEw0OTYgMjg4TDQwOCAyODhMNDA4IDM2OEw0OTYgMzY4ek0zNjAgMzY4TDM2MCAyODhMMjgwIDI4OEwyODAgMzY4TDM2MCAzNjh6TTIzMiAzNjhMMjMyIDI4OEwxNDQgMjg4TDE0NCAzNjhMMjMyIDM2OHpNMTQ0IDQxNkwxNDQgNDgwQzE0NCA0ODguOCAxNTEuMiA0OTYgMTYwIDQ5NkwyMzIgNDk2TDIzMiA0MTZMMTQ0IDQxNnpNMjgwIDQxNkwyODAgNDk2TDM2MCA0OTZMMzYwIDQxNkwyODAgNDE2ek0yMTYgMTc2TDE2MCAxNzZDMTUxLjIgMTc2IDE0NCAxODMuMiAxNDQgMTkyTDE0NCAyNDBMNDk2IDI0MEw0OTYgMTkyQzQ5NiAxODMuMiA0ODguOCAxNzYgNDgwIDE3NkwyMTYgMTc2eiIvPjwvc3ZnPg==');
  --icon--person: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjMmUyZTJlIiBkPSJNMzIwIDMxMkMzODYuMyAzMTIgNDQwIDI1OC4zIDQ0MCAxOTJDNDQwIDEyNS43IDM4Ni4zIDcyIDMyMCA3MkMyNTMuNyA3MiAyMDAgMTI1LjcgMjAwIDE5MkMyMDAgMjU4LjMgMjUzLjcgMzEyIDMyMCAzMTJ6TTI5MC4zIDM2OEMxOTEuOCAzNjggMTEyIDQ0Ny44IDExMiA1NDYuM0MxMTIgNTYyLjcgMTI1LjMgNTc2IDE0MS43IDU3Nkw0OTguMyA1NzZDNTE0LjcgNTc2IDUyOCA1NjIuNyA1MjggNTQ2LjNDNTI4IDQ0Ny44IDQ0OC4yIDM2OCAzNDkuNyAzNjhMMjkwLjMgMzY4eiIvPjwvc3ZnPg==');
  --icon--folder: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjMmUyZTJlIiBkPSJNODggMjg5LjZMNjQuNCAzNjAuMkw2NC40IDE2MEM2NC40IDEyNC43IDkzLjEgOTYgMTI4LjQgOTZMMjY3LjEgOTZDMjgwLjkgOTYgMjk0LjQgMTAwLjUgMzA1LjUgMTA4LjhMMzQzLjkgMTM3LjZDMzQ5LjQgMTQxLjggMzU2LjIgMTQ0IDM2My4xIDE0NEw0ODAuNCAxNDRDNTE1LjcgMTQ0IDU0NC40IDE3Mi43IDU0NC40IDIwOEw1NDQuNCAyMjRMMTc5IDIyNEMxMzcuNyAyMjQgMTAxIDI1MC40IDg3LjkgMjg5LjZ6TTUwOS44IDUxMkwxMzEgNTEyQzk4LjIgNTEyIDc1LjEgNDc5LjkgODUuNSA0NDguOEwxMzMuNSAzMDQuOEMxNDAgMjg1LjIgMTU4LjQgMjcyIDE3OSAyNzJMNTU3LjggMjcyQzU5MC42IDI3MiA2MTMuNyAzMDQuMSA2MDMuMyAzMzUuMkw1NTUuMyA0NzkuMkM1NDguOCA0OTguOCA1MzAuNCA1MTIgNTA5LjggNTEyeiIvPjwvc3ZnPg==');
  --icon--tag: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjMmUyZTJlIiBkPSJNNDMzLjIgMTAzLjFMNTgxLjQgMjUzLjRDNjA5LjEgMjgxLjUgNjA5LjEgMzI2LjUgNTgxLjQgMzU0LjZMNDI1IDUxMi45QzQxNS43IDUyMi4zIDQwMC41IDUyMi40IDM5MS4xIDUxMy4xQzM4MS43IDUwMy44IDM4MS42IDQ4OC42IDM5MC45IDQ3OS4yTDU0Ny4zIDMyMC44QzU1Ni41IDMxMS41IDU1Ni41IDI5Ni40IDU0Ny4zIDI4Ny4xTDM5OSAxMzYuOUMzODkuNyAxMjcuNSAzODkuOCAxMTIuMyAzOTkuMiAxMDNDNDA4LjYgOTMuNyA0MjMuOCA5My44IDQzMy4xIDEwMy4yek02NC4xIDI5My41TDY0LjEgMTYwQzY0LjEgMTI0LjcgOTIuOCA5NiAxMjguMSA5NkwyNjEuNiA5NkMyNzguNiA5NiAyOTQuOSAxMDIuNyAzMDYuOSAxMTQuN0w0NTAuOSAyNTguN0M0NzUuOSAyODMuNyA0NzUuOSAzMjQuMiA0NTAuOSAzNDkuMkwzMTcuNCA0ODIuN0MyOTIuNCA1MDcuNyAyNTEuOSA1MDcuNyAyMjYuOSA0ODIuN0w4Mi45IDMzOC43QzcwLjkgMzI2LjcgNjQuMiAzMTAuNCA2NC4yIDI5My40ek0yMDguMSAyMDhDMjA4LjEgMTkwLjMgMTkzLjggMTc2IDE3Ni4xIDE3NkMxNTguNCAxNzYgMTQ0LjEgMTkwLjMgMTQ0LjEgMjA4QzE0NC4xIDIyNS43IDE1OC40IDI0MCAxNzYuMSAyNDBDMTkzLjggMjQwIDIwOC4xIDIyNS43IDIwOC4xIDIwOHoiLz48L3N2Zz4=');
}

/* ========================================================================= */
/* File: css/typography.css                                                  */
/* ========================================================================= */
:root {
  --font-family--base: sans-serif;
  --font-size--base: 16px;
  --line-height--base: 1.375;
}

html {
  font:
    var(--font-size--base) /
    var(--line-height--base)
    var(--font-family--base);
}

button {
  font-size: var(--font-size--base);
}

/* ========================================================================= */
/* File: css/layout.css                                                      */
/* ========================================================================= */
:root {
  --grid-third: 20rem;
  --gap-slim: 1rem;
  --gap-wide: 2rem;
  --gap-xtra-wide: 3rem;

  --safe-area--fixed: calc(var(--grid-third) * 3 + var(--gap-wide) * 2);
  --page-margin--fixed: calc((100% - var(--safe-area--fixed)) / 2);
  --page-margin--fluid: var(--gap-slim);
  --page-margin: max(var(--page-margin--fixed), var(--page-margin--fluid));

  --content-width: calc(var(--grid-third) * 2 + var(--gap-wide));
  --side-width: var(--grid-third);
}

body {
  display: grid;
  grid-template-columns: var(--page-margin) auto var(--page-margin);
  grid-template-rows: repeat(3, auto var(--gap-slim)) auto;
  
  /* --- Site Header --- */
  & > header {
    grid-column: 1 / span 3;
    grid-row: 1;
  }

  /* --- Main Content --- */
  & > main {
    grid-column: 2;
    grid-row: 3;
  }

  /* --- Blog Menu --- */
  & > aside {
    grid-column: 2;
    grid-row: 5;
  }

  /* --- Site Footer --- */
  & > footer {
    grid-column: 1 / span 3;
    grid-row: 7;
  }

  @media (min-width: 1056px) {
    grid-template-columns:
      var(--page-margin)
      var(--content-width) var(--gap-wide) var(--side-width)
      var(--page-margin);
    grid-template-rows: repeat(2, auto var(--gap-wide)) auto;

    /* --- Site Header --- */
    & > header {
      grid-column: 1 / span 5;
      grid-row: 1;
    }

    /* --- Blog Menu --- */
    & > aside {
      grid-column: 4;
      grid-row: 3;
    }

    /* --- Site Footer --- */
    & > footer {
      grid-column: 1 / span 5;
      grid-row: 5;      
    }
  }
}

/* ========================================================================= */
/* File: css/site/header.css                                                 */
/* ========================================================================= */

/* ------------------------------------------------------------------------- */
/* Section: Site Header                                                      */
/* ------------------------------------------------------------------------- */
body > header {
  display: grid;
  grid-template:
    repeat(3, auto var(--gap-slim)) /
    var(--page-margin) auto var(--page-margin);

  border-bottom: var(--border-width--base) solid var(--color--tone-200);
  color: var(--color--primary-text);

  @media (min-width: 1056px) {
    grid-template:
      repeat(2, auto var(--gap-wide)) /
      var(--page-margin) auto var(--gap-wide) auto var(--page-margin);
  }

  & a {
    text-decoration: none;
  }
}

/* ------------------------------------------------------------------------- */
/* Section: Phone Number                                                     */
/* ------------------------------------------------------------------------- */
body > header > address {
  grid-column: 1 / span 3;
  grid-row: 1;
  padding-inline: var(--page-margin);

  font-style: normal;
  background: var(--color--secondary-background);

  @media (min-width: 1056px) {
    grid-column: 1 / span 5;
  }

  & a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    min-width: var(--tap-width);
    min-height: var(--tap-height);

    margin-block: .25rem;
    margin-inline-start: calc(.5rem * -1);
    padding-inline: .5rem;
    border-radius: var(--border-radius);

    color: var(--color--secondary-text);

    &:hover {
      background: var(--color--tone-600);
    }

    &::before {
      content: var(--icon--phone) / "Phone";
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border: var(--border-width--base) solid var(--color--accent-border);
      border-radius: var(--border-radius);
      padding: .125rem;
    }
  }
}

/* ------------------------------------------------------------------------- */
/* Section: Branding                                                         */
/* ------------------------------------------------------------------------- */
body > header > hgroup {
  grid-column: 2;
  grid-row: 3;

  & h1 {
    margin: 0 0 .125rem 0;
  }

  & p {
    margin: 0;
    font-style: italic;
    color: var(--color--tone-500);
  }
}

/* ------------------------------------------------------------------------- */
/* Section: Navigation                                                       */
/* ------------------------------------------------------------------------- */
/* --- Navigation: Base --- */
body > header > nav {
  grid-column: 2;
  grid-row: 5;

  @media (min-width: 1056px) {
    grid-column: 4;
    grid-row: 3;

    display: flex;
    align-items: center;
    justify-content: end;
  }

  & a {
    color: var(--color--menu-text);

    &:hover {
      color: var(--color--menu-hover-text);
    }
  }
}

/* --- Navigation: Open/Close Menu Button --- */
body > header > nav > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  width: 100%;
  min-height: var(--tap-height);
  border: none;
  border-radius: var(--border-radius);

  background: var(--color--secondary-background);
  color: var(--color--secondary-text);

  &::before {
    display: inline-block;

    width: 1rem;
    height: 1rem;
    padding: .125rem;
  }

  &[aria-expanded="false"]::before {
    content: var(--icon--list);
  }

  &[aria-expanded="true"]::before {
    content: var(--icon--close);
  }

  &[aria-expanded="false"] ~ ul {
    display: none;
  }

  &[aria-expanded="true"] ~ ul {
    display: block;
  }

  @media (min-width: 1056px) {
    display: none;

    &[aria-expanded="false"] ~ ul, &[aria-expanded="true"] ~ ul {
      display: flex;
    }
  }
}

/* --- Navigation: First Level Menu --- */
body > header > nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;

  & > li a {
    display: flex;
    align-items: center;

    min-width: var(--tap-width);
    min-height: var(--tap-height);

    border: var(--border-width--thin) solid var(--color--tone-100);
    border-top: none;
    padding-inline: var(--gap-slim);

    &:hover {
      background: var(--color--menu-hover-background);
      color: var(--color--menu-hover-text);
    }

    &[aria-current="page"] {
      background: var(--color--menu-selected-background);
      color: var(--color--menu-selected-text);
    }
  }

  @media (min-width: 1056px) {
    display: flex;
    gap: .25rem;

    & > li {
      position: relative;
      border-radius: var(--border-radius);
    }

    & > li a {
      border: none;
      border-radius: var(--border-radius);
    }

    & > li a[aria-current="page"] {
      background: var(--color--menu-selected-background);
      color: var(--color--menu-selected-text);
    }

    & > li:has(ul:hover) > a {
      background: var(--color--menu-hover-background);
      color: var(--text-color--menu-hover);
    }

    & > li:hover > ul {
      position: absolute;
      right: calc(var(--border-width--base) * -1);
      display: block;
      width: 16rem;
      margin-top: calc(var(--border-width--thick) * -1);
      border-radius: var(--border-radius);
    }
  }
}

/* --- Navigation: Second Level Menu --- */
body > header > nav > ul > li > ul {
  margin: inherit;
  padding: inherit;
  list-style: inherit;

  & li a {
    padding-left: var(--gap-wide);
  }

  @media (min-width: 1056px) {
    display: none;
    border: var(--border-width--thin) solid var(--color--tone-300);
    background: var(--color--primary-background);
    box-shadow: 0 .125rem .25rem var(--color--menu-drop-shadow);

    & li {
      border: none;
    }

    & li a {
      padding-inline: var(--gap-slim);
    }

    & li a:hover {
      border: none;
      background: var(--color--menu-hover-background);
    }

    & li:first-of-type a:hover {
      border-top-left-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius);
    }

    & li:last-of-type a:hover {
      border-bottom-left-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
    }
  }
}

/* ========================================================================= */
/* File: css/site/side-navigation.css                                        */
/* ========================================================================= */

/* ------------------------------------------------------------------------- */
/* Section: Side Navigation                                                  */
/* ------------------------------------------------------------------------- */
body > aside {
  color: var(--color--primary-text);

  @media (max-width: 1055px)  {
    border-top: var(--border-width--base) solid var(--color--tone-100);
    padding-block-start: 1rem;
  }

  & h2 {
    margin: 0;
    border-bottom: var(--border-width--base) solid var(--color--accent-border);
  }

  & ul {
    margin: 0;
    padding: 0;
    list-style: none;

    & a {
      display: flex;
      align-items: center;

      min-width: var(--tap-width);
      min-height: var(--tap-height);
      padding-inline: var(--gap-slim);
      border-bottom: var(--border-width--thin) solid var(--color--tone-100);

      text-decoration: none;
      color: var(--color--menu-text);

      &:hover {
        background: var(--color--menu-hover-background);
        color: var(--color--menu-hover-text);
      }

      &[aria-current="page"] {
        background: var(--color--menu-selected-background);
        color: var(--color--menu-selected-text);
      }
    }
  }
}

/* ========================================================================= */
/* File: css/site/footer.css                                                 */
/* ========================================================================= */

/* ------------------------------------------------------------------------- */
/* Section: Site Footer                                                      */
/* ------------------------------------------------------------------------- */
body > footer {
  display: grid;
  grid-template:
    var(--gap-xtra-wide) auto
    repeat(2, var(--gap-wide) auto)
    var(--gap-xtra-wide) auto /
    var(--page-margin) auto var(--page-margin);

  background: var(--color--secondary-background);
  color: var(--color--secondary-text);

  & h2 {
    margin-block: 0 1.125rem;
    border-bottom: var(--border-width--base) solid var(--color--accent-border);
    font-size: 1.25rem;
    font-weight: normal;
  }

  @media (min-width: 1056px) {
    grid-template:
      repeat(2, var(--gap-xtra-wide) auto) /
      var(--page-margin)
      repeat(2, var(--grid-third) var(--gap-wide)) var(--grid-third)
      var(--page-margin);
  }
}

/* ------------------------------------------------------------------------- */
/* Section: Company Information                                              */
/* ------------------------------------------------------------------------- */
body > footer > section {
  grid-column: 2;
  grid-row: 2;

  @media (min-width: 1056px) {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ------------------------------------------------------------------------- */
/* Section: Testimonials                                                     */
/* ------------------------------------------------------------------------- */
body > footer > article {
  grid-column: 2;

  & a {
    color: var(--color--secondary-anchor);
  }

  & cite {
    font-style: normal;
  }

  & blockquote {
    margin: 0 0 1.25rem 0;
    font-style: italic;
  }

  &:first-of-type {
    grid-row: 4;
  }

  &:last-of-type {
    grid-row: 6;
  }

  @media (min-width: 1056px) {
    &:first-of-type {
      grid-column: 4;
      grid-row: 2;
    }

    &:last-of-type {
      grid-column: 6;
      grid-row: 2;
    }
  }
}

/* ------------------------------------------------------------------------- */
/* Section: Copyright Notice                                                 */
/* ------------------------------------------------------------------------- */
body > footer > p {
  grid-column: 1 / span 3;
  grid-row: 8;

  margin: 0;
  padding-block: var(--gap-slim);

  font-size: 0.875rem;
  text-align: center;

  background: var(--color--tone-600);
  color: var(--color--tone-200);

  @media (min-width: 1056px) {
    grid-column: 1 / span 7;
    grid-row: 4;
  }
}

/* ========================================================================= */
/* File: css/content/page.css                                                */
/* ========================================================================= */

/* ------------------------------------------------------------------------- */
/* Section: Main Content                                                     */
/* ------------------------------------------------------------------------- */
body > main {
  color: var(--color--primary-text);

  & a {
    color: var(--color--primary-anchor);

    &:hover {
      color: var(--color--primary-anchor-hover);
    }
  }

  & > h2 {
    margin-block-start: 0;
    margin-block-end: 1.25rem;
    border-bottom: var(--border-width--base) solid var(--color--accent-border);
  }

  /* --- Hero --- */
  & > picture:first-child > img {
    display: block;
    width: 100%;
    height: auto;
  }

  & > picture:first-child + h2 {
    margin-block-start: 1.5rem;
  }
}

/* ========================================================================= */
/* File: css/content/gallery.css                                             */
/* ========================================================================= */

/* ------------------------------------------------------------------------- */
/* Section: Gallery                                                          */
/* ------------------------------------------------------------------------- */
body > main:has(> figure) {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;

  & > h2 {
    width: 100%;
  }

  & > figure {
    width: 100%;
    margin: 0;

    @media (width > 496px) {
      width: calc(50% - .5rem);
    }

    & picture img {
      display: block;
      width: 100%;
      height: auto;
    }

    & p {
      margin: 0;
    }
  }
}

/* ========================================================================= */
/* File: css/content/blog.css                                                */
/* ========================================================================= */

/* ------------------------------------------------------------------------- */
/* Section: Blog                                                             */
/* ------------------------------------------------------------------------- */
/* --- Blog: Post and Post List Shared --- */
body > main > article {
  /* Icons */
  & a[rel="author"]::before {
    content: var(--icon--person);
  }
  
  & a[rel="tag"]::before {
    content: var(--icon--tag);
  }

  & a[href*="/category"]::before {
    content: var(--icon--folder);
  }

  & time::before {
    content: var(--icon--calendar);
  }

  & a[rel="author"],
  & a[rel="tag"],
  & a[href*="/category"],
  & time {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-right: .5rem;
  }

  & a[rel="author"]::before,
  & a[rel="tag"]::before,
  & a[href*="/category"]::before,
  & time::before {
    display: inline;
    width: 1rem;
    height: 1rem;
  }

  & footer ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* --- Blog: Single Post --- */
body > main > article:has(header h2) {
  & header h2 {
    margin: 0 0 1rem 0;
    border-bottom: var(--border-width--base) solid var(--color--accent);
  }

  & img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  & picture {
    display: block;
    max-width: 100%;
  }

  & footer {
    padding: var(--gap-slim);
    border-radius: var(--border-radius);
    background: color-mix(
      in lch,
      var(--color--tone-000) 95%,
      var(--color--tone-700) 5%
    );

    & > time, & > a {
      display: flex;
    }
  }
}

/* --- Blog: Post List --- */
body > main > article:has(header h3) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-end: 1rem;
  border-bottom: var(--border-width--thin) solid var(--color--tone-100);
  padding-block-end: 1rem;

  & header h3 {
    margin: 0 0 .25rem 0;
  }
}

/* --- Blog: Archives --- */
body > main > header {
  & h2 {
    margin: 0 0 1rem 0;
    border-bottom: var(--border-width--base) solid var(--color--accent);
  }
}

/* --- Blog: Author --- */
body > main > section:has(~ header h2[rel="author"]) {
  border-bottom: var(--border-width--thin) solid var(--color--tone-100);
}

/* ========================================================================= */
/* File: css/content/estimate.css                                            */
/* ========================================================================= */

/* ========================================================================= */
/* File: css/components/pagination.css                                       */
/* ========================================================================= */

/* ------------------------------------------------------------------------- */
/* Component: Pagination                                                     */
/* ------------------------------------------------------------------------- */
body > main > nav > ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;

  & a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;

    min-width: var(--tap-width);
    min-height: var(--tap-height);

    border-radius: var(--border-radius);
    padding-inline: var(--gap-slim);

    text-decoration: none;
    background: var(--color--pages-base-background);
    color: var(--color--pages-base-text);

    &:hover {
      background: var(--color--pages-hover-background);
      color: var(--color--pages-hover-text);
    }

    &[aria-current="page"] {
      background: var(--color--pages-selected-background);
      color: var(--color--pages-selected-text);
    }

    &[aria-label="Previous page"]::before {
      content: var(--icon--arrow-left);
      display: inline;
      width: 1rem;
      height: 1rem;
    }

    &[aria-label="Next page"]::after {
      content: var(--icon--arrow-right);
      display: inline;
      width: 1rem;
      height: 1rem;
    }
  }
}