/* Coverin Public Website — Custom Styles
 *
 * WS6 / Chat 14 — every raw colour migrated to var() (tokens.css). Light
 * values are byte-identical to the pre-WS6 hex (the rgb(R G B / a) and
 * rgba(R, G, B, a) forms compute to the same pixel); the .dark block in
 * tokens.css + the scoped @media (prefers-color-scheme: dark) flip them.
 */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* ── Fade-in animation for scroll reveals ── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.fade-in.visible .stagger > * {
  opacity: 0;
  animation: staggerIn 0.5s ease-out forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.2s; }
.stagger > *:nth-child(4) { animation-delay: 0.3s; }
.stagger > *:nth-child(5) { animation-delay: 0.4s; }
.stagger > *:nth-child(6) { animation-delay: 0.5s; }

@keyframes staggerIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Glassmorphism navbar ── */
.navbar {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgb(var(--navbar-bg-rgb) / 0.8);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.navbar.scrolled {
  box-shadow: var(--navbar-shadow);
  background: rgb(var(--navbar-bg-scrolled-rgb) / 0.95);
}

/* ── Mobile menu ── */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.mobile-menu.open {
  max-height: 400px;
}

/* ── FAQ accordion ── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}
.faq-answer.open {
  max-height: 600px;
}
.faq-chevron {
  transition: transform 0.3s ease;
}
.faq-chevron.open {
  transform: rotate(180deg);
}

/* ── Animated counter ── */
.counter {
  font-variant-numeric: tabular-nums;
}

/* ── Gradient text ── */
.gradient-text {
  background: var(--gradient-brand-text);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Hero section ── */
.hero-gradient {
  background: var(--gradient-hero);
}

/* ── Floating blobs ── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  z-index: -8;
  pointer-events: none;
}
.blob-1 {
  width: 400px;
  height: 400px;
  background: rgb(var(--blob-purple-soft-rgb) / 0.08);
  top: -100px;
  right: -100px;
  animation: blobFloat 8s ease-in-out infinite;
}
.blob-2 {
  width: 300px;
  height: 300px;
  background: rgb(var(--blob-green-soft-rgb) / 0.06);
  bottom: -50px;
  left: -80px;
  animation: blobFloat 10s ease-in-out infinite reverse;
}
.blob-3 {
  width: 200px;
  height: 200px;
  background: rgb(var(--blob-purple-faint-rgb) / 0.05);
  top: 40%;
  left: 30%;
  animation: blobFloat 12s ease-in-out infinite 2s;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -20px) scale(1.05); }
  66% { transform: translate(-15px, 15px) scale(0.95); }
}

/* ── Mockup floating cards ── */
.mockup-float {
  animation: mockupFloat 6s ease-in-out infinite;
}
.mockup-float-delayed {
  animation: mockupFloat 6s ease-in-out infinite 1s;
}
.mockup-float-slow {
  animation: mockupFloat 8s ease-in-out infinite 0.5s;
}

@keyframes mockupFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Feature cards ── */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--feature-card-hover-shadow);
}

/* ── Card hover (legacy — kept for other pages) ── */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow);
}

/* ── Timeline connector ── */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--brand-primary), var(--brand-secondary));
  transform: translateX(-50%);
}

/* ── Pricing popular badge glow ── */
.popular-glow {
  box-shadow: var(--popular-glow-shadow);
}

/* ── Focus styles for accessibility ── */
/* --focus-ring resolves via tokens.css: brand-primary-dark on light
 * (AAA 7:1 on white), lifted in dark — both pass WCAG AA/AAA against
 * their surface. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Cookie consent banner ── */
