/**
 * @file
 * Interaction states — the house standard. (FND-4 / DONI-544)
 *
 * WHY THIS FILE EXISTS
 * The 2026 design draws exactly one interaction state: the nav's active
 * indicator. Hover, focus, the skip link and reduced-motion behaviour
 * are all engineering decisions, and they belong here ONCE rather than
 * being re-invented in each of twenty components.
 *
 * HOVER IS AN INVENTION. FOCUS IS NOT.
 * Every hover rule below is marked INVENTION — the design specifies
 * none of them, and a designer may overrule any of them freely.
 * Focus is a WCAG 2.1 AA baseline (SC 2.4.7 Focus Visible, SC 1.4.11
 * Non-text Contrast) and is not open to preference.
 *
 * PRECEDENCE
 * This file loads in Drupal's `base` CSS group, so any component rule
 * of equal specificity wins. That is deliberate: this is the default a
 * component inherits when it says nothing, not a rule it must fight.
 */

:root {
  /* --- Focus ring ------------------------------------------------
     A TWO-TONE ring, because no single colour clears 3:1 against all
     of this brand's surfaces. The rings are drawn adjacent so that on
     any background at least one of them contrasts.

     MEASURED, not eyeballed. WCAG 2.1 AA SC 1.4.11 requires 3:1 for
     non-text UI. Contrast of each ring colour against every brand
     surface:

       background            charcoal   white    best
       ---------------------------------------------------
       white     #ffffff       14.11     1.00    14.11
       coral     #eb6f56        4.66     3.03     4.66
       coral leg #f16b50        4.67     3.02     4.67
       charcoal  #1d2d3a        1.00    14.11    14.11
       dark cor  #bb5844        3.08     4.57     4.57
       isi head  #c94808        2.96     4.76     4.76
       steel     #515861        1.96     7.20     7.20

     Worst case 4.57:1 — every surface has at least one ring at or
     above 3:1, and the two rings contrast with each other at 14.11:1
     so the boundary between them is always perceivable.

     WHAT THIS REPLACES, and why it had to change: the previous
     treatment was a single 2px ring in --color-primary (#f16b50).
     Measured, it FAILED SC 1.4.11 on five of the seven surfaces above
     — including 1.00:1 on both corals, i.e. completely invisible on a
     coral button, which is the most common button on the site.

     Inner ring is white so it reads against coloured element fills;
     outer ring is charcoal so it reads against the white page. */
  --focus-ring-inner: var(--color-white);
  --focus-ring-outer: var(--color-charcoal);
  --focus-ring-width: 2px;
}

/*
 * The house focus treatment.
 *
 * :focus-visible rather than :focus, so a mouse click on a button does
 * not leave a ring behind, while keyboard and assistive-tech focus
 * always shows one.
 *
 * The outline is the OUTER ring and the box-shadow spread is the INNER
 * one: a spread of exactly --focus-ring-width fills the gap that
 * outline-offset opens, so the two read as one 4px two-tone ring with
 * no page background leaking between them.
 */
*:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-outer);
  outline-offset: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-inner);
}

/*
 * Never remove the ring without replacing it. A component that needs a
 * different SHAPE (a pill, an inset ring on a clipped container)
 * should restate both rings rather than dropping to `outline: none`.
 *
 * Elements clipped by overflow:hidden cannot show an outside ring at
 * all; those need an inset box-shadow version, declared locally.
 */

/* --- Skip link ---------------------------------------------------
   The markup is in templates/layout/html.html.twig and renders on
   EVERY page. Its styling used to live in css/components/layout.css,
   which is loaded only by the `ambassador` library — so on every other
   page the skip link fell back to Drupal core's bare
   .visually-hidden.focusable behaviour: it appeared in normal flow,
   unstyled, with no guaranteed contrast. Moved here, where it loads
   globally.

   Target is #main-content, the anchor at page.html.twig:102. The
   ticket says "#main"; #main-content is what the markup actually uses
   and what Drupal core's own skip link convention expects, so the
   anchor was left alone and this is the note that says so.
   ------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: var(--z-tooltip);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-charcoal);
  color: var(--color-white);
  font-family: var(--font-agenda);
  font-size: var(--fs-16);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  transition: top var(--transition-fast);
}

/* :focus, not :focus-visible — a skip link that only appears for
   "visible" focus is a skip link that some assistive tech never
   surfaces. This is the one place the distinction is wrong. */
.skip-link:focus {
  top: 0;
}

/* Charcoal on white already clears 14.11:1, so the ring here is for
   position rather than contrast — but it still gets the house ring so
   the first thing a keyboard user ever sees is the standard one. */
.skip-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-outer);
  outline-offset: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-inner);
}

/* --- Hover -------------------------------------------------------
   ALL OF THE FOLLOWING ARE INVENTIONS. The 2026 design specifies no
   hover state anywhere. Each is chosen to be reversible and to reuse
   an existing token rather than introduce a colour.

   Most surfaces this ticket names ALREADY have a hover rule in their
   own component file — nav 12 rules, footer 3, buttons 7 colour
   variants, .card--resource 1. Those are left alone; duplicating them
   here would only start a specificity fight. What follows fills the
   measured gaps.
   ------------------------------------------------------------------ */

/* INVENTION. .btn has colour-variant hovers (--primary, --secondary,
   --tertiary, --outline, --ghost, --light, --dark) but no base rule,
   so an unmodified .btn had no hover at all. A slight dim is the
   least opinionated thing that still signals interactivity, and it
   cannot conflict with a variant's own colour change. */
.btn:hover {
  filter: brightness(0.94);
}

/* INVENTION. Buttons must not appear interactive when they are not. */
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover,
.btn--loading:hover {
  filter: none;
  cursor: default;
}

/* INVENTION. Utility-bar links. Underline on hover rather than a
   colour change, because the utility bar sits on charcoal on some
   pages and on white on others, and an underline works on both. */
.utility-bar a:hover,
.utility-nav a:hover {
  text-decoration: underline;
}

/* INVENTION. Card links. Cards route their links through .btn, so the
   rule above covers them; this covers a bare anchor inside a card. */
.card__links a:not(.btn):hover,
.card__title a:hover {
  text-decoration: underline;
}

/* INVENTION. Pointer affordance on anything that behaves as a control
   but is not a native one. */
[role="button"]:not(:disabled):hover,
summary:hover {
  cursor: pointer;
}

/* --- Reduced motion ----------------------------------------------
   css/base/reset.css already carries a blanket rule that collapses
   every animation and transition to 0.01ms under
   prefers-reduced-motion. That blanket rule DOES already neutralise
   the neon decoration — and this block does not replace it.

   It is here because relying on the blanket rule leaves the correct
   behaviour accidental rather than intended. The neon decoration runs
   `animation: blinkThreeTimes 6s ease-in-out forwards`, and the
   fill-mode is what makes the blanket rule safe: collapsing the
   duration lands the element on its FINAL keyframe, so the decoration
   ends up lit rather than missing. Writing `animation: none` here
   instead would strand it on its INITIAL keyframe and could remove
   the decoration entirely. Stating that explicitly so nobody
   "simplifies" it later.

   Selectors are the three the decoration actually uses. `.spacial-not`
   is a typo for `special` in the ported CSS; it is reproduced here
   because that is what ships.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .special-not,
  .spacial-not,
  .special-rna-not {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  /* The glow itself is a static box-shadow, not motion, so it stays.
     What goes is any transition INTO it. */
  .special-not,
  .spacial-not,
  .special-rna-not,
  [class*="glow"] {
    transition: none;
  }
}