/* ============================================================
   Retreat Hello Consultation — Option C "Spa soft" — CSS v9
   ============================================================
   Targets real LWC class structure discovered via DOM inspection:
   - .header-css        → pale blue banner wrapper (Mirketa-era)
   - .slds-card         → form's article container
   - .slds-text-heading_large → headline (penetrates shadow via global SLDS)
   - .libre-baskerville-regular → Mirketa-era font class (override)

   v8 (2026-05-12): Stage 2 header (logo + eucalyptus sprig + FEEL BETTER
   tagline) added at end of file. Lives in a Rich Content Editor component
   above the accountsIntake LWC; relies on classes scoped under
   .retreat-stage2-header so it can't bleed into form styling. NOT shipped
   to prod — Stage 2 was scoped out 2026-05-12.

   v9 (2026-05-14): Subtitle line added under the headline ("Book a
   complimentary 10-minute call..."). Markup change in accountsIntake.html
   adds a sibling <p class="retreat-subtitle"> after the heading; this file
   adds the .retreat-subtitle rule. Cache buster bumps ?v=7 → ?v=9.
   ============================================================ */

/* ---- Self-hosted brand fonts ---- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('RetreatFonts/RetreatFonts/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('RetreatFonts/RetreatFonts/CormorantGaramond-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('RetreatFonts/RetreatFonts/CormorantGaramond-SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('RetreatFonts/RetreatFonts/CormorantGaramond-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('RetreatFonts/RetreatFonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('RetreatFonts/RetreatFonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('RetreatFonts/RetreatFonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('RetreatFonts/RetreatFonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('RetreatFonts/RetreatFonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

/* ---- SLDS design token overrides ---- */
:root {
  --slds-g-color-brand-base-50: #169689;
  --slds-g-color-brand-base-60: #0F6E64;
  --slds-g-color-brand-base-40: #65CFC4;
  --slds-g-color-brand-base-30: #D0FAF6;
  --slds-c-input-color-border-focus: #169689;
  --slds-c-input-shadow-focus: 0 0 0 3px rgba(22, 150, 137, 0.2);
}

/* ---- PAGE: Mint wash background ---- */
html, body, .siteforceBody, .forceCommunityForceCommunity, .slds-scope {
  background-color: #D0FAF6 !important;
  background: #D0FAF6 !important;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
  color: #1A1A1A !important;
}

/* ---- KILL the pale-blue header band ----
   This is Mirketa's .header-css wrapper around the "Start Your Retreat Today" headline */
.header-css {
  background-color: transparent !important;
  background: transparent !important;
  margin: 0 0 24px !important;
  padding: 32px 0 8px !important;
}

/* ---- White card around the entire form ---- */
article.slds-card,
.slds-card {
  background-color: #FFFFFF !important;
  max-width: 720px !important;
  margin: 32px auto !important;
  border-radius: 24px !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(22, 150, 137, 0.08), 0 4px 24px rgba(22, 150, 137, 0.06) !important;
  overflow: hidden !important;
}
article.slds-card .slds-card__body,
.slds-card .slds-card__body,
.slds-card__body_inner {
  padding: 8px 36px 36px !important;
}

/* ---- Headline: "Start Your Retreat Today." ----
   Override Mirketa's .libre-baskerville-regular class as well */
