/*
Theme Name:  TemplifyHub
Theme URI:   https://templifyhub.com
Author:      TemplifyHub
Description: Zero-bloat, performance-first theme for free Canva templates & crochet patterns. Rewarded-ad + email download gate, Brevo API delivery, returning-visitor recognition, AdSense/Pinterest-compliant legal pages, full JSON-LD schema.
Version:     1.2.0
Requires PHP: 7.4
License:     GPL-2.0-or-later
Text Domain: templifyhub
*/

/* =========================================================
   1. DESIGN TOKENS
   Craft-studio palette: warm paper, deep spruce ink,
   yarn-coral action color, soft mint for success states.
   ========================================================= */
:root{
  --paper:#FBF7F0;          /* page background */
  --card:#FFFFFF;
  --ink:#22343A;            /* deep spruce — text */
  --ink-soft:#5B6E74;
  --coral:#E8604C;          /* primary action (yarn coral) */
  --coral-dark:#C94A38;
  --mint:#2E9E7A;           /* success */
  --gold:#E9B44C;           /* badges / stars */
  --line:#E7DFD3;
  --radius:14px;
  --shadow:0 6px 24px rgba(34,52,58,.08);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1180px;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(1.8rem,4vw,2.6rem)}
h2{font-size:clamp(1.4rem,3vw,1.9rem)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* =========================================================
   3. HEADER
   ========================================================= */
.site-header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none}
.brand em{color:var(--coral);font-style:normal}
.main-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:flex-end}
.main-nav a{color:var(--ink);font-weight:600;font-size:.92rem;white-space:nowrap}
.main-nav a:hover{color:var(--coral)}
.header-search{display:flex;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:2px 4px 2px 14px;flex:1 1 auto;max-width:340px;margin:0 8px}
.header-search input[type=search]{border:none;background:none;font-size:.88rem;width:100%;padding:5px 0;color:var(--ink)}
.header-search input[type=search]:focus{outline:none}
.header-search button[type=submit]{border:none;background:var(--coral);border-radius:99px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex:none}
.search-toggle{display:none;background:var(--paper);border:1px solid var(--line);border-radius:10px;width:34px;height:34px;font-size:.9rem;align-items:center;justify-content:center}
@media(max-width:900px){
  /* Mobile: one compact row — logo left, 🔍 + ☰ right. Search expands below when tapped. */
  .site-header .wrap{flex-wrap:wrap;row-gap:0}
  .search-toggle{display:inline-flex;order:2;margin-left:auto}
  .nav-toggle{order:3}
  .header-search{display:none;order:4;flex:1 1 100%;max-width:none;margin:0 0 10px}
  .header-search.is-open{display:flex}
}
.has-sub{position:relative}
.sub-toggle{background:none;border:none;font-weight:600;font-size:.92rem;color:var(--ink);padding:0;white-space:nowrap}
.sub-toggle:hover{color:var(--coral)}
.sub-menu{display:none !important;position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:200px;list-style:none;margin:0;z-index:80}
.has-sub.is-open .sub-menu{display:block !important}
.has-sub.is-open .sub-menu{display:block}
.sub-menu li{border:none}
.sub-menu a{display:block;padding:8px 12px;border-radius:8px;font-size:.9rem}
.sub-menu a:hover{background:var(--paper);text-decoration:none}
@media(max-width:900px){
  .has-sub{position:static}
  .sub-toggle{display:none}
  .sub-menu{display:block !important;position:static;border:none;box-shadow:none;padding:0;min-width:0}
  .sub-menu li{border-bottom:1px solid var(--line)}
}
.nav-toggle{display:none;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-weight:700;font-size:.85rem;color:var(--ink)}
@media(max-width:900px){
  .nav-toggle{display:inline-flex;align-items:center;gap:6px}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:10px 20px 16px}
  .main-nav.is-open{display:block}
  .main-nav ul{flex-direction:column;gap:0;justify-content:flex-start}
  .main-nav li{border-bottom:1px solid var(--line)}
  .main-nav li:last-child{border-bottom:none}
  .main-nav a{display:block;padding:12px 4px;font-size:1rem}
}

/* =========================================================
   4. ARCHIVE / CARD GRID
   ========================================================= */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;margin:32px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease}
.card:hover{transform:translateY(-3px)}
.card .thumb{aspect-ratio:2/3;object-fit:cover;width:100%}
.card-body{padding:14px 16px 18px}
.card-body h3{font-size:1.05rem;margin:0 0 6px}
.card-body h3 a{color:var(--ink)}
.badge{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:2px 10px;font-size:.75rem;font-weight:600;color:var(--ink-soft);margin-right:6px}
.badge--free{background:var(--mint);border-color:var(--mint);color:#fff}

/* =========================================================
   5. SINGLE DOWNLOAD PAGE — HERO
   ========================================================= */
.product-hero{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:40px;margin:36px 0;align-items:start}
@media(max-width:820px){.product-hero{grid-template-columns:1fr}}
.product-hero .mockup{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:2/3;object-fit:cover;width:100%}
.meta-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:8px}
.meta-list li{display:flex;gap:10px;align-items:center;font-size:.98rem}
.meta-list .k{font-weight:700;min-width:130px;color:var(--ink-soft)}
.trust-row{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0;font-size:.85rem;color:var(--ink-soft)}
.trust-row span{display:inline-flex;align-items:center;gap:6px}

