/*
Theme Name: AfterDarkFling
Theme URI: https://afterdarkfling.com
Author: AfterDarkFling
Description: Electric Sunset — a fast, SEO-friendly discovery & review theme for the adult dating affiliate vertical. Server-rendered port of the Lovable design with editable sections, a Platforms (review) custom post type, an honest activity ticker, and a Mood Match quiz. Built for Core Web Vitals on mobile.
Version: 1.1.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: afterdarkfling
*/

/* ============================================================
   1. DESIGN TOKENS  (Electric Sunset)
   ============================================================ */
:root{
  --radius: 1rem;
  --background: oklch(0.12 0.015 280);
  --foreground: oklch(0.97 0.005 250);
  --surface: oklch(0.16 0.018 280);
  --surface-elevated: oklch(0.20 0.022 280);
  --card: oklch(0.16 0.018 280);
  --muted-foreground: oklch(0.72 0.02 270);
  --primary: oklch(0.70 0.22 18);
  --coral: oklch(0.70 0.22 18);
  --amber: oklch(0.78 0.18 65);
  --lavender: oklch(0.78 0.12 295);
  --border: oklch(1 0 0 / 0.08);
  --ring: oklch(0.70 0.22 18 / 0.6);
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --shadow-glow-coral: 0 0 40px -8px oklch(0.68 0.22 18 / 0.5);
  --shadow-glow-amber: 0 0 40px -8px oklch(0.78 0.18 65 / 0.45);
  --maxw: 80rem;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; border-color:var(--border); }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, oklch(0.70 0.22 18 / 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 10%, oklch(0.78 0.18 65 / 0.15), transparent 65%),
    radial-gradient(ellipse 70% 60% at 50% 100%, oklch(0.78 0.12 295 / 0.10), transparent 70%);
  background-attachment:fixed;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:-0.02em; line-height:1.08; margin:0; font-weight:700; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background:oklch(0.70 0.22 18 / 0.4); color:var(--foreground); }
:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; border-radius:6px; }

/* ============================================================
   3. UTILITIES
   ============================================================ */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:1rem; }
.glass{
  background:linear-gradient(135deg, oklch(1 0 0 / 0.06), oklch(1 0 0 / 0.02));
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid oklch(1 0 0 / 0.08);
}
.glass-strong{
  background:linear-gradient(135deg, oklch(1 0 0 / 0.10), oklch(1 0 0 / 0.04));
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid oklch(1 0 0 / 0.12);
}
.text-gradient-sunset{
  background:linear-gradient(135deg, var(--amber), var(--coral) 50%, var(--lavender));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; padding-bottom:.18em; margin-bottom:-.18em;
}
.italic-serif{ font-style:italic; }
.bg-gradient-sunset{ background:linear-gradient(135deg, var(--amber), var(--coral)); }
.glow-coral{ box-shadow:var(--shadow-glow-coral); }
.glow-amber{ box-shadow:var(--shadow-glow-amber); }
.eyebrow{ font-size:.72rem; text-transform:uppercase; letter-spacing:.25em; margin:0 0 .75rem; }
.muted{ color:var(--muted-foreground); }
.section{ position:relative; max-width:var(--maxw); margin-inline:auto; padding:6rem 1rem; }
@media (min-width:640px){ .section{ padding:8rem 1rem; } }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.85rem 1.6rem; font-size:.9rem; font-weight:600; transition:transform .2s ease, opacity .2s ease, background .2s ease; }
.btn-sunset{ background:linear-gradient(135deg, var(--amber), var(--coral)); color:var(--background); box-shadow:var(--shadow-glow-coral); }
.btn-sunset:hover{ transform:scale(1.03); }
.btn-ghost{ background:linear-gradient(135deg, oklch(1 0 0 / 0.10), oklch(1 0 0 / 0.04)); backdrop-filter:blur(28px); border:1px solid oklch(1 0 0 / 0.12); }
.btn-ghost:hover{ background:oklch(1 0 0 / 0.10); }
.btn-pill{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; background:linear-gradient(135deg, var(--amber), var(--coral)); color:var(--background); padding:.5rem 1rem; font-size:.85rem; font-weight:600; }

/* ============================================================
   4. AMBIENT BACKGROUND
   ============================================================ */
