/*
Theme Name: Positively Unabashed
Theme URI: https://celticwinter.com
Description: Custom theme for Positively Unabashed Events & Creations (Polson, MT). The Studio direction: color-blocked pine/plum/gold, Fraunces + Mulish, type-led. Built on the cw-starter engine.
Author: Kyle Wright
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: positively-unabashed
*/

/* ============================================================
   DESIGN TOKENS — from the approved Studio mockup.
   ============================================================ */
:root{
  --pine:#2E4636;
  --pine-deep:#1C3025;
  --plum:#5A2D52;
  --gold:#C99A45;
  --gold-2:#E0B567;
  --cream:#F7EEDD;
  --cream-2:#EFE2C8;
  --paper:#FBF6EC;
  --sage:#8FA694;
  --ink:#211C18;

  /* engine aliases (starter components read these) */
  --ink-soft:#2A2420;
  --text:var(--ink);
  --text-inv:var(--cream);
  --muted:#6b6259;
  --accent:var(--gold);
  --accent-2:var(--plum);
  --line:rgba(247,238,221,.16);

  /* layout */
  --maxw:1240px;
  --gut:clamp(20px,4vw,34px);

  --disp:'Fraunces',Georgia,serif;
  --body:'Mulish',system-ui,sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.pad{padding-block:clamp(64px,8vw,104px)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---- bands (section background contexts) ---- */
.band-ink{background:var(--pine-deep);color:var(--cream)}
.band-cream{background:var(--cream);color:var(--text)}
.band-accent{background:var(--gold);color:#2a1d08}

/* ---- type ---- */
.disp{font-family:var(--disp);font-weight:300;line-height:1;letter-spacing:-.01em}
.h2,.big{font-family:var(--disp);font-weight:300;font-size:clamp(32px,5vw,60px);line-height:1.02;letter-spacing:-.01em;color:var(--pine);margin-top:12px}
.big em,.h2 em{font-style:italic;color:var(--plum)}
.band-ink .h2,.band-ink .big,.work .big{color:#fff}
.band-ink .h2 em,.band-ink .big em,.work .big em{color:var(--gold-2)}
.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:52ch;margin-top:1rem;opacity:.92}
.key,.lab{display:inline-block;font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.band-ink .key,.band-ink .lab,.work .lab{color:var(--gold-2)}
.band-accent .key,.band-accent .lab{color:#2a1d08}

.prose{max-width:70ch}
.prose p{margin:0 0 1.1em}
.prose h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);margin:1.4em 0 .5em;color:var(--pine)}
.prose h3{font-family:var(--disp);font-weight:400;font-size:1.4rem;margin:1.2em 0 .4em}
.prose a{color:var(--plum);text-decoration:underline}
.prose ul,.prose ol{margin:0 0 1.1em 1.2em}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;background:var(--gold);color:#2a1d08;padding:14px 26px;border-radius:1px;border:0;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}
.btn:hover{background:var(--gold-2);color:#2a1d08;transform:translateY(-2px)}
.btn.lg{font-size:14px;padding:16px 30px}
.btn.outline{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.outline:hover{background:var(--cream);color:var(--pine);box-shadow:inset 0 0 0 1.5px var(--cream)}
.btn.ink{background:var(--pine-deep);color:var(--cream)}
.btn.ink:hover{background:var(--pine);color:var(--cream)}

/* ============================================================
   HEADER / NAV — pine, logo left, gold CTA
   ============================================================ */
header.site{position:sticky;top:0;z-index:60;background:var(--pine);color:var(--cream)}
.nav{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:96px;display:flex;align-items:center;gap:1.4rem}
.brand{display:flex;align-items:center;margin-right:auto}
.brand a{display:flex;align-items:center}
.brand img{max-height:70px;width:auto}
.brand-text{font-family:var(--disp);font-size:1.3rem;letter-spacing:.01em;color:#fff}
.navtoggle{display:inline-flex;background:none;border:0;color:var(--cream);font-size:1.6rem;cursor:pointer;line-height:1}
.nlinks{display:none;position:absolute;top:96px;left:0;right:0;background:var(--pine-deep);flex-direction:column;padding:1rem var(--gut);gap:.2rem;border-bottom:1px solid var(--line)}
.nlinks.open{display:flex}
.nlinks a{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;opacity:.85}
.nlinks a:not(.btn){padding:.6rem 0}
.nlinks a:hover{opacity:1;color:var(--gold-2)}
.nlinks a.active{color:var(--gold-2);opacity:1}
.nlinks a.btn,.nlinks a.btn:hover{opacity:1;color:#2a1d08}
.nlinks .btn{margin-top:.6rem;text-align:center}

/* ============================================================
   HERO — pine, type-led, photo blocks
   ============================================================ */
.hero{background:var(--pine);color:var(--cream);position:relative;overflow:hidden}
.hero .wrap{padding-block:78px 76px}
.kick{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);border:1px solid rgba(224,181,103,.4);padding:7px 14px;border-radius:30px}
.hero h1{font-family:var(--disp);font-weight:300;font-size:clamp(48px,9vw,128px);line-height:.94;letter-spacing:-.02em;margin:22px 0 0;color:#fff}
.hero h1 em{font-style:italic;color:var(--gold-2)}
.hero h1 .plum{color:#caa6c0}
.hero-foot{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;justify-content:space-between;padding:34px 0 0}
.hero-foot p{max-width:34em;font-size:17px;opacity:.9}
.hero-foot .cta{display:flex;gap:12px;flex-wrap:wrap}
.blocks{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:14px;margin-top:50px;height:330px}
.blocks .bk{position:relative;display:flex;align-items:flex-end;padding:18px;font-size:12px;letter-spacing:.06em;color:#fff;border-radius:6px;overflow:hidden;background-size:cover;background-position:center}
.blocks .bk::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,12,10,.75),rgba(15,12,10,.35) 42%,transparent 72%)}
.blocks .bk span{position:relative;z-index:2;text-shadow:0 1px 10px rgba(15,12,10,.85)}
@media(max-width:700px){.blocks{grid-template-columns:1fr 1fr;height:auto}.blocks .bk{min-height:120px}.blocks .bk:first-child{grid-column:1/-1}}

/* ============================================================
   MARQUEE — plum service ticker
   ============================================================ */
.marq{background:var(--plum);color:#f0e2ee;overflow:hidden;border-top:4px solid var(--gold)}
.marq .track{display:flex;gap:0;white-space:nowrap;animation:pu-scroll 26s linear infinite}
.marq span{font-family:var(--disp);font-style:italic;font-size:26px;padding:18px 30px;opacity:.92}
.marq span::after{content:"\2726";font-style:normal;margin-left:30px;color:var(--gold-2);font-size:16px;vertical-align:middle}
@keyframes pu-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq .track{animation:none}}

/* ============================================================
   SERVICES — white cards on paper, lead card full-width
   ============================================================ */
.svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:54px}
.svc{padding:40px;background:#fff;border:1px solid rgba(33,28,24,.1);border-radius:10px;box-shadow:0 26px 46px -38px rgba(33,28,24,.55);transition:.2s}
.svc:hover{background:var(--pine);color:var(--cream);transform:translateY(-4px);box-shadow:0 34px 54px -36px rgba(33,28,24,.6)}
.svc:hover .n,.svc:hover h3{color:var(--gold-2)}
.svc .n{font-weight:800;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.svc h3{font-family:var(--disp);font-weight:400;font-size:28px;color:var(--ink);margin:8px 0}
.svc p{font-size:14.5px;opacity:.92}
.svc.svc-lead{grid-column:1/-1;background:var(--cream)}
.svc.svc-lead:hover{background:var(--pine)}
.svcnote{margin-top:22px;font-size:15px;color:var(--muted)}
.svcnote a{color:var(--plum);border-bottom:1px solid rgba(90,45,82,.35)}
@media(max-width:720px){.svcgrid{grid-template-columns:1fr}}

/* ============================================================
   WORK — deep pine, asymmetric photo grid
   ============================================================ */
.work{background:var(--pine-deep);color:var(--cream)}
.wgrid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:160px;gap:14px;margin-top:48px}
.w{position:relative;border-radius:3px;overflow:hidden;display:flex;align-items:flex-end;color:#fff;background-size:cover;background-position:center}
.w .m{position:relative;z-index:2;padding:18px;text-shadow:0 1px 10px rgba(15,12,10,.85)}
.w.w-light .m{text-shadow:none}
.w .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.w .t{font-family:var(--disp);font-weight:400;font-size:21px}
.w::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,12,10,.82),rgba(15,12,10,.45) 34%,transparent 70%)}
.w.w-lg{grid-column:span 4;grid-row:span 2}
.w.w-sm{grid-column:span 2;grid-row:span 1}
.w.w-light{background-color:var(--cream-2);background-size:contain;background-repeat:no-repeat;background-position:right -10px center}
.w.w-light .k,.w.w-light .t{color:#2a1d08}
.w.w-light::after{background:linear-gradient(0deg,rgba(247,238,221,.95),rgba(247,238,221,0) 62%)}
@media(max-width:760px){
  .wgrid{grid-template-columns:1fr 1fr}
  .w.w-lg{grid-column:1/-1}
  .w.w-sm{grid-column:span 1}
  .w.w-light{background-position:center top!important;background-size:80% auto}
  .w .m{padding:14px}
  .w .k{font-size:10px}
  .w .t{font-size:16px}
}

/* ============================================================
   PROOF — gold stat band
   ============================================================ */
.proof{background:var(--gold);color:#2a1d08}
.proof .wrap{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;padding-block:46px}
.proof .s{flex:1;min-width:160px}
.proof .n{font-family:var(--disp);font-weight:400;font-size:46px;line-height:1}
.proof .l{font-size:13px;font-weight:600;margin-top:4px;opacity:.85}

/* ============================================================
   ABOUT — photo + plum text split
   ============================================================ */
.about{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.about .ph{min-height:520px;background-size:cover;background-position:center 72%}
.about .txt{background:var(--plum);color:#f1e3ef;display:flex;flex-direction:column;justify-content:center;padding:72px}
.about .lab{color:var(--gold-2)}
.about h2{font-family:var(--disp);font-weight:330;font-size:clamp(30px,3.6vw,46px);color:#fff;margin-top:10px}
.about h2 em{font-style:italic;color:var(--gold-2)}
.about p{margin-top:14px;opacity:.92}
.about .sig{font-family:var(--disp);font-style:italic;font-size:32px;color:var(--gold-2);margin-top:16px}
@media(max-width:820px){.about{grid-template-columns:1fr}.about .ph{min-height:300px}.about .txt{padding:50px var(--gut)}}

/* ============================================================
   CLOSING CTA — deep pine, centered
   ============================================================ */
.end{background:var(--pine-deep);color:var(--cream);text-align:center}
.end .wrap{padding-block:100px}
.end .lab{color:var(--gold-2)}
.end h2{font-family:var(--disp);font-weight:300;font-size:clamp(34px,6vw,76px);line-height:1;color:#fff;margin-top:12px}
.end h2 em{font-style:italic;color:var(--gold-2)}
.end p{max-width:32em;margin:20px auto 30px;opacity:.9}

/* ============================================================
   PAGE HERO / BLOG (interior starter components, Studio skin)
   ============================================================ */
.pagehero{background:var(--pine);color:var(--cream);padding-block:clamp(56px,9vw,110px)}
.pagehero .disp{font-size:clamp(2.4rem,6vw,4.4rem);color:#fff}
.pagehero .lead{opacity:.9}
.cta .lead{margin-inline:auto}
.cta-btn{margin-top:1.6rem}
.post-row{padding-block:1.6rem;border-bottom:1px solid var(--cream-2)}
.post-row .h2 a:hover{color:var(--plum)}

/* ---- legacy starter cards/stats (available for inner pages) ---- */
.stats{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:2.6rem}
.stat-n{display:block;font-family:var(--disp);font-size:clamp(2.6rem,6vw,4rem);color:var(--plum);line-height:1}
.stat-t{display:block;font-size:.92rem;letter-spacing:.04em;color:var(--muted);margin-top:.3rem}
.cards{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:2.6rem}
.card{background:#fff;border:1px solid rgba(33,28,24,.1);border-left:3px solid var(--gold);padding:1.6rem 1.5rem;border-radius:3px;color:var(--text)}
.card-t{font-family:var(--disp);font-weight:400;font-size:1.4rem;margin-bottom:.5rem}
.card-b{opacity:.9}

/* ============================================================
   FOOTER — deep green
   ============================================================ */
footer.site{background:#16261d;color:#cdd6cb;padding-block:clamp(40px,6vw,72px) 1.6rem}
footer.site .brand img{max-height:86px}
.foot-top{display:grid;grid-template-columns:1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.fbrand .fnote{opacity:.8;margin-top:.9rem;max-width:42ch;font-family:var(--disp);font-style:italic;font-size:1.05rem}
.fcol h4{font-family:var(--body);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:.7rem;color:var(--gold-2)}
.fcol a,.fcol span{display:block;opacity:.82;padding:.22rem 0;font-size:14px}
.fcol a:hover{opacity:1;color:var(--gold-2)}
.fsocial{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem;margin-left:-9px}
.fcol .fsocial a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0}
.fsocial svg{width:18px;height:18px}
.foot-bottom{display:flex;flex-direction:column;gap:.4rem;margin-top:1.4rem;font-size:.84rem;opacity:.7}
.foot-bottom a:hover{color:var(--gold-2)}

/* ============================================================
   INNER PAGES
   ============================================================ */
.pagehero .lab{color:var(--gold-2)}
.pagehero h1{font-family:var(--disp);font-weight:300;font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.02em;color:#fff;margin-top:14px}
.pagehero h1 em{font-style:italic;color:var(--gold-2)}
.pagehero .lead{opacity:.9;font-size:17px;max-width:38em}

/* ---- service feature bands ---- */
.svcband{padding-block:clamp(60px,7vw,92px)}
.svcband.band-paper{background:var(--paper);color:var(--text)}
.svcband.band-cream{background:var(--cream);color:var(--text)}
.svcband.band-dark{background:var(--pine-deep);color:var(--cream)}
.svcfeat{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.svcfeat .bignum{font-family:var(--disp);font-weight:300;font-size:clamp(56px,7vw,96px);line-height:1;color:var(--gold)}
.band-dark .bignum{color:var(--gold-2)}
.svcfeat h2{font-family:var(--disp);font-weight:400;font-size:clamp(28px,3.4vw,42px);color:var(--pine);margin-top:8px}
.band-dark .svcfeat h2{color:#fff}
.svcfeat p{margin-top:12px;max-width:52ch;opacity:.94}
.svcfeat .media{aspect-ratio:4/3;border-radius:10px;background-size:cover;background-position:center;box-shadow:0 30px 50px -36px rgba(33,28,24,.6)}
.inc{list-style:none;margin-top:18px;display:grid;gap:8px}
.inc li{position:relative;padding-left:22px;font-size:15px}
.inc li::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:2px;background:var(--gold)}
.band-dark .inc li::before{background:var(--gold-2)}
@media (min-width:880px){
  .svcfeat{grid-template-columns:1.15fr 1fr;gap:64px}
  .svcfeat.flip .media{order:-1}
}

/* ---- events band (plum) ---- */
.evband{background:var(--plum);color:#f1e3ef}
.evband .wrap{padding-block:76px}
.evband .lab{color:var(--gold-2)}
.evband h2{font-family:var(--disp);font-weight:330;font-size:clamp(28px,3.6vw,44px);color:#fff;margin-top:10px}
.evband h2 em{font-style:italic;color:var(--gold-2)}
.evband p{margin-top:14px;max-width:44em;opacity:.92}
.evband .btn{margin-top:26px}

/* ---- work gallery (wgrid variant) ---- */
.wgrid.gallery{grid-auto-rows:190px}

/* ---- tagline band (about) ---- */
.tagband{background:var(--gold);color:#2a1d08;text-align:center}
.tagband .wrap{padding-block:70px}
.tagband .t{font-family:var(--disp);font-weight:300;font-style:italic;font-size:clamp(28px,4.6vw,54px);line-height:1.1}

/* ---- contact page ---- */
/* booking card: the self-serve consult scheduler, first thing on the page */
.bookcard{background:var(--plum);color:var(--cream);border-radius:10px;padding:clamp(28px,4vw,44px);display:grid;gap:24px;align-items:center;box-shadow:0 26px 46px -38px rgba(33,28,24,.55)}
@media (min-width:760px){.bookcard{grid-template-columns:1fr auto}}
.bookcard .lab{color:var(--gold-2)}
.bookcard h2{font-family:var(--disp);font-weight:300;font-size:clamp(26px,3.4vw,40px);line-height:1.02;letter-spacing:-.01em;color:#fff;margin-top:10px}
.bookcard h2 em{font-style:italic;color:var(--gold-2)}
.bookcard p{margin-top:12px;font-size:15.5px;opacity:.92;max-width:44em}
.bookcard .btn{white-space:nowrap;justify-self:start}
@media (min-width:760px){.bookcard .btn{justify-self:end}}
.formcard>.lab{margin-bottom:16px}
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-top:44px}
@media (min-width:920px){.contact-grid{grid-template-columns:1fr 1.3fr}}
.cinfo .lab{margin-top:8px}
.cinfo .big-link{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(20px,2.2vw,27px);color:var(--pine);margin:6px 0 22px;word-break:break-word}
.cinfo .big-link:hover{color:var(--plum)}
.steps{list-style:none;margin-top:10px;display:grid;gap:16px}
.steps li{position:relative;padding-left:44px;font-size:15px}
.steps .sn{position:absolute;left:0;top:0;font-family:var(--disp);font-size:22px;color:var(--gold)}
.formcard{background:#fff;border:1px solid rgba(33,28,24,.1);border-radius:10px;box-shadow:0 26px 46px -38px rgba(33,28,24,.55);padding:38px}

/* ---- Ninja Forms, themed ---- */
.nf-form-cont .nf-form-title,
.nf-form-cont .nf-form-fields-required{display:none}
.nf-form-cont .nf-field-label label{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--pine)}
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont textarea{width:100%;background:var(--paper);border:1px solid rgba(33,28,24,.18);border-radius:3px;padding:13px 14px;font-family:var(--body);font-size:15px;color:var(--ink);transition:border-color .15s}
.nf-form-cont input:focus,.nf-form-cont textarea:focus{border-color:var(--gold);outline:none}
.nf-form-cont .nf-field-container{margin-bottom:22px}
.nf-form-cont input[type="button"],
.nf-form-cont input[type="submit"]{display:inline-block;font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;background:var(--gold);color:#2a1d08;padding:14px 26px;border-radius:1px;border:0;cursor:pointer;transition:background .18s ease}
.nf-form-cont input[type="button"]:hover,
.nf-form-cont input[type="submit"]:hover{background:var(--gold-2)}
.nf-response-msg{font-size:15px;color:var(--pine)}
.nf-error-msg{color:#a33}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:768px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .foot-top{grid-template-columns:2fr 1fr 1fr}
  .foot-bottom{flex-direction:row;justify-content:space-between}
}
@media (min-width:1000px){
  .navtoggle{display:none}
  .nlinks{display:flex;position:static;flex-direction:row;align-items:center;background:none;padding:0;border:0;gap:28px}
  .nlinks a:not(.btn){padding:0}
  .nlinks .btn{margin-top:0}
}
@media (max-width:520px){
  .nav{height:78px}
  .brand img{max-height:54px}
  .nlinks{top:78px}
}