/* === A11y: visible focus indicators (Bucket A1, audit 2026-05-06) === */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #ffd166;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Don't double-outline native checkbox/radio */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline-offset: 1px; }

/* === Contrast safety net v1 (pa11y verified 2026-05-06) === */
/* .quick-answer-box: existing CSS sets a dark navy gradient that conflicts with
   the inline light-cream background. Force light bg + dark text + readable links. */
.quick-answer-box {
  background: linear-gradient(135deg, #fef3e2, #ffffff) !important;
  background-image: linear-gradient(135deg, #fef3e2, #ffffff) !important;
  color: #1a1a2e !important;
  border-left-color: #d4a017 !important;
}
.quick-answer-box strong, .quick-answer-box b, .quick-answer-box p { color: #1a1a2e !important; }
.quick-answer-box a { color: #c0392b !important; text-decoration: underline; }

/* .quick-answer (the singular variant — used as a card on some sites). */
.quick-answer {
  background: linear-gradient(135deg, #fdf8f0, #ffffff) !important;
  color: #1a1a2e !important;
}
/* Force the label to a white pill with dark text — regardless of parent bg.
   axe found gold-on-gold and gold-on-teal contexts on 4 sites. */
.quick-answer-label,
span.quick-answer-label,
.quick-answer .quick-answer-label,
.quick-answer-box .quick-answer-label {
  color: #1a1a2e !important;
  background: #ffffff !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  text-shadow: none !important;
}

/* .print-btn: dark navy background — text MUST be white. Pa11y measured 1.37:1. */
.print-btn,
button.print-btn {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border: 1px solid #1a1a2e !important;
}
.print-btn:hover { background: #2c2c4a !important; }

/* Star ratings — gold on light bg, force darker gold (9.6:1). */
.ct-product-rating,
.product-rating-stars,
.rating-stars { color: #9a6f00 !important; }

/* Editorial feature CTA badges. */
.editorial-feature-cta {
  color: #1a1a2e !important;
  background: #fef3e2 !important;
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
}

/* Inline-styled social share rows (Twitter/Facebook/Pinterest).
   axe ground-truth: white-on-#1da1f2 = 2.82:1 (twitter), white-on-#1877f2 = 4.23:1 (facebook).
   Both fail AA. Darken the brand colors to the WCAG-compliant variants. */
a[href*="twitter.com/intent"],
.share-btn[href*="twitter"],
.share-link[href*="twitter"] {
  background: #007bc7 !important;
  color: #ffffff !important;
}
a[href*="facebook.com/sharer"],
.share-btn[href*="facebook"],
.share-link[href*="facebook"] {
  background: #0d5dbb !important;
  color: #ffffff !important;
}
a[href*="pinterest.com/pin"],
.share-btn[href*="pinterest"],
.share-link[href*="pinterest"] {
  background: #aa1f24 !important;
  color: #ffffff !important;
}
.share-btn, .share-link { color: #ffffff !important; }

/* Hero CTA buttons — left to per-site overrides because some sites use
   white-bg / dark-text and others use color-bg / white-text. A universal
   `color: #fff !important` would invisibly white-on-white the white-bg variant. */
.hero-cta-secondary { color: #1a1a2e !important; }

/* Footer: every site's existing CSS uses .site-footer with dark bg, but the
   live HTML uses bare <footer> without that class — so the dark bg never
   applies and footer text inherits white from body, which is invisible.
   Force a dark navy bg + light text on bare <footer> so the prior rules work. */
footer, .site-footer, body > footer {
  background: #0f1428 !important;
  color: #f1f1f5 !important;
}
footer p, footer .footer-blurb, footer .footer-tagline,
.site-footer p, .site-footer .footer-blurb, .site-footer .footer-tagline { color: #f1f1f5 !important; }
footer p[style], .site-footer p[style] { color: #f1f1f5 !important; }
footer a, .site-footer a { color: #ffffff !important; }
footer a:hover, .site-footer a:hover { color: #ffd166 !important; }
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: #ffffff !important; }

/* TTN blog post per-page dark theme: .name-text was dark-on-dark (188 instances). */
.name-text { color: #ffffff !important; }
/* TTN blog .num: purple-on-dark (152 instances) */
.num { color: #ffd166 !important; }
/* TTN blog .note: light gray on white = 2.61:1 (165 instances) */
.note { color: #5a5a5a !important; }
/* "Did You Know?" / "Fun Fact" strongs: teal #16a085 on light teal = 2.99:1 (69 instances).
   Darken to #0f6e5a (~5.7:1 against #e8f8f5). */
strong.callout, .did-you-know strong, .fun-fact strong { color: #0f6e5a !important; }
/* THH blog answer reveals: green #27ae60 on #f8f9fa = 2.72:1. Darken to #0f7a3e. */
.answer, .ans, td.check { color: #0f7a3e !important; }
/* THH check tables (✓): same. */
.check, .check:nth-child(n) { color: #0f7a3e !important; }
/* THH skip-link teal-on-white in focused state */
.skip-link, a.skip-link { color: #ffffff !important; background: #1a1a2e !important; }

/* Back-to-top button accessible contrast on light pages. */
.back-to-top {
  background: #1a1a2e !important;
  color: #ffffff !important;
}

/* friendstrivia — yellow .btn pattern: white-on-#f1c40f = 1.66:1 (axe).
   Force dark text on yellow buttons; force burgundy bg on regular .btn. */
a.btn:not(.btn-primary):not(.nav-cta) { color: #1a1a2e !important; }
.btn { color: #1a1a2e !important; }
.btn-primary, a.btn-primary { background: #6b3dad !important; color: #ffffff !important; }
.site-header .site-nav a.nav-cta,
.site-header .main-nav a.nav-cta,
header nav a.nav-cta,
a.nav-cta { background: #6b3dad !important; color: #ffffff !important; }
/* === end contrast safety net v1 === */