/* Zestora Media — theme styles
   Global tokens, keyframes, media queries and interaction states.
   Element-level styling lives inline in the PHP templates for fidelity. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Space Grotesk',system-ui,sans-serif;}
img{display:block;max-width:100%;}
a{color:inherit;}
::selection{background:#FFD500;color:#1C1B22;}

/* ---- Theme tokens ---- */
[data-theme="light"]{
  --bg:#F3F3F0;--bg-2:#FFFFFF;--panel:#FFFFFF;
  --surface:rgba(255,255,255,0.72);--surface-2:rgba(28,27,34,0.035);
  --border:rgba(28,27,34,0.10);--border-2:rgba(28,27,34,0.18);
  --text:#1C1B22;--muted:#6E6E76;
  --nav-bg:rgba(244,244,242,0.72);
  --grain-op:0.045;--peak-charcoal:#26252E;
  --shadow:0 34px 90px -46px rgba(28,27,34,0.4);
}
[data-theme="dark"]{
  --bg:#0E0E12;--bg-2:#141419;--panel:#16161C;
  --surface:rgba(255,255,255,0.04);--surface-2:rgba(255,255,255,0.025);
  --border:rgba(255,255,255,0.09);--border-2:rgba(255,255,255,0.18);
  --text:#F4F4F5;--muted:#8E8E97;
  --nav-bg:rgba(14,14,18,0.72);
  --grain-op:0.09;--peak-charcoal:#0A0A0E;
  --shadow:0 34px 90px -46px rgba(0,0,0,0.8);
}

/* ---- Reveal (fade + rise on scroll into view) ---- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
[data-reveal].is-visible{opacity:1;transform:none;}
[data-motion="off"] [data-reveal]{opacity:1!important;transform:none!important;}

/* ---- Keyframes ---- */
@keyframes floatY{0%{transform:translateY(0);}50%{transform:translateY(-16px);}100%{transform:translateY(0);}}
@keyframes spinSlow{to{transform:rotate(360deg);}}
@keyframes marqueeScroll{to{transform:translateX(-50%);}}
@keyframes ctaGlow{0%,100%{box-shadow:0 8px 30px -10px rgba(255,180,0,0.35);}50%{box-shadow:0 10px 40px -6px rgba(255,180,0,0.65);}}
[data-motion="off"] *{animation:none!important;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---- Nav transitions ---- */
nav[data-nav]{transition:padding .45s cubic-bezier(.2,.7,.2,1),background .45s ease,box-shadow .45s ease,backdrop-filter .45s ease;}
nav[data-nav] > div{transition:max-width .45s cubic-bezier(.2,.7,.2,1),padding .45s cubic-bezier(.2,.7,.2,1),border-radius .45s cubic-bezier(.2,.7,.2,1),background .45s ease,box-shadow .45s ease,border-color .45s ease;}

/* ---- Services accordion ---- */
[data-svc-acc]{display:flex;gap:16px;max-width:100%;overflow:hidden;}
[data-svc-acc] > div{flex:1;min-width:0;transition:flex .6s cubic-bezier(.2,.7,.2,1);cursor:pointer;}
[data-svc-acc] > div[data-active]{flex:5.2;cursor:default;}
[data-svc-acc] > div:not([data-active]):hover{background:var(--surface-2);}
[data-svc-full]{opacity:0;pointer-events:none;transition:opacity .45s ease .12s;}
[data-svc-acc] > div[data-active] [data-svc-full]{opacity:1;pointer-events:auto;}
[data-svc-min]{opacity:1;transition:opacity .3s ease;}
[data-svc-acc] > div[data-active] [data-svc-min]{opacity:0;}
[data-svc-acc] > div:not([data-active]) [data-svc-num]{display:none;}

/* ---- Work grid (masonry) ---- */
.work-grid{column-count:3;column-gap:22px;}
.work-card{break-inside:avoid;margin-bottom:22px;display:block;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);text-decoration:none;}
.work-media{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.work-card:hover .work-media{transform:scale(1.06);}
.work-card:hover .work-overlay{opacity:1;}
.work-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;}

