/*
Theme Name: Topeka Plant
Theme URI: https://dvelopai.com
Description: Botanical boutique theme for Topeka Plant — scroll-driven hero (via Topeka Plant Scroll plugin), gallery, tissue-culture care guide, and a scaffolded (disabled) WooCommerce shop. All business data comes from the Topeka Plant Core plugin.
Version: 0.1.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Author: Dvelop AI
Author URI: https://dvelopai.com
License: GNU General Public License v2 or later
Text Domain: topeka-plant
*/

/* ── Tokens ─────────────────────────────────────────────── */
:root{
	--tp-green-950:#0e1f15;
	--tp-green-900:#12241a;
	--tp-green-700:#1e3a29;
	--tp-green-500:#3d6b4a;
	--tp-sage:#9dbb9a;
	--tp-cream:#f6f2e8;
	--tp-cream-dim:#e7e0cf;
	--tp-amber:#d8a24a;
	--tp-amber-hi:#e6b45f;
	--tp-ink:#1c241d;
	--tp-line:rgba(28,36,29,.12);
	--tp-serif:"Instrument Serif",Georgia,serif;
	--tp-sans:"DM Sans",system-ui,-apple-system,sans-serif;
	--tp-mono:"JetBrains Mono",ui-monospace,monospace;
	--tp-radius:18px;
	--tp-shell:min(1140px,92vw);
	--tps-mono:var(--tp-mono); /* scroll plugin reads this */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--tp-sans);font-size:17px;line-height:1.65;color:var(--tp-ink);background:var(--tp-cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--tp-green-700)}
h1,h2,h3{font-family:var(--tp-serif);font-weight:400;line-height:1.08;margin:0 0 .4em}
h1{font-size:clamp(40px,6vw,72px)}
h2{font-size:clamp(30px,4.4vw,52px)}
h3{font-size:clamp(22px,2.6vw,28px)}
p{margin:0 0 1em}

.shell{width:var(--tp-shell);margin-inline:auto}
.section{padding:clamp(72px,10vw,130px) 0}
.section-intro{text-align:center;max-width:720px;margin:0 auto}
.section-intro .lede{margin-inline:auto}
.section-intro + .steps,.section-intro + .gallery-grid,.section-intro + .visit-grid{margin-top:44px}
.eyebrow{font-family:var(--tp-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--tp-green-500);margin:0 0 14px}
.section-dark{background:var(--tp-green-900);color:var(--tp-cream)}
.section-dark .eyebrow{color:var(--tp-sage)}
.lede{font-size:clamp(18px,2vw,22px);max-width:640px;color:inherit;opacity:.88}
em{font-style:italic}

/* Buttons */
.btn{display:inline-block;padding:13px 26px;border-radius:999px;background:var(--tp-amber);color:var(--tp-green-950);font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s ease,background .2s ease}
.btn:hover{background:var(--tp-amber-hi);transform:translateY(-1px);color:var(--tp-green-950)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:inherit}

/* ── Header ─────────────────────────────────────────────── */
.site-header{position:absolute;top:0;left:0;right:0;z-index:50;transition:background .3s ease,box-shadow .3s ease}
.site-header.is-scrolled{position:fixed;background:rgba(246,242,232,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--tp-line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0}
.site-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tp-cream)}
.site-header.is-scrolled .site-brand,.no-hero .site-brand{color:var(--tp-green-900)}
.brand-mark{width:34px;height:34px;flex:none}
.brand-name{font-family:var(--tp-serif);font-size:24px;letter-spacing:.01em}
.brand-name em{color:var(--tp-amber)}
.main-nav{display:flex;gap:26px}
.main-nav a{color:inherit;text-decoration:none;font-size:15px;font-weight:500;opacity:.92}
.main-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.site-header:not(.is-scrolled) .main-nav a{color:var(--tp-cream)}
.no-hero .main-nav a{color:var(--tp-ink)}
.header-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;color:var(--tp-cream)}
.no-hero .nav-toggle span,.site-header.is-scrolled .nav-toggle span{color:var(--tp-green-900)}

