/* The banner and the Main navigation bar, on their own so the unstrung web
 * app's page can use them too. That page has the app's own stylesheet and none
 * of style.css, so every site variable used here has a fallback: the light
 * scheme's value from style.css. On the site's own pages the variables are set
 * and win.
 */

/* The banner: one image, drawn by scripts/build-banner.mjs, linking home. It
   has its own dark background in both colour schemes. It spans the window,
   and is as tall as the smallest of 240px (its drawn size), a fifth of the
   window's width, and a fifth of its height: the same rule as the unstrung
   desktop app, so a short window keeps most of its height for the page. The
   browser keeps the drawing's proportions and centres it; the wall and table,
   drawn far past the drawing's edges, fill the sides of a wider box. */
.site-header {
  padding: 0;
}

.banner {
  display: block;
}

.banner img {
  display: block;
  width: 100%;
  height: min(240px, 20vw, 20vh);
}

/* The Main navigation: a full-width slate bar between the banner and the page,
   the same in light and dark mode. Contrast, measured: the bar against the
   white page 7.6:1 and the dark page 2.4:1; the cream text on it 6.3:1; the
   orange focus outline on it 4.3:1. The cream line along its top, the banner
   title's colour, separates it from the banner's brown bottom edge, which is
   close to the slate in lightness.

   Positioned above everything after it, so an open dropdown covers the page
   rather than the other way round. On the app's page the app's own Menu sits
   at z-index 10. */
.main-menu {
  --bar: var(--slate, #475569);
  --bar-text: #f3e9d2;
  --bar-focus: #ffb27a;
  position: relative;
  z-index: 20;
  font-size: 1.0625rem;
  line-height: 1.6;
  background-color: var(--bar);
  border-top: 2px solid var(--bar-text);
}

.main-menu > ul > li > a,
.main-menu > ul > li > a:visited,
.main-menu summary {
  color: var(--bar-text);
}

.main-menu > ul > li > a:focus-visible,
.main-menu summary:focus-visible {
  outline-color: var(--bar-focus);
}

/* The bar's items span up to --page-width, as the footer does. */
.main-menu > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  max-width: var(--page-width, 80rem);
  margin-block: 0;
  margin-inline: auto;
  padding-inline: 1rem;
  list-style: none;
}

.main-menu li {
  position: relative;
}

/* Links and dropdown buttons in the bar: at least a 24px target (WCAG 2.5.8). */
.main-menu > ul > li > a,
.main-menu summary {
  display: inline-block;
  min-height: 24px;
  padding-block: 0.6rem;
}

.main-menu summary {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* A chevron after each dropdown button, pointing down when closed and up when
   open. Drawn with borders and no text, so a screen reader has nothing to
   read; the button's expanded state already says whether it is open. Needed
   because display: inline-block removes the browser's own triangle. */
.main-menu summary::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline-start: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg);
}

.main-menu details[open] > summary::after {
  transform: translateY(0.1em) rotate(-135deg);
}

/* The dropdown list opens below its button, over the page. The script in
   menu.js closes it when focus leaves, so it cannot hide a focused element. */
.submenu > ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: max-content;
  max-width: min(24rem, 90vw);
  margin: 0;
  padding: 0.5rem 1rem;
  list-style: none;
  background-color: var(--background, #ffffff);
  border: 1px solid var(--border, #6e7781);
}

.submenu li a {
  display: inline-block;
  min-height: 24px;
  padding-block: 0.3rem;
  color: var(--link, #0b4f8a);
  text-underline-offset: 0.15em;
}

.submenu li a:visited {
  color: var(--link-visited, #5b2a86);
}

.main-menu a[aria-current="page"] {
  font-weight: 700;
  text-decoration-thickness: 3px;
}

/* On touchscreens, 44px tall targets, the size Apple and Google recommend,
   instead of the 24px WCAG AA minimum used with a mouse. */
@media (pointer: coarse) {
  .main-menu > ul > li > a,
  .main-menu summary,
  .submenu li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}