/* Styles the PHP site needs that the compiled Tailwind sheet does not contain.
 *
 * app.css is generated from the React build and only includes classes that
 * build actually used. Two things fall outside it:
 *
 *   .is-active  — the class assets/js/app.js toggles on the selected tab. In
 *                 React the active state was inline style driven by component
 *                 state, so no class was ever emitted for Tailwind to see.
 *   .w-fit      — used by a ported page; absent from the React class set.
 *
 * Keep this file small. Anything reusable belongs in the React source so both
 * implementations get it from the same place.
 */

.w-fit { width: fit-content; }

/* Selected tab. Colour only — the design system forbids scale or lift on
 * interactive state (specs/01). */
[data-tab].is-active {
  background: #163327;
  color: #FAF8F3;
}

/* Gold-filled variants keep their own background; only the text needs fixing. */
[data-tab].is-active.bg-\[\#C9A84C\] {
  background: #C9A84C;
  color: #12291F;
}

/* Focus ring parity with the React build. */
[data-tab]:focus-visible,
[data-acc-trigger]:focus-visible {
  outline: 2px solid #A8863A;
  outline-offset: 2px;
}

/*
 * .nav-current — the navbar entry matching the current route.
 *
 * Neither implementation marked the active page: every route rendered a nav
 * whose six items were styled identically, so the header gave no indication of
 * where you were. Emitted alongside aria-current="page" so the cue is not
 * colour-only.
 */
.nav-current {
  color: #8A6D28;
  font-weight: 600;
}

nav .nav-current {
  position: relative;
}

nav .nav-current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 1px;
  /* #C9A84C is only 2.15:1 on the #FAF8F3 navbar. The champagne reads as an
     accent elsewhere but fails WCAG 1.4.11 as a state indicator, so the
     underline uses the same #8A6D28 as the label (4.60:1). */
  background: #8A6D28;
}