/* Earth & sage theme: warms the light palette with the sage, linen and clay tones from the imagery.
   Loaded after styles.css so it layers over the compiled Tailwind colors. */
:root {
  --linen: #EDE6DA;
  --oat: #E4DACA;
  --cream: #F7F3EC;
  --sage-mist: #DCE3D5;
  --sage-soft: #C8D4C1;
  --sage-leaf: #A7B8A0;
  --clay: #D9C3AE;
  --stone-line: #D3C9B8;

  /* Ivory palette: light content sections, cards and buttons */
  --ivory: #fcfbf8;           /* near-white section background (was #f4efe4) */
  --ivory-card: #ebe3d1;
  --ivory-card-hover: #e9dccb;
  --text-on-ivory: #1a1511;
  --gold-label: #8a6a2c;
  --gold-rule: #b8964d;
  --rose-gold: #c4907f;
  --rose-link: #94574a;
  --sage-accent: #8b9a7e;
  --ink: #15110e;
  --ivory-light: #ffffff;
  --button-ink: #14110e;
  --card-line: rgba(26,21,17,.24);
  /* Slightly deeper label/link shades so small text clears WCAG AA (4.5:1) on the card fills */
  --gold-label-text: #795d27;
  --rose-link-text: #8d5346;
}

/* Page canvas */
body.bg-alabaster { background-color: var(--ivory); }

