/*
Theme Name:  Soultry Massage
Theme URI:   https://www.soultrymassage.com
Description: Custom GeneratePress child theme for Soultry Massage — licensed mobile massage therapy serving Los Angeles County & Orange County. Built from the v8 brand blueprint. No page builders — native Block Editor (Gutenberg) only.
Author:      Soultry Massage
Author URI:  https://www.soultrymassage.com
Template:    generatepress
Version:     1.5.9
Requires at least: 6.5
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-soultry
*/

/* ============================================================
   SOULTRY MASSAGE — CSS DESIGN SYSTEM v8
   Brand reference: wp-content/_soultry-brand-reference/
   ============================================================ */

/* --- CSS Variables --- */
:root {
  /* Brand colors — exact hex, never approximate */
  --color-offwhite:   #FAF9F6;  /* Main page background */
  --color-warmwhite:  #F0EDE8;  /* Alternating section backgrounds */
  --color-dark:       #333333;  /* Body copy, nav links */
  --color-green:      #2D5A27;  /* Buttons, CTAs, links on hover */
  --color-green-dark: #1E3D1A;  /* Button hover state */
  --color-red:        #C0392B;  /* Accent only — Deep Tissue eyebrow, add-on badge */
  --color-gold:       #C9A84C;  /* Eyebrow text, icons, star ratings */
  --color-smoke:      #707070;  /* Subtext, captions */
  --color-charcoal:   #2A2A2A;  /* (legacy) dark section option */
  --color-sage:       #BFCDB0;  /* Events section — soft muted green */

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Lato', sans-serif;

  /* Layout */
  --max-width:  1200px;
  --text-width: 580px;
  --nav-height: 100px;
  --descriptor-height: 39px;  /* green descriptor bar height; keep in sync with its padding + font */
}

/* --- Base --- */
/* Native smooth anchor scrolling (compositor-driven, no JS, no perf cost).
   scroll-padding-top keeps the target section below the fixed nav + descriptor
   bar instead of tucked under it. Disabled for reduced-motion users. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--descriptor-height));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  background: var(--color-offwhite);
  color: var(--color-dark);
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 300;
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

/* --- Typography ---
   Cormorant Garamond: headings — weights 300/400 ONLY, never 600+
   Lato: body, nav, buttons — weights 300/400/700
   Minimum body 16px at all widths; minimum heading 28px on mobile */
h1 { font-family: var(--font-heading); font-size: clamp(2.8rem, 6vw, 5rem);    font-weight: 300; line-height: 1.05; }
h2 { font-family: var(--font-heading); font-size: clamp(2.2rem, 3.5vw, 3.2rem); font-weight: 300; line-height: 1.1;  }
h3 { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2rem);   font-weight: 400; line-height: 1.2;  }
p  { font-size: 1rem; font-weight: 300; line-height: 1.75; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}
.eyebrow-red { color: var(--color-red); }
.rule { width: 40px; height: 1px; background: var(--color-green); margin: 1.25rem 0 1.75rem; }

/* --- Buttons --- */
.btn-primary {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
  border-radius: 2px;
  background: var(--color-green);
  color: #fff;
  border: 2px solid var(--color-green);
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
  color: #fff; /* keep white — GeneratePress's a:hover would otherwise force near-black */
  transform: translateY(-1px);
}

/* Outline button — on dark backgrounds */
.btn-outline {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
  border-radius: 2px;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.65);
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; transform: translateY(-1px); }

