/* Fount site — interaction states
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS
 *
 * Up to v7 the templates expressed hover with a `style-hover="..."` attribute
 * (and in two places `style-active="..."`). Neither attribute exists. They are
 * not implemented in support.js and not in the design system bundle; React
 * passes them to the DOM as unknown markup and the browser discards them. All
 * 30 uses were inert, so the footer, the Product dropdown, the mobile menu and
 * several buttons had no hover response at all.
 *
 * Two further traps this file has to work around:
 *
 *   1. INLINE STYLE BEATS AN EXTERNAL :hover RULE. A rule here cannot override
 *      `style="color:var(--muted)"` on the element, hover or not. So every
 *      property that CHANGES on interaction has been removed from the inline
 *      style attribute and is declared here for BOTH the resting and the
 *      interactive state. Layout properties stay inline.
 *
 *   2. `background:none` KILLS THE DESIGN SYSTEM UNDERLINE. base.css draws the
 *      ink underline with a background gradient sized 0% -> 100%. The shorthand
 *      `background:none` resets background-image, which silently disabled it on
 *      20 anchors. Those declarations are gone; where a fill genuinely must not
 *      have an underline, background-image is suppressed here instead.
 *
 * DOCTRINE (base.css, colors.css) — settled 2026-08-17:
 *   Navigation, footer and UI links take NO underline at rest and draw an INK
 *   underline on interaction. The word moves Stone -> Iron Gall. Cinnabar is
 *   reserved: it stays on marks and rules, and on inline PROSE links, where the
 *   standing cinnabar underline and the cinnabar hover word are sanctioned.
 *   Nothing in the footer or nav goes cinnabar on hover.
 *
 * Every hover state below is paired with :focus-visible so the keyboard sees
 * exactly what the mouse sees. Load this AFTER the design system stylesheet.
 */

/* --------------------------------------------------------------------------
 * 1. Quiet links — footer columns and legal row.
 * Stone at rest, Iron Gall on interaction. The ink underline wipe comes free
 * from the base.css `a` rule now that `background:none` is no longer in the
 * way, so it is deliberately NOT redeclared here.
 * ---------------------------------------------------------------------------*/
.fnt-link-quiet {
  color: var(--muted);
  text-decoration: none;
}
.fnt-link-quiet:hover,
.fnt-link-quiet:focus-visible {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
 * 2. Menu rows — the Product dropdown and the mobile panel.
 * These read as rows in a panel, not as links in a sentence, so the surface
 * warms a step and the underline is suppressed.
 * ---------------------------------------------------------------------------*/
.fnt-menu-item {
  color: var(--ink);
  background-color: transparent;
  background-image: none;
  text-decoration: none;
  transition: background-color var(--ui-fast) var(--ease);
}
.fnt-menu-item:hover,
.fnt-menu-item:focus-visible {
  background-color: var(--surface-hover);
}

/* --------------------------------------------------------------------------
 * 3. The solid CTA in the mobile menu. Cinnabar DEEPENS under pressure; it
 * never brightens or glows.
 * ---------------------------------------------------------------------------*/
.fnt-menu-cta {
  color: var(--on-accent);
  background-color: var(--accent);
  background-image: none;
  text-decoration: none;
  transition: background-color var(--ui-fast) var(--ease);
}
.fnt-menu-cta:hover,
.fnt-menu-cta:focus-visible {
  background-color: var(--accent-hover);
}
.fnt-menu-cta:active {
  background-color: var(--accent-active);
}

/* --------------------------------------------------------------------------
 * 4. Inline prose links — the contact addresses in running text. This is the
 * one sanctioned cinnabar-on-text treatment: a standing cinnabar underline,
 * and the whole word turns cinnabar on interaction.
 * ---------------------------------------------------------------------------*/
.fnt-link-prose {
  color: var(--ink);
  background-image: none;
  border-bottom: 1.5px solid var(--accent);
  text-decoration: none;
  transition: color var(--ui-fast) var(--ease);
}
.fnt-link-prose:hover,
.fnt-link-prose:focus-visible {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
 * 5. FAQ disclosure buttons. Authored intent was the prose register, and a
 * question behaves like a prose link rather than a nav item, so the label
 * turns cinnabar. Kept as designed.
 * ---------------------------------------------------------------------------*/
.fnt-faq-toggle {
  color: var(--ink);
  transition: color var(--ui-fast) var(--ease);
}
.fnt-faq-toggle:hover,
.fnt-faq-toggle:focus-visible {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
 * 6. Large selectable cards — lesson and format pickers, and the sample
 * chapter cards. The surface warms, the keyline strengthens, the card lifts.
 * ---------------------------------------------------------------------------*/
.fnt-card-btn {
  background-color: var(--bg);
  background-image: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: background-color var(--ui-fast) var(--ease),
              border-color var(--ui-fast) var(--ease),
              box-shadow var(--ui-fast) var(--ease),
              transform var(--ui-fast) var(--ease);
}
.fnt-card-btn:hover,
.fnt-card-btn:focus-visible {
  background-color: var(--surface-hover);
  border-color: var(--stroke);
  box-shadow: var(--shadow-card);
}
.fnt-card-btn:active {
  transform: scale(.985);
}

/* Same interaction, but resting on Ivory rather than Vellum, for the sample
 * chapter cards that sit on the page ground. */
.fnt-card-btn--surface {
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------------------
 * 7. Small outline buttons — "Change lesson", "Change format".
 * ---------------------------------------------------------------------------*/
.fnt-chip-btn {
  color: var(--muted);
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--border);
  transition: color var(--ui-fast) var(--ease),
              border-color var(--ui-fast) var(--ease);
}
.fnt-chip-btn:hover,
.fnt-chip-btn:focus-visible {
  color: var(--ink);
  border-color: var(--stroke);
}

/* --------------------------------------------------------------------------
 * 8. The icon button in the nav (mobile menu trigger).
 * ---------------------------------------------------------------------------*/
.fnt-nav-burger {
  background-color: var(--surface);
  background-image: none;
  transition: background-color var(--ui-fast) var(--ease);
}
.fnt-nav-burger:hover,
.fnt-nav-burger:focus-visible {
  background-color: var(--surface-hover);
}

/* Focus is always the ink, never a stock blue. */
.fnt-link-quiet:focus-visible,
.fnt-menu-item:focus-visible,
.fnt-menu-cta:focus-visible,
.fnt-link-prose:focus-visible,
.fnt-faq-toggle:focus-visible,
.fnt-card-btn:focus-visible,
.fnt-chip-btn:focus-visible,
.fnt-nav-burger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}