/* ============================================
   Ease Healing Studio
   Design system and global styles
   ============================================ */

/* Fallback font with adjusted metrics to closely match Cormorant Garamond,
   reducing layout shift when the web font loads. */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 94%;
  ascent-override: 95%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/* Fallback font with adjusted metrics to match Inter Tight. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* Color palette: warm linen + forest green + clay accent */
  --color-bg:        #FAF7F2;  /* warm linen */
  --color-bg-alt:    #EFEAE0;  /* muted sand */
  --color-surface:   #FFFFFF;
  --color-ink:       #2C3A2E;  /* forest green, near-black */
  --color-ink-soft:  #4A5547;
  --color-muted:     #616A5E;  /* WCAG AA: 5.27:1 on linen, 4.69:1 on sand.
                                  Was #7A8576 (3.61:1 / 3.22:1), which failed
                                  on .eyebrow at 12px uppercase. Same hue and
                                  saturation, darker. Re-run validate_site.py
                                  if this is ever changed. */
  --color-rule:      rgba(44, 58, 46, 0.12);
  --color-accent:    #C97B5D;  /* warm clay, used sparingly */
  --color-blossom:   #E8A5A5;  /* matches existing logo lotus */

  /* Typography */
  --font-serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter Tight', 'Inter Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;

  /* Layout */
  --maxw-content: 1100px;
  --maxw-prose:   640px;
  --maxw-headline: 760px;
  --radius-sm: 4px;
  --header-h: 76px;   /* sticky header height; drives scroll-padding-top */
  --radius-md: 8px;
  --radius-pill: 999px;
}

/* ============================================
   Reset and base
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-ink); text-decoration: none; transition: opacity 0.15s ease; }
a:hover { opacity: 0.65; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.005em; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

p { margin: 0 0 var(--space-2); }

/* ============================================
   Layout helpers
   ============================================ */

.container {
  width: 100%;
  max-width: var(--maxw-content);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.container--narrow {
  max-width: var(--maxw-prose);
}

.container--headline {
  max-width: var(--maxw-headline);
}

.section {
  padding: var(--space-6) 0;
}

.section--tight { padding: var(--space-4) 0; }

.section--sand { background: var(--color-bg-alt); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
  font-weight: 500;
}

/* ============================================
   Header / Navigation
   ============================================ */

/* Header height, used by scroll-padding-top below so a focused element never
   lands underneath the sticky header. WCAG 2.2 SC 2.4.11 names sticky headers
   as the cause. Keep this in sync if the nav padding changes. */
html { scroll-padding-top: var(--header-h); }

.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  background: rgba(250, 247, 242, 0.92);
}

/* Visible focus ring for keyboard users only. :focus-visible means mouse users
   see nothing on click and keyboard users always do. The ring must clear 3:1
   against the surface it sits on; --color-ink is 11.22:1 on linen and 10.00:1
   on sand. outline-offset puts the ring outside the element, so a dark button
   on a light section still wants the ink ring, not a flipped one. The footer
   is the only surface here that is genuinely dark. Never write `outline: none`
   without a replacement. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-footer :where(a, button):focus-visible {
  outline-color: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  max-width: var(--maxw-content);
  margin: 0 auto;
  gap: var(--space-3);
}

.nav__logo {
  font-family: var(--font-serif);
  font-size: 3.0rem;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}

.nav__logo:hover { opacity: 1; }

.nav__logo-mark {
  font-weight: 500;
}

.nav__logo-sub {
  font-family: var(--font-sans);
  font-size: 1.0rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 400;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  font-weight: 400;
}

.nav__links a:hover, .nav__links a[aria-current="page"] {
  color: var(--color-ink);
  opacity: 1;
}

.nav__cta {
  background: var(--color-ink);
  color: var(--color-bg) !important;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
}

.nav__cta:hover { opacity: 0.85; }

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-ink);
}

.nav__toggle svg { display: block; }

/* ============================================
   Hero
   ============================================ */

.hero {
  padding: var(--space-7) 0 var(--space-6);
  text-align: center;
}

.hero__location {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
}

.hero__title {
  margin: 0 0 var(--space-2);
}

.hero__subtitle {
  font-size: 1.0625rem;
  color: var(--color-ink-soft);
  max-width: 480px;
  margin: 0 auto var(--space-4);
}

.hero__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  /* Named properties, not `all`. `transition: all` also animates outline-width,
     which made the keyboard focus ring fade in over 180ms instead of appearing
     at once, and animated its colour up from the button's own text colour.
     These three are what the hover states actually change. */
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  cursor: pointer;
  text-align: center;
  line-height: 1;
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

.btn--primary:hover {
  background: transparent;
  color: var(--color-ink);
  opacity: 1;
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--ghost:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  opacity: 1;
}

/* ============================================
   Page header (interior pages)
   ============================================ */

.page-header {
  padding: var(--space-5) 0 var(--space-3);
  text-align: center;
}

.page-header__title {
  margin: 0 0 var(--space-1);
}

/* ============================================
   Service cards
   ============================================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(44, 58, 46, 0.06);
}

.service-card__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-ink);
  margin: 0 0 0.5rem;
}

.service-card__desc {
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  margin: 0;
}

/* ============================================
   Service detail blocks (services page)
   ============================================ */

.service-block {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule);
}

.service-block:last-child { border-bottom: 0; }

.service-block--reverse {
  direction: rtl;
}

.service-block--reverse > * {
  direction: ltr;
}

.service-block__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.service-block__title {
  margin: 0 0 var(--space-2);
}

.service-block__subhead {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--color-ink);
  margin: var(--space-3) 0 0.5rem;
  font-weight: 500;
}

