/*
Theme Name: White Shaman
Theme URI: https://whiteshaman.online
Author: White Shaman
Author URI: https://whiteshaman.online
Description: A mystical, warm, and elegant theme for a modern shamanic guide brand. Dark earthy palette with gold accents, Fraunces + Jost typography, bilingual (EN/SR) page templates.
Version: 1.0
Requires PHP: 7.4
Text Domain: white-shaman
*/

/* ============================================================
   White Shaman — Digital Sanctuary
   Design tokens
   ============================================================ */
:root{
  --bg-deep:#120e0a;
  --bg-panel:#1c150e;
  --bg-panel-2:#241b12;
  --line:#3a2c1c;
  --text-primary:#ece3d2;
  --text-muted:#a8977e;
  --text-faint:#6f6250;
  --gold:#b8894a;
  --gold-bright:#d3a862;
  --ember:#8b5a3c;
  --ember-deep:#5e3c27;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --serif:'Fraunces', 'Iowan Old Style', serif;
  --sans:'Jost', 'Helvetica Neue', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--text-primary);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Texture: faint grain + vignette over the whole page */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9000;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
  mix-blend-mode:multiply;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  color:var(--text-primary);
  margin:0 0 .5em;
  letter-spacing:.005em;
}
h1{font-size:clamp(2.6rem,6vw,5rem); font-weight:400; line-height:1.05}
h2{font-size:clamp(1.9rem,4vw,3rem); font-weight:400; line-height:1.15}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:500}

p{margin:0 0 1.1em; color:var(--text-muted); font-size:1.02rem}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:400;
  display:inline-block;
  margin-bottom:1.1em;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 6vw;
}

/* ---------------- Nav ---------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0;
  z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 6vw;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{
  background:rgba(18,14,10,.86);
  backdrop-filter:blur(10px);
  padding:1rem 6vw;
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--serif);
  font-size:1.25rem;
  letter-spacing:.08em;
  display:flex; align-items:center; gap:.6rem;
}
.brand svg{width:26px;height:26px}
.nav-links{display:flex; gap:2.4rem; align-items:center}
.nav-links a{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-muted);
  position:relative;
  padding:.3rem 0;
  transition:color .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{color:var(--gold-bright)}
.nav-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--gold);
}
.nav-cta{
  border:1px solid var(--gold);
  color:var(--gold-bright) !important;
  padding:.55rem 1.3rem;
  border-radius:2px;
  font-size:.72rem !important;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{background:var(--gold); color:var(--bg-deep) !important}
.nav-toggle{display:none; background:none; border:none; color:var(--text-primary); font-size:1.5rem; cursor:pointer}

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:78vw; max-width:340px;
    background:var(--bg-panel);
    flex-direction:column; align-items:flex-start;
    padding:6.5rem 2.2rem 2rem;
    gap:1.8rem;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-toggle{display:block; z-index:600}
}

/* ---------------- Sacred geometry signature motif ---------------- */
.geo-divider{
  display:flex; justify-content:center; align-items:center;
  margin:0 auto; width:100%; max-width:220px;
  opacity:.65;
}
.geo-divider svg{width:100%; height:auto; animation:breathe 7s ease-in-out infinite}
@keyframes breathe{
  0%,100%{opacity:.55; transform:scale(1)}
  50%{opacity:1; transform:scale(1.04)}
}

.geo-watermark{
  position:absolute;
  pointer-events:none;
  opacity:.08;
  z-index:0;
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 35%;
  z-index:-2;
  transform:scale(1.06);
}
.hero-bg::after{content:""}
.hero-scrim{
  position:absolute; inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(18,14,10,.35) 0%, rgba(18,14,10,.35) 40%, rgba(18,14,10,.92) 92%, var(--bg-deep) 100%),
    linear-gradient(90deg, rgba(18,14,10,.55) 0%, rgba(18,14,10,0) 45%, rgba(18,14,10,.25) 100%);
}
.hero-content{
  padding:0 6vw 8vw;
  max-width:900px;
  position:relative;
}
.hero-content h1{margin-bottom:.4em}
.hero-content .lede{
  font-size:1.12rem;
  max-width:520px;
  color:var(--text-muted);
}
.hero-scroll{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:var(--text-faint); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
}
.hero-scroll .line{width:1px; height:40px; background:linear-gradient(var(--gold), transparent); animation:drop 2.4s ease-in-out infinite}
@keyframes drop{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.95rem 2rem;
  border:1px solid var(--gold);
  border-radius:2px;
  color:var(--gold-bright);
  transition:all .35s var(--ease);
  cursor:pointer; background:none;
}
.btn:hover{background:var(--gold); color:var(--bg-deep); box-shadow:var(--shadow)}
.btn-solid{background:var(--gold); color:var(--bg-deep)}
.btn-solid:hover{background:var(--gold-bright); border-color:var(--gold-bright)}

/* ---------------- Sections ---------------- */
section{position:relative; padding:7.5rem 0}
.section-tight{padding:5rem 0}
.panel{background:var(--bg-panel)}
.center{text-align:center; margin-left:auto; margin-right:auto}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:translateY(0)}

/* ---------------- Grid cards ---------------- */
.grid{display:grid; gap:2.4rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3, .grid-2{grid-template-columns:1fr}}

