/* ============================================================
   TrueCost — accessibility layer

   Loaded AFTER main.css and never instead of it. main.css is a
   byte-identical copy of the WordPress theme's stylesheet and is
   guarded by `npm run check:css`; every change below lives here so
   that guarantee survives.

   Part 1 is unconditional: two things the theme got wrong that WCAG
   2.1 AA requires. Part 2 is the opt-in modes the accessibility
   panel drives. Part 3 is the panel itself.
   ============================================================ */

/* ------------------------------------------------------------
   PART 1 — baseline conformance (always on)
   ------------------------------------------------------------ */

/*
 * 1.4.3 Contrast (Minimum).
 *
 * --c-muted was #7A8195: 3.89:1 on white, 3.65:1 on .section--services,
 * 3.48:1 on .section--steps. It is only ever used at 0.68rem–0.9rem —
 * below the large-text threshold — so 4.5:1 applies and it failed on
 * every background. Visible on the home page as the five eyebrow
 * labels ("What clients say", "Our Insurance Products", …) and as the
 * state-search placeholder.
 *
 * #666C7D is the same hue darkened until it clears 4.5:1 on all three:
 * 5.24 / 4.93 / 4.61. Redefining the token on :root wins on source
 * order, so nothing in main.css has to change.
 */
:root {
  --c-muted: #666C7D;

  /* Focus ring, shared by the baseline and the loud "highlight focus" mode. */
  --a11y-focus: #1F54AC;
  --a11y-focus-width: 3px;
  --a11y-focus-offset: 2px;
}

/*
 * 2.4.7 Focus Visible.
 *
 * The theme styles focus on a handful of form controls and leaves
 * everything else — buttons, nav links, footer links, cards, the
 * back-to-top control — on the browser default, which is invisible
 * against several of these backgrounds. :focus-visible only fires for
 * keyboard and assistive-tech focus, so this costs nothing visually
 * for pointer users.
 *
 * The controls that already replace the outline with a box-shadow ring
 * (.quote-field input, .search-form__input, …) out-specify this and
 * keep their own treatment.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="option"]:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus);
  outline-offset: var(--a11y-focus-offset);
}

/* The skip link lands on a navy background; the default ring disappears into it. */
.skip-link:focus-visible {
  outline-color: #fff;
}

/*
 * 3.3.1 Error Identification — the submit handler sets aria-invalid
 * alongside .is-invalid, so the state is announced and not only drawn.
 */
[aria-invalid="true"] {
  border-color: #B7202E;
}

/* ------------------------------------------------------------
   PART 2 — opt-in modes
   ------------------------------------------------------------ */

/* --- Text size ------------------------------------------------
   Scaling the root font-size carries every rem-based size in
   main.css with it. body is pinned to 16px there, so it has to be
   re-expressed in rem to come along. Paddings stay in px, which is
   what keeps the layout from tearing. */
html[data-a11y-text="1"] { font-size: 18px; }
html[data-a11y-text="2"] { font-size: 20px; }
html[data-a11y-text="3"] { font-size: 24px; }
html[data-a11y-text] body { font-size: 1rem; }

/* --- High contrast --------------------------------------------
   Token overrides rather than a filter: `filter` on a wrapper makes it
   the containing block for fixed-position descendants, which would
   break the sticky header, the back-to-top control and this panel. */
html[data-a11y-contrast] {
  --c-primary: #0A46A8;
  --c-primary-dark: #06306F;
  --c-primary-soft: #FFFFFF;
  --c-secondary: #08152F;
  --c-secondary-2: #08152F;
  --c-text: #000000;
  --c-text-soft: #14203C;
  --c-muted: #2C3346;
  --c-bg: #FFFFFF;
  --c-bg-soft: #FFFFFF;
  --c-bg-alt: #FFFFFF;
  --c-border: #08152F;
  --c-accent: #6B3E00;
  --a11y-focus: #08152F;
}