.ambient{ position:fixed; inset:0; z-index:-10; overflow:hidden; pointer-events:none; }
.ambient .orb{ position:absolute; border-radius:50%; filter:blur(80px); }
.ambient .orb-1{ top:-10rem; left:-8rem; width:42rem; height:42rem; opacity:.40; background:radial-gradient(circle, var(--coral), transparent 60%); animation:drift 18s ease-in-out infinite; }
.ambient .orb-2{ top:33%; right:-10rem; width:36rem; height:36rem; opacity:.30; background:radial-gradient(circle, var(--amber), transparent 60%); animation:drift 18s ease-in-out infinite -6s; }
.ambient .orb-3{ bottom:0; left:33%; width:30rem; height:30rem; opacity:.25; background:radial-gradient(circle, var(--lavender), transparent 60%); animation:drift 18s ease-in-out infinite -12s; }
.ambient .starfield{ position:absolute; inset:0; }
.ambient .star{ position:absolute; border-radius:50%; opacity:.85; animation:twinkle ease-in-out infinite; }
.ambient .particle{ position:absolute; bottom:0; border-radius:50%; animation:float-up linear infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.5; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.25); } }
@media (prefers-reduced-motion: reduce){ .ambient .star{ animation:none; opacity:.9; } }

/* ============================================================
   5. NAV
   ============================================================ */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:50; padding:1rem; }
.nav{ max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-radius:1rem; padding:.75rem 1.5rem; }
.brand{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.brand .mark{ display:grid; place-items:center; height:2.25rem; width:2.25rem; border-radius:.75rem; background:linear-gradient(135deg, var(--amber), var(--coral)); box-shadow:var(--shadow-glow-coral); }
.brand .mark svg{ height:1rem; width:1rem; color:var(--background); }
.nav-links{ display:none; align-items:center; gap:.25rem; }
.nav-links a{ border-radius:999px; padding:.4rem .8rem; font-size:.875rem; color:var(--muted-foreground); transition:background .2s, color .2s; }
.nav-links a:hover,.nav-links a.current{ background:oklch(1 0 0 / 0.05); color:var(--foreground); }
.nav-cta{ display:none; }
.nav-toggle{ display:grid; place-items:center; height:2.25rem; width:2.25rem; border-radius:999px; background:oklch(1 0 0 / 0.05); }
.nav-toggle svg{ width:1.1rem; height:1.1rem; }
.mobile-menu{ display:none; max-width:var(--maxw); margin:.5rem auto 0; border-radius:1rem; padding:.75rem; }
.mobile-menu.open{ display:block; }
.mobile-menu ul{ display:grid; grid-template-columns:1fr 1fr; gap:.25rem; }
.mobile-menu a{ display:block; border-radius:.75rem; padding:.5rem .75rem; font-size:.9rem; }
.mobile-menu a:hover{ background:oklch(1 0 0 / 0.05); }
@media (min-width:640px){ .nav-cta{ display:inline-flex; } }
@media (min-width:1024px){ .nav-links{ display:flex; } .nav-toggle{ display:none; } }

/* ============================================================
   6. HERO
   ============================================================ */
.hero{ position:relative; isolation:isolate; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; padding:8rem 1rem 5rem; text-align:center; }
.hero .skyline{ position:absolute; inset-inline:0; bottom:0; height:18rem; pointer-events:none; }
@media(min-width:640px){ .hero .skyline{ height:24rem; } }
.hero-inner{ position:relative; z-index:10; max-width:56rem; margin-inline:auto; animation:fade-up .6s ease-out both; }
.hero-badge{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.4rem 1rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted-foreground); margin-bottom:1.5rem; }
.hero-badge .dot{ height:.4rem; width:.4rem; border-radius:50%; background:var(--coral); animation:pulse-glow 4s ease-in-out infinite; }
.hero h1{ font-size:clamp(2.75rem, 8vw, 6rem); line-height:1.14; }
.hero p.lead{ max-width:38rem; margin:1.5rem auto 0; font-size:1.05rem; color:var(--muted-foreground); }
.hero-actions{ margin-top:2.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; }
@media(min-width:640px){ .hero-actions{ flex-direction:row; } }
.hero-trust{ margin-top:3.5rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem 2rem; font-size:.75rem; color:var(--muted-foreground); }
.hero-trust span{ display:inline-flex; align-items:center; gap:.5rem; }
.hero-trust .tick{ height:.25rem; width:.25rem; border-radius:50%; background:var(--amber); }
.floating-icon{ position:absolute; display:none; animation:drift 18s ease-in-out infinite; }
.floating-icon .box{ display:grid; place-items:center; height:3rem; width:3rem; border-radius:1rem; color:var(--coral); box-shadow:var(--shadow-glow-coral); }
@media(min-width:640px){ .floating-icon{ display:block; } }

