/* ==========================================================================
   TruthHub — base.css
   Global tokens, typography, header/footer and shared components.

   WHAT THIS FILE IS FOR
   Elementor controls the layout of individual pages (the homepage sections
   in particular). This file supplies the things that sit OUTSIDE Elementor's
   control — the site header, the site footer, global colour/font variables —
   plus a small set of reusable component classes (buttons, cards) that both
   the theme's PHP templates and, if you choose, Elementor's HTML/Shortcode
   widgets can call on.

   Brand colours and fonts are also registered as Elementor Global Colors /
   Global Fonts (Site Settings → Design System) — see BUILD-GUIDE.md. Keep
   the two in sync if either changes.
   ========================================================================== */

:root{
  --green-900:#1F3F2B;
  --green-700:#3a5e44;
  --green-500:#5C7A5B;
  --cream:#F4F1EC;
  --cream-deep:#ece7dd;
  --ink:#4A4A4A;
  --charcoal:#2c2c2c;
  --gold:#C2A96A;
  --gold-soft:#d4bd84;
  --white:#fff;
  --red:#a23b3b;
  --line:rgba(31,63,43,.12);
  --sh-sm:0 1px 3px rgba(31,63,43,.06),0 4px 14px rgba(31,63,43,.05);
  --sh-md:0 6px 24px rgba(31,63,43,.10),0 2px 8px rgba(31,63,43,.06);
  --sh-lg:0 24px 60px rgba(31,63,43,.16);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--charcoal);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Playfair Display',serif;font-weight:600;line-height:1.12;color:var(--green-900)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.section{padding:96px 0}
.head{max-width:640px;margin:0 auto 54px;text-align:center}
.head h2{font-size:clamp(2rem,4vw,2.9rem);margin-top:14px}
.head p{color:var(--ink);margin-top:14px;font-size:1.05rem}

/* reveal-on-scroll utility — used by assets/js/site.js.
   Available in Elementor via an extra CSS class of "reveal" on any
   section/column/widget (Advanced tab → CSS Classes). */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* buttons — match these to Elementor's Button widget via Global Fonts/Colors,
   or apply the classes directly to a Button widget's CSS Classes field */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:4px;font-weight:600;font-size:.92rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--green-900);color:var(--white)}
.btn-primary:hover{background:var(--green-700);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--green-900)}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.22)}

/* ---- site header (outside Elementor's canvas — lives in header.php) ---- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease)}
.hdr.scrolled{background:rgba(244,241,236,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding:11px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:600;color:var(--white);transition:color .35s}
.hdr.scrolled .brand{color:var(--green-900)}
.brand svg{width:40px;height:40px;flex:none}
.links{display:flex;gap:28px;align-items:center}
.links a{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.92);position:relative;transition:color .3s}
.hdr.scrolled .links a{color:var(--ink)}
.links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--gold);transition:width .35s var(--ease)}
.links a:not(.btn):hover::after{width:100%}
.hdr.scrolled .links a.btn-primary{color:var(--white)}
.burger{display:none;width:28px;height:20px;position:relative;background:none;border:none;cursor:pointer;z-index:110}
.burger span{position:absolute;left:0;width:100%;height:2px;background:var(--white);transition:.3s var(--ease)}
.hdr.scrolled .burger span{background:var(--green-900)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:9px}.burger span:nth-child(3){top:18px}

/* header sits over a hero section, so the body needs no top padding on the
   front page; standard content pages (page.php) push content below it */
.page-content-offset{padding-top:120px}

/* ---- footer (outside Elementor's canvas — lives in footer.php) ---- */
footer.site-footer{background:#16271c;color:rgba(255,255,255,.6);padding:60px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;margin-bottom:44px}
.foot-brand{display:flex;align-items:center;gap:11px;font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--white);margin-bottom:15px}
.foot-brand svg{width:36px;height:36px}
.foot p{font-size:.9rem;max-width:300px}
.foot-col h5{color:var(--white);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:15px;font-weight:600}
.foot-col a{display:block;font-size:.9rem;margin-bottom:9px;color:rgba(255,255,255,.6);transition:color .3s,padding-left .3s var(--ease)}
.foot-col a:hover{color:var(--gold-soft);padding-left:5px}
.foot-bar{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem}

/* ---- By the Numbers cards — used by the 02-by-the-numbers.json Elementor
   template. Elementor's own Icon/Counter widgets sit inside; this just
   gives each column the card treatment (background, padding, hover) ---- */
.stat-card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:36px 22px;text-align:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.stat-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.stat-card .elementor-icon{color:var(--green-500)}
.stat-card .elementor-counter-number-wrapper{font-family:'Playfair Display',serif;font-weight:700;color:var(--green-900)}
.stat-card .elementor-counter-title{font-size:.92rem;color:var(--charcoal);margin-top:8px;font-weight:500;line-height:1.4}
.stat-card .stat-card-link,.story-card .story-card-link{display:flex;justify-content:center;margin-top:14px}

