/* =============================================================================
   The top bar, shared by every page that carries one.

   Split out of site.css in 1.32.2. The calculator page is generated by
   build_calculator.py with its own self-contained styles, so before this file
   existed it either went without the site's navigation or had to keep a second
   copy of it. Both are bad: the first leaves one page navigating differently
   from the rest, and the second is the drift trap this project has already
   paid for three times, which is why site.css, theme.css and analytics.js all
   exist.

   Load order is theme.css, then this, then whatever the page's own styles are,
   so a page can still override the bar if it ever has reason to.

   Since 1.34.0 this file carries the footer too, for the same reason it carries
   the bar. The footer is now identical on every content page, and the seven
   resource pages and the two generated pages do not load site.css, so the rules
   have to live in the file all sixteen pages already have. The markup for both
   is written by site_chrome.py.

   The footer uses .foot-wrap rather than .wrap on purpose: .wrap is 42rem on a
   resource page and 71rem elsewhere, and a four column grid inside 42rem is not
   a four column grid.

   Palette lives in theme.css and is loaded before this.
   ============================================================================= */

/* Dark green: the bar is the brand's ground, the wordmark is gold serif over
   two lines, and the links are quiet white uppercase. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--deep);
  border-bottom: 1px solid color-mix(in srgb, var(--on-deep) 12%, transparent);
}
.topbar .inner {
  max-width: 71rem; margin: 0 auto; padding: .75rem 1.35rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mark { display: flex; align-items: center; gap: .6rem; min-width: 0; }
/* Below 30rem the label is hidden and the link is the 18px glyph alone, which
   is an 18x18 target. WCAG 2.2 asks for 24x24 and a thumb wants more than
   either. Padding plus the matching negative margin buys 44x44 without moving
   anything on the bar. */
a.mark { padding: 13px; margin: -13px; }
/* On subpages the wordmark is a link home rather than a span, so it needs
   saying that it is not a body link. Underline only on hover, because a
   permanently underlined logo reads as a mistake. */
a.mark { color: inherit; text-decoration: none; }
a.mark:hover .label { text-decoration: underline; }
/* Scoped through .mark so this file stands on its own: site.css also has a
   general .label utility, and the calculator page has none at all. */
.mark .label {
  color: var(--sand-lift);
  font: 700 .82rem/1.2 var(--font-serif);
  letter-spacing: .1em; text-transform: uppercase;
  max-width: 10.5rem;
}
.mark svg { flex: none; color: var(--sand-lift) !important; }

/* White uppercase links on the dark bar, gold on hover. Below 52rem they stop
   fitting and drop out, leaving the one gold button, because a bar with
   nothing actionable on a phone would be a dead strip. */
.nav-links { display: flex; align-items: center; gap: 1.3rem; }
.nav-links a {
  font: 600 11px/1 var(--font-sans); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--on-deep); white-space: nowrap;
}
.nav-links a:hover { color: var(--sand-lift); }
@media (max-width: 52rem) { .nav-links { display: none; } }

.topbar-ctas { display: flex; align-items: center; gap: .5rem; flex: none; }
.topbar a.cta {
  font: 600 12.5px/1 var(--font-sans);
  letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  padding: .55rem .8rem; border-radius: 2px;
  transition: background .15s ease, color .15s ease, filter .15s ease;
}
/* Solid gold, per the approved mockups. The only button on the bar. */
.topbar a.cta--free {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--deep); background: var(--sand-lift); border: 1px solid var(--sand-lift);
}
.topbar a.cta--free:hover { filter: brightness(1.08); background: var(--sand-lift); color: var(--deep); }

/* Dropdowns under Tools and Resources. The top link still goes somewhere real
   on its own, so the menu is a shortcut rather than a gate, and focus-within
   keeps it reachable by keyboard. */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop > a::after {
  content: "\25BE"; font-size: 8px; margin-left: .3rem; vertical-align: 1px;
  opacity: .7;
}
.nav-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: .55rem; display: none; z-index: 60;
}
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { display: block; }
.nav-menu .menu-card {
  /* Block, not the span default: an inline box wrapping block-level links
     measures 0x0, so the dark ground painted nothing and the links sat
     unreadable on whatever the page had behind them. */
  display: block;
  background: var(--deep);
  border: 1px solid color-mix(in srgb, var(--on-deep) 16%, transparent);
  border-radius: 3px; box-shadow: var(--shadow-lg);
  padding: .45rem 0; min-width: 15rem;
}
.nav-menu a {
  display: block; padding: .55rem 1rem;
  font: 400 12.5px/1.4 var(--font-sans);
  letter-spacing: .02em; text-transform: none;
  color: var(--on-deep); text-decoration: none; white-space: nowrap;
}
.nav-menu a:hover {
  color: var(--sand-lift);
  background: color-mix(in srgb, var(--on-deep) 7%, transparent);
}

