/*
  Only what cannot be written inline.

  The design system's own styles.css already carries the resets, the link
  colours, the focus ring, the skip link, .ds-grid, .ds-flow and .ds-reveal.
  This file adds the three things a served page needs that a React prototype
  got from component state:

    1. pseudo-states  (hover, active, focus-visible) for buttons, cards, links
    2. media queries  (the nav's compact stop, the hero cue row)
    3. the drawer     (a real dialog, opened by assets/js/site.js)

  No colour, size or space is invented here. Every value is a token.
*/

/* --- Anchors clear the sticky bar. 89px bar + 3px gap; see handoff.md §13.1. -- */
:target { scroll-margin-top: 92px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- Buttons ------------------------------------------------------------- */
/* Primary is pure black and cannot darken, so it lifts 1px and gains --e1.
   Every other variant darkens instead. Ported from Button.jsx. */
.c3-btn[data-variant="primary"]:hover { transform: translateY(-1px); box-shadow: var(--e1); }
.c3-btn[data-variant="primary"]:active { transform: translateY(0); box-shadow: none; }
.c3-btn[data-variant="secondary"]:hover { background: var(--sage-wash); border-color: var(--ink); }
.c3-btn[data-variant="secondary"][data-ondark]:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--on-dark); }
.c3-btn[data-variant="ghost"]:hover { color: var(--sage-deep); }
.c3-btn[data-variant="ghost"][data-ondark]:hover { color: var(--sage); }
.c3-btn[data-variant="sage"]:hover { background: var(--sage-deep); color: var(--white); }
.c3-btn:focus-visible { box-shadow: var(--focus); }
.c3-btn[data-ondark]:focus-visible { box-shadow: var(--focus-dark); }

/* --- Cards. Only a card that is actually a link advertises the lift. ------ */
.c3-card[data-lift]:hover { border-color: var(--line-strong); box-shadow: var(--e1); transform: translateY(-2px); }
.c3-card[data-tone="dark"][data-lift]:hover { border-color: var(--line-dark-strong, var(--line-dark)); }
.c3-card:focus-visible { box-shadow: var(--focus); }

/* --- Nav links ----------------------------------------------------------- */
.c3-navlink:hover { background: var(--sage-wash); color: var(--ink); }
.c3-navlink[aria-current="page"]:hover { background: var(--ink); color: var(--paper); }
.c3-navlink:focus-visible { box-shadow: var(--focus); }
.c3-crumb:hover { color: var(--ink); text-decoration: underline; }

/* --- Footer links. Inert entries stay plain text; live ones underline. ---- */
.c3-footlink { font-size: var(--t-body-xs); color: var(--muted); text-decoration: none; text-underline-offset: 3px; padding-block: 2px; transition: color var(--fast); }
.c3-footlink:hover { color: var(--ink); text-decoration: underline; }
.c3-social:hover { color: var(--ink); border-color: rgba(39, 39, 39, 0.35); }

/* --- The header ---------------------------------------------------------- */
/* Overlay mode: transparent over the media band, solid once its foot passes
   the bar. site.js flips data-overlay between transparent and solid; the two
   logo lockups crossfade rather than swapping. */
.c3-header[data-overlay="transparent"] {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.c3-header[data-overlay="transparent"] .c3-logo-dark { opacity: 0; }
.c3-header[data-overlay="transparent"] .c3-logo-light { opacity: 1; }
.c3-header[data-overlay="transparent"] .c3-navlink { color: var(--on-media-mut); }
.c3-header[data-overlay="transparent"] .c3-navlink:hover { background: rgba(255, 255, 255, 0.14); color: var(--on-media); }
.c3-header[data-overlay="transparent"] .c3-navlink[aria-current="page"] { background: rgba(255, 255, 255, 0.16); color: var(--on-media); }
.c3-header[data-overlay="transparent"] .c3-burger { color: var(--on-media); }
.c3-header[data-overlay="transparent"] .c3-navlink:focus-visible { box-shadow: var(--focus-dark); }

/* The compact stop is the design system's md breakpoint. Above it, the burger
   is not rendered at all; below it, the five links are. */
@media (min-width: 901px) { .c3-burger { display: none !important; } }
@media (max-width: 900px) { .c3-navbar { display: none !important; } }

/* --- The drawer. Full-bleed --paper, so an open drawer always solidifies. - */
.c3-drawer[hidden] { display: none; }
.c3-drawer {
  position: fixed;
  inset: 89px 0 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: var(--s-5) var(--pad-x) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  z-index: 49;
}
.c3-drawer .c3-navlink { font-size: var(--t-body-lg); font-weight: 600; padding: 14px 18px; }
body.c3-drawer-open { overflow: hidden; }

/* --- Accordion, as native <details> -------------------------------------- */
/* The chevron rotates on open, the same 0.3s ease the component used. Both
   marker pseudo-elements are cleared: WebKit needs its own. */
.c3-acc > summary { list-style: none; }
.c3-acc > summary::-webkit-details-marker { display: none; }
.c3-acc > summary::marker { content: ""; }
.c3-acc[open] > summary svg { transform: rotate(180deg); }
.c3-acc > summary:hover { color: var(--sage-deep); }
.c3-acc > summary:focus-visible { box-shadow: var(--focus); border-radius: var(--r-sm); }

/* --- Copy buttons --------------------------------------------------------- */
.c3-copy:hover, .c3-copy:focus-visible, .c3-copy[data-copied] { border-color: var(--sage-deep); background: var(--sage-wash); }
.c3-copy[data-copied] { color: var(--sage-deep); }
.c3-copy:focus-visible { box-shadow: var(--focus); }

/* --- Message cards: the play disc grows a little as the card lifts. ------- */
.c3-card[data-lift]:hover .c3-play { transform: scale(1.06); }

/* --- Search results ------------------------------------------------------- */
.c3-result:hover h4 { color: var(--sage-deep); }

/* --- Welcome Hub tiles ---------------------------------------------------- */
.c3-tile:hover { border-color: var(--sage-deep); }

/* --- Form controls -------------------------------------------------------- */
.c3-control:focus { border-color: var(--sage-deep); box-shadow: var(--focus); }
.c3-control[aria-invalid="true"]:focus { border-color: var(--attention); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: var(--focus); }

/* --- The hero's scroll cue ------------------------------------------------ */
.c3-cue:hover { color: var(--on-media); }/* The cue shares the buttons' row, pushed right. Once the buttons wrap, a
   right-aligned item under left-aligned copy reads as a mistake. */
@media (max-width: 620px) {
  [data-cue-row] { justify-content: flex-start; }
  [data-cue-row] [data-cue] { margin-left: 0; }
}