/* Surfaces: cards and panels become a soft cream instead of bright white */
.bg-alabaster { background-color: var(--cream); }
.bg-parchment { background-color: #F1EEE4; }
.bg-sand { background-color: var(--oat); }
.bg-sand\/20 { background-color: rgba(228,218,202,.45); }
.bg-sand\/30 { background-color: rgba(228,218,202,.55); }
.bg-sand\/40 { background-color: rgba(220,227,213,.75); }
.bg-sand\/60 { background-color: rgba(228,218,202,.75); }
.bg-sand\/70 { background-color: rgba(200,212,193,.6); }
.bg-sand\/80 { background-color: rgba(228,218,202,.9); }
.bg-sand\/90 { background-color: rgba(228,218,202,.95); }
.bg-stone\/40 { background-color: rgba(200,212,193,.5); }
.hover\:bg-sand:hover { background-color: var(--sage-mist); }
.hover\:bg-sand\/40:hover, .hover\:bg-sand\/60:hover { background-color: rgba(200,212,193,.55); }
.hover\:bg-sand\/70:hover { background-color: rgba(200,212,193,.8); }
.border-stone { border-color: var(--stone-line); }
.border-stone\/60 { border-color: rgba(211,201,184,.7); }
.border-stone\/70, .border-stone\/80 { border-color: rgba(211,201,184,.85); }
.from-alabaster\/90 { --tw-gradient-from: rgba(237,230,218,.92) var(--tw-gradient-from-position); --tw-gradient-to: rgba(237,230,218,0) var(--tw-gradient-to-position); }
.via-alabaster\/55 { --tw-gradient-stops: var(--tw-gradient-from), rgba(237,230,218,.55) var(--tw-gradient-via-position), var(--tw-gradient-to); }

/* Form fields sit on cream */
input.bg-parchment, select.bg-parchment, textarea.bg-parchment { background-color: var(--cream); }

/* Header, announcement bar and page tabs */
header.glass-nav { background: rgba(255,255,255,.96); border-bottom-color: rgba(184,150,77,.45); }
#announcement-bar { background-color: var(--ink); color: var(--ivory); border-color: var(--gold-rule); }
#announcement-bar .bg-sage { background-color: var(--rose-gold); }
header .header-book { background-color: var(--ink); color: var(--ivory); }
header .header-book:hover { background-color: var(--rose-gold); color: var(--button-ink); }
.page-tabs { border-top-color: rgba(184,150,77,.3); }
.page-tabs a { background: var(--ivory); border-color: var(--card-line); color: var(--text-on-ivory); }
.page-tabs a:hover { background: var(--ivory-card-hover); border-color: var(--rose-gold); color: var(--text-on-ivory); }
.page-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.side-drawer__panel { background: var(--linen); border-left-color: var(--stone-line); }
.side-drawer__head { border-bottom-color: var(--stone-line); }
.side-drawer__links a:hover { background: var(--sage-mist); }

/* Community cards on the home page link through to treatments */
a.community-card { display: block; color: inherit; text-decoration: none; }
a.community-card:focus-visible { outline: 2px solid var(--rose-link-text); outline-offset: 3px; }
.community-card__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.community-card__cta svg { width: 14px; height: 14px; transition: transform .2s; }
a.community-card:hover .community-card__cta svg { transform: translateX(3px); }

/* Highlight the treatment a visitor lands on from a community card */
.treatment-card { scroll-margin-top: 9rem; }

/* ---------- Ivory sections (light content bands) ---------- */
section.ivory-section {
  background-color: var(--ivory); background-image: none; color: var(--text-on-ivory);
  border-top-width: 0; border-bottom-width: 0;
}
section.ivory-section + section.ivory-section { border-top: 1px solid var(--gold-rule); }

.ivory-section .text-charcoal { color: var(--text-on-ivory); }
.ivory-section :is(.text-charcoal\/40, .text-charcoal\/50, .text-charcoal\/60):not(.form-panel *) { color: rgba(26,21,17,.72); }
.ivory-section :is(.text-charcoal\/70, .text-charcoal\/75):not(.form-panel *) { color: rgba(26,21,17,.78); }
.ivory-section :is(.text-charcoal\/80, .text-charcoal\/85, .text-charcoal\/90):not(.form-panel *) { color: rgba(26,21,17,.85); }
.ivory-section .text-terracotta:not(.form-panel *) { color: var(--rose-link-text); }
.ivory-section .gold-accent-line { background: linear-gradient(90deg, rgba(184,150,77,0) 0%, var(--gold-rule) 50%, rgba(184,150,77,0) 100%); }
.ivory-section :is(h1, h2, h3) :is(em, .italic) { color: var(--gold-label); }

/* Labels */
.ivory-section .ivory-label { color: var(--gold-label-text); }
.ivory-label--rule { display: inline-flex; align-items: center; }
.ivory-label--rule::after { content: ""; flex: none; width: 44px; height: 1px; margin-left: .9rem; background: var(--gold-rule); }
.ivory-section .ivory-pill { background: var(--ivory-card); color: var(--gold-label-text); border: 1px solid var(--card-line); box-shadow: none; }
.ivory-section .ivory-badge { background: var(--rose-gold); color: var(--button-ink); }

/* Large wrapper panels: outline only, the cards inside carry the fill */
.ivory-section .ivory-panel { background: transparent; border-color: var(--card-line); box-shadow: none; }
.ivory-section :is(.ivory-panel, .ivory-card) :is(.border-t, .border-b) { border-color: var(--gold-rule); }

/* Cards and boxes */
.ivory-section .ivory-card {
  position: relative; background-color: var(--ivory-card); background-image: none;
  border: 1px solid var(--card-line); box-shadow: none; transform: none;
  transition: border-color .5s ease, background-color .5s ease, opacity .5s ease;
}
.ivory-section .ivory-card::after {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--rose-gold); border-radius: inherit;
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
.ivory-section .ivory-card :is(.bg-alabaster, .bg-sand, .bg-stone\/40):not(.ivory-btn) { background-color: var(--ivory); }
.ivory-section .ivory-card:is(:focus-visible, :has(:focus-visible)),
.ivory-section .treatment-card:target { border-color: var(--rose-gold); background-color: var(--ivory-card-hover); }
.ivory-section .ivory-card:is(:focus-visible, :has(:focus-visible))::after,
.ivory-section .treatment-card:target::after { opacity: .6; }
.ivory-section .ivory-card:is(:focus-visible, :has(:focus-visible)) .ivory-link { background-size: 100% 1px; }

/* Text links: underline draws in from the left */
.ivory-section .ivory-link {
  color: var(--rose-link-text); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size .5s ease;
}
.ivory-section .ivory-link:focus-visible { background-size: 100% 1px; }

/* Icon tiles in the community cards */
.ivory-section .ivory-icon { transition: background-color .5s ease, color .5s ease; }

/* Buttons: rose-gold fill, dark fill sweeps in from the left */
.ivory-section .ivory-btn {
  background-color: var(--rose-gold); color: var(--button-ink); border-color: var(--rose-gold);
  background-image: linear-gradient(var(--button-ink), var(--button-ink));
  background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%;
  text-transform: uppercase; letter-spacing: .05em; box-shadow: none;
  transition: background-size .5s ease, color .5s ease, border-color .5s ease;
}
.ivory-section .ivory-btn--outline { background-color: transparent; color: var(--text-on-ivory); }
.ivory-section .ivory-btn .text-terracotta { color: inherit; }
.ivory-section .ivory-btn:focus-visible { background-size: 100% 100%; color: var(--ivory); border-color: var(--button-ink); outline: 2px solid var(--rose-link-text); outline-offset: 2px; }

@media (hover: hover) {
  .ivory-section .ivory-card:hover { border-color: var(--rose-gold); background-color: var(--ivory-card-hover); }
  .ivory-section .ivory-card:hover::after { opacity: .6; }
  .ivory-section .ivory-card:hover .ivory-link,
  .ivory-section .ivory-link:hover { background-size: 100% 1px; }
  .ivory-section .ivory-card:hover .ivory-icon { background-color: var(--rose-gold); color: var(--button-ink); }
  .ivory-section .ivory-card:hover .ivory-icon svg { color: inherit; }
  .ivory-section .ivory-btn:hover { background-size: 100% 100%; color: var(--ivory); border-color: var(--button-ink); }
}

/* ---------- Mobile ---------- */
.mobile-action-bar { display: none; }

@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  /* Fixed backgrounds stutter on phones */
  body.bg-alabaster { background-attachment: scroll; }

  /* Compact header: smaller brand, booking moves to the bottom bar */
  header .h-20 { height: 4rem; padding-left: 1rem; padding-right: 1rem; }
  header .h-20 > a { gap: .6rem; min-width: 0; }
  header .h-20 > a > div:first-child { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
  .brand-name { font-size: 1rem !important; letter-spacing: .06em; }
  .brand-name + span { font-size: 8.5px; letter-spacing: .12em; }
  .header-book { display: none !important; }
  header button[aria-controls="mobile-menu"] { padding: .6rem; }
  #announcement-bar { font-size: 10px; padding: .45rem .75rem; line-height: 1.4; }
  .page-tabs ul { padding: .45rem 1rem; }
  .page-tabs a { padding: .55rem .9rem; font-size: .75rem; }

  /* Bottom call / book bar */
  .mobile-action-bar {
    display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: .65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(220,227,213,.96); border-top: 1px solid rgba(167,184,160,.7);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 -8px 24px -12px rgba(31,36,33,.25);
  }
  .mobile-action-bar a, .mobile-action-bar button {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px;
    border-radius: 9999px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  }
  .mobile-action-bar svg { width: 16px; height: 16px; }
  .mobile-action-bar__call { flex: 0 0 34%; background: var(--cream); color: #4A5B47; border: 1px solid var(--stone-line); }
  .mobile-action-bar__book { flex: 1; background: #4A5B47; color: #FAF8F5; border: 0; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }

  /* Tighter vertical rhythm */
  section.py-24, section.py-20 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  section .py-24 { padding-top: 4rem; padding-bottom: 4rem; }
  section .py-24.sm\:py-32 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  section .px-6, footer .px-6 { padding-left: 1.15rem; padding-right: 1.15rem; }
  section .mb-16 { margin-bottom: 2.25rem; }
  section .gap-12 { gap: 2rem; }
  .p-8, .sm\:p-10 { padding: 1.4rem; }
  .p-7 { padding: 1.35rem; }
  h1 .text-3xl { font-size: 1.7rem; line-height: 1.2; }

  /* Image-backed sections: stronger wash so text stays readable over the photo */
  .from-alabaster\/90 { --tw-gradient-from: rgba(237,230,218,.94) var(--tw-gradient-from-position); }
  .via-alabaster\/55 { --tw-gradient-stops: var(--tw-gradient-from), rgba(237,230,218,.82) var(--tw-gradient-via-position), rgba(237,230,218,.45); }

  /* Readable body copy and comfortable tap targets */
  .text-xs.sm\:text-sm { font-size: .85rem; line-height: 1.6; }
  button, .page-tabs a, .side-drawer__links a { min-height: 44px; }

  /* Prevent iOS zoom on form focus (needs 16px) */
  input, select, textarea { font-size: 16px !important; }

  /* Modals: use the full width and keep the close button reachable */
  #booking-modal, #event-modal { padding: .5rem; align-items: flex-end; }
  #booking-modal > div, #event-modal > div { padding: 1.4rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom)); max-height: 94vh; border-radius: 1.5rem; }
  #booking-modal > div > button.absolute, #event-modal > div > button.absolute { top: .75rem; right: .75rem; }
}

@media (max-width: 380px) {
  .brand-name + span { display: none; }
  .mobile-action-bar__call span { display: none; }
  .mobile-action-bar__call { flex: 0 0 56px; }
}

/* ---------- About page & Meet Sarah ---------- */
.about-portrait { margin: 0; padding: 12px; border-radius: 1.5rem; overflow: hidden; }
.about-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; border-radius: 1rem; }
.about-portrait figcaption { display: flex; flex-direction: column; gap: .2rem; padding: 1rem .5rem .4rem; text-align: center; }
.about-portrait__name { font-family: "Cormorant Garamond", serif; font-size: 1.35rem; color: var(--text-on-ivory); }
.about-portrait__role { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-label-text); }
.about-portrait--compact { max-width: 320px; margin: 0 auto; }
@media (min-width: 1024px) { #about .about-portrait { position: sticky; top: 10rem; } }

.about-credentials { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.about-credentials li { padding: .4rem .85rem; border: 1px solid var(--card-line); border-radius: 9999px; background: var(--ivory-card); color: var(--gold-label-text); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.about-quote { margin: 0; padding: .25rem 0 .25rem 1.25rem; border-left: 1px solid var(--gold-rule); font-size: 1.5rem; font-style: italic; line-height: 1.35; color: var(--gold-label); }

.team-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; }
.team-card { overflow: hidden; }
.team-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }
.team-card__body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.team-card__role { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-label-text); }
.team-card--soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 2rem 1.5rem; text-align: center; border: 1px dashed var(--card-line); color: var(--gold-label-text); min-height: 260px; }
#about h2 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
/* Keep the Meet Sarah portrait modest so the bio leads */
#about .about-portrait { max-width: 300px; margin: 0 auto; }
@media (min-width: 1024px) { #about .about-portrait { margin: 0 0 0 auto; } }
@media (max-width: 767px) { #about .about-portrait { max-width: 240px; } }