/* One interaction contract for every anchor on the marketing site.
 *
 * Loaded LAST on every page in SITE_PAGES so it settles the cascade rather than
 * being restated in nine documents.
 *
 * The rule is: links do not move. Hover and keyboard focus fade in a warm
 * rectangle and an orange line underneath -- nothing translates, scales, lifts,
 * underlines or changes weight, because six nav items reflowing whenever the
 * pointer crosses one is noise, not feedback.
 *
 * Deliberately NOT covered: the footer (it keeps its own subdued colour-only
 * treatment and lives outside <main>), and every non-anchor control -- play
 * buttons, the contrast toggle, the menu toggle, pricing cards, form submits.
 * The WarmMaster engine application is its own codebase entirely.
 */

/* --- what the contract applies to ------------------------------------------
 * Header brand, nav links and the homepage hero list all sit outside <main>;
 * everything else is reached through `main a`, which is why the footer -- also
 * outside <main> -- cannot be swept up by accident.                           */
.site-brand,
.site-nav-link,
.hero-list a,
main a{
  transition:background-color .22s ease,border-color .22s ease,
             box-shadow .22s ease,color .22s ease;
}

/* --- the shared hover / focus state ---------------------------------------
 * A bottom box-shadow rather than a real border: adding a border here would
 * change the box and shift the page on hover, which is the exact thing this
 * contract exists to prevent.                                                */
.site-brand:hover,
.site-brand:focus-visible,
.site-nav-link:hover,
.site-nav-link:focus-visible,
.hero-list a:hover,
.hero-list a:focus-visible,
main a:hover,
main a:focus-visible{
  background-color:rgba(224,169,74,.07);
  box-shadow:inset 0 -2px 0 var(--gold-soft);
  text-decoration:none;
  transform:none;
}

/* Links that already carry a 1px rule at rest recolour that rule instead, so
 * they show one orange line rather than a line stacked on top of a line. */
.site-nav-link:hover,
.site-nav-link:focus-visible,
.hero-list a:hover,
.hero-list a:focus-visible,
.streams a:hover,
.streams a:focus-visible,
.ah-links a:hover,
.ah-links a:focus-visible{
  border-bottom-color:var(--gold-soft);
  box-shadow:none;
}

/* Keyboard focus keeps everything above and adds a ring. Inset, so a rounded
 * or clipped ancestor can never shave it off. */
.site-brand:focus-visible,
.site-nav-link:focus-visible,
.hero-list a:focus-visible,
main a:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:-2px;
}

/* Bullets and dots hold still. They used to scale on hover, which moved the
 * label beside them. */
.site-nav-link:hover::before,
.site-nav-link:focus-visible::before,
.hero-list a:hover::before,
.hero-list a:focus-visible::before,
.streams a:hover .d,
.streams a:focus-visible .d{
  transform:none;
}

/* The filled WarmMaster call to action keeps its rounded, gold base -- only its
 * interaction is normalised: a modest colour fade and the same orange lower
 * line, with no lift and no shadow thrown outside the button. Specificity is
 * raised past `main a:hover` so the fill is not replaced by the warm tint. */
main a.btn:hover,
main a.btn:focus-visible{
  background-color:#f0bb5a;
  box-shadow:inset 0 -2px 0 var(--gold-soft);
  transform:none;
}

/* Respect a reduced-motion preference: the state still changes, it just
 * arrives immediately. */
@media (prefers-reduced-motion: reduce){
  .site-brand,
  .site-nav-link,
  .hero-list a,
  main a{transition:none}
}