.slds-text-heading_large,
.libre-baskerville-regular,
.slds-text-heading_large.libre-baskerville-regular {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: #1A1A1A !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  text-align: center !important;
  line-height: 1.1 !important;
  letter-spacing: -0.005em !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Small-caps label above the headline (uses ::before since we can't add markup) */
.header-css .slds-text-heading_large::before {
  content: "HELLO CONSULTATION  ·  FREE";
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #65CFC4;
  font-weight: 600;
  margin-bottom: 14px;
}

/* Subtle eucalyptus divider line under the headline (CSS-only horizontal rule) */
.header-css .slds-text-heading_large::after {
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  background: #65CFC4;
  margin: 18px auto 0;
}

/* Subtitle line under the headline (added v8 — content edit per Jake) */
.retreat-subtitle {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: #4A5754 !important;
  font-weight: 400 !important;
  max-width: 560px;
  margin: 18px auto 0 !important;
  padding: 0 16px;
}

/* ---- Section headers (Patient Details, Appointment Details, Other) ---- */
.slds-section__title,
.slds-section-title,
.slds-text-heading_medium,
.slds-text-heading_small,
.slds-page-header__title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: #169689 !important;
  background: transparent !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  margin: 24px 0 12px !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Remove default light-gray section banner backgrounds */
.slds-section,
.slds-section__title-action,
.slds-tile,
.slds-grid > .slds-col > .slds-grid:first-child {
  background: transparent !important;
}

/* ---- Form inputs ---- */
.slds-input,
input.slds-input,
.slds-textarea,
textarea.slds-textarea,
.slds-select,
select.slds-select,
.slds-combobox__input,
.slds-input_faux {
  border: 1px solid #D9E5E2 !important;
  border-radius: 10px !important;
  background-color: #FAFCFB !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  color: #1A1A1A !important;
  padding: 10px 14px !important;
  min-height: 44px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.slds-input:focus, .slds-textarea:focus, .slds-select:focus, .slds-combobox__input:focus {
  border-color: #169689 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(22, 150, 137, 0.18) !important;
}

/* Labels */
.slds-form-element__label {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #444 !important;
  margin-bottom: 6px !important;
  text-transform: none !important;
}

/* Required asterisk in brand mint */
.slds-required, abbr[title="required"], abbr.slds-required {
  color: #65CFC4 !important;
  text-decoration: none !important;
  font-weight: 500;
}

/* ---- Submit button: centered teal pill, max 360px ---- */
.slds-button_brand,
button.slds-button_brand,
[type="submit"].slds-button {
  background-color: #169689 !important;
  background: #169689 !important;
  border: 1px solid #169689 !important;
  border-radius: 999px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #FFFFFF !important;
  padding: 14px 32px !important;
  min-height: 52px !important;
  width: 100% !important;
  max-width: 360px !important;
  display: block !important;
  margin: 28px auto 0 auto !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* Center the submit button's parent container too (catches uneven padding) */
*:has(> .slds-button_brand),
*:has(> button[type="submit"]) {
  text-align: center !important;
}
.slds-button_brand:hover, button.slds-button_brand:hover {
  background-color: #0F6E64 !important;
  background: #0F6E64 !important;
  border-color: #0F6E64 !important;
}

/* ---- Hide the "Reason for booking" dueling list + its orphan label ----
   In newer Salesforce releases the legacy .slds-dueling-list was renamed to
   <lightning-dual-listbox>. Hide both — and the .slds-form-element__legend
   "Reason for booking" label that survives inside it. */
.slds-dueling-list,
.slds-dueling-list__column,
lightning-dual-listbox {
  display: none !important;
}

/* ---- Hide the entire "How did you hear" column ----
   The left column of the "Other" section contains both the now-hidden
   lightning-dual-listbox and the "How did you hear about ReTreat?"
   lightning-input. Rather than hide individual children and leave an
   empty 50% column reserving layout space, hide the whole column.
   The marketing attribution UTM-capture LWC replaces this functionally. */
.slds-col:has(lightning-dual-listbox) {
  display: none !important;
}

/* ---- Let the "Note to practitioner" column span the full row ----
   With the sibling column hidden above, the textarea would still render
   at 50% width because of .slds-size_1-of-2. Override to full width. */
.slds-col:has(lightning-textarea) {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ---- Hide the "Other" section heading ----
   Only one field remains in the section (the "Note to practitioner"
   textarea) and its own label is self-explanatory. :has() scopes this
   to the textarea-containing section only — Patient Details and
   Appointment Details headings remain visible. */
.slds-section:has(lightning-textarea) > h3.slds-section__title,
.slds-section:has(lightning-textarea) > .slds-section__title {
  display: none !important;
}

/* ---- Hide the "Session Type" fieldset ----
   Only option is Phone (pre-selected). No choice = no value showing it. */
fieldset:has(input[name="bookingBy"]) {
  display: none !important;
}

/* ---- Links ---- */
a { color: #169689; }
a:hover { color: #0F6E64; }

/* ---- Placeholder text ---- */
.slds-input::placeholder,
.slds-textarea::placeholder {
  color: #9AAAA7 !important;
  font-family: 'Poppins', sans-serif !important;
}

/* ============================================================
   Stage 2 — Header (logo + eucalyptus sprig + FEEL BETTER tagline)
   ============================================================
   Sits in a Rich Content Editor component ABOVE the accountsIntake LWC,
   on the mint-wash page background. The HTML snippet lives in
   stage2-header.html. All styles are scoped under .retreat-stage2-header
   so they cannot bleed into form styling.
   ============================================================ */

.retreat-stage2-header {
  max-width: 720px;
  margin: 56px auto 0;
  padding: 0 24px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.retreat-stage2-header__logo {
  display: block;
  margin: 0 auto;
  max-width: 180px;
  height: auto;
  /* The logo asset is a flat PNG — keep it crisp at small sizes */
  image-rendering: auto;
}

.retreat-stage2-header__sprig {
  display: block;
  margin: 18px auto 10px;
  width: 240px;
  height: auto;
  max-width: 70%;
  /* Slight transparency so the sprig feels like a watermark, not a decal */
  opacity: 0.85;
}

.retreat-stage2-header__tagline {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: #169689;
  margin: 0;
  padding: 0;
  line-height: 1.4;
  text-transform: none; /* HTML already uppercase, keeps consistent rendering */
}

/* Tighten the gap between the Stage 2 header and the white card below */
.retreat-stage2-header + * article.slds-card,
.retreat-stage2-header + * .slds-card,
.retreat-stage2-header ~ * article.slds-card,
.retreat-stage2-header ~ * .slds-card {
  margin-top: 24px !important;
}

/* Mobile: tighten spacing and scale */
@media (max-width: 480px) {
  .retreat-stage2-header {
    margin-top: 32px;
    padding: 0 20px;
  }
  .retreat-stage2-header__logo {
    max-width: 140px;
  }
  .retreat-stage2-header__sprig {
    width: 200px;
    margin: 14px auto 8px;
  }
  .retreat-stage2-header__tagline {
    font-size: 10px;
    letter-spacing: 0.28em;
  }
}