/* =============================================================================
   FILE: site-theme.css   (2026 redesign — black / cream / gold)
   PURPOSE: Public website look: menu bar, footer, typography, buttons, and
            restyling of the shared public-page building blocks.
   LOADED BY: layouts/base_public.html, AFTER base.css and public.css.
   Colors come from Edit Website → Theme & Colors (CSS variables below).
   ============================================================================= */

:root {
  --bv-black: var(--color-navbar, #0E0D0B);
  --bv-black-2: #171512;
  --bv-cream: var(--color-bg, #F3EEE7);
  --bv-cream-2: #EAE3D9;
  --bv-paper: #FBF8F3;
  --bv-gold: var(--color-primary, #A67C45);
  --bv-gold-dark: var(--color-accent, #8C6634);
  --bv-gold-light: #CFAE74;          /* gold used on dark backgrounds */
  --bv-ink: var(--color-headers, #1C1915);
  --bv-text: var(--color-text, #4A443D);
  --bv-muted: #7C746A;
  --bv-line: rgba(166, 124, 69, 0.35);
  --bv-on-dark: #F3EEE7;
  --bv-on-dark-muted: #B9B0A3;

  --bv-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --bv-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bv-script: 'Allura', 'Playfair Display', cursive;

  --bv-max: 1240px;
  --bv-gutter: clamp(16px, 4vw, 48px);
  --bv-nav-h: 84px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body.bv-site {
  font-family: var(--bv-sans);
  background: var(--bv-cream);
  color: var(--bv-text);
  font-size: 15px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
body.bv-menu-open { overflow: hidden; }
.bv-site img { max-width: 100%; }
.bv-site h1, .bv-site h2, .bv-site h3 {
  font-family: var(--bv-serif);
  font-weight: 400;
  color: var(--bv-ink);
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.bv-site h4, .bv-site h5 { font-family: var(--bv-sans); color: var(--bv-ink); }
.bv-site a { color: var(--bv-gold-dark); }
.bv-site .page { min-height: 50vh; }

.bv-container { width: 100%; max-width: var(--bv-max); margin: 0 auto; padding: 0 var(--bv-gutter); }
.bv-eyebrow {
  display: inline-block;
  font-family: var(--bv-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bv-gold);
}
.bv-divider { display: flex; align-items: center; gap: 12px; color: var(--bv-gold); }
.bv-divider::before, .bv-divider::after { content: ""; height: 1px; flex: 1; background: var(--bv-line); }
.bv-divider .bv-icon { width: 22px; height: 22px; flex: none; }
.bv-icon { width: 24px; height: 24px; display: block; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.bv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--bv-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding: 15px 28px; border-radius: 3px; border: 1px solid transparent;
  cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.bv-btn .bv-icon { width: 16px; height: 16px; transition: transform .25s ease; }
.bv-btn:hover .bv-icon { transform: translateX(3px); }
.bv-btn-sm { padding: 10px 16px; font-size: 11px; letter-spacing: 0.12em; }
.bv-site a.bv-btn-gold, .bv-btn-gold { background: var(--bv-gold); color: #fff; }
.bv-site a.bv-btn-gold:hover, .bv-btn-gold:hover { background: var(--bv-gold-dark); color: #fff; box-shadow: 0 8px 22px rgba(140, 102, 52, 0.28); }
.bv-site a.bv-btn-outline, .bv-btn-outline { border-color: rgba(243, 238, 231, 0.55); color: var(--bv-on-dark); background: transparent; }
.bv-site a.bv-btn-outline:hover, .bv-btn-outline:hover { border-color: var(--bv-gold-light); color: var(--bv-gold-light); }
.bv-site a.bv-btn-outline-gold, .bv-btn-outline-gold { border-color: var(--bv-gold-light); color: var(--bv-gold-light); background: transparent; }
.bv-site a.bv-btn-outline-gold:hover, .bv-btn-outline-gold:hover { background: var(--bv-gold-light); color: var(--bv-black); }

/* ── Menu bar ──────────────────────────────────────────────────────────── */
.bv-nav {
  position: sticky; top: 0; z-index: 1030;
  background: var(--bv-black);
  border-bottom: 1px solid rgba(207, 174, 116, 0.14);
  transition: box-shadow .25s ease;
}
.bv-nav.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.bv-nav-inner {
  max-width: 1400px; margin: 0 auto; height: var(--bv-nav-h);
  padding: 0 var(--bv-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.bv-nav-brand { display: flex; align-items: center; flex: none; }
.bv-nav-logo { height: 54px; width: auto; display: block; }
.bv-nav-menu { display: flex; align-items: center; gap: 36px; }
.bv-nav-links { list-style: none; display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; }
.bv-site a.bv-nav-link {
  position: relative; display: block; padding: 6px 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bv-on-dark); text-decoration: none; transition: color .2s ease;
}
.bv-nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--bv-gold-light); transition: width .3s ease;
}
.bv-site a.bv-nav-link:hover, .bv-site a.bv-nav-link.is-active { color: var(--bv-gold-light); }
.bv-nav-link:hover::after, .bv-nav-link.is-active::after { width: 100%; }
.bv-nav-actions { display: flex; align-items: center; gap: 12px; }

.bv-nav-toggle {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
}
.bv-nav-toggle span {
  position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--bv-gold-light);
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.bv-nav-toggle span:nth-child(1) { top: 15px; }
.bv-nav-toggle span:nth-child(2) { top: 21px; }
.bv-nav-toggle span:nth-child(3) { top: 27px; }
.bv-nav.is-open .bv-nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.bv-nav.is-open .bv-nav-toggle span:nth-child(2) { opacity: 0; }
.bv-nav.is-open .bv-nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.bv-nav-backdrop { display: none; }

@media (max-width: 1100px) {
  .bv-nav-links { gap: 22px; }
  .bv-nav-menu { gap: 24px; }
}
@media (max-width: 1024px) {
  :root { --bv-nav-h: 72px; }
  .bv-nav-logo { height: 46px; }
  .bv-nav-toggle { display: block; }
  .bv-nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bv-black);
    border-top: 1px solid rgba(207, 174, 116, 0.14);
    padding: 8px var(--bv-gutter) 28px;
    max-height: calc(100vh - var(--bv-nav-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .bv-nav.is-open .bv-nav-menu {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .25s ease, transform .25s ease;
  }
  .bv-nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .bv-nav-links li { border-bottom: 1px solid rgba(243, 238, 231, 0.08); }
  .bv-site a.bv-nav-link { padding: 16px 0; font-size: 14px; }
  .bv-nav-link::after { display: none; }
  .bv-nav-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 22px; }
  .bv-nav-actions .bv-btn { padding: 15px 18px; font-size: 12px; }
  .bv-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1020;
    background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .bv-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.bv-footer { background: var(--bv-black); color: var(--bv-on-dark-muted); font-size: 14px; }
.bv-footer-inner {
  max-width: var(--bv-max); margin: 0 auto;
  padding: 64px var(--bv-gutter) 44px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr; gap: 40px;
}
.bv-footer-logo { height: 70px; width: auto; display: block; margin-bottom: 18px; }
.bv-footer-tagline { color: var(--bv-on-dark-muted); max-width: 300px; margin: 0 0 20px; line-height: 1.7; }
.bv-footer-social { display: flex; gap: 14px; }
.bv-footer-social a { color: var(--bv-gold-light); display: inline-flex; transition: color .2s ease, transform .2s ease; }
.bv-footer-social a:hover { color: #fff; transform: translateY(-2px); }
.bv-footer-social .bv-icon { width: 20px; height: 20px; }
.bv-site .bv-footer h4 {
  font-family: var(--bv-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bv-gold-light); margin: 6px 0 18px;
}
.bv-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bv-site .bv-footer a { color: var(--bv-on-dark); text-decoration: none; transition: color .2s ease; }
.bv-site .bv-footer a:hover { color: var(--bv-gold-light); }
.bv-footer-contact li a { display: inline-flex; align-items: center; gap: 12px; word-break: break-word; }
.bv-footer-contact .bv-icon { width: 18px; height: 18px; color: var(--bv-gold-light); flex: none; }
.bv-footer-contact .bv-btn { margin-top: 24px; }
.bv-footer-bottom {
  max-width: var(--bv-max); margin: 0 auto; padding: 22px var(--bv-gutter) 28px;
  border-top: 1px solid rgba(243, 238, 231, 0.1);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px;
}
.bv-footer-bottom p { margin: 0; }
.bv-footer-motto { color: var(--bv-gold-light); letter-spacing: 0.18em; text-transform: uppercase; font-size: 11.5px; font-weight: 600; }

@media (max-width: 1024px) {
  .bv-footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .bv-footer-brand { grid-column: 1 / -1; }
  .bv-footer-contact { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .bv-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 48px; }
  .bv-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── Legacy menu/footer pieces (no longer used — hide if any remain) ────── */
.bv-site > .nav, .bv-site > .nav-backdrop, .bv-site > .public-footer,
.bv-site > .public-header, .bv-site > .mobile-menu { display: none !important; }

/* =============================================================================
   Shared public-page building blocks (About, Products, Labs, FAQ, Shop, legal…)
   ============================================================================= */
.bv-site .hero {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(207, 174, 116, 0.16), transparent 55%),
    var(--bv-black);
  padding: clamp(56px, 9vw, 104px) var(--bv-gutter);
  text-align: center;
}
.bv-site .hero-content { gap: 14px; max-width: 820px; margin: 0 auto; }
.bv-site .hero-title {
  font-family: var(--bv-serif); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--bv-on-dark); text-shadow: none; letter-spacing: -0.01em;
}
.bv-site .hero-title::after {
  content: ""; display: block; width: 64px; height: 1px; margin: 22px auto 0;
  background: var(--bv-gold-light);
}
.bv-site .hero-subtitle, .bv-site .hero p { color: var(--bv-on-dark-muted); font-size: 16px; line-height: 1.75; }
.bv-site .btn-hero-cta, .bv-site a.btn-hero-cta {
  background: var(--bv-gold); color: #fff; border-radius: 3px;
  padding: 14px 26px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.bv-site .btn-hero-cta:hover { background: var(--bv-gold-dark); transform: none; }

/* Section titles on inner pages */
.bv-site .features-title, .bv-site .services-title, .bv-site .faq-section-title,
.bv-site .shop-section-title, .bv-site .founders-title, .bv-site .about-mission h2,
.bv-site .testimonials-title {
  font-family: var(--bv-serif); font-weight: 400; color: var(--bv-ink);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}
.bv-site .features-subtitle, .bv-site .faq-section-subtitle, .bv-site .shop-section-subtitle,
.bv-site .services-subtitle { color: var(--bv-muted); }

/* Cards */
.bv-site .features-card, .bv-site .service-card, .bv-site .shop-card, .bv-site .faq-item {
  background: var(--bv-paper);
  border: 1px solid rgba(166, 124, 69, 0.18);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.bv-site .features-card:hover, .bv-site .service-card:hover, .bv-site .shop-card:hover {
  border-color: rgba(166, 124, 69, 0.45);
  box-shadow: 0 14px 34px rgba(28, 25, 21, 0.08);
  /* tint from Edit Website → Theme & Colors → "Card hover" */
  background: linear-gradient(var(--color-card-hover, transparent), var(--color-card-hover, transparent)), var(--bv-paper);
}
.bv-site .features-card h3, .bv-site .shop-card-name {
  font-family: var(--bv-serif); font-weight: 500; color: var(--bv-ink);
}
.bv-site .features-card p, .bv-site .features-card li, .bv-site .shop-card-desc,
.bv-site .faq-answer p, .bv-site .founders-text p, .bv-site .about-mission p { color: var(--bv-text); }
.bv-site .features-card h4, .bv-site .treatment-sub { color: var(--bv-gold); letter-spacing: 0.08em; }
.bv-site .faq-question { font-family: var(--bv-serif); font-size: 1.1rem; color: var(--bv-ink); }
.bv-site .faq-icon { color: var(--bv-gold); }

/* Founders / About */
.bv-site .founders-name { font-family: var(--bv-script); color: var(--bv-gold); font-weight: 400; font-size: 2.2rem; }
.bv-site .founders-photo { border-radius: 4px; box-shadow: 0 24px 50px rgba(28, 25, 21, 0.18); }

/* Generic buttons from older pages */
.bv-site .service-btn, .bv-site .shop-card-btn, .bv-site .shop-card-order-btn {
  background: var(--bv-gold); color: #fff; border-radius: 3px; letter-spacing: 0.08em;
}
.bv-site .service-btn:hover, .bv-site .shop-card-btn:hover, .bv-site .shop-card-order-btn:hover { background: var(--bv-gold-dark); }

/* Legal pages: body copy was using the accent color — use readable text color */
.bv-site .legal-page h1 { font-family: var(--bv-serif); font-weight: 400; font-size: clamp(2rem, 4vw, 2.6rem); }
.bv-site .legal-page h2 { font-family: var(--bv-serif); font-weight: 500; }
.bv-site .legal-page p, .bv-site .legal-page li { color: var(--bv-text); }
.bv-site .legal-date { color: var(--bv-muted); }

/* Forms on public pages */
.bv-site .page input[type="text"], .bv-site .page input[type="email"], .bv-site .page input[type="tel"],
.bv-site .page textarea, .bv-site .page select {
  font-family: var(--bv-sans);
}

/* ── Page headers that use their own dark band (Products, Labs, Services,
      Cart…) — headings were inheriting the dark heading color. ─────────── */
.bv-site .products-hero, .bv-site .labs-hero, .bv-site .lp-hero {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(207, 174, 116, 0.16), transparent 55%),
    var(--bv-black);
  padding: clamp(56px, 9vw, 104px) var(--bv-gutter);
}
.bv-site .hero h1, .bv-site .products-hero h1, .bv-site .labs-hero h1, .bv-site .lp-hero h1,
.bv-site .products-cta h2, .bv-site .shop-coming-soon-banner h2, .bv-site .shop-coming-soon-banner h3 {
  font-family: var(--bv-serif); font-weight: 400; color: var(--bv-on-dark); text-shadow: none;
  font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.01em;
}
.bv-site .products-cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.bv-site .hero h1::after, .bv-site .products-hero h1::after, .bv-site .labs-hero h1::after, .bv-site .lp-hero h1::after {
  content: ""; display: block; width: 64px; height: 1px; margin: 22px auto 0; background: var(--bv-gold-light);
}
.bv-site .products-hero p, .bv-site .labs-hero p, .bv-site .lp-hero p,
.bv-site .products-cta p, .bv-site .shop-coming-soon-inner p { color: var(--bv-on-dark-muted); }
.bv-site .products-cta { background: var(--bv-black); }
.bv-site .products-cta .cta-btn { background: var(--bv-gold); color: #fff; border-radius: 3px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 12.5px; font-weight: 600; }
.bv-site .products-cta .cta-btn:hover { background: var(--bv-gold-dark); }
.bv-site .shop-coming-soon-banner { background: var(--bv-black); }

/* About → mission block becomes a light section so the dark text reads */
.bv-site .about-mission { background: var(--bv-paper); border-bottom: 1px solid rgba(166, 124, 69, 0.15); }

/* Services page: items already start with a ✓, so drop the extra bullet dots */
.bv-site .service-description ul { list-style: none; padding-left: 0; }

/* About → founders photo: use a portrait frame (the photo is portrait) so
   nobody's head gets cropped. The focal point from Edit Website still applies. */
.bv-site .founders-photo { aspect-ratio: 2 / 3; object-fit: cover; border-width: 1px; }
.bv-site .founders-photo-wrap { width: 320px; }
@media (max-width: 768px) { .bv-site .founders-photo-wrap { width: 100%; max-width: 340px; } }