/* Outline button — on light backgrounds */
.btn-outline-green {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
  border-radius: 2px;
  background: transparent;
  color: var(--color-green);
  border: 2px solid var(--color-green);
  transition: background 0.2s, color 0.2s, transform 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline-green:hover,
.btn-outline-green:focus,
.btn-outline-green:active {
  background: var(--color-green);
  color: #fff;
  transform: translateY(-1px);
}

/* --- Navigation brand lockup --- */
.nav-wordmark {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 500; /* +100 over the 400 base for a slightly heavier wordmark */
  letter-spacing: 0.12em;
  color: var(--color-green);
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.nav-tagline {
  font-family: var(--font-body);
  font-weight: 400; /* regular — not bold */
  color: var(--color-smoke);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-align: left;
  /* font-size set dynamically by matchTaglineWidth() to match wordmark width */
}

/* ============================================================
   GeneratePress overrides — hide the default header/footer so our
   custom fixed nav, descriptor bar, and footer take over. The body
   gets top padding equal to the fixed nav + descriptor bar height.
   ============================================================ */
.generate-page-header,
.site-header,
.site-footer,
.site-info { display: none; }

body { padding-top: calc(var(--nav-height) + var(--descriptor-height)); }

/* Front page runs full-bleed: neutralize GeneratePress's content
   container + article padding so the green/charcoal bands reach the
   viewport edges. Scoped to .home so interior pages keep their layout. */
.home #page.container { max-width: 100%; }
.home #content,
.home .content-area,
.home .site-main,
.home .inside-article,
.home .entry-content { max-width: 100%; width: 100%; margin: 0; padding: 0; }
.home .inside-article { border: 0; }
.home .entry-content > * { margin-top: 0; margin-bottom: 0; }

/* Core-block bridges: let a core/image fill the service-section column */
.service-image .wp-block-image,
.service-image figure { height: 100%; margin: 0; }
.service-image .wp-block-image img { height: 100%; }
/* Map our button classes onto core/button inner links (kept so any
   core/button blocks using these classes inherit the brand styling). */
.wp-block-button.btn-primary > .wp-block-button__link,
.wp-block-button.btn-outline > .wp-block-button__link,
.wp-block-button.btn-outline-green > .wp-block-button__link {
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--color-offwhite);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.nav-logo-img { width: 72px; height: 72px; object-fit: contain; }
/* align-items:flex-start is required: it stops the flex column from
   stretching both spans to the widest child. Without it, the wordmark
   measures as wide as the tagline and matchTaglineWidth() can't size it. */
.nav-wordmark-wrap { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.nav-links { display: flex; align-items: stretch; height: var(--nav-height); gap: 1.85rem; list-style: none; margin: 0; padding: 0; }
.nav-links > li { display: flex; align-items: center; position: relative; }
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dark);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--color-green); }

/* Services dropdown */
.nav-has-submenu > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-caret { font-size: 0.62em; position: relative; top: 1px; transition: transform 0.2s; }
.nav-has-submenu:hover .nav-caret { transform: rotate(180deg); }
.nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: var(--color-offwhite);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
  border-radius: 3px;
  padding: 0.4rem 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 1001;
}
.nav-has-submenu:hover .nav-submenu,
.nav-has-submenu:focus-within .nav-submenu { opacity: 1; visibility: visible; }
.nav-submenu li { display: block; width: 100%; }
.nav-submenu a { display: block; padding: 0.6rem 1.4rem; font-size: 0.82rem; letter-spacing: 0.1em; }
.nav-submenu a:hover { color: var(--color-green); background: rgba(45,90,39,0.06); }

.nav-cta .btn-primary { padding: 0.65rem 1.5rem; }
/* CTA text stays white in every state — outranks the .nav-links a color rule */
.nav-links .nav-cta a.btn-primary,
.nav-links .nav-cta a.btn-primary:link,
.nav-links .nav-cta a.btn-primary:visited,
.nav-links .nav-cta a.btn-primary:hover,
.nav-links .nav-cta a.btn-primary:focus,
.nav-links .nav-cta a.btn-primary:active { color: #fff; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--color-dark);
  transition: all 0.25s;
}

