/*
Theme Name:   Holistic WellBeing
Theme URI:    https://wellbeing.forum
Author:       WellBeing.Forum Editorial
Description:  Custom theme for the Holistic WellBeing 8-Pillar platform. Implements the Health/Happiness/Harmony category system and per-pillar color/icon scheme defined by the companion Holistic WellBeing Core plugin. Self-contained — only external dependency is Google Fonts.
Version:      1.0.0
Text Domain:  holistic-wellbeing
*/

:root{
  --navy:#22315C;
  --accent:#22315C; /* overridden per-page by functions.php::wb_output_accent_color */
  --accent-tint:#EEF1F8;
  --bg:#F3F4F7; --white:#FFFFFF; --ink:#20232B; --muted:#5B6270; --line:#E3E6EC;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#12131A; --white:#1B1D24; --ink:#EDEEF2; --muted:#9AA0AC; --line:#2A2D36; }
}
:root[data-theme="dark"]{ --bg:#12131A; --white:#1B1D24; --ink:#EDEEF2; --muted:#9AA0AC; --line:#2A2D36; }
html{scroll-padding-top:env(safe-area-inset-top,0px);}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6;}
a{color:var(--accent); text-decoration:none;}
h1,h2,h3{font-family:'Fraunces',serif; color:var(--navy); font-weight:700;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) h1,h2,h3{ color:#EDEEF2; } }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { color:#EDEEF2; }
[lang="hi"], .lang-hi { font-family:'Hind','Inter',sans-serif; }

.wb-wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
.wb-wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px;}

/* Header */
.wb-header{border-bottom:1px solid var(--line); background:var(--white); position:sticky; top:0; z-index:20;}
.wb-headbar{max-width:1080px; margin:0 auto; padding:16px 28px; padding-top:calc(16px + env(safe-area-inset-top,0px)); display:flex; align-items:center; justify-content:space-between;}
.wb-word{font-family:'Fraunces',serif; font-weight:700; font-size:19px; color:var(--navy);}
.wb-word span{color:var(--accent);}
.wb-nav a{font-size:14px; color:var(--muted); margin-left:22px; font-weight:500;}

/* Badges */
.wb-badge{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13px; padding:6px 14px; border-radius:100px;}
.wb-badge-icon svg{width:100%;height:100%;}

/* Direct answer / AEO */
.wb-direct-answer{background:var(--accent-tint); border-radius:14px; padding:26px 28px; margin:16px 0;}
.wb-direct-answer .wb-label{font-size:12px; font-weight:700; color:var(--accent); margin-bottom:8px;}

/* FAQ */
.wb-faq{margin-top:30px;}
.wb-faq-item{border-top:1px solid var(--line); padding:16px 0;}
.wb-faq-q{font-weight:600; color:var(--navy); margin-bottom:6px;}
.wb-faq-a{color:var(--muted); font-size:14px;}

/* Language switch chip */
.wb-lang-switch{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; background:var(--accent-tint); color:var(--accent); padding:8px 16px; border-radius:100px; margin-top:20px;}

/* Article hero */
.wb-article-hero{padding:36px 0 10px;}
.wb-tier-tag{font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-top:10px; display:block;}
.wb-article-title{font-size:38px; line-height:1.15; margin-top:14px;}
.wb-article-content{padding:20px 0 40px; font-size:16px;}
.wb-article-content h2{font-size:24px; margin-top:32px; margin-bottom:10px;}
.wb-article-content p{margin-top:12px;}

/* Pillar grid (homepage + category archives) */
.wb-pillar-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px;}
.wb-pillar-card{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none; display:block;}
.wb-pillar-card .wb-pdot{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.wb-pillar-card .wb-pdot svg{width:20px;height:20px;}
.wb-pillar-card b{font-size:15px; color:var(--navy); display:block;}
.wb-pillar-card p{font-size:13px; color:var(--muted); margin-top:6px;}
@media (max-width:760px){ .wb-pillar-grid{grid-template-columns:repeat(2,1fr);} }

/* Ring infographic (homepage) */
.wb-ring-box{position:relative; width:100%; max-width:420px; aspect-ratio:1; margin:0 auto;}
.wb-ring{position:absolute; inset:0; border-radius:50%;}
.wb-ring-hole{position:absolute; inset:15%; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; text-align:center;}
.wb-ring-hole b{font-family:'Fraunces',serif; font-size:22px; color:var(--navy); line-height:1.2;}
.wb-chip{position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:6px; background:var(--white); border:1px solid var(--line); border-radius:100px; padding:5px 10px; font-size:11.5px; font-weight:600; white-space:nowrap;}
.wb-chip .wb-cdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
@media (max-width:760px){ .wb-chip{display:none;} .wb-ring-box{max-width:260px;} }

/* Article list (archives) */
.wb-article-list{border-top:1px solid var(--line); margin-top:20px;}
.wb-article-row{display:flex; align-items:center; gap:14px; padding:18px 0; border-bottom:1px solid var(--line);}
.wb-article-row .wb-adot{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.wb-article-row .wb-adot svg{width:18px;height:18px;}
.wb-article-row .wb-atitle{font-size:15px; font-weight:600; color:var(--ink); flex:1;}

/* Buttons */
.wb-btn{display:inline-block; background:var(--accent); color:#fff !important; padding:12px 24px; border-radius:100px; font-weight:600; font-size:15px;}
.wb-btn-outline{display:inline-block; border:1px solid var(--line); color:var(--ink) !important; padding:12px 24px; border-radius:100px; font-weight:600; font-size:15px;}

/* Footer */
.wb-footer{border-top:1px solid var(--line); padding:30px 0 50px; color:var(--muted); font-size:13px; background:var(--white); margin-top:40px;}
.wb-footer a{color:var(--navy); font-weight:600;}

@media (max-width:600px){
  .wb-article-title{font-size:28px;}
}