.service-block ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.service-block li {
  padding: 0.25rem 0;
  color: var(--color-ink-soft);
}

/* Inline tag-pill list (used for massage types, etc.) */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: var(--space-2) 0 0 0;
  list-style: none;
}

.tag-list li {
  padding: 0.375rem 0.875rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
  letter-spacing: 0.02em;
  border: 0;
}

/* ============================================
   Testimonials
   ============================================ */

.testimonial {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}

.testimonial__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: var(--color-ink);
  line-height: 1.5;
  margin: 0 0 var(--space-2);
}

.testimonial__quote::before { content: '\201C'; }
.testimonial__quote::after  { content: '\201D'; }

.testimonial__attribution {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}

.testimonial + .testimonial {
  margin-top: var(--space-5);
}

/* ============================================
   Practitioner cards (Therapists page)
   ============================================ */

.practitioner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-rule);
  align-items: start;
}

.practitioner:last-child { border-bottom: 0; }

.practitioner__photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.practitioner__name {
  margin: 0 0 0.25rem;
}

.practitioner__credentials {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1875rem;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
  font-weight: 500;
  line-height: 1.4;
}

.practitioner__contact {
  font-size: 0.9375rem;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
}

.practitioner__contact a { font-weight: 500; }

/* ============================================
   Locations
   ============================================ */

.locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 720px) {
  .locations { grid-template-columns: 1fr; }
}

.location {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.location__name {
  font-family: var(--font-serif);
  font-size: 2.0rem;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.location__address {
  font-style: normal;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}

.location__phone {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-ink);
}

.location__hours {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
  font-size: 0.9375rem;
}

.location__hours dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
}

.location__hours dt { color: var(--color-muted); }
.location__hours dd { margin: 0; color: var(--color-ink-soft); }

/* ============================================
   Gift card section (full-width band)
   ============================================ */

.gift-section {
  background: var(--color-bg-alt);
  padding: var(--space-6) 0;
}

.gift-section .container {
  max-width: 1000px;
}

.gift-card-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
}

.gift-card-callout__text .eyebrow {
  color: var(--color-muted);
}

.gift-card-callout__text h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.gift-card-callout__text p {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 38ch;
}

/* The visual card */
.gift-card-visual {
  width: 100%;
  aspect-ratio: 1.586 / 1;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(44, 58, 46, 0.12),
              0 2px 6px rgba(44, 58, 46, 0.06);
}

.gift-card-visual__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gift-card-visual__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1rem, 3.5%, 1.75rem);
}

.gift-card-visual__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.gift-card-visual__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.gift-card-visual__amount {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.gift-card-visual__bottom {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}

.gift-card-visual__brand {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  line-height: 1;
}

.gift-card-visual__brand-sub {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ============================================
   Policies
   ============================================ */

.policies {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}

.policies h3 {
  font-size: 1.125rem;
  margin-top: 0;
}

.policies ul {
  padding-left: 1.25rem;
  margin: 0;
}

.policies li { margin-bottom: 0.5rem; }

/* Policies row (contact page): heading + list, two-column on desktop */
.policies-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  align-items: start;
}

.policies-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.policies-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-ink-soft);
}

.policies-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--color-ink);
}

.policies-list li:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .policies-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* ============================================
   Footer
   ============================================ */

.site-footer {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-5) 0 var(--space-3);
}

.site-footer a { color: var(--color-bg); }
.site-footer a:hover { opacity: 0.7; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(250, 247, 242, 0.15);
}

.footer__title {
  font-family: var(--font-serif);
  font-size: 3.0rem;
  font-weight: 500;
  color: var(--color-bg);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0 0 var(--space-2);
}

.footer__title-sub {
  font-family: var(--font-sans);
  font-size: 1.0rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.6);
  font-weight: 400;
}

.footer__heading {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.7;
  margin: 0 0 var(--space-2);
  font-weight: 500;
}

.footer__nav,
.footer__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9375rem;
}

.footer__nav li,
.footer__contact li {
  padding: 0.25rem 0;
  color: rgba(250, 247, 242, 0.85);
}

.footer__legal {
  padding-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: rgba(250, 247, 242, 0.7);
}

/* ============================================
   Hero image strip (home page)
   ============================================ */

.hero-image {
  width: 100%;
  margin: 0 auto;
}

.hero-image__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

@media (max-width: 720px) {
  .hero-image__inner {
    padding: 0;
  }
  .hero-image img {
    border-radius: 0;
  }
}

/* ============================================
   Visually hidden (for screen readers)
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 720px) {
  :root {
    --space-6: 3rem;
    --space-7: 4rem;
  }

  .nav__toggle { display: block; }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-rule);
    padding: var(--space-2) 0;
    display: none;
  }

  .nav__links.is-open { display: flex; }

  .nav__links li {
    padding: 0.5rem var(--space-3);
    border-bottom: 1px solid var(--color-rule);
  }

  .nav__links li:last-child { border-bottom: 0; padding-top: 1rem; }

  .nav__cta {
    display: inline-block;
    text-align: center;
  }

  .service-block,
  .service-block--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--space-3);
  }

  .practitioner {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .practitioner__photo {
    max-width: 320px;
    aspect-ratio: 1 / 1;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .footer__legal {
    flex-direction: column;
    gap: var(--space-1);
    text-align: center;
  }

  .gift-card-callout {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-3);
  }

  .gift-card-callout__text p {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .gift-card-visual {
    max-width: 380px;
    margin: 0 auto;
    transform: rotate(0deg);
  }

  .hero {
    padding: var(--space-5) 0 var(--space-4);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}