/* Descriptor bar */
#descriptor-bar {
  background: var(--color-green);
  color: #fff;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.72rem 1rem;
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
#descriptor-bar .descriptor-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  transition: color 0.2s;
  white-space: nowrap;
}
#descriptor-bar .descriptor-phone:hover,
#descriptor-bar .descriptor-phone:focus { color: var(--color-gold); }
#descriptor-bar .descriptor-phone-icon { flex-shrink: 0; }
@media (max-width: 768px) {
  #descriptor-bar .descriptor-text,
  #descriptor-bar .descriptor-sep { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
#hero {
  position: relative;
  /* Fill the viewport below the fixed nav + descriptor bar, so centered
     content reads as centered on screen (not under the bar). */
  min-height: calc(100svh - var(--nav-height) - var(--descriptor-height));
  display: flex;
  align-items: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  /* Background lives in CSS (not the block) so the hero stays a plain, valid
     Gutenberg block - no "invalid content" warning, nothing for an editor to
     accidentally strip via "Attempt recovery". Domain-relative path works on
     both Local and live. */
  background-image: url('/wp-content/uploads/2026/06/soultry-massage_mobile-setup_modern-living-room_hero-scaled.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.38) 45%, rgba(0,0,0,0.10) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 0 2rem;
  max-width: 540px;
  margin-left: max(2rem, calc((100vw - var(--max-width)) / 2 + 2rem));
}
.hero-content .eyebrow { color: var(--color-gold); }
.hero-content h1 { color: #fff; margin-bottom: 1.25rem; }
.hero-content h1 em { font-style: italic; font-weight: 300; }
.hero-body { color: rgba(255,255,255,0.88); font-size: 1.05rem; max-width: 400px; margin-bottom: 2rem; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
#trust { background: var(--color-warmwhite); border-bottom: 1px solid rgba(0,0,0,0.06); }
.trust-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dark);
  white-space: nowrap;
}
.trust-item svg { color: var(--color-green); flex-shrink: 0; }

/* ============================================================
   SERVICE SECTIONS — no pricing, no payment UI (v8). CTA anchors to #booking.
   ============================================================ */
.service-section { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 680px; position: relative; }
.service-image { position: relative; overflow: hidden; }
.service-image img { width: 100%; height: 100%; object-fit: cover; }
/* Single green divider centered exactly on the column boundary, full height.
   Anchored to the section center (not each image's inner edge) so the line sits
   on the identical vertical axis in BOTH service sections - perfectly aligned as
   the eye travels down the page, regardless of which side the image is on. */
.service-section::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  background: var(--color-green);
}
.service-image-divider { display: none; }
.service-content {
  padding: 5rem 4rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-offwhite);
}
.service-content.bg-warm { background: var(--color-warmwhite); }
.service-benefits { list-style: none; margin: 1.25rem 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.service-benefits li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.95rem; font-weight: 300; }
.service-benefits li::before { content: '•'; color: var(--color-green); font-weight: 700; flex-shrink: 0; }
.session-overview {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  color: var(--color-smoke);
  line-height: 1.6;
}
.session-overview strong { color: var(--color-dark); font-weight: 700; }

/* Service area band — now a personal quote from Shanika, centered */
#service-area-band { background: var(--color-green); padding: 2.5rem 2rem; text-align: center; }
#service-area-band .band-lead {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  max-width: 760px;
  margin: 0 auto;
}
#service-area-band .band-cta { margin-top: 1.6rem; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
#how-it-works { background: var(--color-offwhite); padding: 5rem 2rem; text-align: center; }
.hiw-inner { max-width: var(--max-width); margin: 0 auto; }
.hiw-rule { width: 40px; height: 1px; background: var(--color-green); margin: 1.25rem auto 3rem; }
.hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 900px; margin: 0 auto; position: relative; }
.hiw-steps::before {
  content: '';
  position: absolute;
  top: 22px;
  left: calc(16.6% + 22px);
  right: calc(16.6% + 22px);
  height: 1px;
  background: rgba(45,90,39,0.25);
}
.hiw-step { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.hiw-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-green);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.hiw-step h3 { font-size: 1.1rem; font-weight: 400; margin-top: 0.25rem; }
.hiw-step p { font-size: 0.9rem; color: var(--color-smoke); max-width: 240px; }

/* ============================================================
   BOOK & PAY — cash + peer-to-peer payment (no card processing)
   ============================================================ */
