/*
Theme Name: Amara Wellness
Theme URI: https://example.com
Author: Amara Wellness House
Description: Custom theme for Amara Wellness House — private massage & wellness studio. Therapist cards are managed under "Team Cards" in wp-admin.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: amara-wellness
*/

:root{
  --ink:#100D0A;
  --panel:#1B1510;
  --panel-2:#221A13;
  --line:#332821;
  --gold:#B98D4F;
  --gold-bright:#DEBD84;
  --cream:#EFE7D8;
  --cream-dim:#AFA48F;
  --rust:#7A4632;
  --sage:#7C8471;
  --radius:2px;
  --wrap:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Work Sans',sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--ink);}

/* subtle grain overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:200;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}

h1,h2,h3{font-family:'Fraunces',serif; font-weight:500; margin:0; line-height:1.05;}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(16,13,10,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  max-width:var(--wrap); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  font-size:20px; letter-spacing:.02em;
}
.brand svg{width:26px; height:26px; flex-shrink:0;}
.nav-links{display:flex; gap:5px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.nav-links a{
  font-size:12px; letter-spacing:.03em; color:var(--cream-dim);
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel-2);
  transition:all .25s ease;
}
.nav-links a:hover{color:var(--gold-bright); border-color:var(--gold);}
.nav-links a.active{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px;
  border:1px solid var(--gold);
  color:var(--gold-bright);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--radius);
  transition:all .3s ease;
  background:transparent;
  cursor:pointer;
}
.btn:hover{background:var(--gold); color:var(--ink);}
.btn.solid{background:var(--gold); color:var(--ink);}
.btn.solid:hover{background:var(--gold-bright); border-color:var(--gold-bright);}
.menu-toggle{display:none; background:none; border:none; color:var(--cream); font-size:22px; cursor:pointer; padding:4px 6px;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:120px 32px 100px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(185,141,79,.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(122,70,50,.14), transparent 60%),
    var(--ink);
}
.hero-inner{max-width:var(--wrap); margin:0 auto; position:relative; z-index:2;}
.hero .eyebrow{margin-bottom:22px; display:block;}
.hero h1{
  font-size:clamp(42px,7vw,84px);
  max-width:820px;
  color:var(--cream);
}
.hero h1 em{
  font-style:italic; color:var(--gold-bright); font-weight:400;
}
.hero p.lede{
  max-width:480px;
  margin:28px 0 40px;
  font-size:17px; line-height:1.7;
  color:var(--cream-dim);
}
.hero-actions{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.hero-actions .link-arrow{
  font-size:13px; letter-spacing:.05em; color:var(--cream);
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .3s ease, color .3s ease;
}
.hero-actions .link-arrow:hover{border-color:var(--gold); color:var(--gold-bright);}

.stroke-line{
  position:absolute; top:0; right:-5%; width:640px; max-width:60vw; height:auto;
  z-index:1; opacity:.9;
}
.stroke-line path{
  fill:none; stroke:var(--gold); stroke-width:1.1;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 2.4s cubic-bezier(.65,0,.35,1) .3s forwards;
}
@keyframes draw{ to{stroke-dashoffset:0;} }

.hero-stats{
  display:flex; gap:56px; margin-top:76px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:32px;
}
.hero-stats .stat b{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  font-size:30px; color:var(--gold-bright); display:block;
}
.hero-stats .stat span{
  font-size:12px; color:var(--cream-dim); letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- DIVIDER ---------- */
.divider{padding:0 32px;}
.divider svg{display:block; max-width:var(--wrap); margin:0 auto; width:100%; height:28px; opacity:.5;}

/* ---------- INTRO ---------- */
.intro{padding:90px 32px 40px;}
.intro-inner{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.3fr; gap:64px; align-items:start;
}
.intro h2{font-size:clamp(30px,4vw,44px); font-style:italic; color:var(--cream);}
.intro p{font-size:16px; line-height:1.8; color:var(--cream-dim); max-width:460px;}

/* ---------- BRANCH HEADING / ACTIONS ---------- */
.branch-heading h2{font-size:clamp(22px,2.6vw,30px);}
.branch-address{
  font-size:13px; line-height:1.6; color:var(--cream-dim);
  margin-top:10px; max-width:320px;
}
.branch-info p{margin-bottom:22px;}
.branch-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- TEAM GRID ---------- */
.team{padding:60px 32px 120px;}
.team-grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--line);
  border:1px solid var(--line);
}
.team-empty{
  grid-column:1/-1;
  padding:60px 26px;
  text-align:center;
  color:var(--cream-dim);
  background:var(--panel);
  font-size:14px;
}
.card{
  background:var(--panel);
  padding:34px 26px 30px;
  display:flex; flex-direction:column;
  transition:background .35s ease, transform .35s ease;
  position:relative;
}
.card:hover{background:var(--panel-2); transform:translateY(-3px);}

.avatar{
  width:100%;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold);
  font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:24px;
  color:var(--gold-bright);
  margin-bottom:22px;
  position:relative;
  overflow:hidden;
  background:var(--panel-2);
}
.avatar img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 15%;
  display:block;
}
.avatar.placeholder{
  background:var(--panel-2);
  border-style:dashed;
  border-color:var(--line);
}
.avatar.placeholder svg{width:34px; height:34px; opacity:.5;}

.card h3{font-size:19px; color:var(--cream); margin-bottom:4px; font-style:italic;}
.card .role{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.card .bio{
  font-size:13.5px; line-height:1.65; color:var(--cream-dim);
  margin-bottom:18px; flex-grow:1;
}
.card .meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--cream-dim);
  border-top:1px solid var(--line); padding-top:14px;
  font-family:'IBM Plex Mono',monospace; letter-spacing:.02em;
}
.card .meta .exp{color:var(--gold-bright);}

/* ---------- CTA / FOOTER ---------- */
.cta{
  padding:110px 32px;
  background:linear-gradient(180deg, var(--ink), #0B0906);
  text-align:center;
  border-top:1px solid var(--line);
}
.cta h2{
  font-size:clamp(32px,5vw,56px); font-style:italic;
  max-width:640px; margin:0 auto 26px;
  color:var(--cream);
}
.cta p{color:var(--cream-dim); margin-bottom:36px; font-size:16px;}

footer{
  padding:48px 32px;
  border-top:1px solid var(--line);
}
.footer-inner{
  max-width:var(--wrap); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.footer-inner .brand{font-size:16px;}
.footer-links{display:flex; gap:28px;}
.footer-links a{font-size:12px; color:var(--cream-dim);}
.footer-links a:hover{color:var(--gold-bright);}
.fine{font-size:11px; color:#665e52; margin-top:10px;}

@media(max-width:980px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .intro-inner{grid-template-columns:1fr; gap:24px;}
}
@media(max-width:640px){
  .menu-toggle{display:block;}
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:6px;
    background:var(--panel);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:10px 16px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 16px; text-align:center;}
  .nav-links .btn{margin:10px 24px 4px; justify-content:center;}
  .hero{padding:90px 20px 70px;}
  .hero-stats{gap:32px;}
  .team-grid{grid-template-columns:1fr;}
  .wrap,.hero-inner,.intro-inner,.footer-inner{padding-left:8px; padding-right:8px;}
}

@media (prefers-reduced-motion: reduce){
  .stroke-line path{animation:none; stroke-dashoffset:0;}
  .card{transition:none;}
}