/* The tinted panels are literal gradients in main.css, so they need naming. */
html[data-a11y-contrast] .hero--light,
html[data-a11y-contrast] .quote-page,
html[data-a11y-contrast] .quote-cta-section,
html[data-a11y-contrast] .section--testimonials {
  background: #fff;
}

html[data-a11y-contrast] .quote-field select:disabled {
  background-color: #fff;
}

/* Borders carry meaning once the background tints are gone. */
html[data-a11y-contrast] .service-card,
html[data-a11y-contrast] .quote-card,
html[data-a11y-contrast] .hero-cta__type,
html[data-a11y-contrast] .step,
html[data-a11y-contrast] .why-stat,
html[data-a11y-contrast] .reviews-col,
html[data-a11y-contrast] .no-results,
html[data-a11y-contrast] .blog-card {
  border: 2px solid var(--c-border);
}

html[data-a11y-contrast] .btn {
  border-width: 2px;
  border-style: solid;
}

html[data-a11y-contrast] .btn--primary {
  border-color: var(--c-primary-dark);
}

/* Decorative wash behind the hero heading — noise at high contrast. */
html[data-a11y-contrast] .hero__title span {
  background: none;
}

html[data-a11y-contrast] * {
  text-shadow: none !important;
}

/* --- Highlight links ------------------------------------------
   Underline plus an outline, both in currentColor, so it reads on the
   white sections and on the navy footer alike. Buttons already look
   like controls, so they are left alone. */
html[data-a11y-links] a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

html[data-a11y-links] a:not(.btn):not(.custom-logo-link):not(.site-title) {
  outline: 2px dashed currentColor;
  outline-offset: 3px;
}

/* --- Readable font --------------------------------------------
   Swaps both families at the token level. The negative heading
   letter-spacing goes too — it is the part that hurts most. */
html[data-a11y-font] {
  --font-display: Verdana, Tahoma, "DejaVu Sans", system-ui, sans-serif;
  --font-body: Verdana, Tahoma, "DejaVu Sans", system-ui, sans-serif;
}

html[data-a11y-font] h1,
html[data-a11y-font] h2,
html[data-a11y-font] h3,
html[data-a11y-font] h4,
html[data-a11y-font] h5,
html[data-a11y-font] h6 {
  letter-spacing: normal;
}

html[data-a11y-font] .eyebrow {
  letter-spacing: .06em;
  text-transform: none;
}

/* --- Text spacing ---------------------------------------------
   The WCAG 1.4.12 metrics, applied as a preference rather than only
   survived as one. */
html[data-a11y-spacing] body {
  line-height: 1.8 !important;
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}

html[data-a11y-spacing] p {
  margin-bottom: 2em !important;
}

html[data-a11y-spacing] h1,
html[data-a11y-spacing] h2,
html[data-a11y-spacing] h3,
html[data-a11y-spacing] h4,
html[data-a11y-spacing] h5,
html[data-a11y-spacing] h6 {
  line-height: 1.5 !important;
}

/* --- Pause animations -----------------------------------------
   The same declaration main.css already applies under
   prefers-reduced-motion, made reachable for people whose OS setting
   is not the one they want here. */
html[data-a11y-motion] *,
html[data-a11y-motion] *::before,
html[data-a11y-motion] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* --- Large cursor ---------------------------------------------
   A black arrow with a white keyline, so it stays visible on the navy
   sections as well as the white ones. */
html[data-a11y-cursor] body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M7 3l17 12.6-7.6 1.1 4.3 8.5-3.7 1.8-4.2-8.5L7 24.4z' fill='%23000' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto;
}

html[data-a11y-cursor] a,
html[data-a11y-cursor] button,
html[data-a11y-cursor] label,
html[data-a11y-cursor] select,
html[data-a11y-cursor] summary,
html[data-a11y-cursor] [role="button"],
html[data-a11y-cursor] [role="option"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M7 3l17 12.6-7.6 1.1 4.3 8.5-3.7 1.8-4.2-8.5L7 24.4z' fill='%232A6BD6' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, pointer;
}

