/* ============================================================
   WHISPERS OF ANTIDOTE — ACCESSIBILITY & PUBLIC-SITE COMPONENTS
   Loaded after premium.css. WCAG 2.2 AA helpers: skip link, visible
   focus, reduced motion, plus styles for the React components that
   replaced template jQuery widgets (FAQ, testimonials, counters).
   ============================================================ */

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 10000;
  padding: 12px 18px; border-radius: 10px;
  background: var(--espresso, #2B2620); color: #fff !important;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
#main-content:focus { outline: none; }

/* ---------- Visible focus (2.4.7 / 2.4.11) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--clay-deep, #9A5839) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .85) !important;
}
.text-light :where(a, button):focus-visible,
.bg-dark-1 :where(a, button):focus-visible,
.premium-footer :where(a, button):focus-visible,
.cta-banner :where(a, button):focus-visible {
  outline-color: #F3D9A4 !important;
  box-shadow: 0 0 0 5px rgba(34, 30, 24, .8) !important;
}

/* ---------- Header additions ---------- */
.nav-main { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-brand-text, .pf-brand-text {
  font-family: var(--heading-font); font-size: 22px; line-height: 1.1;
  color: var(--espresso, #2B2620); white-space: nowrap;
}
.pf-brand-text { color: #FBF8F2; font-size: 26px; }
.nav-track-link {
  font-size: 14px; font-weight: 600; color: var(--espresso, #2B2620);
  text-decoration: underline; text-underline-offset: 4px; white-space: nowrap;
}
.nav-track-link:hover { color: var(--clay-deep, #9A5839); }
@media (max-width: 1199.98px) { .nav-track-link { display: none; } }
.pf-social li { display: inline-flex; }

/* ---------- Floating WhatsApp (kept clear of #back-to-top) ---------- */
.whatsapp-float {
  position: fixed; right: 24px; bottom: 92px; z-index: 1019;
  width: 54px; height: 54px; border-radius: 999px;
  background: #1FA855; color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.whatsapp-float:hover { color: #fff !important; transform: translateY(-2px); }
@media (max-width: 767.98px) {
  /* back-to-top occupies right:20px / bottom:20px–60px on phones */
  .whatsapp-float { right: 16px; bottom: 80px; width: 52px; height: 52px; }
}
#back-to-top { display: block; }

/* ---------- CTA helpers (moved from the layout's inline style) ---------- */
.responsive-cta-group { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.responsive-contact-chip { display: inline-flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: 18px; }
.responsive-contact-chip-text p, .responsive-contact-chip-text a { margin: 0; color: #fff; font-weight: 600; text-decoration: none; }
@media (max-width: 767.98px) {
  .responsive-cta-group { flex-direction: column; align-items: stretch; }
  .responsive-cta-group .btn-main, .responsive-contact-chip { width: 100%; justify-content: center; }
}

/* ---------- Hero: legible text on phones + slideshow pause ---------- */
@media (max-width: 991.98px) {
  .hero-slider .sw-overlay { background: rgba(34, 30, 24, .62) !important; }
}
.hero-slider { position: relative; }
.hero-autoplay-toggle {
  position: absolute; left: 20px; bottom: 20px; z-index: 20;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5);
  background: rgba(34, 30, 24, .55); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hero-autoplay-toggle:hover { background: rgba(34, 30, 24, .8); }

/* ---------- Journey icons (inline SVG) ---------- */
.de-step .step-icon svg { width: 36px; height: 36px; color: var(--clay-deep, #9A5839); }

/* ---------- Stats ---------- */
.stat-counter { font-variant-numeric: tabular-nums; }
.de_count .h3, .about-stat .h3 { font-family: var(--heading-font); }

/* ---------- FAQ (accessible accordion) ---------- */
.faq-list .faq-item { border-top: 1px solid var(--hairline, rgba(43,38,32,.12)); }
.faq-list .faq-item:first-child { border-top: 0; }
.faq-q-heading { margin: 0; font-size: inherit; }
.faq-q {
  display: block; width: 100%; text-align: left; position: relative;
  background: none; border: 0; cursor: pointer;
  font-family: var(--heading-font); font-size: 20px; line-height: 1.35;
  color: var(--espresso, #2B2620); padding: 22px 44px 22px 0;
}
.faq-q:hover, .faq-item.is-open .faq-q { color: var(--clay-deep, #9A5839); }
.faq-q::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--body-font); font-size: 26px; font-weight: 300; color: var(--clay-deep, #9A5839);
}
.faq-item.is-open .faq-q::after { content: "–"; }
.faq-a { color: var(--muted, #6B6155); padding-bottom: 18px; }

/* ---------- Testimonials (accessible rotator) ---------- */
.testimonial-carousel .testimonial-quote {
  font-family: var(--heading-font); color: #FBF8F2; font-weight: 400; font-style: italic;
  border: 0; padding: 0; margin-left: 0;
}
.testimonial-carousel svg.id-color-2 { color: var(--gold, #C2A36B); }
.testimonial-carousel figcaption { color: rgba(255,255,255,.85); }
.testimonial-controls { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.tc-btn {
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.tc-btn:hover { background: rgba(255,255,255,.1); }
.tc-count { color: rgba(255,255,255,.8); font-size: 14px; margin-left: 6px; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
/* Homepage preview: four cards on one line, two on tablets, one on phones. */
@media (min-width: 768px) { .pricing-grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .pricing-grid--four { grid-template-columns: repeat(4, 1fr); } }
.pricing-card {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--hairline, rgba(43,38,32,.12));
  border-radius: 20px; padding: 26px 24px;
  box-shadow: 0 24px 50px -40px rgba(43,38,32,.3);
}
.pricing-card-title { font-size: 21px; margin: 0 0 4px; }
.pricing-card-price { font-family: var(--heading-font); font-size: 28px; color: var(--espresso, #2B2620); margin: 0; }
.pricing-card-meta { margin: 0; color: var(--muted, #6B6155); }
.pricing-card-note { margin: 0; color: #56613F; font-weight: 600; font-size: 14px; }
.pricing-card-cta { margin-top: auto; align-self: flex-start; }
.pricing-card .pricing-card-cta { margin-top: 14px; }

/* ---------- Preview bar ---------- */
.preview-bar {
  position: sticky; top: 0; z-index: 10001;
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center;
  padding: 10px 16px; background: #2B2620; color: #fff; font-size: 14px;
}
.preview-bar a { color: #F3D9A4; font-weight: 700; text-decoration: underline; }

/* ---------- Forms ---------- */
.form-label-strong { display: block; font-weight: 600; margin-bottom: 6px; color: var(--espresso, #2B2620); }
.form-status-success { color: #1E5E24; font-weight: 600; padding: 12px; background: #E8F5E9; border-radius: 8px; }
.form-status-error { color: #A31515; font-weight: 600; padding: 12px; background: #FFEBEE; border-radius: 8px; }

/* ---------- Reduced motion (2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .wow, .wow * { animation: none !important; visibility: visible !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .svc-card:hover .svc-card-media img, .quote-card:hover .quote-card-media img, .cs-card:hover img { transform: none !important; }
}

/* Headings re-levelled for a logical outline keep their original look. */
.highlight-card h2 { font-size: 21px; margin: 0 0 10px; }
.contact-info-item h3 { margin: 0 0 4px; font-size: 16px; color: var(--espresso); font-family: var(--body-font); font-weight: 600; }
.hero-slider button.swiper-button-prev, .hero-slider button.swiper-button-next { border: 0; padding: 0; background-color: transparent; cursor: pointer; }