/* ============================================================
   Balance Acupuncture — Shared Stylesheet
   Import on every page: <link rel="stylesheet" href="style.css" />
   Google Fonts must be loaded BEFORE this file in <head>
   ============================================================ */

/* Handwritten font for section eyebrows */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap');

/* ── Design Tokens ── */
:root {
  --cream:        #f9f6f1;
  --warm-white:   #fdfbf8;
  --sage:         #7eaa85;
  --sage-light:   #a8c8ab;
  --sage-dark:    #4e7a58;
  --stone:        #c9bfae;
  --charcoal:     #3a3530;
  --mid-grey:     #524f4c;
  --light-grey:   #9e9894;
  --border:       #e4ddd4;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-hand:    'Caveat', cursive;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  color: var(--charcoal);
  background: var(--warm-white);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--charcoal);
}
h1 { font-size: clamp(2.4rem, 5vw,   4rem); }
h2 { font-size: clamp(2.3rem, 4vw,   3.4rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
h4 { font-size: 1.05rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
p  { color: var(--mid-grey); font-size: 0.975rem; line-height: 1.9; }

/* ── Utilities ── */
.container   { max-width: 1120px; margin: 0 auto; padding: 0 2rem; }
.section     { padding: 5rem 0; }
.section--alt  { background: var(--cream); }
.section--dark { background: var(--charcoal); }
.text-center { text-align: center; }

.eyebrow {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sage-dark);
  display: block;
  margin-bottom: 0.8rem;
}

.divider        { width: 40px; height: 1px; background: var(--sage); margin: 1.5rem auto; }
.divider--left  { margin-left: 0; }

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn--sage   { color: var(--sage-dark); border-color: var(--sage-dark); background: transparent; }
.btn--sage:hover { background: var(--sage-dark); color: var(--warm-white); }
.btn--filled { background: var(--sage-dark); color: var(--warm-white); border-color: var(--sage-dark); }
.btn--filled:hover { background: var(--sage); border-color: var(--sage); }
.btn--ghost  { background: transparent; color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.4); }
.btn--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ── Navigation ── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(253,251,248,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: 0 2px 20px rgba(58,53,48,0.08); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 2rem;
}

.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.nav-logo span { color: var(--sage); }
.nav-logo-symbol { height: 38px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid-grey);
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--sage);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav-links a:hover               { color: var(--charcoal); }
.nav-links a:hover::after,
.nav-links a.active::after       { transform: scaleX(1); }
.nav-links a.active              { color: var(--charcoal); }

.nav-cta {
  font-size: 0.72rem !important;
  padding: 0.6rem 1.4rem !important;
  background: var(--sage-dark) !important;
  color: var(--warm-white) !important;
  border-radius: 1px !important;
  transition: background 0.2s !important;
}
.nav-cta:hover { background: var(--sage) !important; }
.nav-cta::after { display: none !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--charcoal);
  transition: all 0.3s;
}

/* ── Page Hero (inner pages) ── */
.page-hero {
  padding: 9rem 0 5rem;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { margin-bottom: 1.2rem; font-style: italic; }
.page-hero p  { max-width: 580px; font-size: 1.05rem; }

/* ── Split layout ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.split--reverse          { direction: rtl; }
.split--reverse > *      { direction: ltr; }
.split-image             { position: relative; overflow: hidden; min-height: 460px; }
.split-image img         { width: 100%; height: 100%; object-fit: cover; }
.split-text              { padding: 5rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.split-text h2           { margin-bottom: 1.1rem; }
.split-text p            { margin-bottom: 1.2rem; }
.split-text .btn         { align-self: flex-start; margin-top: 0.8rem; }

/* ── Placeholder image blocks ── */
.ph        { display: flex; align-items: center; justify-content: center; }
.ph svg    { opacity: 0.2; }
.ph--sage  { background: linear-gradient(160deg, #d4e0d4 0%, var(--stone) 100%); }
.ph--stone { background: linear-gradient(160deg, var(--stone) 0%, #b8c9b9 100%); }
.ph--herb  { background: linear-gradient(160deg, #d0ddd0 0%, #e8e0d4 100%); }
.ph--warm  { background: linear-gradient(160deg, #e0d5c8 0%, #c5d6c5 100%); }

/* ── CTA Banner ── */
.cta-banner {
  background: var(--sage-dark);
  padding: 5rem 0;
  text-align: center;
}
.cta-banner .eyebrow  { color: var(--sage-light); }
.cta-banner h2        { color: var(--warm-white); margin-bottom: 1rem; font-size: clamp(1.8rem,3vw,2.6rem); }
.cta-banner p         { color: rgba(255,255,255,0.7); margin-bottom: 2rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-banner-actions   { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }
.cta-tel {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-style: italic;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  transition: color 0.2s;
}
.cta-tel:hover { color: var(--sage-light); }

/* ── Footer ── */
.site-footer { background: var(--charcoal); padding: 4rem 0 2rem; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--warm-white);
  margin-bottom: 1rem;
  font-weight: 300;
}
.footer-brand p { color: rgba(255,255,255,0.45); font-size: 0.82rem; }

.footer-col h4 {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-bottom: 1.2rem;
  font-family: var(--font-sans);
  font-weight: 500;
}
.footer-col ul           { list-style: none; }
.footer-col ul li        { margin-bottom: 0.6rem; }
.footer-col ul li a      { color: rgba(255,255,255,0.5); font-size: 0.82rem; transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--sage-light); }

.footer-social { display: flex; gap: 1rem; margin-top: 1.5rem; }
.footer-social a {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  transition: all 0.2s;
}
.footer-social a:hover { border-color: var(--sage-light); color: var(--sage-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: var(--warm-white);
    padding: 2rem;
    gap: 1.4rem;
    border-bottom: 1px solid var(--border);
    z-index: 99;
    box-shadow: 0 8px 24px rgba(58,53,48,0.08);
  }
  .split                { grid-template-columns: 1fr; }
  .split--reverse       { direction: ltr; }
  .split-image          { min-height: 300px; }
  .split-text           { padding: 3.5rem 2rem; }
}

@media (max-width: 600px) {
  .footer-grid  { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .section { padding: 3.5rem 0; }
}

/* ── cms:nav-fit ── */
/* Added when the CMS put the Blog link in the nav. A menu laid out for the
   items it shipped with can overflow once another is added.

   Selectors are prefixed with `header` deliberately. This site's nav rules may
   also be declared in an inline <style> in the <head>, which for equal
   specificity would win on source order no matter where this block sits. The
   element+class combination outranks a bare class, so this applies either way.

   The gap maximum is what actually buys the room. It cannot be sized off the
   viewport: the nav is capped at 1120px however wide the screen is, so a vw-based
   gap sits at its maximum inside a container that never grows. The ceiling is
   set low enough for the extra item to fit that cap.

   Below 1120px this site's existing hamburger takes over instead.
   Delete this whole block if you restyle the header. */
header .nav-inner { gap: 1.25rem; }
header .nav-logo { flex-shrink: 0; }
header .nav-links { gap: clamp(0.5rem, 1.1vw, 1.5rem); flex-wrap: nowrap; }
header .nav-links a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1120px) {
  header .nav-links { display: none; }
  header .nav-toggle { display: flex; }
  header .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 72px; left: 0; right: 0; background: var(--warm-white); padding: 2rem; gap: 1.4rem; border-bottom: 1px solid var(--border); z-index: 99; box-shadow: 0 8px 24px rgba(58,53,48,0.08); }
}
/* ── cms:nav-fit end ── */