html[data-a11y-cursor] input[type="text"],
html[data-a11y-cursor] input[type="email"],
html[data-a11y-cursor] input[type="tel"],
html[data-a11y-cursor] input[type="number"],
html[data-a11y-cursor] input[type="search"] {
  cursor: text;
}

/* --- Highlight focus ------------------------------------------ */
html[data-a11y-focus] {
  --a11y-focus: #B7202E;
  --a11y-focus-width: 4px;
  --a11y-focus-offset: 3px;
}

html[data-a11y-focus] :focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus) !important;
  outline-offset: var(--a11y-focus-offset) !important;
  box-shadow: 0 0 0 8px rgba(183, 32, 46, .18) !important;
}

/* ------------------------------------------------------------
   PART 3 — the panel
   ------------------------------------------------------------ */

.tc-a11y {
  position: fixed;
  left: 22px;
  bottom: 22px;
  /* Above the sticky header (80) and the back-to-top control (70), which
     sits in the opposite corner so the two never collide. */
  z-index: 90;
  font-family: var(--font-body);
}

.tc-a11y__toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--c-secondary);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}

.tc-a11y__toggle:hover {
  background: var(--c-primary);
  transform: translateY(-2px);
}

.tc-a11y__toggle svg {
  width: 28px;
  height: 28px;
}

.tc-a11y__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: 310px;
  max-width: calc(100vw - 44px);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
}

.tc-a11y__panel[hidden] {
  display: none;
}

.tc-a11y__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.tc-a11y__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--c-secondary);
}

.tc-a11y__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text-soft);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-a11y__close:hover {
  background: var(--c-bg-soft);
  color: var(--c-text);
}

.tc-a11y__intro {
  margin: 0 0 12px;
  font-size: .8rem;
  color: var(--c-text-soft);
  line-height: 1.5;
}

.tc-a11y__group {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}

.tc-a11y__legend {
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.tc-a11y__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.tc-a11y__step {
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
}

.tc-a11y__step:hover {
  border-color: var(--c-primary);
}

.tc-a11y__step[aria-pressed="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary-dark);
  color: #fff;
}

.tc-a11y__list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.tc-a11y__switch {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 9px 11px;
  cursor: pointer;
  color: var(--c-text);
  font-family: inherit;
}

.tc-a11y__switch:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}

.tc-a11y__switch-text {
  flex: 1;
  min-width: 0;
}

.tc-a11y__switch-label {
  display: block;
  font-weight: 700;
  font-size: .84rem;
  line-height: 1.3;
}

.tc-a11y__switch-hint {
  display: block;
  font-size: .72rem;
  color: var(--c-text-soft);
  line-height: 1.35;
}

/* Decorative: the button's own aria-pressed is what is announced. */
.tc-a11y__track {
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #C9D3E3;
  position: relative;
  transition: background .2s ease;
}

.tc-a11y__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 30, 61, .35);
  transition: transform .2s ease;
}

.tc-a11y__switch[aria-pressed="true"] .tc-a11y__track {
  background: var(--c-primary);
}

.tc-a11y__switch[aria-pressed="true"] .tc-a11y__track::after {
  transform: translateX(16px);
}

.tc-a11y__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--c-border);
  padding-top: 12px;
}

.tc-a11y__reset {
  background: var(--c-secondary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
}

.tc-a11y__reset:hover {
  background: var(--c-primary);
}

.tc-a11y__statement {
  font-size: .75rem;
  color: var(--c-primary);
  text-decoration: underline;
}

/* Narrow screens: a bottom sheet rather than a popover that would hang
   off the side of the viewport. */
@media (max-width: 480px) {
  .tc-a11y {
    left: 16px;
    bottom: 16px;
  }

  .tc-a11y__panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 78px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 110px);
  }
}

/* The panel is a control surface: it must not fade or slide for anyone
   who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .tc-a11y__toggle,
  .tc-a11y__track,
  .tc-a11y__track::after {
    transition: none;
  }
}

html[data-a11y-contrast] .tc-a11y__toggle {
  background: #000;
  border-color: #fff;
}

html[data-a11y-contrast] .tc-a11y__track {
  background: #6B7285;
}