/* Layout for image-led sites, built on u2 variables (--color is enough). #content has no width
   limit: each section decides, so one can span the full width and the next stay narrow. */

#container {
  --line: color-mix(in srgb, var(--color-line), transparent 85%);

  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-1);

  #head {
    background: var(--color-bg);
    border-bottom: var(--line-width) solid var(--line);

    position: sticky;
    top: 0;
    z-index: 2;

    .head-bar {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      min-height: 4.4rem;
      flex-wrap: wrap;
    }

    .head-logo {
      display: inline-flex;
      align-items: center;
    }

    /* the call to action sits at the far end, the menu takes the space between */
    #head-nav > nav {
      margin-inline: auto;
    }

    /* Narrow: the menu is a popover behind a button (top layer, closes on Esc or outside tap, no
       script). Wide: display:contents overrides the UA rule hiding closed popovers. */
    .head-burger {
      flex: none;
      margin-inline-start: auto;
      /* The root font is fluid, so ensure at least 44px touch size. */
      width: max(2.75rem, 44px);
      height: max(2.75rem, 44px);
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      cursor: pointer;
    }

    /* three rules, the outer two placed by shadow — they take currentColor */
    .head-burger::before {
      content: '';
      display: block;
      width: 1.4rem;
      height: var(--line-width);
      margin: auto;
      background: currentColor;
      box-shadow: 0 -.45rem, 0 .45rem;
    }

    /* The panel opens at the bottom, within thumb reach. */
    #head-nav {
      position: fixed;
      inset: auto 0 0;
      width: auto;
      max-height: 80dvh;
      overflow: auto;
      overscroll-behavior: contain; /* scrolling the panel must not scroll the page behind it */
      margin: 0;
      /* keep clear of the iOS home bar */
      padding: .5rem max(var(--gap), env(safe-area-inset-right))
               max(var(--gap), 1.25rem, env(safe-area-inset-bottom))
               max(var(--gap), env(safe-area-inset-left));
      border: 0;
      border-top: var(--line-width) solid var(--line);
      border-radius: .9rem .9rem 0 0;
      background: var(--color-bg);
      color: var(--color-text);
      box-shadow: 0 -.5rem 1.5rem rgb(0 0 0 / .18);
    }

    /* Close button inside the panel (the burger is under the backdrop). Tapping outside also closes. */
    .head-nav-close {
      display: block;
      margin-inline-start: auto;
      width: max(2.75rem, 44px);
      height: max(2.75rem, 44px);
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      cursor: pointer;
    }
    .head-nav-close::before {
      content: '';
      display: block;
      width: 1.1rem;
      height: 1.1rem;
      margin: auto;
      background: currentColor;
      /* two crossed rules, drawn with a mask so they take currentColor like the burger */
      mask: linear-gradient(45deg, transparent calc(50% - 1px), #000 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
            linear-gradient(-45deg, transparent calc(50% - 1px), #000 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
    }

    /* ::backdrop is outside the cascade of the page — a plain dim, no site variable */
    #head-nav::backdrop {
      background: rgb(0 0 0 / .45);
    }

    /* Slide in from the bottom; `allow-discrete` makes the popover animatable. Narrow layout only
       (wide uses display:contents). */
    @media (width < 48rem) and (prefers-reduced-motion: no-preference) {
      #head-nav {
        translate: 0 100%;
        transition: translate .25s ease, overlay .25s allow-discrete, display .25s allow-discrete;
      }
      #head-nav:popover-open { translate: 0 0 }
      @starting-style {
        #head-nav:popover-open { translate: 0 100% }
      }

      #head-nav::backdrop {
        background: rgb(0 0 0 / 0);
        transition: background .25s ease, overlay .25s allow-discrete, display .25s allow-discrete;
      }
      #head-nav:popover-open::backdrop { background: rgb(0 0 0 / .45) }
      @starting-style {
        #head-nav:popover-open::backdrop { background: rgb(0 0 0 / 0) }
      }
    }

    @media (width >= 48rem) {
      .head-burger, .head-nav-close { display: none }
      #head-nav { display: contents }
    }

    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      /* narrow: one column, sub-levels open. Rows are separated by a hairline instead of a gap,
         so there is no untappable strip. Only in the narrow query (in a row it would look wrong). */
      > ul {
        display: flex;
        flex-direction: column;
        gap: 0;

        @media (width < 48rem) {
          > li + li {
            border-top: var(--line-width) solid var(--line);
          }
        }

        ul {
          padding-left: .8rem;
        }

        @media (width >= 48rem) {
          flex-direction: row;
          flex-wrap: wrap;
          gap: clamp(1rem, 2.6vw, 2.2rem);

          > li { position: relative; }
          ul { display: none; }
          > li > ul {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 100%;
            width: max-content;
            padding: .5rem;
            background: var(--color-bg);
            border: var(--line-width) solid var(--line);
            box-shadow: 0 .3rem .8rem var(--shadow-color);
          }
          > li:last-child > ul { /* the last panel would hang over the edge */
            left: auto;
            right: 0;
          }
          > li:is(:hover, :focus-within) ul { display: block; }
        }
      }

      /* The row itself is the target, not just the word: a link the width of "Home" is
         four characters wide and misses more often than it hits. 44px is the smallest
         target the platform guidelines call comfortable, and it has to be a px floor:
         the fluid root font puts 3rem below it on a narrow screen. */
      a {
        display: flex;
        align-items: center;
        min-height: max(3rem, 44px);
        padding-block: .4em;
        color: inherit;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        -webkit-tap-highlight-color: transparent;
      }
      a:active { background: color-mix(in srgb, var(--color-text), transparent 92%) }

      @media (width >= 48rem) {
        a {
          display: inline-block;
          min-height: 0;
          padding-block: 0;
        }
        a:active { background: none }
      }
      a:hover { border-color: var(--line); }
      .cmsActive > a { border-color: currentColor; }
    }
  }

  #content {
    flex: 1;
  }

  #foot {
    border-top: var(--line-width) solid var(--line);
    padding-top: clamp(2rem, 5vw, 3.5rem);

    .foot-grid {
      display: grid;
      /* minmax(0,…): an image in a column would otherwise force its own width on the others */
      grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: start;
    }

    .foot-brand > a {
      display: inline-block;
      margin-bottom: .8rem;
    }

    .foot-bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
      align-items: center;
      margin-top: clamp(2rem, 4vw, 3rem);
      padding-block: 1rem;
      border-top: var(--line-width) solid var(--line);
      font-size: .85em;
      color: color-mix(in srgb, var(--color-text), transparent 30%);

      ul {
        display: flex;
        gap: 1.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      a { color: inherit }
    }

    @media (width < 60rem) {
      .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    }
    @media (width < 40rem) {
      .foot-grid { grid-template-columns: minmax(0, 1fr) }
    }
  }
}