/* ---- Human Stories cards — used by 04-human-stories.json ---- */
.story-card{text-align:center;color:#fff}
.story-card .story-card-img{border-radius:12px;overflow:hidden;aspect-ratio:3/4}
.story-card .story-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.story-card:hover .story-card-img img{transform:scale(1.06)}
.story-card .story-card-title{color:#fff;font-size:1.15rem;margin-top:14px}

/* ---- Mythbuster card component — used by single/archive templates and
   available to Elementor via the "myth-card" CSS class on a Container ---- */
.flow{display:flex;align-items:center;justify-content:center;gap:12px;font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.flow .m{color:var(--red)}.flow .d{color:var(--ink)}.flow .f{color:var(--green-700)}.flow .a{color:var(--gold)}
.myth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.myth-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:32px 28px;box-shadow:var(--sh-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.myth-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.myth-tag{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--red);text-transform:uppercase}
.myth-claim{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:600;font-style:italic;color:var(--green-900);margin:12px 0 20px;line-height:1.3}
.mblock{margin-bottom:16px}
.mblock .lbl{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:5px}
.mblock.debunk .lbl{color:var(--ink)}.mblock.fact .lbl{color:var(--green-700)}
.mblock p{font-size:.94rem;color:var(--charcoal);line-height:1.55}
.mdiv{height:1px;background:var(--line);margin:16px 0}
.ev{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:.86rem;font-weight:600;color:var(--green-700);transition:gap .3s var(--ease)}
.ev:hover{gap:12px}
.myth-sources{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.myth-sources h4{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.myth-sources ul{padding-left:18px}
.myth-sources li{font-size:.86rem;margin-bottom:6px;color:var(--ink)}
.myth-sources a{color:var(--green-700);text-decoration:underline}

/* placeholder blocks — single-truthhub_stat.php / single-truthhub_story.php
   show this whenever a Featured Image hasn't been set yet, so the page
   always looks finished even before real photography is added */
.placeholder-image-block{
  border:2px dashed var(--line);border-radius:12px;background:var(--cream-deep);
  padding:56px 24px;text-align:center;color:var(--ink);margin:28px 0;
}
.placeholder-image-block svg{margin:0 auto 14px;color:var(--green-500)}
.placeholder-image-block p{font-size:.88rem;max-width:360px;margin:0 auto}

.stat-page-figure{
  font-family:'Playfair Display',serif;font-weight:700;color:var(--green-900);
  font-size:clamp(3rem,8vw,5rem);line-height:1;margin-top:14px;
}

/* single Mythbuster entry layout */
.single-mythbuster-inner{max-width:760px;margin:0 auto;padding:160px 28px 100px}
.single-mythbuster-inner .myth-tag{display:block;margin-bottom:10px}
.single-mythbuster-inner h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:24px}
.single-mythbuster-inner .claim-box{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:26px 28px;margin-bottom:32px;box-shadow:var(--sh-sm)}
.single-mythbuster-inner .evidence-body{font-size:1.05rem;line-height:1.75;color:var(--charcoal)}
.single-mythbuster-inner .evidence-body p{margin-bottom:18px}

/* ---- responsive ---- */
@media(max-width:920px){
  .myth-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .links{position:fixed;top:0;right:0;bottom:0;width:76%;max-width:300px;background:var(--green-900);flex-direction:column;justify-content:center;gap:24px;padding:40px;transform:translateX(100%);transition:transform .4s var(--ease);z-index:105}
  .links.open{transform:none}
  .links a{color:#fff!important;font-size:1.1rem}
  .links a::after{display:none}
  .burger{display:block}
  .burger.active span{background:#fff}
  .burger.active span:nth-child(1){top:9px;transform:rotate(45deg)}
  .burger.active span:nth-child(2){opacity:0}
  .burger.active span:nth-child(3){top:9px;transform:rotate(-45deg)}
  .foot-grid{grid-template-columns:1fr}
  .section{padding:72px 0}
  .wrap{padding:0 20px}
}

/* ---- Evidence chat panel (Covert) — used by the Tools Elementor template
   and reusable anywhere the chat is embedded via the HTML widget ---- */
.covert-chat{margin-top:8px;height:560px;border-radius:12px;overflow:hidden;background:#fff}
.covert-chat df-messenger{
  width:100%;height:100%;
  --df-messenger-titlebar-background:#123D10;
  --df-messenger-titlebar-font-color:#ffffff;
  --df-messenger-titlebar-icon-font-color:#ffffff;
  --df-messenger-message-user-background:#2C8159;
  --df-messenger-message-user-font-color:#ffffff;
  --df-messenger-message-bot-background:#EAF3EC;
  --df-messenger-message-bot-font-color:#123D10;
  --df-messenger-chat-background:#ffffff;
  --df-messenger-font-color:#1a1a1a;
  --df-messenger-font-family:'Inter',system-ui,sans-serif;
  --df-messenger-send-icon-color:#2C8159;
  --df-messenger-focus-color:#2C8159;
  --df-messenger-input-box-focus-border:#2C8159;
}
.covert-chat df-messenger-chat{width:100%;height:100%;--df-messenger-chat-border-radius:12px}
.evidence-note{color:rgba(255,255,255,.62);font-size:.82rem;margin-top:16px}
@media(max-width:560px){.covert-chat{height:520px}}