/* ---- Blog / post cards ---- */
.post-media,.home-post-media{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.post:hover .post-media{transform:scale(1.05);}
.post:hover .post-title{color:#F0850C;}
.post-title,.home-post-title{transition:color .3s ease;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 30px;}
.home-post:hover .home-post-media{transform:scale(1.05);}
.home-post:hover .home-post-title{color:#F0850C;}

/* ---- Striped placeholder for missing images ---- */
.zm-placeholder{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--border),var(--border) 10px,transparent 10px,transparent 20px);
  border-radius:inherit;}
.zm-placeholder span{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);text-align:center;padding:0 16px;}

/* ---- WP content niceties ---- */
.zm-content{font-size:17px;line-height:1.75;color:var(--text);}
.zm-content p{margin:0 0 1.2em;}
.zm-content h2{font-family:Archivo;font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:-0.02em;margin:1.6em 0 .5em;}
.zm-content h3{font-family:Archivo;font-weight:800;font-size:22px;letter-spacing:-0.01em;margin:1.4em 0 .4em;}
.zm-content a{color:#F0850C;text-underline-offset:3px;}
.zm-content img{border-radius:14px;margin:1.4em 0;}
.zm-content blockquote{margin:1.6em 0;padding:6px 0 6px 24px;border-left:3px solid #E8630A;color:var(--muted);font-size:19px;}

/* ---- Responsive ---- */
@media (max-width:900px){
 [data-hero-grid]{grid-template-columns:1fr!important;}
 [data-hero-visual]{display:none!important;}
 [data-hover-hint]{display:none!important;}
 [data-benefit]{grid-template-columns:1fr!important;}
 [data-benefit-img]{order:-1!important;margin-bottom:8px;}
 [data-blog-grid]{grid-template-columns:1fr!important;}
 [data-footer]{grid-template-columns:1fr 1fr!important;}
 [data-pain]{grid-template-columns:1fr!important;}
 [data-stats]{grid-template-columns:1fr 1fr!important;}
 [data-trust-wrap]{display:none!important;}
 [data-trust-mobile]{display:block!important;}
 [data-svc-acc]{display:none!important;}
 [data-svc-mobile]{display:flex!important;}
 [data-testi-wrap]{display:none!important;}
 [data-testi-mobile]{display:block!important;}
 [data-compare-desktop]{display:none!important;}
 [data-compare-mobile]{display:flex!important;}
 .work-grid{column-count:2;}
 .blog-grid{grid-template-columns:repeat(2,1fr);}
 [data-feat]{grid-template-columns:1fr!important;}
 [data-nav-links]{display:none!important;}
 [data-nav-cta]{display:none!important;}
 [data-nav-burger]{display:flex!important;}
}
@media (max-width:760px){
 [data-nav-phone]{display:none!important;}
}
@media (max-width:600px){
 .work-grid{column-count:1;}
 .blog-grid{grid-template-columns:1fr;}
}
[data-nav-mobile].is-open{max-height:520px!important;display:block!important;}

/* ---- Mobile sticky CTA bar ---- */
.zm-sticky-cta{position:fixed;left:50%;bottom:22px;transform:translate(-50%,18px);z-index:60;opacity:0;pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;display:none;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:rgba(20,20,24,0.55);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.14);box-shadow:0 12px 40px -8px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.08);}
.zm-sticky-cta.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
.zm-sticky-cta a{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;
  background:rgba(255,255,255,0.08);color:#fff;text-decoration:none;font-family:Archivo;font-weight:700;font-size:14px;white-space:nowrap;}
.zm-sticky-cta a.zm-wa{background:linear-gradient(135deg,#2FC66E,#22B159);box-shadow:0 6px 18px -6px rgba(34,177,89,0.6);}
@media (max-width:900px){ .zm-sticky-cta{display:flex;} }
@media (max-width:520px){
 [data-zm-grid]{grid-template-columns:1fr!important;}
 [data-zm-modal] input, [data-zm-modal] select, [data-zm-modal] textarea{max-width:100%;}
}