/* ── Self-hosted: Wavehaus ───────────────────────────────── */
@font-face {
  font-family: "Wavehaus";
  src: url("fonts/wavehaus/wavehaus-66book-webfont.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wavehaus";
  src: url("fonts/wavehaus/wavehaus-95semibold-webfont.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Fluid type scale (375px → 1728px) ───────────────────── */
  /* Run eos-type-scale skill to regenerate with project sizes  */

  /* Headings — Mrs Eaves XL Serif (Typekit) */
  --text-lg: clamp(2rem, 1.654rem + 1.478vw, 3.25rem); /* 32px → 52px */
  --text-md: clamp(1.5rem, 1.361rem + 0.591vw, 2rem); /* 24px → 32px */
  --text-sm: clamp(
    1.5rem,
    1.292rem + 0.887vw,
    2.25rem
  ); /* 24px → 36px (italic) */

  /* Subheadings — Wavehaus 600, uppercase, 0.3em tracking */
  --text-sub-md: clamp(1rem, 0.861rem + 0.591vw, 1.5rem); /* 16px → 24px */
  --text-sub-sm: clamp(1rem, 1rem + 0vw, 1rem); /* 16px fixed  */

  /* Body — Wavehaus 500 */
  --text-body-xl: clamp(1.25rem, 1.181rem + 0.296vw, 1.5rem); /* 20px → 24px */
  --text-body-lg: clamp(1.125rem, 1.09rem + 0.148vw, 1.25rem); /* 18px → 20px */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding-bottom: 0;
  color: inherit;
}

/* ── Font weight ──────────────────────────────────────────── */
/* Loaded weights: Mrs Eaves XL Serif 400 (+ italic) · Wavehaus 500, 600 */
.font-thin {
  font-weight: 100 !important;
}
.font-extralight {
  font-weight: 200 !important;
}
.font-light {
  font-weight: 300 !important;
}
.font-normal {
  font-weight: 400 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.font-bold {
  font-weight: 700 !important;
}
.font-extrabold {
  font-weight: 800 !important;
}
.font-black {
  font-weight: 900 !important;
}

/* ── Line height ──────────────────────────────────────────── */
.leading-none {
  line-height: 1;
}
.leading-tight {
  line-height: 1.1;
}
.leading-snug {
  line-height: 1.25;
}
.leading-normal {
  line-height: normal;
}
.leading-relaxed {
  line-height: 1.5;
}
.leading-loose {
  line-height: 1.75;
}

/* ── Type scale ───────────────────────────────────────────── */
/* line-height and letter-spacing come from Figma per token    */
/* Override line-height per instance using .leading-* classes  */
.heading-lg {
  font-size: var(--text-lg);
  font-family: var(--font-mrs-eaves-xl-serif);
  line-height: normal;
}
.heading-lg h1,
.heading-lg h2,
.heading-lg h3,
.heading-lg h4,
.heading-lg h5,
.heading-lg h6,
.heading-lg p {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.heading-md {
  font-size: var(--text-md);
  font-family: var(--font-mrs-eaves-xl-serif);
  line-height: normal;
}
.heading-md h1,
.heading-md h2,
.heading-md h3,
.heading-md h4,
.heading-md h5,
.heading-md h6,
.heading-md p {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.heading-sm {
  font-size: var(--text-sm);
  font-family: var(--font-mrs-eaves-xl-serif);
  line-height: normal;
  font-style: italic;
}
.heading-sm h1,
.heading-sm h2,
.heading-sm h3,
.heading-sm h4,
.heading-sm h5,
.heading-sm h6,
.heading-sm p {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-style: inherit;
}

.subheading-md {
  font-size: var(--text-sub-md);
  font-family: var(--font-wavehaus);
  line-height: normal;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.subheading-md h1,
.subheading-md h2,
.subheading-md h3,
.subheading-md h4,
.subheading-md h5,
.subheading-md h6,
.subheading-md p,
.subheading-md li {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.subheading-sm {
  font-size: var(--text-sub-sm);
  font-family: var(--font-wavehaus);
  line-height: normal;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.subheading-sm h1,
.subheading-sm h2,
.subheading-sm h3,
.subheading-sm h4,
.subheading-sm h5,
.subheading-sm h6,
.subheading-sm p,
.subheading-sm li {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.body-xl {
  font-size: var(--text-body-xl);
  font-family: var(--font-wavehaus);
  line-height: normal;
  font-weight: 500;
}
.body-xl p,
.body-xl li {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.body-lg {
  font-size: var(--text-body-lg);
  font-family: var(--font-wavehaus);
  line-height: normal;
  font-weight: 500;
}
.body-lg p,
.body-lg li {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* ── Rich text ────────────────────────────────────────────── */
/* Apply to Code modules or WP editor content outside Divi's control */
.rich-text h1 {
  font-size: var(--text-lg);
  font-family: var(--font-mrs-eaves-xl-serif);
  line-height: normal;
}
.rich-text h2 {
  font-size: var(--text-md);
  font-family: var(--font-mrs-eaves-xl-serif);
  line-height: normal;
}
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  font-size: var(--text-sm);
  font-family: var(--font-mrs-eaves-xl-serif);
  line-height: normal;
  font-style: italic;
}

.rich-text p,
.rich-text li {
  font-size: var(--text-body-xl);
  font-family: var(--font-wavehaus);
  line-height: normal;
  font-weight: 500;
}

.rich-text ol,
.rich-text ul {
  padding-left: 1.5em;
}

.rich-text a {
  text-decoration: underline;
  color: inherit;
}

/* ═══════════ Global button system (Thistle) ═══════════════════
   Apply ONE button class + ONE typography class to a link/Divi module:
     <a class="btn-book-now button-text">Book Now</a>
   Change type      → swap the .button-text class for another type class.
   Change colors    → set --btn-bg / --btn-fg (Divi: module → Advanced →
                      Custom CSS → Main Element, e.g. "--btn-bg: var(--light-pink);")
                      or add a modifier class (.btn--light, .btn--ghost-light).
   ──────────────────────────────────────────────────────────── */
:root {
  --text-button: clamp(1.25rem, 1.181rem + 0.296vw, 1.5rem);
} /* 20px → 24px */

/* Button typography — Figma "Buttons" token (Wavehaus 600, uppercase, 0.2em) */
.button-text {
  font-family: var(--font-wavehaus);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--text-button);
  line-height: 1.1;
}
.button-text p,
.button-text a,
.button-text span {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
}

/* Shared base for the color-driven buttons */
.btn-book-now,
.btn-call-us,
.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}
.btn-book-now:hover,
.btn-call-us:hover,
.btn-arrow:hover {
  opacity: 0.9;
}

/* 1) Generic Book Now — hero / CTA / general */
.btn-book-now {
  --btn-bg: var(--navy);
  --btn-fg: var(--light-purple);
  padding: 16px 28px;
}

/* 3) Call Us — internal hero. Desktop: text only, transparent. Tablet/phone: green button. */
.btn-call-us {
  --btn-bg: transparent;
  --btn-fg: var(--dark-navy);
  padding: 0;
}
@media (max-width: 980px) {
  .btn-call-us {
    --btn-bg: var(--green);
    --btn-fg: var(--dark-navy);
    padding: 12px 28px;
  }
}
/* Call Us (navy) — dark-navy fill on tablet/phone instead of green.
   Use WITH .btn-call-us:  <a class="btn-call-us btn-call-us--navy button-text">Call Us at [phone]</a> */
@media (max-width: 980px) {
  .btn-call-us--navy {
    --btn-bg: var(--dark-navy);
    --btn-fg: var(--light-pink);
  }
}
/* Call Us (white desktop text) — desktop text #fff; ≤980 stays the base green bg + dark-navy text.
   Use WITH .btn-call-us, NOT --navy:  <a class="btn-call-us btn-call-us--white button-text">…</a> */
@media (min-width: 981px) {
  .btn-call-us--white {
    --btn-fg: #ffffff;
  }
}
/* Two-line label — hard break on tablet/phone, one line on desktop. Wrap the label
   in <span class="btn-2line"> and drop a <br class="br-tablet-down"> where the break goes:
   <a class="btn-call-us btn-call-us--navy subheading-sm" href="[phone_tel]"><span class="btn-2line">Call Us at <br class="br-tablet-down">[phone_number]</span></a> */
.btn-2line {
  text-align: center;
}
.br-tablet-down {
  display: none;
}
@media (max-width: 980px) {
  .br-tablet-down {
    display: inline;
  }
}
/* Desktop: the Call Us code module is stretched to the taller Book Now button's height (flex row,
   align-items:stretch), so its text-only link sits at the top. Center it vertically to align the CTAs. */
@media (min-width: 981px) {
  .et_pb_code:has(> .et_pb_code_inner > .btn-call-us) {
    display: flex;
    align-items: center;
  }
  .et_pb_code:has(> .et_pb_code_inner > .btn-call-us) > .et_pb_code_inner {
    width: 100%;
  }
}

/* 4) Arrow button — text + right arrow, 1rem gap (all breakpoints). Arrow follows --btn-fg. */
.btn-arrow {
  --btn-bg: transparent;
  --btn-fg: var(--dark-navy);
  padding: 0;
  gap: 1rem;
}
.btn-arrow::after {
  content: "";
  flex: 0 0 auto;
  width: 33px;
  height: 15px;
  background-color: var(--btn-fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2233%22%20height%3D%2215%22%20viewBox%3D%220%200%2033%2015%22%3E%3Cpath%20d%3D%22M32.7071%208.07112C33.0976%207.6806%2033.0976%207.04743%2032.7071%206.65691L26.3431%200.292946C25.9526%20-0.0975785%2025.3195%20-0.0975785%2024.9289%200.292946C24.5384%200.68347%2024.5384%201.31664%2024.9289%201.70716L30.5858%207.36401L24.9289%2013.0209C24.5384%2013.4114%2024.5384%2014.0446%2024.9289%2014.4351C25.3195%2014.8256%2025.9526%2014.8256%2026.3431%2014.4351L32.7071%208.07112ZM0%207.36401V8.36401H32V7.36401V6.36401H0V7.36401Z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2233%22%20height%3D%2215%22%20viewBox%3D%220%200%2033%2015%22%3E%3Cpath%20d%3D%22M32.7071%208.07112C33.0976%207.6806%2033.0976%207.04743%2032.7071%206.65691L26.3431%200.292946C25.9526%20-0.0975785%2025.3195%20-0.0975785%2024.9289%200.292946C24.5384%200.68347%2024.5384%201.31664%2024.9289%201.70716L30.5858%207.36401L24.9289%2013.0209C24.5384%2013.4114%2024.5384%2014.0446%2024.9289%2014.4351C25.3195%2014.8256%2025.9526%2014.8256%2026.3431%2014.4351L32.7071%208.07112ZM0%207.36401V8.36401H32V7.36401V6.36401H0V7.36401Z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat center / contain;
}

/* Color modifiers (handy overrides) */
.btn--light {
  --btn-bg: var(--light-pink);
  --btn-fg: var(--navy);
} /* light button on dark hero */
.btn--ghost-light {
  --btn-fg: var(--light-pink);
} /* transparent text on dark */

/* 2) Header Book Now — desktop 1 line, tablet/mobile wraps to 2 lines.
      Pair with .subheading-sm for type (16px, 0.3em — matches Figma S Subheading). */
.btn-header-cta {
  --btn-bg: var(--green);
  --btn-fg: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  padding: 0.625rem 1.25rem;
  line-height: 1.1;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}
.btn-header-cta:hover {
  opacity: 0.9;
}
@media (max-width: 980px) {
  .btn-header-cta {
    white-space: normal;
    letter-spacing: 0.08em;
    --btn-bg: var(--navy);
    --btn-fg: var(--light-purple);
    padding-left: 0.5rem; /* tighter sides — at 1.25rem the centered nowrap button is wider than its 40% cell
                             and its navy bg paints over the location cell's white divider */
    padding-right: 0.5rem;
  }
} /* one line; keeps subheading-sm 1rem / 0.3em (= Figma 1rem / 0.3rem) */
@media (max-width: 360px) {
  .btn-header-cta {
    letter-spacing: 0.15em; /* extra-narrow phones: relax the tracking so BOOK NOW still fits its cell */
  }
}

/* Header top-bar: Download Our App (.hdr-app) + Pharmacy (.hdr-pharmacy) — separate Code modules.
   Full-height flush buttons. Desktop: cluster pushed right of the phone group, flush to Book Now —
   the column stretches all three code modules to the bar height (so the smaller-font App matches),
   column-gap:0 keeps them flush. ≤980: they drop to their own full-width row below the navy bar
   (6-col grid in style.css), App turns periwinkle. */
.btn-header-app,
.btn-header-pharmacy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  color: var(--dark-navy) !important;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  padding: 0.625rem 1.25rem;
  line-height: 1.1;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}
.btn-header-app:hover,
.btn-header-pharmacy:hover {
  opacity: 0.9;
}
.btn-header-app {
  background: #c4cfeb;
  font-size: 0.875rem;
} /* beige (desktop) */
.btn-header-pharmacy {
  background: var(--light-purple);
} /* light-purple */
@media (min-width: 981px) {
  .thistle-topbar .et_pb_column {
    align-items: stretch !important;
    column-gap: 0 !important;
  } /* buttons fill bar height + flush */
  .thistle-topbar .topbar-address,
  .thistle-topbar .topbar-phone {
    align-self: center;
  } /* keep NAP vertically centered */
  .thistle-topbar .topbar-phone {
    margin-left: 1.5rem !important;
  } /* address ↔ phone gap */
  .hdr-app {
    margin-left: auto;
  } /* push the cluster right */
  .thistle-topbar .et_pb_column > .et_pb_code > .et_pb_code_inner {
    display: flex;
    height: 100%;
  } /* button fills module height */
}
@media (max-width: 980px) {
  .thistle-topbar .hdr-app .et_pb_code_inner,
  .thistle-topbar .hdr-pharmacy .et_pb_code_inner {
    display: flex;
    height: 100%;
  }
  .btn-header-app,
  .btn-header-pharmacy {
    flex: 1;
    min-width: 0; /* let the flex/grid cell shrink below the nowrap label instead of bloating the grid */
    font-size: 0.875rem;
    padding-left: 0.5rem; /* tighter sides on mobile so both labels fit their cells on small phones */
    padding-right: 0.5rem;
  } /* equal size (Figma mobile) → equal height, no navy sliver under App */
  .btn-header-app {
    background: #c4cfeb;
  } /* periwinkle (mobile/tablet) */
}

/* ═══════════ Carousel nav arrows ═════════════════════════════
   Code module above the carousel:
     <div class="carousel-nav">
       <button class="carousel-arrow" data-carousel-prev aria-label="Previous">{chevron SVG}</button>
       <button class="carousel-arrow" data-carousel-next aria-label="Next">{chevron SVG}</button>
     </div>
   Put stroke="currentColor" on the SVG path so the arrow follows the button color.
   ──────────────────────────────────────────────────────────── */
.carousel-nav {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
} /* base: 1.5rem between arrows */
.carousel-arrow {
  --arrow-h: 2.0625rem; /* 33px — same on desktop & mobile */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2.625rem;
  border: 1px solid var(--dark-navy);
  border-radius: 0.625rem;
  background: transparent;
  color: var(--dark-navy);
  cursor: pointer;
  line-height: 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.carousel-arrow:hover {
  background: var(--dark-navy);
  color: var(--background);
}
.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.carousel-arrow:disabled:hover {
  background: transparent;
  color: var(--dark-navy);
}
.carousel-arrow svg {
  display: block;
  width: auto;
  height: var(--arrow-h);
}
.carousel-arrow svg path {
  stroke: currentColor;
}
.carousel-arrow[data-carousel-prev] svg,
.carousel-arrow[data-gc-prev] svg {
  transform: scaleX(-1);
} /* one SVG → flip for "previous" */

/* Variant — arrow clamps 25→33px; gap 1.5rem desktop → 1rem ≤980 (e.g. Urgent Care Facilities) */
.carousel-nav--sm .carousel-arrow {
  --arrow-h: clamp(1.5625rem, 1.424rem + 0.591vw, 2.0625rem);
} /* 25px → 33px */
@media (max-width: 980px) {
  .carousel-nav--sm {
    gap: 1rem;
  }
}

/* ═══ Divi group-carousel — equal-height cards ═══════════════
   Each track stretches its slides to the tallest, then the card
   inside fills its slide → every card in a group matches the
   tallest card in THAT group. (Per-track, so groups are independent.) */
.et_pb_group_carousel_track {
  align-items: stretch !important;
}
.et_pb_group_carousel_slide {
  display: flex !important;
}
.et_pb_group_carousel_slide > .et_pb_group {
  width: 100%;
}

/* ═══ .fill-image — image fills its column like a cover background ═══
   Put on a Divi Image module that's alone in its column; the column
   stretches to the adjacent column's height and the image covers it. */
.fill-image {
  height: 100%;
  align-self: stretch;
}
.fill-image .et_pb_image_wrap,
.fill-image > a,
.fill-image > span,
.fill-image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.fill-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
}

/* ── Site social icons ([site_social]) ──────────────────────── */
.site-social {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.site-social__link {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.site-social__link:hover {
  opacity: 0.7;
}
.site-social svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  fill: currentColor;
}

/* Site map embed ([map]) — fills the Code module's column (width + height).
   The iframe's hard-coded width/height attributes are overridden below.
   Height comes from a sibling column in a multi-column row; standalone falls back to min-height. */
.site-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  overflow: hidden;
}
.site-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Carry the column height down through the Code module wrappers (scoped to the map only) */
.et_pb_code:has(.site-map) {
  height: 100%;
}
.et_pb_code:has(.site-map) > .et_pb_code_inner {
  height: 100%;
}

/* Phone number digit spacing */
.site-phone {
  letter-spacing: 0.06em;
}

/* Body S (compact body — footer / fine print) */
:root {
  --text-body-sm: clamp(0.875rem, 0.84rem + 0.148vw, 1rem);
}
.body-sm {
  font-size: var(--text-body-sm);
  font-family: var(--font-wavehaus);
  line-height: normal;
  font-weight: 500;
}
.body-sm p,
.body-sm li {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* Arrow button — bordered variant (Figma resource links).
   Use WITH .btn-arrow:  <a class="btn-arrow btn-arrow--box button-text">…</a>
   Full-width box, 1px border (follows --btn-fg), text left / arrow right. */
.btn-arrow--box {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--btn-fg);
  padding: 0.75rem 1.75rem;
}
/* Hover: navy fill, white text — the arrow + border follow --btn-fg */
.btn-arrow--box:hover {
  --btn-bg: var(--navy);
  --btn-fg: #ffffff;
  opacity: 1;
}

/* ═══════════ Site banners ═══════════════════════════════════
   Announcement bars above the global header (Site Info → Banners).
   Non-sticky (scrolls away); text/bg colors come inline per banner. */
.site-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 3.25rem;
}
.site-banner .body-sm {
  color: inherit;
}
/* Banner links inherit the banner text color + stay underlined */
.site-banner a {
  color: inherit;
  text-decoration: underline;
}
.site-banner__close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: inherit;
  font-size: 1.375rem;
  line-height: 1;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.site-banner__close:hover {
  opacity: 1;
}