#booking { background: var(--color-offwhite); padding: 5rem 2rem; text-align: center; }
.booking-inner { max-width: var(--max-width); margin: 0 auto; }
.booking-rule { width: 40px; height: 1px; background: var(--color-green); margin: 1.25rem auto 1rem; }
.booking-sub { font-size: 0.95rem; color: var(--color-smoke); max-width: 520px; margin: 0 auto 3rem; }
.booking-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 900px; margin: 0 auto 2rem; text-align: left; }
.booking-card { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; }
.booking-card-featured { border-color: var(--color-green); }
.card-tag {
  background: var(--color-green);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.45rem 1.25rem;
  text-align: center;
}
.card-body { padding: 1.75rem 1.75rem 1.25rem; }
.card-icon { width: 32px; height: 32px; color: var(--color-green); margin-bottom: 1rem; }
.card-icon-red { color: var(--color-red); }
.card-title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 300; margin-bottom: 0.25rem; }
.card-sub { font-size: 0.85rem; color: var(--color-smoke); font-weight: 300; margin-bottom: 1.25rem; }
.card-pricing { border: 1px solid rgba(0,0,0,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 1.25rem; }
.card-pricing-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; font-size: 0.85rem; }
.card-pricing-row + .card-pricing-row { border-top: 1px solid rgba(0,0,0,0.06); background: var(--color-warmwhite); }
.card-pricing-row span:last-child { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 300; }
.card-includes { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.card-includes li { font-size: 0.82rem; font-weight: 300; color: var(--color-smoke); display: flex; align-items: center; gap: 0.4rem; }
.card-includes li::before { content: '✓'; color: var(--color-green); font-weight: 700; font-size: 0.75rem; }
.card-btns { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 1.75rem 1.75rem; }
/* Full-width card buttons: allow the long labels to wrap instead of
   overflowing the button (base .btn-* sets white-space:nowrap). */
.card-btns .btn-primary,
.card-btns .btn-outline-green {
  width: 100%;
  text-align: center;
  white-space: normal;
  padding-left: 1rem;
  padding-right: 1rem;
  line-height: 1.3;
}
.payment-trust { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.payment-trust-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-smoke);
}

/* Recommended badge + "Other ways to pay" panel */
.pay-recommended {
  display: inline-block;
  background: var(--color-green);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 2px;
  margin-bottom: 1.5rem;
}
.other-pay {
  max-width: 900px;
  margin: 2.5rem auto 0;
  padding: 2rem;
  background: var(--color-warmwhite);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  text-align: center;
}
.other-pay-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.5rem; }
.other-pay-sub { font-size: 0.9rem; color: var(--color-smoke); max-width: 600px; margin: 0 auto 1.5rem; }
/* How to Book: single-column vertical stepper. Number on the left, content on
   the right with a connector line between steps. CTAs live under step 1, the
   accepted-payment icons under step 3. Each step bolds the primary action +
   phone number (213 = reserve, 951 = pay). */
.book-steps { max-width: 470px; margin: 1.75rem auto 0; text-align: left; }
.book-step { position: relative; padding-left: 66px; padding-bottom: 2.25rem; }
.book-step:last-child { padding-bottom: 0; }
.book-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 50px;
  bottom: 4px;
  width: 1px;
  background: rgba(45,90,39,0.25);
}
.book-num {
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-green);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.book-step h4 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 400; margin: 0 0 0.35rem; min-height: 44px; display: flex; align-items: center; }
.book-step p { font-size: 0.9rem; color: var(--color-smoke); margin: 0; line-height: 1.6; }
.book-step p strong { color: var(--color-dark); font-weight: 700; }
.book-step p a { color: var(--color-green); font-weight: inherit; text-decoration: underline; text-underline-offset: 2px; }
.book-step p a:hover { color: var(--color-green-dark); }
.book-step .nowrap { white-space: nowrap; }
.book-step .pay-methods { margin-top: 1.15rem; margin-bottom: 0; justify-content: flex-start; gap: 1rem 1.4rem; }
/* Accepted-payments strip: flat row of small brand marks, no boxes (informational, not clickable) */
.pay-methods { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2.1rem; margin-bottom: 1.7rem; }
.pay-icon { height: 26px; width: auto; }
.pay-icon.pay-icon-venmo { height: auto; width: 62px; }
.reserve-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.reserve-note { font-size: 0.85rem; color: var(--color-smoke); }
.reserve-note a { color: var(--color-green); font-weight: 700; }