/* Primary CTA — the "signature" element: soft coral glow pulse */
.btn-download{display:inline-flex;align-items:center;gap:10px;background:var(--coral);color:#fff;border:none;border-radius:12px;padding:16px 30px;font-size:1.15rem;font-weight:800;box-shadow:0 0 0 0 rgba(232,96,76,.45);animation:glow 2.2s ease-in-out infinite;transition:background .15s}
.btn-download:hover{background:var(--coral-dark)}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(232,96,76,.35)}50%{box-shadow:0 0 0 12px rgba(232,96,76,0)}}
@media(prefers-reduced-motion:reduce){.btn-download{animation:none}.card:hover{transform:none}}

.instructions{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin:32px 0}

/* =========================================================
   6. AD SLOTS (reserved space => no CLS)
   ========================================================= */
.ad-slot{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:8px;color:#C9C0B2;font-size:.7rem;overflow:hidden;margin:16px auto}
.ad-leaderboard{min-height:90px;max-width:728px}
.ad-rect{min-height:250px;max-width:336px;margin:44px 0 20px;position:relative}
.ad-rect::before{content:"Advertisement";position:absolute;top:-18px;left:0;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:#B9AF9F}
@media(max-width:820px){.ad-rect{margin-top:56px}}
.ad-native{min-height:120px}
.ad-anchor{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);border-top:1px solid var(--line);min-height:50px;margin:0;border-radius:0;display:none}
@media(max-width:820px){.ad-anchor.is-active{display:flex}body.has-anchor{padding-bottom:60px}}
.ad-anchor .ad-close{position:absolute;top:-26px;right:8px;background:var(--ink);color:#fff;border:none;border-radius:8px 8px 0 0;padding:2px 12px;font-size:.75rem}

/* =========================================================
   7. GATE MODAL (rewarded ad + email capture)
   ========================================================= */
.th-modal-backdrop{position:fixed;inset:0;background:rgba(34,52,58,.65);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.th-modal-backdrop.is-open{display:flex}
.th-modal{background:var(--card);border-radius:18px;max-width:460px;width:100%;padding:30px 28px;box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative;text-align:center}
.th-modal .th-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.4rem;color:var(--ink-soft)}
.th-step{display:none}
.th-step.is-active{display:block}
.reward-box{background:var(--paper);border:1px solid var(--line);border-radius:12px;min-height:220px;display:flex;align-items:center;justify-content:center;margin:16px 0;flex-direction:column;gap:10px}
.progress-track{width:80%;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--coral);transition:width .3s linear}
.reward-check{color:var(--mint);font-weight:800;font-size:1.1rem}
.th-form input[type=text],.th-form input[type=email]{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:1rem;margin-bottom:12px;background:var(--paper)}
.th-form input:focus{border-color:var(--coral);outline:none}
.btn-send{width:100%;background:var(--mint);color:#fff;border:none;border-radius:10px;padding:14px;font-size:1.05rem;font-weight:800}
.btn-send:hover{filter:brightness(.95)}
.btn-ghost{background:none;border:none;color:var(--ink-soft);font-size:.85rem;text-decoration:underline;margin-top:10px}
.consent-row{display:flex;gap:8px;align-items:flex-start;text-align:left;font-size:.8rem;color:var(--ink-soft);margin-bottom:12px}
.returning-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px;margin:14px 0;font-size:1.02rem}
.inbox-notice{font-size:.95rem;color:var(--ink-soft)}
.inbox-notice strong{color:var(--ink)}
.th-error{color:var(--coral-dark);font-size:.85rem;min-height:1.2em;margin:4px 0}

/* =========================================================
   8. FOOTER (4-column legal)
   ========================================================= */
.site-footer{background:var(--ink);color:#CFDCE0;margin-top:60px;padding:44px 0 24px;font-size:.9rem}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:820px){.footer-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.footer-cols{grid-template-columns:1fr}}
.footer-cols h4{color:#fff;font-size:.95rem;margin:0 0 12px}
.footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-cols a{color:#CFDCE0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:32px;padding-top:18px;text-align:center;font-size:.8rem;color:#9DB2B8}

/* =========================================================
   9. UTILITIES
   ========================================================= */
.section-title{margin-top:44px}
.entry-content{max-width:760px}
.notice-bar{background:#FFF6E9;border:1px solid var(--gold);border-radius:10px;padding:12px 16px;font-size:.9rem;margin:20px 0}