.coverin-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  background: rgb(var(--cookie-banner-bg-rgb) / 0.98);
  color: var(--cookie-panel-fg);
  border: 1px solid rgb(var(--cookie-banner-border-rgb) / 0.12);
  border-radius: 16px;
  box-shadow: var(--cookie-banner-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.9rem;
  line-height: 1.5;
  animation: coverinCookieSlideUp 0.32s ease-out;
}
.coverin-cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 860px) {
  .coverin-cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
  }
}
.coverin-cookie-banner__text { flex: 1 1 auto; min-width: 0; }
.coverin-cookie-banner__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cookie-panel-title-fg);
  margin: 0 0 4px 0;
}
.coverin-cookie-banner__desc {
  color: var(--cookie-panel-intro-fg);
  margin: 0;
  font-size: 0.875rem;
}
.coverin-cookie-banner__link {
  /* WCAG AA: brand-primary-dark is 7.0:1 on white; the lighter brand
   * purple was 3.2:1 (fails). Dark mode lifts via tokens.css. */
  color: var(--cookie-link-fg);
  text-decoration: underline;
  font-weight: 500;
}
.coverin-cookie-banner__link:hover { color: var(--cookie-link-hover-fg); }
.coverin-cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.coverin-cookie-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  min-width: 112px;
}
.coverin-cookie-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.coverin-cookie-btn--primary {
  background: var(--brand-primary);
  color: var(--on-brand-fg);
  border-color: var(--brand-primary);
}
.coverin-cookie-btn--primary:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
.coverin-cookie-btn--secondary {
  background: var(--cookie-btn-secondary-bg);
  color: var(--cookie-btn-secondary-fg);
  border-color: var(--cookie-btn-secondary-border);
}
.coverin-cookie-btn--secondary:hover {
  background: var(--cookie-btn-secondary-hover-bg);
  border-color: var(--cookie-btn-secondary-hover-border);
}

/* Preferences panel */
.coverin-cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(var(--cookie-overlay-scrim-rgb) / 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: coverinCookieFade 0.2s ease-out;
}
.coverin-cookie-panel {
  background: var(--cookie-panel-bg);
  color: var(--cookie-panel-fg);
  border-radius: 18px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: var(--cookie-panel-shadow);
  animation: coverinCookieSlideUp 0.25s ease-out;
}
.coverin-cookie-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 8px;
}
.coverin-cookie-panel__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cookie-panel-title-fg);
  margin: 0;
}
.coverin-cookie-panel__close {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cookie-close-fg);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.coverin-cookie-panel__close:hover {
  background: var(--cookie-close-hover-bg);
  color: var(--cookie-close-hover-fg);
}
.coverin-cookie-panel__close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.coverin-cookie-panel__intro {
  margin: 0;
  padding: 0 24px 12px;
  color: var(--cookie-panel-intro-fg);
  font-size: 0.875rem;
}
.coverin-cookie-panel__categories {
  padding: 4px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.coverin-cookie-category {
  border: 1px solid var(--cookie-category-border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--cookie-category-bg);
}
.coverin-cookie-category__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.coverin-cookie-category__titles {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.coverin-cookie-category__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--cookie-category-title-fg);
  margin: 0;
}
.coverin-cookie-category__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cookie-category-badge-fg);
  background: var(--cookie-category-badge-bg);
  padding: 2px 8px;
  border-radius: 999px;
}
.coverin-cookie-category__desc {
  margin: 8px 0 0;
  color: var(--cookie-category-desc-fg);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Toggle switch */
.coverin-cookie-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.coverin-cookie-toggle__input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.coverin-cookie-toggle__input:disabled { cursor: not-allowed; }
.coverin-cookie-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--cookie-toggle-track);
  border-radius: 999px;
  transition: background 0.18s ease;
}
.coverin-cookie-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--cookie-toggle-thumb);
  border-radius: 50%;
  box-shadow: var(--cookie-toggle-thumb-shadow);
  transition: transform 0.18s ease;
}
.coverin-cookie-toggle__input:checked + .coverin-cookie-toggle__track {
  background: var(--cookie-toggle-track-checked);
}
.coverin-cookie-toggle__input:checked + .coverin-cookie-toggle__track .coverin-cookie-toggle__thumb {
  transform: translateX(18px);
}
.coverin-cookie-toggle__input:focus-visible + .coverin-cookie-toggle__track {
  box-shadow: 0 0 0 3px var(--cookie-toggle-focus-ring);
}
.coverin-cookie-toggle__input:disabled + .coverin-cookie-toggle__track {
  background: var(--cookie-toggle-track-disabled);
}

.coverin-cookie-panel__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 24px 20px;
  border-top: 1px solid var(--cookie-panel-footer-border);
  margin-top: 4px;
}

@keyframes coverinCookieSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes coverinCookieFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .coverin-cookie-banner,
  .coverin-cookie-panel,
  .coverin-cookie-overlay {
    animation: none;
  }
  .coverin-cookie-toggle__track,
  .coverin-cookie-toggle__thumb,
  .coverin-cookie-btn {
    transition: none;
  }
}