/* ============================================================
   EVENTS — soft sage (calmer, lighter green; distinct offering)
   with solid white cards for prominence
   ============================================================ */
#events { background: var(--color-sage); padding: 5rem 2rem; }
.events-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.events-left .eyebrow { color: var(--color-green); }
.events-left h2 { color: var(--color-dark); margin-bottom: 0.75rem; }
.events-left h2 em { font-style: italic; }
.events-rule { background: var(--color-green); }
.events-left p { color: var(--color-dark); margin-bottom: 1.75rem; }
.events-notice {
  background: #fff;
  border: 1px solid rgba(45,90,39,0.25);
  border-radius: 3px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  display: flex;
  gap: 0.75rem;
}
.events-notice svg { color: var(--color-green); flex-shrink: 0; margin-top: 1px; }
.events-notice p { color: var(--color-dark); font-size: 0.85rem; margin-bottom: 0; }
.events-notice strong { color: var(--color-green); }
.events-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.event-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 4px;
  padding: 1.75rem;
  box-shadow: 0 12px 30px rgba(45,90,39,0.14);
}
.event-card:last-child { grid-column: 1 / -1; }
.event-card svg { color: var(--color-green); margin-bottom: 0.75rem; }
.event-card h3 { font-size: 1.1rem; color: var(--color-dark); font-weight: 400; margin-bottom: 0.5rem; }
.event-card p { font-size: 0.85rem; color: var(--color-smoke); font-weight: 300; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer { background: #1e1e1e; padding: 3rem 2rem 2rem; text-align: center; }
.footer-logo { width: 140px; margin: 0 auto 1.5rem; }
.footer-cols { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; text-align: left; margin: 0 auto 2rem; }
.footer-col-title { display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: rgba(255,255,255,0.6); transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; justify-content: center; gap: 1.25rem; margin-bottom: 0.5rem; }
.footer-social a { color: rgba(255,255,255,0.6); transition: color 0.2s; }
.footer-social a:hover { color: var(--color-gold); }
.footer-social-handle { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: 1.5rem; }
.footer-area { font-size: 0.82rem; color: rgba(255,255,255,0.4); margin-bottom: 1.5rem; }
.footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem; }
.footer-legal { font-size: 0.75rem; margin-top: 0.6rem; }
.footer-legal a { color: rgba(255,255,255,0.45); transition: color 0.2s; }
.footer-legal a:hover { color: #fff; }

/* ============================================================
   INTAKE PAGE — post-payment "You're booked!" landing
   ============================================================ */
.intake-heading { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 0.5rem; }
.intake-intro { color: var(--color-smoke); max-width: 640px; margin-bottom: 2.25rem; }

/* ============================================================
   WPFORMS — brand every form (overrides WPForms "modern markup",
   whose CSS variables set a blue button + a fixed 41px height that
   knocked the label off-center). !important is needed to beat the
   plugin's per-form inline variable styles.
   ============================================================ */
.wpforms-container { font-family: var(--font-body); max-width: 720px; }
.wpforms-container .wpforms-field-label { font-family: var(--font-body); color: var(--color-dark); font-weight: 700; }
.wpforms-container .wpforms-required-label { color: var(--color-red); }
.wpforms-container .wpforms-submit-container { margin-top: 0.5rem; }

.wpforms-container button.wpforms-submit,
.wpforms-container input.wpforms-submit {
  background-color: var(--color-green) !important;
  border: 2px solid var(--color-green) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  height: auto !important;          /* drop the fixed 41px height... */
  line-height: 1.2 !important;      /* ...so padding + line-height center the text */
  padding: 0.95rem 2.2rem !important;
  border-radius: 2px !important;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s !important;
}
.wpforms-container button.wpforms-submit:hover,
.wpforms-container button.wpforms-submit:focus,
.wpforms-container input.wpforms-submit:hover,
.wpforms-container input.wpforms-submit:focus {
  background-color: var(--color-green-dark) !important;
  border-color: var(--color-green-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ============================================================
   ABOUT THE THERAPIST (Phase 2 — added June 2026)
   ============================================================ */
#about.about-section { background: var(--color-warmwhite); padding: 5rem 2rem; }
.about-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4rem;
  align-items: center;
}
.about-content { order: 1; } /* text on the left */
.about-photo { order: 2; }   /* photo on the right — alternates with Swedish's left photo */
.about-photo { display: flex; justify-content: center; }
.about-photo-frame {
  width: 100%;
  max-width: 340px;
  margin: 0; /* reset wp-block-image figure default margin */
  aspect-ratio: 4 / 5;
  background: var(--color-warmwhite);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 170px 170px 14px 14px; /* arched top */
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.about-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Placeholder monogram until the real headshot is imported */
.about-photo-placeholder { align-items: center; }
.about-photo-placeholder span {
  font-family: var(--font-heading);
  font-size: 4rem;
  letter-spacing: 0.1em;
  color: var(--color-green);
  opacity: 0.35;
}
.about-content { max-width: var(--text-width); }
.about-credentials { list-style: none; margin: 1.25rem 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.about-credentials li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; font-weight: 300; }
.about-credentials li::before { content: '✓'; color: var(--color-green); font-weight: 700; flex-shrink: 0; }

/* ============================================================
   GIFT CARDS PAGE
   ============================================================ */
.gift-page { max-width: var(--max-width); margin: 0 auto; padding: 1rem 2rem 4rem; }
.gift-header { text-align: center; max-width: 660px; margin: 0 auto 3rem; }
.gift-header h1 { margin-bottom: 0; }
.gift-intro { color: var(--color-smoke); margin-top: 1rem; }
.gift-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.gift-option { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; padding: 1.5rem 1rem; text-align: center; display: flex; flex-direction: column; gap: 0.4rem; }
.gift-option-name { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 400; line-height: 1.2; }
.gift-option-detail { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-smoke); font-weight: 700; }
.gift-option-price { font-family: var(--font-heading); font-size: 1.7rem; color: var(--color-green); }
.gift-custom-note { text-align: center; color: var(--color-smoke); font-size: 0.9rem; margin-bottom: 3.5rem; }
.gift-how { text-align: center; margin-bottom: 3.5rem; }
.gift-how h2 { margin-bottom: 2rem; }
.gift-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 820px; margin: 0 auto; }
.gift-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.gift-step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--color-green); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; }
.gift-step h3 { font-size: 1.1rem; font-weight: 400; }
.gift-step p { font-size: 0.9rem; color: var(--color-smoke); max-width: 220px; }
.gift-cta { text-align: center; background: var(--color-warmwhite); border-radius: 4px; padding: 3rem 2rem; }
.gift-cta h2 { margin-bottom: 0.75rem; }
.gift-cta p { color: var(--color-smoke); margin-bottom: 1.5rem; }
.gift-cta p a { color: var(--color-green); font-weight: 700; }