/* ============================================================
   7. SECTION HEADINGS
   ============================================================ */
.section-head{ max-width:40rem; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(2rem, 5vw, 3rem); }
.section-head p{ margin-top:1rem; color:var(--muted-foreground); }
.section-head.row{ display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:1rem; }
@media(min-width:640px){ .section-head.row{ flex-direction:row; align-items:flex-end; } }
.view-all{ font-size:.875rem; color:var(--muted-foreground); white-space:nowrap; }
.view-all:hover{ color:var(--foreground); }

/* ============================================================
   8. CATEGORY GRID
   ============================================================ */
.grid-3{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:640px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .grid-3{ grid-template-columns:1fr 1fr 1fr; } }
.cat-card{ position:relative; overflow:hidden; border-radius:1.5rem; padding:1.75rem; transition:transform .5s ease; display:block; }
.cat-card:hover{ transform:translateY(-4px) scale(1.01); }
.cat-card .glowblob{ position:absolute; right:-5rem; top:-5rem; height:14rem; width:14rem; border-radius:50%; opacity:0; filter:blur(48px); transition:opacity .5s; }
.cat-card:hover .glowblob{ opacity:.6; }
.cat-top{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; }
.cat-emoji{ font-size:2.25rem; line-height:1; }
.cat-tag{ border-radius:999px; padding:.25rem .6rem; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.cat-card h3{ position:relative; margin-top:2rem; font-size:1.5rem; font-weight:600; }
.cat-card .desc{ position:relative; margin-top:.5rem; font-size:.875rem; color:var(--muted-foreground); }
.cat-link{ position:relative; margin-top:1.5rem; display:flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:oklch(0.97 0.005 250 / 0.8); }
.cat-card:hover .cat-link .arr{ transform:translateX(4px); }
.cat-link .arr{ transition:transform .2s; }

/* ============================================================
   9. RECOMMENDATION CARDS
   ============================================================ */
.rec-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:1024px){ .rec-grid{ grid-template-columns:repeat(3,1fr); } }
.rec-card{ position:relative; overflow:hidden; border-radius:1.5rem; padding:1.75rem; display:flex; flex-direction:column; transition:transform .5s ease; }
.rec-card:hover{ transform:translateY(-4px); }
.rec-card .topline{ position:absolute; inset-inline:0; top:0; height:1px; }
.rec-card .cardglow{ position:absolute; left:-6rem; bottom:-6rem; height:16rem; width:16rem; border-radius:50%; opacity:.3; filter:blur(48px); }
.rec-top{ position:relative; display:flex; align-items:center; justify-content:space-between; }
.rec-id{ display:flex; align-items:center; gap:.75rem; }
.rec-logo{ display:grid; place-items:center; height:3rem; width:3rem; border-radius:1rem; font-size:1.1rem; font-weight:700; color:var(--background); }
.rec-id h3{ font-size:1.25rem; font-weight:600; }
.rec-id .best{ font-size:.72rem; color:var(--muted-foreground); }
.rec-badge{ border-radius:999px; padding:.25rem .6rem; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.rec-rating{ position:relative; margin-top:1.25rem; display:flex; align-items:center; gap:.5rem; }
.stars{ display:flex; }
.stars svg{ height:1rem; width:1rem; }
.rec-rating .num{ font-size:.875rem; font-weight:500; }
.rec-rating .out{ font-size:.72rem; color:var(--muted-foreground); }
.rec-summary{ position:relative; margin-top:1rem; font-size:.875rem; color:var(--muted-foreground); }
.rec-features{ position:relative; margin-top:1.25rem; display:grid; gap:.5rem; }
.rec-features li{ display:flex; align-items:center; gap:.5rem; font-size:.875rem; }
.rec-features .ftick{ height:.25rem; width:.25rem; border-radius:50%; }
.rec-card .btn{ position:relative; margin-top:1.75rem; justify-content:center; width:100%; }
.rec-card .review-link{ position:relative; margin-top:.75rem; text-align:center; font-size:.8rem; color:var(--muted-foreground); }
.rec-card .review-link:hover{ color:var(--foreground); }

/* ============================================================
   10. SWIPE DISCOVERY
   ============================================================ */
.swipe-wrap{ display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; }
@media(min-width:1024px){ .swipe-wrap{ grid-template-columns:1fr 1fr; } }
.swipe-stage{ position:relative; margin-inline:auto; height:440px; width:100%; max-width:24rem; }
.swipe-card{ position:absolute; inset:0; overflow:hidden; border-radius:1.5rem; padding:1.5rem; transition:transform .3s ease, opacity .3s ease; }
.swipe-card .cardbg{ position:absolute; inset:0; opacity:.5; }
.swipe-card .inner{ position:relative; display:flex; height:100%; flex-direction:column; }
.swipe-card .label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted-foreground); }
.swipe-card .center{ flex:1; display:grid; place-items:center; }
.swipe-card .emoji{ font-size:4.5rem; }
.swipe-card h3{ margin-top:1.5rem; font-size:1.875rem; }
.swipe-card .hint{ text-align:center; font-size:.72rem; color:var(--muted-foreground); }
.swipe-card.behind{ transform:scale(.95); opacity:.5; filter:blur(1px); }
.swipe-card.exit-left{ transform:translateX(-150%) rotate(-12deg); opacity:0; }
.swipe-card.exit-right{ transform:translateX(150%) rotate(12deg); opacity:0; }
.swipe-controls{ position:absolute; inset-inline:0; bottom:-1.5rem; display:flex; align-items:center; justify-content:center; gap:1rem; }
.swipe-btn{ display:grid; place-items:center; border-radius:50%; transition:transform .2s; }
.swipe-btn:hover{ transform:scale(1.1); }
.swipe-btn.pass{ height:3.5rem; width:3.5rem; }
.swipe-btn.like{ height:4rem; width:4rem; background:linear-gradient(135deg, var(--amber), var(--coral)); color:var(--background); box-shadow:var(--shadow-glow-coral); }
.swipe-done{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:1.5rem; padding:2rem; text-align:center; animation:fade-up .6s ease-out both; }
.swipe-done .ico{ display:grid; place-items:center; height:3.5rem; width:3.5rem; border-radius:1rem; background:linear-gradient(135deg, var(--amber), var(--coral)); box-shadow:var(--shadow-glow-coral); }
.swipe-picks{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.swipe-picks span{ border-radius:999px; padding:.25rem .75rem; font-size:.72rem; }

/* ============================================================
   11. ACTIVITY TICKER (honest)
   ============================================================ */
.activity-wrap{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media(min-width:1024px){ .activity-wrap{ grid-template-columns:1fr 1fr; } }
.activity-stat{ margin-top:1.5rem; display:inline-flex; align-items:center; gap:.75rem; border-radius:999px; padding:.5rem 1rem; font-size:.875rem; }
.activity-stat .live{ position:relative; display:inline-flex; height:.6rem; width:.6rem; }
.activity-stat .live .ping{ position:absolute; inset:0; border-radius:50%; background:var(--coral); opacity:.75; animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite; }
.activity-stat .live .dot{ position:relative; height:.6rem; width:.6rem; border-radius:50%; background:var(--coral); }
.activity-feed{ display:grid; gap:.75rem; }
.activity-item{ display:flex; align-items:center; gap:.75rem; border-radius:1rem; padding:.75rem 1rem; animation:fade-up .5s ease-out both; }
.activity-item .ico{ display:grid; place-items:center; height:2rem; width:2rem; border-radius:50%; flex:none; }
.activity-item .ico svg{ height:.9rem; width:.9rem; }
.activity-item .txt{ flex:1; font-size:.875rem; }
.activity-item .when{ font-size:.72rem; color:var(--muted-foreground); }

/* ============================================================
   12. FOOTER
   ============================================================ */
.site-footer{ position:relative; margin-top:5rem; border-top:1px solid oklch(1 0 0 / 0.05); padding:3.5rem 1rem; }
.footer-grid{ max-width:var(--maxw); margin-inline:auto; display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media(min-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.footer-about p{ margin-top:1rem; font-size:.875rem; color:var(--muted-foreground); }
.footer-18{ margin-top:1rem; display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.25rem .75rem; font-size:.72rem; }
.footer-18 .dot{ height:.4rem; width:.4rem; border-radius:50%; background:var(--coral); }
.footer-col h4{ font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--amber); font-family:var(--font-sans); }
.footer-col ul{ margin-top:1rem; display:grid; gap:.5rem; font-size:.875rem; }
.footer-col a{ color:var(--muted-foreground); }
.footer-col a:hover{ color:var(--foreground); }
.disclosure{ max-width:var(--maxw); margin:3rem auto 0; border-radius:1rem; padding:1.25rem; font-size:.75rem; color:var(--muted-foreground); }
.disclosure strong{ color:var(--foreground); }
.footer-bottom{ max-width:var(--maxw); margin:2rem auto 0; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:.75rem; font-size:.72rem; color:var(--muted-foreground); }
@media(min-width:640px){ .footer-bottom{ flex-direction:row; } }
.footer-bottom ul{ display:flex; flex-wrap:wrap; gap:1.25rem; }

/* ============================================================
   13. MOOD WIDGET
   ============================================================ */
.mood-widget{ position:fixed; bottom:1.25rem; right:1.25rem; z-index:40; max-width:20rem; display:none; animation:fade-up .5s ease-out both; }
.mood-widget.show{ display:block; }
.mood-widget .inner{ position:relative; display:flex; align-items:center; gap:.75rem; border-radius:1rem; padding:.75rem 2.5rem .75rem .75rem; box-shadow:var(--shadow-glow-coral); }
.mood-widget .ico{ display:grid; place-items:center; height:2.5rem; width:2.5rem; border-radius:.75rem; background:linear-gradient(135deg, var(--amber), var(--coral)); color:var(--background); flex:none; }
.mood-widget .ico svg{ height:1rem; width:1rem; }
.mood-widget .eyebrow2{ display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-foreground); }
.mood-widget .msg{ display:block; font-size:.875rem; font-weight:500; }
.mood-widget .close{ position:absolute; right:.5rem; top:.5rem; display:grid; place-items:center; height:1.5rem; width:1.5rem; border-radius:50%; background:oklch(1 0 0 / 0.10); color:var(--muted-foreground); }
.mood-widget .close:hover{ color:var(--foreground); }
.mood-widget .close svg{ height:.75rem; width:.75rem; }

/* ============================================================
   14. MOOD QUIZ MODAL
   ============================================================ */
.quiz-overlay{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:1rem; }
.quiz-overlay.open{ display:flex; animation:fade-up .3s ease-out both; }
.quiz-backdrop{ position:absolute; inset:0; background:oklch(0.12 0.015 280 / 0.8); backdrop-filter:blur(12px); }
.quiz-modal{ position:relative; width:100%; max-width:42rem; overflow:hidden; border-radius:1.5rem; padding:1.5rem; max-height:90vh; overflow-y:auto; }
@media(min-width:640px){ .quiz-modal{ padding:2.5rem; } }
.quiz-modal .blob1{ position:absolute; top:-8rem; right:-8rem; height:18rem; width:18rem; border-radius:50%; opacity:.4; filter:blur(48px); background:radial-gradient(circle, var(--coral), transparent 60%); }
.quiz-modal .blob2{ position:absolute; bottom:-8rem; left:-8rem; height:18rem; width:18rem; border-radius:50%; opacity:.3; filter:blur(48px); background:radial-gradient(circle, var(--amber), transparent 60%); }
.quiz-head{ position:relative; display:flex; align-items:center; justify-content:space-between; }
.quiz-chip{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.25rem .75rem; font-size:.72rem; }
.quiz-close{ display:grid; place-items:center; height:2.25rem; width:2.25rem; border-radius:50%; background:oklch(1 0 0 / 0.05); }
.quiz-close:hover{ background:oklch(1 0 0 / 0.10); }
.quiz-progress{ position:relative; margin-top:1.25rem; height:.25rem; overflow:hidden; border-radius:999px; background:oklch(1 0 0 / 0.10); }
.quiz-progress .bar{ height:100%; background:linear-gradient(135deg, var(--amber), var(--coral)); transition:width .5s; width:0; }
.quiz-step{ position:relative; margin-top:2rem; animation:fade-up .4s ease-out both; }
.quiz-step .qmeta{ font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; color:var(--muted-foreground); }
.quiz-step h3{ margin-top:.5rem; font-size:clamp(1.5rem,4vw,2.25rem); }
.quiz-options{ margin-top:1.5rem; display:grid; grid-template-columns:1fr; gap:.6rem; }
@media(min-width:640px){ .quiz-options{ grid-template-columns:1fr 1fr; } }
.quiz-opt{ display:flex; align-items:center; gap:.75rem; border-radius:1rem; border:1px solid oklch(1 0 0 / 0.10); padding:.85rem 1rem; text-align:left; transition:border .2s, background .2s; }
.quiz-opt:hover{ border-color:oklch(1 0 0 / 0.20); background:oklch(1 0 0 / 0.05); }
.quiz-opt .oemoji{ font-size:1.25rem; }
.quiz-opt .olabel{ flex:1; font-size:.875rem; font-weight:500; }
.quiz-nav{ margin-top:1.5rem; display:flex; align-items:center; justify-content:space-between; }
.quiz-back{ display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.4rem .8rem; font-size:.875rem; color:var(--muted-foreground); }
.quiz-back:disabled{ opacity:.3; }
.quiz-result-row{ display:flex; align-items:center; gap:1rem; border-radius:1rem; padding:1rem; margin-bottom:.75rem; background:oklch(1 0 0 / 0.04); }
.quiz-result-row.top{ background:linear-gradient(to right, oklch(1 0 0 / 0.10), transparent); box-shadow:var(--shadow-glow-coral); border:1px solid oklch(0.70 0.22 18 / 0.4); }
.quiz-result-row .rlogo{ display:grid; place-items:center; height:3rem; width:3rem; border-radius:.75rem; font-weight:700; color:var(--background); flex:none; }
.quiz-result-row .rname{ display:flex; align-items:center; gap:.5rem; }
.quiz-result-row .rbadge{ border-radius:999px; background:oklch(1 0 0 / 0.10); padding:.1rem .5rem; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; }

/* ============================================================
   15. WORDPRESS CONTENT (review / blog / pages)
   ============================================================ */
.page-shell{ padding-top:8rem; min-height:60vh; }
.content-narrow{ max-width:46rem; margin-inline:auto; padding-inline:1rem; }
.prose{ font-size:1.05rem; line-height:1.75; color:oklch(0.92 0.01 270); }
.prose h2{ font-size:1.9rem; margin:2.5rem 0 1rem; }
.prose h3{ font-size:1.4rem; margin:2rem 0 .75rem; }
.prose p{ margin:0 0 1.2rem; }
.prose a{ color:var(--coral); text-decoration:underline; text-underline-offset:3px; }
.prose ul{ list-style:disc; padding-left:1.4rem; margin:0 0 1.2rem; display:grid; gap:.4rem; }
.prose ol{ list-style:decimal; padding-left:1.4rem; margin:0 0 1.2rem; display:grid; gap:.4rem; }
.prose blockquote{ border-left:3px solid var(--coral); padding-left:1rem; margin:1.5rem 0; color:var(--muted-foreground); font-style:italic; }
.prose img{ border-radius:1rem; margin:1.5rem 0; }
.entry-header{ max-width:46rem; margin:0 auto 2rem; padding-inline:1rem; }
.entry-header h1{ font-size:clamp(2rem,5vw,3.25rem); }
.entry-meta{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:var(--muted-foreground); align-items:center; }
.entry-meta .author-chip{ display:inline-flex; align-items:center; gap:.5rem; }
.entry-meta .author-chip img{ height:1.5rem; width:1.5rem; border-radius:50%; }

/* Review single layout */
.review-layout{ max-width:var(--maxw); margin-inline:auto; padding:8rem 1rem 4rem; display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media(min-width:1024px){ .review-layout{ grid-template-columns:1fr 22rem; align-items:start; } }
.review-cta-card{ border-radius:1.5rem; padding:1.75rem; position:relative; overflow:hidden; }
@media(min-width:1024px){ .review-cta-card.sticky{ position:sticky; top:7rem; } }
.review-cta-card .verdict-num{ font-family:var(--font-display); font-size:3rem; line-height:1; }
.verdict-box{ border-radius:1.25rem; padding:1.5rem; margin:1.5rem 0; border:1px solid oklch(0.70 0.22 18 / 0.3); background:linear-gradient(135deg, oklch(0.70 0.22 18 / 0.08), transparent); }
.proscons{ display:grid; grid-template-columns:1fr; gap:1rem; margin:1.5rem 0; }
@media(min-width:640px){ .proscons{ grid-template-columns:1fr 1fr; } }
.proscons .col{ border-radius:1rem; padding:1.25rem; }
.proscons h4{ font-family:var(--font-sans); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; }
.proscons .pros h4{ color:oklch(0.80 0.16 150); }
.proscons .cons h4{ color:var(--coral); }
.proscons li{ display:flex; gap:.5rem; font-size:.9rem; margin-bottom:.5rem; }

/* Cards listing (archive) */
.card-list{ max-width:var(--maxw); margin-inline:auto; padding:8rem 1rem 4rem; }
.post-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:640px){ .post-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .post-grid{ grid-template-columns:repeat(3,1fr); } }
.post-card{ border-radius:1.5rem; overflow:hidden; display:flex; flex-direction:column; transition:transform .4s; }
.post-card:hover{ transform:translateY(-4px); }
.post-card .thumb{ aspect-ratio:16/10; background:linear-gradient(135deg, oklch(0.22 0.03 280), oklch(0.16 0.018 280)); overflow:hidden; }
.post-card .body{ padding:1.25rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-card h3{ font-size:1.1rem; }
.post-card .excerpt{ font-size:.85rem; color:var(--muted-foreground); }
.post-card .more{ margin-top:auto; font-size:.8rem; color:var(--coral); padding-top:.5rem; }

.pagination{ display:flex; gap:.5rem; justify-content:center; margin-top:3rem; flex-wrap:wrap; }
.pagination .page-numbers{ padding:.5rem .85rem; border-radius:.6rem; font-size:.85rem; }
.pagination .current{ background:linear-gradient(135deg, var(--amber), var(--coral)); color:var(--background); }

/* ============================================================
   16. ANIMATIONS
   ============================================================ */
@keyframes float-up{ 0%{ transform:translateY(100vh) translateX(0) scale(.6); opacity:0; } 10%{ opacity:.8; } 90%{ opacity:.6; } 100%{ transform:translateY(-10vh) translateX(40px) scale(1); opacity:0; } }
@keyframes pulse-glow{ 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } }
@keyframes drift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(30px,-20px); } }
@keyframes fade-up{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
@keyframes ping{ 75%,100%{ transform:scale(2); opacity:0; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* WP admin bar offset */
.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ .admin-bar .site-header{ top:46px; } }

/* -------------------------------------------------------------
 * Single review page (additions)
 * ----------------------------------------------------------- */
.review-main{ min-width:0; }
.review-head{ margin-bottom:1.5rem; }
.review-head h1{ font-size:clamp(2rem,5vw,3.25rem); margin:.75rem 0 .5rem; }
.review-bestfor{ color:var(--muted-foreground); font-size:1rem; }
.review-head .rec-rating{ margin-top:1rem; }
.tested-note{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.85rem; color:var(--amber); }
.tested-note svg{ width:1rem; height:1rem; }
.review-bottom-cta{ margin-top:2.5rem; text-align:center; }
.cta-fineprint{ font-size:.78rem; color:var(--muted-foreground); margin-top:.75rem; }
.btn.full{ display:flex; width:100%; justify-content:center; margin-top:1.25rem; }
.review-side .rec-features{ margin-top:1.25rem; }
.review-cta-card .verdict-num{ margin:1rem 0 .25rem; }
.proscons .col li svg{ width:1rem; height:1rem; flex:0 0 auto; margin-top:.15rem; }
.proscons .pros li svg{ color:oklch(0.80 0.16 150); }
.proscons .cons li svg{ color:var(--coral); }
.post-card .post-cat{ font-weight:600; }
.post-card h3 a{ color:inherit; }
.post-card h3 a:hover{ color:var(--coral); }

/* =============================================================
 * v1.1 — dual-CTA reviews, shortcode components (picks / compare / faq), wide pages
 * ============================================================= */

/* Review sticky card: matcher under the brand CTA */
.review-cta-card .btn.full{ width:100%; justify-content:center; }
.review-cta-card .cta-fineprint{ font-size:.72rem; color:var(--muted-foreground); text-align:center; margin-top:.6rem; }
.cta-or{ display:flex; align-items:center; gap:.7rem; margin:1.2rem 0 .9rem; color:var(--muted-foreground); font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; }
.cta-or::before,.cta-or::after{ content:""; height:1px; flex:1; background:var(--border); }
.review-cta-card .alt-note{ font-size:.8rem; color:var(--muted-foreground); text-align:center; margin:0 0 .7rem; }

/* Generic CTA block (shortcode) */
.adf-cta-block{ margin:1.75rem 0; }
.adf-cta-block .cta-fineprint{ font-size:.78rem; color:var(--muted-foreground); margin-top:.6rem; }

/* Intent filter + picks grid (shortcode) */
.adf-picks{ margin:2rem 0; }
.adf-filter{ display:flex; flex-wrap:wrap; gap:.5rem; padding:.75rem; border-radius:1rem; margin-bottom:1.75rem; }
.adf-filter .chip{ display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.5rem .95rem; font-size:.85rem; font-weight:500; color:var(--muted-foreground); border:1px solid oklch(1 0 0 / 0.10); background:transparent; cursor:pointer; transition:all .2s; }
.adf-filter .chip:hover{ color:var(--foreground); border-color:oklch(1 0 0 / 0.22); }
.adf-filter .chip[aria-pressed="true"]{ background:linear-gradient(135deg, var(--amber), var(--coral)); color:oklch(0.12 0.015 280); border-color:transparent; box-shadow:0 0 30px -10px var(--coral); }
.adf-picks-grid{ display:grid; grid-template-columns:1fr; gap:1.4rem; }
@media(min-width:640px){ .adf-picks-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .adf-picks-grid{ grid-template-columns:repeat(3,1fr); } }
.adf-picks-grid .rec-card{ will-change:transform; }
.adf-pick-title{ margin-top:1rem; font-size:1.3rem; font-weight:600; }
.adf-picks-grid .rec-top{ display:flex; align-items:center; justify-content:space-between; }
.adf-routing-note{ margin-top:1.4rem; font-size:.82rem; color:var(--muted-foreground); }
.adf-routing-note strong{ color:var(--foreground); }

/* Versus comparison (shortcode) */
.adf-compare{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin:1.75rem 0; }
@media(min-width:768px){ .adf-compare{ grid-template-columns:1fr 1fr; } }

/* FAQ accordion (review + shortcode) */
.adf-faq{ margin:2.25rem 0; }
.adf-faq h2{ margin-bottom:.5rem; }
.adf-faq details{ border-top:1px solid var(--border); padding:1.05rem .2rem; }
.adf-faq details:first-of-type{ border-top:none; }
.adf-faq summary{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.adf-faq summary::-webkit-details-marker{ display:none; }
.adf-faq summary .pm{ color:var(--amber); font-size:1.4rem; line-height:1; transition:transform .2s; flex:none; }
.adf-faq details[open] summary .pm{ transform:rotate(45deg); }
.adf-faq details p{ color:var(--muted-foreground); margin-top:.7rem; font-size:.97rem; }

/* FTC disclosure box (shortcode) */
.adf-disclosure{ border-radius:1rem; padding:1.1rem 1.25rem; margin:1.75rem 0; font-size:.8rem; color:var(--muted-foreground); line-height:1.7; }

/* Wide page template */
.page-wide .entry-header{ max-width:80rem; margin-inline:auto; padding-inline:1rem; }
.page-wide-body{ max-width:80rem; margin-inline:auto; padding-inline:1rem; }
.page-wide-body .adf-picks, .page-wide-body .adf-compare{ clear:both; }