.card{
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  padding:2.4rem 2.1rem;
  border-radius:2px;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.card:hover{border-color:var(--ember); transform:translateY(-4px)}
.card .mark{width:34px; height:34px; color:var(--gold); margin-bottom:1.4rem}
.card h3{margin-bottom:.6rem}
.card p{margin-bottom:0; font-size:.95rem}

/* Product cards */
.product-card{
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  overflow:hidden;
  border-radius:2px;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.product-card:hover{border-color:var(--gold); transform:translateY(-4px)}
.product-media{
  aspect-ratio:4/5;
  background:linear-gradient(160deg, var(--bg-panel) 0%, var(--ember-deep) 130%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.product-media svg{width:38%; opacity:.85; color:var(--gold-bright)}
.product-body{padding:1.6rem 1.7rem 2rem}
.product-cat{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint)}
.product-name{font-family:var(--serif); font-size:1.2rem; margin:.4rem 0 .5rem}
.product-desc{font-size:.9rem; margin-bottom:1rem}
.product-price{color:var(--gold-bright); font-family:var(--serif); font-size:1.05rem}

/* Blog cards */
.post-card{border-bottom:1px solid var(--line); padding:2.6rem 0; display:grid; grid-template-columns:.9fr 2fr; gap:2.4rem; align-items:start}
.post-tag{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.post-date{color:var(--text-faint); font-size:.8rem; margin-top:.3rem}
@media (max-width:760px){.post-card{grid-template-columns:1fr; gap:1rem}}

/* Quote / pull */
.pull{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,2.6vw,2rem);
  color:var(--text-primary); line-height:1.4; max-width:760px;
  border-left:2px solid var(--gold); padding-left:1.6rem;
}

/* Forms */
.field{margin-bottom:1.5rem}
.field label{display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-bottom:.6rem}
.field input, .field textarea, .field select{
  width:100%; background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text-primary);
  padding:.9rem 1rem; font-family:var(--sans); font-size:.95rem; border-radius:2px;
  transition:border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--gold)}
.field textarea{resize:vertical; min-height:130px}

/* Footer */
footer{
  border-top:1px solid var(--line);
  padding:4.5rem 0 2.4rem;
  background:var(--bg-panel);
}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; margin-bottom:3rem}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr; gap:2.2rem}}
.footer-grid h4{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-family:var(--sans); margin-bottom:1.2rem}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem}
.footer-grid a{color:var(--text-muted); font-size:.9rem; transition:color .3s var(--ease)}
.footer-grid a:hover{color:var(--gold-bright)}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  border-top:1px solid var(--line); padding-top:2rem;
  color:var(--text-faint); font-size:.78rem; letter-spacing:.04em;
}

/* Page hero (non-home) */
.page-hero{padding:9.5rem 0 4rem; position:relative}
.page-hero .eyebrow{margin-bottom:.8em}

/* utility */
.mt-0{margin-top:0}
.w-icon{width:1em;height:1em; vertical-align:-.12em; margin-right:.5em}
:root{
  --bg-deep:#120e0a;
  --bg-panel:#1c150e;
  --line:#3a2c1c;
  --text-primary:#ece3d2;
  --text-muted:#a8977e;
  --text-faint:#6f6250;
  --gold:#b8894a;
  --gold-bright:#d3a862;
  --ember:#8b5a3c;
  --serif:'Fraunces', 'Iowan Old Style', serif;
  --sans:'Jost', 'Helvetica Neue', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
body.page-template-template-language{height:100%}
body{
  margin:0; background:var(--bg-deep); color:var(--text-primary);
  font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased;
}
body.page-template-template-language{overflow:hidden}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

.wrap{position:relative; height:100vh; width:100vw; display:flex}
.wrap::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);
}

.pane{
  position:relative; flex:1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; transition:flex .6s var(--ease);
  cursor:pointer;
}
.pane:hover{flex:1.25}
.pane-en{background:
  linear-gradient(120deg, rgba(18,14,10,.55), rgba(18,14,10,.85)),
  url('https://d8j0ntlcm91z4.cloudfront.net/user_39obHOqe5eeLDmzTaCQtuJw8Jzi/hf_20260718_100048_917a73d9-96b5-4c2b-bcf5-9471f32136b5.png');
  background-size:cover; background-position:20% center;
}
.pane-sr{background:
  linear-gradient(240deg, rgba(18,14,10,.55), rgba(18,14,10,.85)),
  url('https://d8j0ntlcm91z4.cloudfront.net/user_39obHOqe5eeLDmzTaCQtuJw8Jzi/hf_20260718_100048_917a73d9-96b5-4c2b-bcf5-9471f32136b5.png');
  background-size:cover; background-position:80% center;
}

.divider{
  position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:linear-gradient(var(--gold), transparent 80%);
  z-index:6; transform:translateX(-.5px);
}

.pane-content{
  position:relative; z-index:7; text-align:center; padding:2rem;
  transform:translateY(0); transition:transform .5s var(--ease);
}
.pane:hover .pane-content{transform:translateY(-6px)}

.mark{width:34px;height:34px;color:var(--gold); margin:0 auto 1.6rem;}
.eyebrow{
  font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:1rem;
}
.pane h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,5vw,3.6rem);
  margin:0 0 .6rem; letter-spacing:.01em;
}
.pane p{
  color:var(--text-muted); font-size:.98rem; max-width:320px; margin:0 auto 1.8rem;
}
.enter{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--gold-bright);
  padding:.85rem 1.8rem; border-radius:2px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.pane:hover .enter{background:var(--gold); color:var(--bg-deep)}

.brand-lockup{
  position:absolute; top:2.4rem; left:50%; transform:translateX(-50%);
  z-index:8; text-align:center; pointer-events:none;
}
.brand-lockup .logo{width:30px;height:30px;color:var(--gold-bright); margin:0 auto .5rem;}
.brand-lockup span{
  font-family:var(--serif); font-size:1rem; letter-spacing:.1em; color:var(--text-primary);
}

@media (max-width:760px){
  .wrap{flex-direction:column}
  .pane:hover{flex:1}
  .divider{top:50%; left:0; right:0; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg, var(--gold), transparent 80%);}
  .brand-lockup{top:1.4rem}
}