/*
 * WCAG corrections for #360, loaded AFTER the frozen Laravel stylesheet.
 *
 * Same reasoning as narrow-fixes.css: the legacy sheet
 * (public/build/assets/vaultody-e3b39a30.css) ships byte-identical because the
 * visual gate needs a fixed target and because it contains IE star-property
 * hacks LightningCSS refuses to parse. So contrast and hit-target fixes are
 * overrides here rather than edits there.
 *
 * Two of the four colours #360 lists are already absent from the port:
 * #5c716b and #435853 have zero occurrences in the frozen sheet. What follows
 * addresses the two that survive.
 */

/*
 * --500 was #68837c: 4.43:1 on --1000 and 4.20:1 on --950, so it failed on both
 * backgrounds QA asks about. Lifted to the value #360 suggests, which measures
 * 5.70:1 and 5.40:1 — margin rather than a bare pass.
 *
 * Lifting the TOKEN rather than its call sites is safe here, and specifically
 * because this token only ever paints text: all 23 uses of var(--500) in the
 * frozen sheet are `color`. It covers "WHAT WE HAVE ACHIEVED", the footer
 * address and the testimonials heading in one change.
 */
:root {
  --500: #7b968e;
}

/*
 * The copyright line, which #360 measures at 2.47:1.
 *
 * This one is deliberately NOT fixed by lifting its token. var(--600) is used
 * 19 times: 13 of those are `border-color` / `border` and only 6 are `color`.
 * Lifting --600 to anything that passes contrast would repaint thirteen borders
 * across the site — a visible regression traded for an invisible fix. The token
 * is doing two jobs, which is the case #360's "change the token, not the call
 * site" note does not cover.
 *
 * So the border role keeps --600 and this text role moves to the lifted --500.
 *
 * The five other var(--600) text uses are left alone on purpose: disabled blog
 * pagination is exempt from 1.4.3 as an inactive control, and the three pricing
 * ones are off-homepage and out of #360's scope. They are listed in the issue
 * as follow-ups rather than silently changed here.
 */
.v2-footer .v2-footer-copyright p {
  color: var(--500);
}

/*
 * Testimonial dots: 24x24 hit target, 8px visual — WCAG 2.5.8.
 *
 * The frozen sheet paints an 8x8 button with `background`, so the box IS the
 * dot and growing one grows the other. Padding plus background-clip was the
 * obvious route and does not work: border-radius still resolves against the
 * border box, so a 24px round-cornered box clipped to its content paints a
 * rounded square, not a circle.
 *
 * Instead the button becomes a 24x24 transparent target and the dot is drawn by
 * ::after, which is what keeps the two sizes independent. The colour rules move
 * with it, including :hover and .active, or the frozen background would still
 * paint the full 24px.
 *
 * The container's existing `gap: 8px` means the enlarged targets sit 8px apart
 * and cannot overlap or steal a neighbour's click, which is QA step 6.
 */
.vaultody-v2 .home-page .who-we-serve-testimonial-dot,
.vaultody-v2 .home-page .who-we-serve-testimonial-dot.active,
.vaultody-v2 .home-page .who-we-serve-testimonial-dot:hover {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vaultody-v2 .home-page .who-we-serve-testimonial-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--800);
  transition: background 0.3s ease;
}

.vaultody-v2 .home-page .who-we-serve-testimonial-dot:hover::after {
  background: var(--700);
}

.vaultody-v2 .home-page .who-we-serve-testimonial-dot[aria-current="true"]::after {
  background: var(--accent);
}

/* Keyboard focus must be visible on a transparent target (QA step 4). */
.vaultody-v2 .home-page .who-we-serve-testimonial-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Screen-reader-only text — the utility behind descriptive link text.
 *
 * Lighthouse's SEO "link-text" audit (and the anchor-text signal it stands in
 * for) reads an anchor's TEXT content, so an aria-label alone leaves a bare
 * "Learn more" link generic to crawlers. The fix appends the destination's
 * name inside the anchor, visually hidden: the design keeps its short label,
 * the anchor text and the accessible name both become "Learn more — <thing>".
 * Standard clip-pattern implementation.
 * ------------------------------------------------------------------------ */
.vaultody-v2 .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * Skip link — launch review M4.
 *
 * The mega-menu is the first ~60 focusable elements on every page, so keyboard
 * and switch users paid for it on every navigation. Visually hidden until it
 * takes focus, then painted over the header in the brand accent. It is not
 * inside .vaultody-v2, so it carries no page-scoped prefix.
 * ------------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--accent, #d0ff00);
  color: #0c1815;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
}

#main-content:focus {
  outline: none;
}

/* ---------------------------------------------------------------------------
 * Reduced motion — launch review M4.
 *
 * The frozen stylesheet animates and transitions in a dozen places (sliders,
 * card lifts, the mega-menu) with no prefers-reduced-motion branch anywhere.
 * WCAG 2.3.3. Motion is not removed — durations collapse, so anything that
 * depends on a transition still reaching its end state does.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * Cookie notice — launch review B3.
 *
 * Bottom-anchored, full width on phones, a card on desktop. It sits outside
 * .vaultody-v2 (Base renders it after the page), so the tokens are referenced
 * with fallbacks rather than assumed.
 * ------------------------------------------------------------------------ */
.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  padding: 16px 20px;
  background: var(--950, #0f1e1a);
  border-top: 1px solid var(--700, #1c3932);
  color: var(--100, #e4fdf7);
  font-size: 14px;
  line-height: 1.5;
}

.cookie-notice[hidden] {
  display: none;
}

.cookie-notice-text {
  margin: 0;
  max-width: 70ch;
}

.cookie-notice-link {
  color: var(--accent, #d0ff00);
  text-decoration: underline;
}

.cookie-notice-accept {
  flex: none;
  padding: 10px 22px;
  border: 0;
  border-radius: 6px;
  background: var(--accent, #d0ff00);
  color: #0c1815;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.cookie-notice-accept:focus-visible {
  outline: 2px solid var(--100, #e4fdf7);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .cookie-notice {
    justify-content: flex-start;
  }
}