@media (max-width:820px){
	.main-nav{position:fixed;inset:0 0 auto;top:0;background:var(--tp-green-900);flex-direction:column;padding:96px 8vw 40px;transform:translateY(-100%);transition:transform .35s ease;z-index:-1}
	.main-nav.is-open{transform:none}
	.main-nav a{color:var(--tp-cream)!important;font-size:20px}
	.nav-toggle{display:block;color:var(--tp-cream)}
	.site-header.is-scrolled .nav-toggle{color:var(--tp-green-900)}
	.header-cta .btn{display:none}
}

/* ── Static hero (when scroll plugin inactive / inner pages) ── */
.static-hero{background:var(--tp-green-900);color:var(--tp-cream);padding:clamp(140px,18vw,220px) 0 clamp(70px,9vw,110px);text-align:center}
.static-hero .eyebrow{color:var(--tp-sage)}
.static-hero .lede{margin-inline:auto}

/* ── Featured cards ─────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:44px}
.card{background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(14,31,21,.12)}
.card-img{aspect-ratio:4/3;background:var(--tp-green-700);display:flex;align-items:center;justify-content:center;color:var(--tp-sage);font-family:var(--tp-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:20px 22px 24px}
.card-tag{font-family:var(--tp-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tp-green-500)}
.card h3{margin:6px 0 6px}
.card p{font-size:15px;opacity:.8;margin:0}

/* ── Steps (How it works) ───────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:44px;counter-reset:step}
.step{background:rgba(246,242,232,.05);border:1px solid rgba(246,242,232,.14);border-radius:var(--tp-radius);padding:26px 24px}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--tp-mono);font-size:13px;color:var(--tp-amber);display:block;margin-bottom:14px}
.step h3{font-size:21px;color:var(--tp-cream)}
.step p{font-size:15px;color:var(--tp-cream-dim);margin:0}

/* ── Gallery ────────────────────────────────────────────── */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:44px}
.gallery-item{aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--tp-green-700);position:relative;cursor:pointer;border:0;padding:0}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--tp-sage);font-family:var(--tp-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:12px}

/* ── Visit ──────────────────────────────────────────────── */
.visit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;margin-top:44px}
@media (max-width:820px){.visit-grid{grid-template-columns:1fr}}
.visit-map{border-radius:var(--tp-radius);overflow:hidden;border:1px solid var(--tp-line);min-height:340px}
.visit-map iframe{display:block;width:100%;height:100%;min-height:340px;border:0}
.visit-facts{background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);padding:30px}
.visit-facts dl{margin:0;display:grid;gap:18px}
.visit-facts dt{font-family:var(--tp-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tp-green-500);margin-bottom:4px}
.visit-facts dd{margin:0;font-size:16px;white-space:pre-line}
.visit-facts .soon{color:var(--tp-amber);font-weight:600}

/* ── CTA band ───────────────────────────────────────────── */
.cta-band{text-align:center}
.cta-band .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{background:var(--tp-green-950);color:var(--tp-cream-dim);padding:56px 0 40px}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.site-footer .brand-name{color:var(--tp-cream)}
.footer-meta{font-size:14px;line-height:1.9}
.footer-meta a{color:var(--tp-cream-dim)}
.footer-bottom{margin-top:36px;padding-top:22px;border-top:1px solid rgba(246,242,232,.12);font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;opacity:.75}
.footer-bottom a{color:var(--tp-sage);text-decoration:none}
.footer-bottom a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-credit{opacity:.85}

/* ── Reveal on scroll ───────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
	.reveal{opacity:1;transform:none;transition:none}
	html{scroll-behavior:auto}
}

/* ── WooCommerce scaffold (inactive until shop_enabled) ── */
.tp-shop-notice{background:#fff;border:1px dashed var(--tp-green-500);border-radius:var(--tp-radius);padding:44px;text-align:center;max-width:640px;margin:44px auto}