/* ============================================================
   MODAL — event quote popup
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 1.5rem;
  background: rgba(0,0,0,0.55);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.is-open { opacity: 1; }
.modal-box {
  position: relative;
  background: var(--color-offwhite);
  border-radius: 6px;
  max-width: 560px;
  width: 100%;
  margin: auto;
  padding: 2.5rem 2.25rem 2rem;
  box-shadow: 0 30px 70px rgba(0,0,0,0.3);
  transform: translateY(14px);
  transition: transform 0.2s ease;
}
.modal-overlay.is-open .modal-box { transform: translateY(0); }
.modal-box .eyebrow { color: var(--color-green); }
.modal-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.4rem; }
.modal-sub { color: var(--color-smoke); font-size: 0.92rem; margin-bottom: 1.5rem; }
.modal-close {
  position: absolute;
  top: 0.65rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--color-smoke);
  cursor: pointer;
  padding: 0.25rem;
}
.modal-close:hover { color: var(--color-dark); }
body.modal-open { overflow: hidden; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Nav collapses to the hamburger below this width (it needs more room than the
   900px body-section breakpoint). Book Now stays visible inside the open menu. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    position: fixed;
    top: calc(var(--nav-height) + var(--descriptor-height));
    left: 0; right: 0;
    background: var(--color-offwhite);
    padding: 1.5rem 2rem 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    gap: 1.25rem;
    z-index: 998;
  }
  .nav-links.open > li { display: block; }
  /* Submenu shows inline + indented inside the open mobile menu */
  .nav-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    min-width: 0;
    padding: 0.5rem 0 0 1rem;
  }
  .nav-submenu a { padding: 0.4rem 0; }
  .nav-caret { display: none; }
  .nav-hamburger { display: flex; }
}

