/* ══════════════════════════════════════════
   THERON DIGITAL — a11y.css
   WCAG 2.2 Level AA conformance layer.
   Shared across all pages.

   Loaded AFTER each page's own styles so these values win the cascade
   on equal specificity. Every block names the success criterion it
   satisfies. To revert a page completely, remove its <link> to this file.
══════════════════════════════════════════ */

/* ── 2.4.1 Bypass Blocks ──
   Every page repeats an identical nav before any unique content.
   The skip link is visually hidden until it receives focus. ── */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  transform: translateY(-120%);
  padding: 14px 24px;
  background: #FFFFFF;
  color: #0A0A0A;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 2px 0;
  transition: transform 0.18s ease;
}
.skip-link:focus {
  transform: translateY(0);
}
/* The skip target is programmatically focused, never tabbed to, so it
   must not paint a ring of its own. */
#main:focus {
  outline: none;
}

/* ── 2.4.7 Focus Visible + 1.4.11 Non-text Contrast ──
   The site had no focus styling at all; the browser default ring is
   easy to lose against this dark theme. Gold on #111 measures 8.4:1. ── */
:focus-visible {
  outline: 2px solid #B8A88A;
  outline-offset: 3px;
}
/* The form explicitly sets `outline: none` at (0,1,1), so its focus rules
   need the extra pseudo-class to win. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid #B8A88A;
  outline-offset: 2px;
  border-color: rgba(255,255,255,0.55);
}
/* Dark-on-light targets need the inverse ring to stay visible. */
.submit-btn:focus-visible,
.mob-menu-cta:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid #0A0A0A;
  outline-offset: 3px;
}

/* ── 1.4.3 Contrast (Minimum) ──
   Low-opacity white was the site's muted-text pattern and it failed
   sitewide, from 1.75:1 to 4.10:1 against a 4.5:1 requirement.

   Measured floor: on #111 / #161616 / #1A1A1A, white needs >= 0.45 alpha
   to clear 4.5:1. This file standardises on 0.48, which yields 4.9-5.0:1
   on all three backgrounds with margin to spare. ── */

/* Footer — every page */
.ft-tagline,
.ft-desc,
.ft-copy { color: rgba(255,255,255,0.48); }
.ft-col a { color: rgba(255,255,255,0.48); }
.ft-links a { color: rgba(255,255,255,0.48); }

/* Homepage sections */
.pillar-card p,
.flow-step-text p,
.insight-card p,
.industries-note p { color: rgba(255,255,255,0.48); }
.insight-tag { color: rgba(255,255,255,0.48); }
.tl-name { color: rgba(255,255,255,0.48); }
.industry-chip .industry-meta { color: rgba(255,255,255,0.48); }

/* Calls to action */
.cta-disclaimer,
.cta-sub { color: rgba(255,255,255,0.48); }

/* Blog — index and all seven posts */
.article-date,
.author-title,
.article-cta p { color: rgba(255,255,255,0.48); }

/* Audit page */
.audit-sub,
.audit-right > p,
.audit-item-text p { color: rgba(255,255,255,0.48); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.48); }

/* Decorative section numerals render at 44px, which qualifies as large
   text and so needs only 3:1. 0.34 alpha measures 3.1:1 on #1A1A1A —
   this keeps them far more recessive than the 0.48 body standard. */
.pillar-num { color: rgba(255,255,255,0.34); }

/* Screen-reader-only text. Stays in the accessibility tree while taking up
   no visual space — used where a visual symbol needs a spoken equivalent. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* <main> is block-level by default in every current browser; this is
   insurance against a reset that does not recognise the element. */
main { display: block; }

/* ── 3.3.2 Labels or Instructions ──
   Required fields carried no visual marker; only the optional one was
   noted. The asterisk is decorative — `required` already conveys this
   to assistive technology — so it is hidden from the accessibility tree. */
.form-group label .req {
  color: #B8A88A;
  margin-left: 2px;
}
.form-required-note {
  margin: 0 0 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.48);
}

/* ── 4.1.3 Status Messages ──
   Submission errors need a persistent, re-readable message rather than
   a native alert() that blocks the page and leaves nothing behind. */
.form-error {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(214,106,106,0.45);
  border-radius: 1px;
  background: rgba(214,106,106,0.08);
  color: #E8A0A0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
}
.form-error.show { display: block; }
.form-error a { color: #B8A88A; text-decoration: underline; }

/* ── 2.5.8 Target Size (Minimum) ──
   These links sat under 24x24px. Padding grows the hit area; the matching
   negative margin cancels its layout effect so nothing visibly moves. ── */
.nav-links a {
  display: inline-block;
  padding: 6px 0;
  margin: -6px 0;
}
.pillar-link,
.insight-read-more,
.industries-note .industries-link,
.tl-link {
  padding: 5px 0;
  margin: -5px 0;
}
/* Footer links stack, so the padding is absorbed by shrinking the gap
   rather than by a negative margin — that keeps adjacent targets from
   overlapping each other. */
.ft-col a {
  padding: 4px 0;
  margin-bottom: 1px;
}

/* ── 2.3.3 Animation from Interactions ──
   Only the homepage neutralised `.reveal` for reduced motion. The other
   fourteen pages define their own copy of it and animate regardless. ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
