/* =====================================================================
   enhancements.css  —  Brian Brixon
   Stage 3 & 4 additions. Loaded AFTER custom.css so it overrides safely
   and survives a recompile of your SCSS -> custom.css.
   Everything here is additive: it does not change your existing look
   unless you choose to start using the color tokens.
   ===================================================================== */

/* ---- 1. Font loading: show text immediately, swap when font arrives -- */
@font-face {
  font-family: 'celticmddecorativewdropcaps';
  src: url("/celticfont/celticmd-decorative-w-drop-caps-webfont.woff2") format("woff2"),
       url("/celticfont/celticmd-decorative-w-drop-caps-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---- 2. OKLCH color tokens (with hex fallbacks) ----------------------
   Your brand colors, expressed once as variables. Existing styles are
   untouched; use these going forward (e.g. color: var(--bb-green);).
   Hex loads first; browsers that understand OKLCH use the richer value. */
:root {
  --bb-navy:        #061539;
  --bb-blue-1:      #0b1d4a;
  --bb-blue-2:      #0b328e;
  --bb-green:       #74B57C;
  --bb-green-light: #a1fcac;
  --bb-slate:       #6B799D;
  --bb-text:        #C7CAD2;
}
@supports (color: oklch(0 0 0)) {
  :root {
    --bb-navy:        oklch(0.22 0.07 268);
    --bb-blue-1:      oklch(0.28 0.10 266);
    --bb-blue-2:      oklch(0.42 0.16 264);
    --bb-green:       oklch(0.74 0.11 150);
    --bb-green-light: oklch(0.90 0.13 145);
    --bb-slate:       oklch(0.56 0.06 270);
    --bb-text:        oklch(0.84 0.02 270);
  }
}

/* ---- 3. Accessible focus indicator (WCAG 2.2) ------------------------
   Keyboard users get a clear, high-contrast ring; mouse users don't. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--bb-green-light, #a1fcac);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- 4. Respect "reduce motion" --------------------------------------
   Disables the zoom-on-hover, smooth scroll, navbar underline sweeps,
   and animate.css for people who get motion sickness / vestibular issues. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hover-mask:hover img { transform: none !important; }
}