/* ===========================================================================
   site.css — what the design system assumed React would do.

   canaan.css has no media query hiding `.nav__links` or `.burger`, because the
   old page rendered one or the other from `state.isDesktop`. On static pages
   both are in the markup and CSS decides, which is how it should have been:
   the breakpoint is a layout fact, not application state.

   Same for `.drawer` — it was mounted only while open. Here it is always in the
   DOM, closed by default, and opened by one attribute on the nav.
   =========================================================================== */

/* Mobile first: the inline links and the language pill are desktop-only. */
.nav__links{display:none}
.nav__right > .lang{display:none}

@media(min-width:900px){
  .nav__links{display:flex}
  .nav__right > .lang{display:flex}
  .burger{display:none}
}

/* The drawer is closed until the nav says otherwise. `display:none` rather than
   a height transition so nothing inside it is focusable while hidden. */
.drawer{display:none}
.nav[data-menu="true"] .drawer{display:flex}

/* No-JS: the toggle cannot work, so the burger is never shown and the desktop
   links are used at every width. Slightly cramped on a small phone and entirely
   navigable, which is the right trade against a dead button. */
.no-js .burger{display:none}
.no-js .nav__links{display:flex}

/* ------------------------------------------------------------ FAQ, no JS ---
   The old FAQ was a div with role="button" and an open index in React state.
   <details> is the same affordance with keyboard support, screen-reader
   semantics and deep-linking for free, and it survives a failed script.

   canaan.css opens the answer on `[data-open="true"]`, which only React ever
   set. Every one of those rules needs an `[open]` twin or the answer stays at
   `grid-template-rows:0fr` and `opacity:0` — present in the DOM, invisible on
   the screen. That is the whole reason this block exists. */
.faq__row{display:block}
.faq__row > summary{
  list-style:none;
  cursor:pointer;
}
.faq__row > summary::-webkit-details-marker{display:none}
.faq__row > summary:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:4px;
}

.faq__row[open] .faq__q .label{color:var(--terracotta)}
.faq__row[open] .faq__q h3{color:var(--limestone)}
.faq__row[open] .faq__q i{transform:rotate(45deg);color:var(--terracotta)}
.faq__row[open] .faq__a{grid-template-rows:1fr;opacity:1}

/* The language switch is links now, not buttons — it navigates rather than
   setting state. canaan.css styles `.lang button`, so the anchors need the
   same treatment to look identical. */
.lang a{
  display:inline-block;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  padding:4px 9px;border-radius:999px;color:var(--muted);
  text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.lang a[data-on="true"]{background:var(--terracotta);color:var(--limestone)}