/* Editorial layout for image-led sites. Everything is derived from the u2 variables —
   a site sets --color and is done. #content is not wrapped in a measure: the content
   modules decide, so a section can bleed to the edge while the next one stays 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);

    /* sticky only where the menu stays a slim row — an open menu must scroll away */
    @media (width >= 48rem) {
      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-bar > nav {
      margin-inline: auto;
    }

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

      /* narrow: the whole menu is one column, sub-levels open and thumb-reachable */
      > ul {
        display: flex;
        flex-direction: column;
        gap: var(--gap);

        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; }
        }
      }

      a {
        color: inherit;
        text-decoration: none;
        border-bottom: 2px solid transparent;
      }
      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) }
    }
  }
}