/* =========================================================================
   Herbal Hair & Spa — design system + layout
   Brand tokens (--herbal-*) are injected from PHP (functions.php).
   ========================================================================= */

:root {
  /* Fallbacks if inline tokens fail to load */
  --herbal-green: #1F4A38;
  --herbal-green-dark: #163528;
  --herbal-cream: #ECE4D6;
  --herbal-gold: #C8A24C;
  --herbal-gold-light: #E3C97E;
  --herbal-gold-dark: #8A6D24; /* AA-contrast gold for text on light backgrounds */
  --herbal-ink: #2B2B2B;
  --herbal-white: #FFFFFF;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1180px;
  --gap: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(3rem, 7vw, 6rem);
  --radius: 14px;
}

/* ---- Reset-ish ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--herbal-ink);
  background: var(--herbal-white);
  line-height: 1.6;
  font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--herbal-green); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }

.herbal-container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.herbal-center { text-align: center; margin-top: 2rem; }
.herbal-center-text { text-align: center; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.herbal-skip-link:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 1000; width: auto; height: auto;
  clip: auto; background: #fff; padding: .6rem 1rem; border-radius: 6px;
}

/* ---- Buttons ------------------------------------------------------------ */
.herbal-btn {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; font-size: .82rem;
  padding: .9rem 1.8rem; border-radius: 999px; text-decoration: none;
  cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease;
  border: 2px solid transparent;
}
.herbal-btn:hover { transform: translateY(-1px); }
.herbal-btn--light { background: var(--herbal-white); color: var(--herbal-green-dark); }
.herbal-btn--light:hover { background: var(--herbal-cream); }
.herbal-btn--dark { background: var(--herbal-green-dark); color: #fff; }
.herbal-btn--dark:hover { background: #0e261c; }
.herbal-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.herbal-btn--outline:hover { background: rgba(255,255,255,.12); }
.herbal-btn--outline-dark { background: transparent; color: var(--herbal-green-dark); border-color: var(--herbal-green-dark); }
.herbal-btn--outline-dark:hover { background: var(--herbal-green-dark); color: #fff; }
.herbal-btn--block { display: block; width: 100%; text-align: center; }

/* ---- Eyebrows / titles -------------------------------------------------- */
.herbal-eyebrow {
  text-transform: uppercase; letter-spacing: .25em; font-size: .78rem;
  font-weight: 600; color: var(--herbal-gold-dark); margin: 0 0 .8rem;
}
.herbal-eyebrow--light { color: var(--herbal-gold-light); }
.herbal-section-title { font-size: clamp(1.9rem, 4.5vw, 3rem); color: var(--herbal-green-dark); }
.herbal-section-title--light { color: #fff; }

/* ---- Promo bar (top strip) --------------------------------------------- */
.herbal-promo-bar { background: #000; color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.herbal-promo-bar .herbal-container { padding-block: .55rem; text-align: center; }

/* ---- Header ------------------------------------------------------------- */
.herbal-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(31,74,56,.0); /* transparent over hero; JS could solidify on scroll later */
  background: var(--herbal-green);
}
.herbal-header__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: .8rem; }
.herbal-logo img, .herbal-header__brand img { height: 44px; width: auto; }
.herbal-nav { margin-left: auto; }
.herbal-menu { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.herbal-menu a {
  color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: .08em;
  font-size: .82rem; font-weight: 500; padding: .4rem 0; border-bottom: 2px solid transparent;
}
.herbal-menu a:hover { border-bottom-color: var(--herbal-gold-dark); }
.herbal-header__cta { display: flex; align-items: center; gap: 1rem; }
.herbal-phone { color: #fff; text-decoration: none; font-size: .82rem; letter-spacing: .06em; white-space: nowrap; }
.herbal-phone:hover { color: var(--herbal-gold-light); }
.herbal-account-link {
  color: #fff; text-decoration: none; font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent;
}
.herbal-account-link:hover { color: var(--herbal-gold-light); border-bottom-color: var(--herbal-gold-dark); }

.herbal-nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: .4rem; margin-left: auto;
}
.herbal-nav-toggle span { width: 26px; height: 2px; background: #fff; display: block; }

/* ---- Hero --------------------------------------------------------------- */
.herbal-hero {
  background-size: cover; background-position: center; color: #fff;
  min-height: clamp(520px, 80vh, 760px); display: flex; align-items: center; text-align: center;
}
.herbal-hero__inner { max-width: 760px; margin-inline: auto; padding-block: var(--section-y); }
.herbal-hero__title { font-size: clamp(2.6rem, 7vw, 5rem); color: #fff; margin-bottom: 1rem; }
.herbal-hero__sub { font-size: clamp(1rem, 2.2vw, 1.25rem); margin: 0 auto 2rem; max-width: 36ch; opacity: .95; }

.herbal-hero__badge {
  display: inline-block; background: rgba(200,162,76,.18); border: 1px solid var(--herbal-gold-light);
  padding: .35rem 1rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.herbal-hero__cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.herbal-hero__trust { margin-top: 1.6rem; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; opacity: .85; }

/* ---- Value props -------------------------------------------------------- */
.herbal-valueprops { background: var(--herbal-cream); }
.herbal-valueprops__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); padding-block: clamp(2rem,4vw,3rem); }
.herbal-vp { text-align: center; }
.herbal-vp__icon { font-size: 1.8rem; color: var(--herbal-gold-dark); display: block; margin-bottom: .5rem; }
.herbal-vp__title { color: var(--herbal-green); font-size: 1.15rem; margin-bottom: .3rem; }
.herbal-vp p { margin: 0; color: #6a6256; font-size: .92rem; }

/* ---- Email signup discount --------------------------------------------- */
.herbal-signup { background: var(--herbal-green-dark); color: #fff; text-align: center; }
.herbal-signup__inner { padding-block: var(--section-y); max-width: 680px; }
.herbal-signup__text { opacity: .9; margin: 0 auto 2rem; max-width: 50ch; }
.herbal-signup__form { display: grid; gap: 1rem; }
.herbal-signup__row { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.herbal-signup__row input {
  flex: 1 1 280px; max-width: 360px; padding: .95rem 1.2rem; border-radius: 999px;
  border: 0; font: inherit; color: var(--herbal-ink);
}
.herbal-signup__success { background: rgba(255,255,255,.1); padding: 1.6rem; border-radius: var(--radius); font-size: 1.05rem; }
.herbal-signup__code {
  margin-top: 1rem; font-family: var(--font-display); font-size: 1.8rem; letter-spacing: .1em;
  color: var(--herbal-gold-light); border: 2px dashed var(--herbal-gold); border-radius: 10px;
  display: inline-block; padding: .5rem 1.5rem;
}
.herbal-consent--light { color: rgba(255,255,255,.85); justify-content: center; max-width: 46ch; margin-inline: auto; }

/* ---- Service card CTA + sticky mobile book ------------------------------ */
.herbal-card__link { display: inline-block; margin-top: .6rem; color: var(--herbal-gold-dark); font-weight: 600; font-size: .85rem; text-decoration: none; }
.herbal-card__link:hover { text-decoration: underline; }

.herbal-sticky-book {
  display: none; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90;
  background: var(--herbal-gold); color: var(--herbal-green-dark); text-align: center;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  padding: 1rem; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* ---- Grand opening band ------------------------------------------------- */
.herbal-promo-band { background: var(--herbal-green); color: #fff; text-align: center; }
.herbal-promo-band .herbal-container { padding-block: var(--section-y); }
.herbal-promo-band__list { list-style: none; margin: 1.5rem auto 0; padding: 0; max-width: 540px; }
.herbal-promo-band__list li { position: relative; padding: .4rem 0 .4rem 1.5rem; }
.herbal-promo-band__list li::before { content: "•"; color: var(--herbal-gold-light); position: absolute; left: 0; }

/* ---- Sanctuary ---------------------------------------------------------- */
.herbal-sanctuary { background: var(--herbal-cream); text-align: center; }
.herbal-sanctuary .herbal-container { padding-block: var(--section-y); }
.herbal-sanctuary .herbal-section-title { max-width: 18ch; margin-inline: auto; color: var(--herbal-green); }
.herbal-sanctuary__lead { max-width: 60ch; margin: 1rem auto 2.5rem; color: #5b5347; }
.herbal-sanctuary__img img { border-radius: var(--radius); width: 100%; object-fit: cover; }

/* ---- Services preview --------------------------------------------------- */
.herbal-services-preview { background: var(--herbal-green); color: #fff; text-align: center; }
.herbal-services-preview .herbal-container { padding-block: var(--section-y); }
.herbal-services-preview__lead { max-width: 60ch; margin: 1rem auto 2.5rem; opacity: .9; }
.herbal-cards { display: grid; gap: 1.2rem; margin-bottom: 2.5rem; }
.herbal-card {
  display: grid; grid-template-columns: 1fr 40%; align-items: stretch; overflow: hidden;
  background: #fff; color: var(--herbal-ink); border-radius: var(--radius); text-align: left;
}
.herbal-card__body { padding: 1.4rem 1.4rem; }
.herbal-card__title { color: var(--herbal-green); font-size: 1.3rem; margin-bottom: .4rem; }
.herbal-card__body p { font-size: .92rem; color: #6a6256; margin: 0; }
.herbal-card__media { overflow: hidden; }
.herbal-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Booking ------------------------------------------------------------ */
.herbal-booking { background: #f6f4ef; text-align: center; }
.herbal-booking__inner { padding-block: var(--section-y); max-width: 640px; }
.herbal-booking .herbal-section-title { color: var(--herbal-green); }
.herbal-booking__lead { color: #6a6256; margin-bottom: 2rem; }
.herbal-booking__actions { display: grid; gap: .8rem; margin: 2rem 0 2.5rem; }
.herbal-booking__or { color: #6a6256; font-size: .9rem; margin: 0; }
.herbal-hours { width: 100%; border-collapse: collapse; }
.herbal-hours th, .herbal-hours td { padding: .55rem .4rem; border-bottom: 1px solid #e2dccf; text-align: left; font-weight: 500; }
.herbal-hours td { text-align: right; color: var(--herbal-green); font-weight: 600; }

/* ---- Pricing page ------------------------------------------------------- */
.herbal-pricing { background: #f6f4ef; }
.herbal-pricing .herbal-container { padding-block: var(--section-y); }
.herbal-pricing__note { max-width: 60ch; margin: .5rem auto 1.5rem; color: #6a6256; }
.herbal-pricing__grid {
  margin-top: 2.5rem; display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.herbal-pricing__card { background: #fff; border-radius: var(--radius); padding: 1.6rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.herbal-pricing__cat { color: var(--herbal-green); font-size: 1.4rem; border-bottom: 2px solid var(--herbal-cream); padding-bottom: .6rem; margin-bottom: .8rem; }
.herbal-pricing__list { list-style: none; margin: 0; padding: 0; }
.herbal-pricing__row { border-bottom: 1px dashed #ece7db; }
.herbal-pricing__book {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem .5rem; margin: 0 -.5rem; font-size: .95rem; text-decoration: none;
  color: inherit; border-radius: 8px; transition: background .15s ease, transform .15s ease;
}
.herbal-pricing__book:hover, .herbal-pricing__book:focus-visible {
  background: var(--herbal-cream); outline: none;
}
.herbal-pricing__name { display: flex; flex-direction: column; }
.herbal-pricing__desc { font-size: .8rem; color: #8a8175; }
.herbal-pricing__meta { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.herbal-pricing__price { color: var(--herbal-gold-dark); font-weight: 600; white-space: nowrap; }
.herbal-pricing__cta {
  font-size: .8rem; font-weight: 600; color: var(--herbal-green);
  border: 1px solid var(--herbal-green); border-radius: 999px; padding: .25rem .7rem;
  opacity: .85; transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.herbal-pricing__book:hover .herbal-pricing__cta,
.herbal-pricing__book:focus-visible .herbal-pricing__cta {
  background: var(--herbal-green); color: #fff; opacity: 1;
}
.herbal-pricing__cta-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.herbal-pricing__close {
  margin-top: 3rem; text-align: center; background: #fff; border-radius: var(--radius);
  padding: 2.2rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.herbal-pricing__close-title { color: var(--herbal-green); font-size: 1.5rem; margin: 0 0 .4rem; }
.herbal-pricing__close-text { color: #6a6256; max-width: 48ch; margin: 0 auto 1.3rem; }

/* ---- Reviews ------------------------------------------------------------ */
.herbal-reviews { background: var(--herbal-cream); }
.herbal-reviews .herbal-container { padding-block: var(--section-y); }
.herbal-reviews__grid {
  margin: 2.5rem 0; display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.herbal-review { background: #fff; border-radius: var(--radius); padding: 1.6rem; margin: 0; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.herbal-review__stars { color: var(--herbal-gold-dark); letter-spacing: 2px; margin-bottom: .6rem; }
.herbal-review blockquote { margin: 0 0 1rem; font-style: italic; color: #4a443a; }
.herbal-review figcaption { font-size: .9rem; }
.herbal-review figcaption strong { color: var(--herbal-green); display: block; }
.herbal-review figcaption span { color: #8a8175; }

/* ---- Contest ------------------------------------------------------------ */
.herbal-contest { background: var(--herbal-green); color: #fff; }
.herbal-contest__inner { padding-block: var(--section-y); max-width: 640px; }
.herbal-contest .herbal-section-title { color: #fff; }
.herbal-contest__desc { opacity: .92; margin-bottom: 2rem; }
.herbal-contest__thanks { text-align: center; font-size: 1.2rem; background: rgba(255,255,255,.1); padding: 1.5rem; border-radius: var(--radius); }
.herbal-contest__form { display: grid; gap: 1rem; background: rgba(255,255,255,.06); padding: 1.8rem; border-radius: var(--radius); }
.herbal-field { display: grid; gap: .35rem; text-align: left; }
.herbal-field label { font-size: .85rem; font-weight: 500; letter-spacing: .03em; }
.herbal-field input {
  padding: .8rem 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.3);
  background: #fff; color: var(--herbal-ink); font: inherit;
}
.herbal-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; text-align: left; line-height: 1.4; }
.herbal-consent input { margin-top: .2rem; flex: 0 0 auto; }

/* ---- Generic page / prose ---------------------------------------------- */
.herbal-page .herbal-container { padding-block: var(--section-y); }
.herbal-prose { max-width: 760px; }

/* ---- Client portal ------------------------------------------------------ */
.herbal-portal { max-width: 720px; margin: 0 auto; }
.herbal-portal__card { background: #fff; border: 1px solid #e2dccf; border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 1rem 0; }
.herbal-portal__card h3 { color: var(--herbal-green); margin: 0 0 .8rem; }
.herbal-portal__points { font-family: var(--font-display); font-size: 2rem; color: var(--herbal-gold-dark); margin: 0; }
.herbal-portal__list { list-style: none; margin: 0; padding: 0; }
.herbal-portal__list li { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; padding: .5rem 0; border-bottom: 1px dashed #ece7db; }
.herbal-portal__link { background: none; border: 0; color: var(--herbal-green); cursor: pointer; text-decoration: underline; font: inherit; padding: 0; }
.herbal-portal__form { display: grid; gap: .8rem; max-width: 420px; }
.herbal-portal__form label { display: grid; gap: .25rem; font-size: .9rem; font-weight: 500; }
.herbal-portal__form input[type=text], .herbal-portal__form input:not([type]) { padding: .6rem .8rem; border: 1px solid #e2dccf; border-radius: 8px; font: inherit; }
.herbal-portal__check { display: flex !important; flex-direction: row !important; align-items: center; gap: .5rem; font-weight: 400 !important; }
.herbal-portal__points span { font-family: var(--font-body); font-size: .9rem; color: #8a8175; }
.herbal-portal__earn { font-size: .9rem; color: #6a6256; margin: .4rem 0 0; }

/* At-a-glance stats */
.herbal-portal__stats {
  display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 1rem 0;
}
.herbal-portal__stat {
  background: #fff; border: 1px solid #e2dccf; border-radius: var(--radius);
  padding: 1rem; text-align: center; display: flex; flex-direction: column; gap: .25rem;
}
.herbal-portal__stat-value { font-family: var(--font-display); font-size: 1.5rem; color: var(--herbal-green); line-height: 1.1; }
.herbal-portal__stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #8a8175; }

/* Accent + VIP cards */
.herbal-portal__card--accent { border-color: var(--herbal-gold); border-left: 4px solid var(--herbal-gold); }
.herbal-portal__card--vip {
  background: linear-gradient(135deg, #fffdf7, #f6f1e4);
  border: 1px solid var(--herbal-gold); border-left: 4px solid var(--herbal-gold);
}
.herbal-portal__perks { list-style: none; margin: .6rem 0 1rem; padding: 0; }
.herbal-portal__perks li { padding: .3rem 0 .3rem 1.5rem; position: relative; }
.herbal-portal__perks li::before { content: "✓"; position: absolute; left: 0; color: var(--herbal-gold-dark); font-weight: 700; }

/* ---- Staff portal ------------------------------------------------------- */
.herbal-staff__unread { color: var(--herbal-gold-dark); font-weight: 600; }
.herbal-staff__table { width: 100%; border-collapse: collapse; }
.herbal-staff__table th, .herbal-staff__table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid #ece7db; vertical-align: top; font-size: .92rem; }
.herbal-staff__status { font-weight: 600; }
.herbal-staff .herbal-portal__link { margin-right: .4rem; }

/* ---- Footer ------------------------------------------------------------- */
.herbal-footer { background: var(--herbal-green-dark); color: #d8d2c6; }
.herbal-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-block: var(--section-y); }
.herbal-footer__brand img { height: 48px; margin-bottom: 1rem; }
.herbal-footer__brand p { font-size: .9rem; max-width: 32ch; }
.herbal-footer h3 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.herbal-footer__menu, .herbal-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .9rem; }
.herbal-footer a { color: #d8d2c6; text-decoration: none; }
.herbal-footer a:hover { color: var(--herbal-gold-light); }
.herbal-footer__bar { border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; text-align: center; }
.herbal-footer__bar .herbal-container { padding-block: 1.2rem; }

/* ---- Responsive --------------------------------------------------------- */
@media (min-width: 720px) {
  .herbal-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .herbal-nav-toggle { display: flex; order: 3; }
  .herbal-header__cta { display: none; }
  .herbal-nav {
    position: fixed; inset: 0 0 0 30%; background: var(--herbal-green-dark);
    transform: translateX(100%); transition: transform .25s ease; padding: 5rem 2rem;
    margin: 0; z-index: 99;
  }
  .herbal-nav.is-open { transform: translateX(0); }
  .herbal-menu { flex-direction: column; gap: 1.2rem; }
  .herbal-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .herbal-sticky-book { display: block; }
  .herbal-footer { padding-bottom: 5rem; } /* clear the sticky bar */
}

@media (max-width: 560px) {
  .herbal-card { grid-template-columns: 1fr; }
  .herbal-card__media { height: 180px; order: -1; }
  .herbal-footer__grid { grid-template-columns: 1fr; }
  .herbal-hero__cta .herbal-btn { width: 100%; }
}

/* FAQ (AEO) — matches FAQPage schema */
.herbal-faq{background:#F0EADC;padding:64px 0}
.herbal-faq__inner{max-width:760px;margin:0 auto;padding:0 20px}
.herbal-faq__eyebrow{color:#8A6D24;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:700;text-align:center;margin:0}
.herbal-faq__title{font-family:'Playfair Display',Georgia,serif;color:#1F4A38;text-align:center;font-size:2rem;margin:.3rem 0 0}
.herbal-faq__list{margin-top:28px}
.herbal-faq__item{background:#fff;border:1px solid #E8E2D5;border-radius:14px;margin-bottom:12px;padding:0 20px}
.herbal-faq__q{cursor:pointer;font-weight:700;color:#1F4A38;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:1.02rem}
.herbal-faq__q::-webkit-details-marker{display:none}
.herbal-faq__q::after{content:'+';font-size:1.4rem;color:#8A6D24;line-height:1}
.herbal-faq__item[open] .herbal-faq__q::after{content:'\2013'}
.herbal-faq__a{color:#5a5347;padding:0 0 18px;margin:0;line-height:1.6}