/* =========================================================
   BioBoost Living — main stylesheet
   Palette + type derived from the brand mockup
   ========================================================= */

:root {
  --bbl-cream:        #F5F1E8; /* page background */
  --bbl-cream-soft:   #EFE9DC; /* alt sections */
  --bbl-panel:        #FBF9F4; /* cards / raised */
  --bbl-forest:       #2E3B22; /* logotype + headings */
  --bbl-forest-deep:  #232D1A; /* darker text */
  --bbl-sage:         #6B7A55; /* secondary green / icons */
  --bbl-sage-light:   #93A178; /* hover / accents */
  --bbl-ink:          #3A3A32; /* body copy */
  --bbl-muted:        #6E6A5E; /* captions */
  --bbl-line:         #D9D2C2; /* hairlines */
  --bbl-btn:          #3D4A2C; /* button green */
  --bbl-btn-hover:    #2E3B22;

  --bbl-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --bbl-sans:  "Jost", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --bbl-script:"Dancing Script", "Brush Script MT", cursive;

  --bbl-wrap: 1240px;
  --bbl-gap: clamp(1rem, 3vw, 2.5rem);
  --bbl-radius: 10px;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bbl-cream);
  color: var(--bbl-ink);
  font-family: var(--bbl-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bbl-sage); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--bbl-forest); }

h1,h2,h3,h4 {
  font-family: var(--bbl-serif);
  color: var(--bbl-forest);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
}

.bbl-wrap { max-width: var(--bbl-wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--bbl-forest); color: #fff; padding: .6rem 1rem; z-index: 999; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; color:#fff; }

/* =========================================================
   HERO
   ========================================================= */
.bbl-hero {
  background: var(--bbl-cream);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.bbl-hero__grid {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 720px) 1fr;
  align-items: stretch;
  min-height: 620px;
}
/* side image panels */
.bbl-hero__side {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100%;
}
.bbl-hero__side--left  { background-color: var(--bbl-cream-soft); }
.bbl-hero__side--right { background-color: var(--bbl-cream-soft); }
/* soft cream feather so sides melt into center */
.bbl-hero__side--left::after,
.bbl-hero__side--right::after {
  content:""; position:absolute; top:0; bottom:0; width:55%;
}
.bbl-hero__side--left::after  { right:0;  background: linear-gradient(to right, rgba(245,241,232,0) 0%, rgba(245,241,232,.55) 55%, var(--bbl-cream) 100%); }
.bbl-hero__side--right::after { left:0;   background: linear-gradient(to left,  rgba(245,241,232,0) 0%, rgba(245,241,232,.55) 55%, var(--bbl-cream) 100%); }
/* placeholder hint ONLY when theme adds the no-image class */
.bbl-hero__side.bbl-hero__side--placeholder::before {
  content: attr(data-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color: var(--bbl-muted); font-family: var(--bbl-sans); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  text-align:center; padding:1rem;
}

/* center column */
.bbl-hero__center {
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  position: relative; z-index: 2;
}
.bbl-hero__logo-badge { width: 128px; height: auto; margin: 0 auto .4rem; border-radius: 50%; }
.bbl-hero__leaf { width: 62px; height:auto; margin: 0 auto .2rem; }

.bbl-hero__title {
  font-family: var(--bbl-serif);
  font-weight: 700;
  letter-spacing: .1em;
  font-size: clamp(2.8rem, 6.4vw, 5rem);
  color: var(--bbl-forest);
  margin: 0 0 .05em;
  text-transform: uppercase;
}
.bbl-hero__subtitle-line {
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  letter-spacing: .5em; text-transform: uppercase;
  font-family: var(--bbl-serif); font-size: clamp(1rem, 2.4vw, 1.6rem); color: var(--bbl-forest);
  margin-bottom: 1rem;
}
.bbl-hero__subtitle-line::before,
.bbl-hero__subtitle-line::after { content:""; height:1px; width:46px; background: var(--bbl-forest); opacity:.6; }

.bbl-hero__tagline {
  font-family: var(--bbl-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(.8rem, 1.6vw, 1rem);
  color: var(--bbl-forest-deep);
  margin: .2rem 0 .1rem;
}
.bbl-hero__tagline-script {
  font-family: var(--bbl-script);
  text-transform: none;
  letter-spacing: normal;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--bbl-sage);
  margin-bottom: 1.6rem;
}

/* feature pillars */
.bbl-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; width:100%; margin-top: .6rem; }
.bbl-feature { text-align: center; }
.bbl-feature__icon { width: 40px; height: 40px; margin: 0 auto .7rem; color: var(--bbl-sage); }
.bbl-feature__icon svg { width:100%; height:100%; display:block; stroke: currentColor; fill:none; }
.bbl-feature__title {
  font-family: var(--bbl-sans); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  font-size: .82rem; color: var(--bbl-forest); margin: 0 0 .4rem; line-height:1.3;
}
.bbl-feature__text { font-size: .82rem; color: var(--bbl-muted); line-height:1.5; margin:0; }

/* =========================================================
   NAV
   ========================================================= */
.bbl-nav {
  background: var(--bbl-panel);
  border-top: 1px solid var(--bbl-line);
  border-bottom: 1px solid var(--bbl-line);
  position: sticky; top: 0; z-index: 50;
}
.bbl-nav__inner { display:flex; align-items:center; justify-content:center; gap: clamp(1rem, 3vw, 2.6rem); min-height: 64px; position:relative; }
.bbl-nav__menu { list-style:none; display:flex; align-items:center; gap: clamp(1rem, 3vw, 2.6rem); margin:0; padding:0; flex-wrap:wrap; justify-content:center; }
.bbl-nav__menu a {
  font-family: var(--bbl-sans); text-transform: uppercase; letter-spacing:.12em; font-size:.8rem;
  color: var(--bbl-forest-deep); padding: .4rem 0; position:relative;
}
.bbl-nav__menu a:hover { color: var(--bbl-sage); }
.bbl-nav__menu .current-menu-item > a::after,
.bbl-nav__menu a:hover::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--bbl-forest);
}
.bbl-nav__search { position:absolute; right:0; top:50%; transform: translateY(-50%); background:none; border:none; cursor:pointer; color: var(--bbl-forest); padding:.4rem; }
.bbl-nav__search svg { width:18px; height:18px; }
.bbl-nav__toggle { display:none; }