/* Body sections stack at 900px */
@media (max-width: 900px) {
  :root { --nav-height: 88px; }
  .nav-logo-img { width: 64px; height: 64px; }
  .nav-wordmark { font-size: 1.5rem; }
  .service-section { grid-template-columns: 1fr; min-height: auto; }
  .service-image { height: 320px; }
  .service-section::after { display: none; }
  .service-section.reverse .service-image { order: 2; }
  .service-section.reverse .service-content { order: 1; }
  .service-content { padding: 3rem 1.5rem; }
  .hiw-steps { grid-template-columns: 1fr; gap: 2rem; }
  .hiw-steps::before { display: none; }
  .booking-cards { grid-template-columns: 1fr; }
  .pay-methods { gap: 1rem 1.5rem; }
  .other-pay { padding: 1.5rem; }
  .gift-options { grid-template-columns: 1fr 1fr; }
  .gift-steps { grid-template-columns: 1fr; gap: 2rem; }
  .events-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .events-cards { grid-template-columns: 1fr; }
  .event-card:last-child { grid-column: auto; }
  .trust-inner { gap: 1.5rem; }
  .footer-cols { gap: 2.25rem; text-align: center; }
  .footer-col ul { align-items: center; }
  .hero-content { margin-left: 2rem; max-width: calc(100vw - 4rem); }
  .hero-btns { flex-direction: column; }
  .payment-trust { gap: 1.25rem; }
  #about.about-section { padding: 3rem 1.5rem; }
  .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-content { order: 2; max-width: none; } /* photo back on top when stacked */
  .about-photo { order: 1; }
  .about-photo-frame { max-width: 280px; margin: 0 auto; }
}

/* Narrow phones (≤480px, e.g. iPhone 14 Pro Max @430px) — shrink the brand
   lockup and reserve a gap so it never crowds the hamburger. */
@media (max-width: 480px) {
  :root { --nav-height: 76px; }
  .nav-inner { padding: 0 1.25rem; gap: 1rem; }
  .nav-logo-img { width: 52px; height: 52px; }
  .nav-wordmark { font-size: 1.2rem; }
}

/* ============================================================
   DESKTOP READABILITY (>=769px) — larger body + subtitle copy for
   comfortable reading. Weight stays 300. Mobile + hero unchanged.
   Placed last so it wins the cascade over the base rules. (Jun 8, 2026)
   ============================================================ */
@media (min-width: 769px) {
  p { font-size: 1.0625rem; }                      /* body copy: 16px -> 17px (weight stays 300) */
  .booking-sub,
  .other-pay-sub,
  .modal-sub { font-size: 1rem; }                  /* section subtitles: ~14-15px -> 16px */
  .service-benefits li,
  .about-credentials li { font-size: 1rem; }       /* benefit/credential lists -> 16px */
  .eyebrow { font-size: 0.82rem; }                 /* all section eyebrows: 11.5px -> 13.1px */
  .hiw-step h3,
  .book-step h4 { font-size: 1.3rem; }             /* step titles: 17.6px -> 20.8px */
  .hiw-step p,
  .book-step p { font-size: 1.0625rem; }           /* step text: 16px -> 17px */
}