/* ========================================================================= */
/* layout.css                                                                */
/* ========================================================================= */
:root {
  --accessible-width: max(44px, 3rem);
  --accessible-height: max(44px, 3rem);

  --border-size--small: .0625rem;
  --border-size--medium: .125rem;
  --border-size--large: .25rem;

  --margin-size--base: 1rem;

  --content-width-fixed: 62rem; /* TODO: 62rem 1024 -> 64rem 1056? */
  /* --content-width-fluid: minmax(0, var(--content-width-fixed)); */
  --content-gutter--very-narrow: 0.5rem;
  --content-gutter--narrow: 1rem;
  --content-gutter--wide: 2rem;
  --content-gutter--very-wide: 3rem;

  --page-gutter-fixed: 1rem;
  --page-gutter-fluid: calc((100% - var(--content-width-fixed)) / 2);
  --page-gutter: minmax(var(--page-gutter-fixed), var(--page-gutter-fluid));
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* ========================================================================= */
/* Grid - Body                                                               */
/* ========================================================================= */
/* TODO: Consider replacing fr units with calculations */
body {
  display: grid;
  grid-template-columns: var(--page-gutter) auto var(--page-gutter);
  grid-template-rows: repeat(3, auto var(--content-gutter--narrow)) auto;
  
  @media (min-width: 1024px) {
    grid-template-columns:
      var(--page-gutter)
      2fr var(--content-gutter--wide) 1fr
      var(--page-gutter);
    grid-template-rows: repeat(2, auto var(--content-gutter--narrow)) auto;
  }

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

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

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

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

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

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

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

/* ========================================================================= */
/* Grid - Site Header                                                        */
/* ========================================================================= */
body > header {
  display: grid;
  grid-template-columns: var(--page-gutter) auto var(--page-gutter);
  grid-template-rows: repeat(3, auto var(--content-gutter--narrow));
  border-bottom-width: var(--border-size--medium);

  @media (min-width: 1024px) {
    grid-template-columns:
      var(--page-gutter)
      1fr var(--content-gutter--wide) 1fr
      var(--page-gutter);
    grid-template-rows: repeat(2, auto var(--content-gutter--wide));
  }

  /* --- Phone Number Bar --- */
  & > address {
    grid-column: 1 / span 3;
    grid-row: 1;
    padding-inline: var(--page-gutter-fixed);

    @media (min-width: 1024px) {
      grid-column: 1 / span 5;
      padding-inline: var(--page-gutter-fluid);
    }

    & a {
      margin-block: .25rem;
      margin-left: calc(.5rem * -1);
      padding-inline: .5rem;
    }
  }

  /* --- Site Identity --- */
  & > hgroup {
    grid-column: 2;
    grid-row: 3;
  }

  /* --- Primary Site Navigation --- */
  & > nav {
    grid-column: 2;
    grid-row: 5;

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

/* ------------------------------------------------------------------------- */
/* Site Header - Phone Number                                                */
/* ------------------------------------------------------------------------- */
body > header > address {
  & a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: var(--accessible-height);

    &::before { /* Phone icon */
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border-width: var(--border-size--medium);
      padding: .125rem;
    }
  }
}

/* ------------------------------------------------------------------------- */
/* Site Header - Primary Navigation                                          */
/* ------------------------------------------------------------------------- */
body > header > nav {
  @media (min-width: 1024px) {
    display: flex;
    justify-content: end;
  }

  & button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: var(--accessible-height);
    border: none;

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

    &::before {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      padding: .125rem;
    }

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

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

    &[aria-expanded="false"] ~ ul, &[aria-expanded="true"] ~ ul {
      @media (min-width: 1024px) {
        display: flex;
      }
    }
  }

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

    & li {
      & a {
        display: flex;
        align-items: center;
        height: var(--accessible-height);
        border-bottom-width: var(--border-size--small);
        padding-inline: var(--content-gutter--narrow);

        @media (min-width: 1024px) {
          border: none;
        }
      }

      & ul {
        @media (min-width: 1024px) {
          display: none;
          border-width: var(--border-size--small);
        }

        & li a {
          padding-left: var(--content-gutter--wide);

          @media (min-width: 1024px) {
            border: none;
          }
        }
      }
    }
  }

  @media (min-width: 1024px) {
    & > ul > li {
      position: relative;
      border-bottom-width: var(--border-size--medium);
    }

    & ul ul li {
      border: none;
    }

    & li:hover ul {
      position: absolute;
      display: block;
      right: 0;
      width: 240px; /* TODO: Tweak */
    }
  }
}

/* ========================================================================= */
/* Grid - Site Hero                                                          */
/* ========================================================================= */
body > main {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  /* --- Hero --- */
  & > header {
    picture {
      display: block;
    }

    img {
      display: block;
      width: 100%;
    }

    a {
      display: inline-flex;
      padding: var(--padding-size--base);
    }
  }
}

/* ========================================================================= */
/* Grid - Site Aside                                                         */
/* ========================================================================= */
body > aside {
  & h2 {
    margin: 0;
    border-bottom-width: var(--border-size--medium);
  }

  & ul {
    margin: 0;
    padding: 0;

    & a {
      display: flex;
      align-items: center;
      height: var(--accessible-height);
      border-bottom-width: var(--border-size--small);
    }
  }
}

/* ========================================================================= */
/* Grid - Site Footer                                                        */
/* ========================================================================= */
body > footer {
  display: grid;
  grid-template-columns: var(--page-gutter) auto var(--page-gutter);
  grid-template-rows:
    var(--content-gutter--very-wide) auto
    repeat(2, var(--content-gutter--wide) auto)
    var(--content-gutter--very-wide) auto;

  @media (min-width: 1024px) {
    grid-template-columns:
      var(--page-gutter)
      repeat(2, 1fr var(--content-gutter--wide)) 1fr
      var(--page-gutter);
    grid-template-rows: repeat(2, var(--content-gutter--very-wide) auto);
  }

  /* --- Company Section --- */
  & > section {
    grid-column: 2;
    grid-row: 2;

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

  /* --- First Testimonial --- */
  & > article:first-of-type {
    grid-column: 2;
    grid-row: 4;

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

  /* --- Second Testimonial --- */
  & > article:last-of-type {
    grid-column: 2;
    grid-row: 6;

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

  /* --- Copyright Notice --- */
  & > p {
    grid-column: 1 / 4;
    grid-row: 8;

    @media (min-width: 1024px) {
      grid-column: 1 / 8;
      grid-row: 4;
    }
  }

  /* --- Elements --- */
  & h2 {
    margin: 0 0 var(--margin-size--base) 0;
    border-bottom-width: var(--border-size--medium);
  }

  & > section address, & > section p, & > article blockquote {
    margin: 0 0 var(--margin-size--base) 0;
  }

  /* --- Copyright --- */
  & > p {
    margin: 0;
    padding-block: var(--content-gutter--narrow);
  }
}

/* ========================================================================= */
/* Blog - Icons */
/* ========================================================================= */
body > main > article {
  & header {
    & time {
      display: inline-flex;
      align-items: center;
      gap: .25rem;

      &::before {
        display: inline-block;
        width: 1rem;
        height: 1rem;
      }
    }

    & a[rel="author"] {
      display: inline-flex;
      align-items: center;
      gap: .25rem;

      &::before {
        display: inline-block;
        width: 1rem;
        height: 1rem;
      }
    }
  }

  & footer {
    & a:first-of-type {
      display: inline-flex;
      align-items: center;
      gap: .25rem;

      &::before {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        padding: .125rem;
      }
    }

    & a[rel="tag"] {
      display: inline-flex;
      align-items: center;
      gap: .25rem;

      &::before {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        padding: .125rem;
      }
    }
  }
}