/* =========================================================
   ABOUT SECTION
   ========================================================= */
.bbl-about { background: var(--bbl-cream-soft); position:relative; overflow:hidden; padding: clamp(3rem, 6vw, 5rem) 0; }
.bbl-about__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items:center; }
.bbl-about__media img { border-radius: var(--bbl-radius); box-shadow: 0 18px 40px rgba(46,59,34,.12); }
.bbl-about__eyebrow { font-family: var(--bbl-sans); letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; color: var(--bbl-sage); margin-bottom:.8rem; }
.bbl-about__title { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height:1.05; margin-bottom: 1rem; }
.bbl-about__text { color: var(--bbl-ink); max-width: 46ch; margin-bottom: 1.6rem; }
.bbl-about__watermark { position:absolute; right:-40px; bottom:-40px; width: 320px; opacity:.10; color: var(--bbl-sage); pointer-events:none; }
.bbl-about__watermark svg { width:100%; height:auto; }

/* =========================================================
   BUTTONS
   ========================================================= */
.bbl-btn {
  display:inline-block; background: var(--bbl-btn); color:#fff !important;
  font-family: var(--bbl-sans); text-transform:uppercase; letter-spacing:.14em; font-size:.8rem;
  padding: .9rem 1.8rem; border-radius: 3px; border:none; cursor:pointer; transition: background .2s ease, transform .2s ease;
}
.bbl-btn:hover { background: var(--bbl-btn-hover); transform: translateY(-1px); color:#fff !important; }

/* =========================================================
   GENERIC CONTENT (posts, pages, archives)
   ========================================================= */
.bbl-main { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.bbl-content-grid { display:grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(2rem,4vw,3.5rem); }
@media (max-width: 900px){ .bbl-content-grid{ grid-template-columns:1fr; } }

.bbl-page-header { text-align:center; margin-bottom: 2.5rem; }
.bbl-page-header h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.bbl-page-header .bbl-eyebrow { font-family:var(--bbl-sans); letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; color:var(--bbl-sage); margin-bottom:.6rem; }

.bbl-card {
  background: var(--bbl-panel); border:1px solid var(--bbl-line); border-radius: var(--bbl-radius);
  overflow:hidden; margin-bottom: 2rem; transition: box-shadow .25s ease, transform .25s ease;
}
.bbl-card:hover { box-shadow: 0 16px 34px rgba(46,59,34,.10); transform: translateY(-2px); }
.bbl-card__media img { width:100%; aspect-ratio: 16/10; object-fit: cover; }
.bbl-card__body { padding: 1.4rem 1.6rem 1.7rem; }
.bbl-card__meta { font-family:var(--bbl-sans); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bbl-sage); margin-bottom:.5rem; }
.bbl-card__title { font-size: 1.5rem; margin-bottom:.5rem; }
.bbl-card__title a { color: var(--bbl-forest); }
.bbl-card__title a:hover { color: var(--bbl-sage); }
.bbl-card__excerpt { color: var(--bbl-muted); font-size:.95rem; }
.bbl-readmore { display:inline-block; margin-top:.9rem; font-family:var(--bbl-sans); text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; color:var(--bbl-forest); }
.bbl-readmore:hover { color: var(--bbl-sage); }

/* single post */
.bbl-article { background: var(--bbl-panel); border:1px solid var(--bbl-line); border-radius: var(--bbl-radius); padding: clamp(1.6rem, 4vw, 3rem); }
.bbl-article__title { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom:.4rem; }
.bbl-article__meta { font-family:var(--bbl-sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bbl-sage); margin-bottom:1.6rem; }
.bbl-article__content > * { margin-bottom: 1.1rem; }
.bbl-article__content h2 { font-size:1.9rem; margin-top:2rem; }
.bbl-article__content h3 { font-size:1.45rem; margin-top:1.6rem; }
.bbl-article__content a { color: var(--bbl-sage); text-decoration: underline; text-underline-offset:3px; }
.bbl-article__content img { border-radius: var(--bbl-radius); }
.bbl-article__content blockquote {
  border-left:3px solid var(--bbl-sage); background: var(--bbl-cream-soft);
  margin: 1.6rem 0; padding: 1rem 1.4rem; font-family: var(--bbl-serif); font-size:1.25rem; color: var(--bbl-forest);
}

/* sidebar */
.bbl-sidebar .widget { background: var(--bbl-panel); border:1px solid var(--bbl-line); border-radius: var(--bbl-radius); padding:1.3rem 1.4rem; margin-bottom:1.6rem; }
.bbl-sidebar .widget-title { font-size:1.15rem; margin-bottom:.8rem; padding-bottom:.5rem; border-bottom:1px solid var(--bbl-line); }
.bbl-sidebar ul { list-style:none; margin:0; padding:0; }
.bbl-sidebar li { padding:.35rem 0; border-bottom:1px dashed var(--bbl-line); font-size:.92rem; }
.bbl-sidebar li:last-child { border-bottom:none; }

/* =========================================================
   FOOTER
   ========================================================= */
.bbl-footer { background: var(--bbl-forest); color: #DCE0D0; padding: clamp(2.5rem,5vw,3.5rem) 0 1.5rem; margin-top: 2rem; }
.bbl-footer a { color:#DCE0D0; }
.bbl-footer a:hover { color:#fff; }
.bbl-footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
@media (max-width:760px){ .bbl-footer__grid{ grid-template-columns:1fr; } }
.bbl-footer__brand { font-family:var(--bbl-serif); font-size:1.6rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:.6rem; }
.bbl-footer__tag { color:#AEB79A; font-size:.92rem; max-width:34ch; }
.bbl-footer h4 { color:#fff; font-family:var(--bbl-sans); text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; margin-bottom:.9rem; }
.bbl-footer ul { list-style:none; margin:0; padding:0; }
.bbl-footer li { padding:.28rem 0; font-size:.92rem; }
.bbl-footer__bottom { border-top:1px solid rgba(255,255,255,.14); padding-top:1.2rem; text-align:center; font-size:.82rem; color:#AEB79A; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .bbl-hero__grid { grid-template-columns: 1fr; }
  .bbl-hero__side { display:none; }
  .bbl-hero__center { padding-top: 2.5rem; }
}
@media (max-width: 720px) {
  .bbl-features { grid-template-columns: repeat(2, 1fr); gap:1.6rem; }
  .bbl-about__grid { grid-template-columns:1fr; }
  .bbl-about__media { order:-1; }
}
@media (max-width: 480px) {
  .bbl-hero__title { letter-spacing:.08em; }
  .bbl-hero__subtitle-line { letter-spacing:.3em; }
}

/* accessibility: focus + reduced motion */
a:focus-visible, button:focus-visible, .bbl-btn:focus-visible {
  outline: 3px solid var(--bbl-sage-light); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}