/* u2 supplies tokens and content styling. */
#container {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;

  > .-skip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    translate: 0 -150%;
    z-index: 1;
    padding: var(--gap);
    background: var(--color-bg);
    color: var(--color-text);
    &:focus { translate: 0; }
  }

  #head {
    padding-block: var(--gap);
    border-block-end: var(--line-width) solid var(--color-area);
    > .u2-flex { align-items: center; }
    > .u2-flex > a { min-inline-size: 0; overflow-wrap: anywhere; margin-inline-end: auto; } /* rest to the end */
    > .u2-flex > a img {
      vertical-align: middle; margin-inline-end: var(--gap);
      /* height keeps the header steady; the width cap keeps a wide wordmark from crowding the menu */
      max-block-size: 2.5rem; max-inline-size: min(12rem, 50vw);
      inline-size: auto; block-size: auto;
    }
    .-open, .-close { display: none; }

    /* A plain link list: on wide screens, and wherever popover is unsupported. */
    #head-nav {
      all: unset;
      display: block;
      nav > ul { display: flex; flex-wrap: wrap; gap: var(--gap); }
      nav a { display: inline-block; padding-block: .5em; overflow-wrap: anywhere; }
      nav li:not(.cmsInside, .cmsActive) > ul { display: none; } /* sub-levels along the current path */
      nav :is(.cmsInside, .cmsActive) > a { text-decoration: underline; }
      nav .cmsActive > a { font-weight: bold; }
    }
  }

  #content { flex: 1; min-inline-size: 0; }
  #foot { padding-block: var(--gap); border-block-start: var(--line-width) solid var(--color-area); }
}

/* Wide screens with a mouse: sub-levels drop down from their item, on hover and on keyboard focus. */
@media (width >= 48rem) and (hover: hover) {
  #container #head #head-nav {
    nav > ul > li { position: relative; }
    nav > ul > li > ul {
      display: none;
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 0;
      z-index: 1;
      min-inline-size: max(100%, 12rem);
      padding-inline: var(--gap);
      list-style: none;
      border: var(--line-width) solid var(--color-line);
      background: var(--color-bg);
    }
    nav > ul > li:is(:hover, :focus-within) > ul { display: block; }
  }
}

/* Small screens, and touch without hover: the same list in a native popover. Escape, light dismiss and
   focus return are the browser's. */
@media (width < 48rem), (hover: none) {
  @supports selector(:popover-open) {
    #container #head {
      .-open { display: revert; }
      #head-nav:not(:popover-open) { display: none; }
      #head-nav:popover-open {
        position: fixed;
        inset: auto 0 0;
        max-block-size: 80dvh;
        overflow: auto;
        overscroll-behavior: contain;
        border-block-start: var(--line-width) solid var(--color-line);
        padding: var(--gap);
        padding-block-end: max(var(--gap), env(safe-area-inset-bottom));
        background: var(--color-bg);
        color: var(--color-text);
        > .-close { display: block; margin-inline-start: auto; }
        nav > ul { flex-direction: column; }
        nav a { display: block; }
      }
    }
  }
}

@media print {
  #container > .-skip { display: none; }
  #container { min-block-size: 0; }
}