/* ── Print styles ── */
@media print {
  .navbar, .mobile-menu, footer, .coverin-cookie-banner, .coverin-cookie-overlay { display: none !important; }
}

/* ── Reduce motion for accessibility ── */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .blob, .mockup-float, .mockup-float-delayed, .mockup-float-slow {
    animation: none;
  }
  .gradient-text {
    animation: none;
  }
}

/* ============================================================
   Dark-mode component overrides — keep CTA ink legible
   ------------------------------------------------------------
   Tailwind's `text-white` now flows through `--surface-rgb`, which flips
   to a dark grey on dark. That works for `bg-white` cards (which we want
   to flip), but it also makes the `text-white` baked on every brand CTA
   (`bg-primary text-white …`) read as dark-on-purple in dark mode. The
   primary brand bg stays purple in dark for CTA recognition, so the ink
   on top must stay white. These rules pin `color` back to a constant
   white on the brand-tone composition idioms only. WS7 will sweep any
   remaining `text-white` on bespoke gradients/heroes that this misses.

   Mirrored under @media so OS-dark without an explicit toggle behaves the
   same as `.dark`, but scoped to `:not(.theme-light):not(.dark)` so an
   explicit Light choice still wins.
   ============================================================ */
.dark .text-white.bg-primary,
.dark .text-white.bg-primary-dark,
.dark .text-white.bg-secondary,
.dark .bg-primary .text-white,
.dark .bg-primary-dark .text-white,
.dark .bg-secondary .text-white,
.dark .bg-primary > .text-white,
.dark .bg-primary-dark > .text-white,
.dark .bg-secondary > .text-white {
  color: var(--on-brand-fg);
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.dark) .text-white.bg-primary,
  :root:not(.theme-light):not(.dark) .text-white.bg-primary-dark,
  :root:not(.theme-light):not(.dark) .text-white.bg-secondary,
  :root:not(.theme-light):not(.dark) .bg-primary .text-white,
  :root:not(.theme-light):not(.dark) .bg-primary-dark .text-white,
  :root:not(.theme-light):not(.dark) .bg-secondary .text-white,
  :root:not(.theme-light):not(.dark) .bg-primary > .text-white,
  :root:not(.theme-light):not(.dark) .bg-primary-dark > .text-white,
  :root:not(.theme-light):not(.dark) .bg-secondary > .text-white {
    color: var(--on-brand-fg);
  }
}

/* ============================================================
   Dark-mode gradient-from overrides
   ------------------------------------------------------------
   Tailwind bakes the literal hex of `.from-primary-50`, `.from-green-50`
   and `.from-purple-50/60` at compile time, so the light pastel start-
   stops stay bright on dark and read as a horrid white-ish wash against
   the dark surface (visible on the index hero mockup, the agencies/
   teachers cards, and the pricing + about heroes). `.to-white` already
   flows through `--surface-rgb` and flips correctly, so only the from-
   stops need fixing.

   Strategy:
   - Hero washes (from-purple-50/60): collapse to a flat dark surface so
     the section dissolves into the page background.
   - Brand-tinted feature cards (from-primary-50 / from-green-50): keep a
     subtle brand tint (8% alpha on the brand RGB) so the agencies /
     teachers cards retain identity without bleeding white.
   ============================================================ */
.dark .from-primary-50 {
  --tw-gradient-from: rgb(var(--brand-primary-rgb) / 0.08) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-primary-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark .from-green-50 {
  --tw-gradient-from: rgb(var(--brand-secondary-rgb) / 0.08) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--brand-secondary-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark .from-purple-50\/60 {
  --tw-gradient-from: rgb(var(--surface-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--surface-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.dark) .from-primary-50 {
    --tw-gradient-from: rgb(var(--brand-primary-rgb) / 0.08) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--brand-primary-rgb) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  :root:not(.theme-light):not(.dark) .from-green-50 {
    --tw-gradient-from: rgb(var(--brand-secondary-rgb) / 0.08) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--brand-secondary-rgb) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  :root:not(.theme-light):not(.dark) .from-purple-50\/60 {
    --tw-gradient-from: rgb(var(--surface-rgb) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--surface-rgb) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
}