/* The wordmark gives up its text on the narrowest screens to make room: the
   house glyph still identifies the brand, and the button is worth more than a
   second reading of a name that is already in the tab title. */
@media (max-width: 30rem) {
  .mark .label { display: none; }
}


/* =============================================================================
   Focus. Every other interactive surface on the site names its own focus ring
   and the bar never did, so it fell back to the browser default on a dark
   ground. Named here so the bar matches the rest.
   ============================================================================= */
.topbar a:focus-visible,
.topbar summary:focus-visible,
footer a:focus-visible {
  outline: 2px solid var(--sand-lift);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =============================================================================
   The phone menu.

   Below 52rem the desktop links are display:none, and until 1.34.0 nothing
   replaced them: the whole bar on a phone was a wordmark and one gold button,
   on a site whose visitors mostly arrive from a search engine onto a deep page.

   A <details> rather than a script. It is keyboard operable and screen-reader
   announced for free, it works with scripting off, and there is no open/closed
   state for anything to get out of step with. It carries every destination
   rather than a shortlist, because on a phone it is the only way through.
   ============================================================================= */
.nav-mobile { display: none; }
@media (max-width: 52rem) {
  .nav-mobile { display: block; }
  /* The 44px summary is now the tallest thing on the bar, so the bar's own
     padding comes down to keep it near the height it was. */
  .topbar .inner { padding: .4rem 1.35rem; }
}

.nav-mobile > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: 0 .7rem; box-sizing: border-box;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-deep);
  border: 1px solid color-mix(in srgb, var(--on-deep) 30%, transparent);
  border-radius: 2px;
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary::marker { content: ""; }
.nav-mobile > summary:hover { color: var(--sand-lift); border-color: var(--sand-lift); }
.nav-mobile[open] > summary { color: var(--sand-lift); border-color: var(--sand-lift); }

/* Chrome hides a closed details' contents with content-visibility, which
   implies contain:paint, which makes the details itself the containing block
   for an absolutely positioned child. The panel therefore escaped the hiding
   and rendered at the summary's width with its links still focusable. Say it
   explicitly instead of relying on the UA. */
.nav-mobile:not([open]) .nm-panel { display: none; }

/* Absolute against .topbar, which is sticky and therefore a positioned
   ancestor. Full bar width, and scrollable in case the list outgrows a short
   phone in landscape. */
.nm-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--deep);
  border-top: 1px solid color-mix(in srgb, var(--on-deep) 16%, transparent);
  box-shadow: var(--shadow-lg);
  padding: .5rem 1.35rem 1.3rem;
  max-height: calc(100vh - 3.5rem); overflow-y: auto;
}
.nm-panel a {
  display: flex; align-items: center; min-height: 44px;
  font: 400 15px/1.3 var(--font-sans);
  color: var(--on-deep); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--on-deep) 10%, transparent);
}
.nm-panel a:hover { color: var(--sand-lift); }
.nm-panel a[aria-current] { color: var(--sand-lift); font-weight: 600; }
.nm-group {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-deep-mute); margin: 1.2rem 0 .1rem;
}
.nm-group:first-child { margin-top: .5rem; }

/* =============================================================================
   The footer, shared by every content page.

   Moved out of site.css in 1.34.0. It had lived there, which meant the nine
   pages that do not load site.css could not have it, which is why the seven
   resource pages carried a four link footer while the rest carried twenty-one.
   ============================================================================= */
footer {
  background: var(--deep); color: var(--on-deep-mute);
  padding: 3rem 0 3.5rem; font-size: .87rem;
  border-top: 1px solid color-mix(in srgb, var(--on-deep) 17%, transparent);
}
.foot-wrap { max-width: 71rem; margin: 0 auto; padding: 0 1.35rem; }
footer p { color: var(--on-deep-mute); }
footer .mark .label { color: var(--on-deep); }
footer .disclaimer { font-style: italic; margin: 0 0 1rem; max-width: 34rem; }
footer .version {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: .12em; opacity: .55; margin: 0;
}
/* The resource pages' one piece of page-specific footer copy: who to tell when
   a fact has gone stale, and the date the links were last checked. */
footer .foot-correction { margin: 0 0 .4rem; max-width: 34rem; }
footer .foot-correction a { color: var(--sand-lift); }
footer .updated {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: .12em; opacity: .55; margin: .9rem 0 0;
}

.foot-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem;
  margin: 1.9rem 0 2.2rem;
}
@media (min-width: 46rem) { .foot-grid { grid-template-columns: repeat(4, 1fr); } }
.foot-grid h3 {
  font: 600 10.5px/1 var(--font-sans); letter-spacing: .15em;
  text-transform: uppercase; color: var(--sand-lift); margin: 0 0 .8rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin: 0 0 .5rem; }
.foot-grid a {
  color: var(--on-deep-mute); text-decoration: none;
  font: 400 .88rem/1.5 var(--font-sans);
}
.foot-grid a:hover { color: var(--on-deep); text-decoration: underline; }