/*
 * DPFM shared frontend overrides.
 *
 * Loaded on every plugin-rendered page via the dpfm_head_inject filter,
 * AFTER each page's own embedded <style> block, so identical-specificity
 * selectors here win by source order without needing !important and
 * without touching (or duplicating) the six per-page style blocks.
 *
 * Scope: layout/typography/accessibility fixes only. No colors, fonts,
 * spacing scale or visual identity tokens are introduced here — every
 * rule reuses the page's own CSS custom properties (--teal-deep, --coral,
 * etc.) so the existing design language is preserved exactly.
 */

/* =====================================================================
   1. SECTION HEADINGS — stop wrapping on wide viewports
   Root cause: `.section-head{max-width:640px}` is a fixed content-width
   cap applied to every section heading regardless of viewport size or
   heading length. On desktop/laptop widths there is 500-800px of unused
   space next to a 640px-capped heading, so a heading like "Complete
   fetal medicine, under one roof" wraps well before it needs to.
   Fix: scale the cap with the viewport instead of fixing it, and let the
   browser balance line breaks on short headings. No white-space:nowrap
   is used, so wrapping still happens naturally once genuinely narrow.
   ===================================================================== */
.section-head {
  max-width: min(94%, 920px);
}
.section-head.center {
  max-width: min(94%, 860px);
}
.section-head h2 {
  text-wrap: balance;
  max-width: 46ch;
}
.section-head.center h2 {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
/* Explicit inline max-width overrides (hero copy blocks etc.) already set
   their own width via style="max-width:...", which continues to win
   because inline styles always beat stylesheet rules — nothing above
   touches those. */

/* =====================================================================
   2. HEADER "BOOK APPOINTMENT" CTA — the actual bug: specificity, not size
   Root cause: `.nav-links a` (class + element = specificity 0,1,1) sets
   padding:6px 0, display:inline-block and font-size:0.88rem for every
   plain text link in the nav. `.nav-cta` (single class = specificity
   0,1,0) tries to set its own padding:14px 30px, display:inline-flex
   and font-size — but loses on every one of those properties, because
   0,1,1 always beats 0,1,0 regardless of source order. The button's
   gradient/radius/shadow still show (only .nav-cta sets those, so
   there's no contest there) — but with the link rule's 0px horizontal
   padding and inline-block display winning, the pill collapses to
   almost exactly the width of its icon+text, which then overflows the
   rounded background on both sides. That's the exact "squeezed, text
   spilling past the pill" look. (An earlier pass here mis-diagnosed
   this as a flexbox shrink problem and pinned flex-shrink:0 — harmless,
   but it was never the actual cause, since the box was already sized
   correctly by flex terms; it just had almost no padding.)
   Fix: match the winning selector's specificity with our own
   `.nav-links a.nav-cta` (0,2,1) so every contested property — padding,
   display, font-size, font-weight — actually applies, at every
   breakpoint, restoring the same left/right padding the button was
   always meant to have.
   ===================================================================== */
.nav-links li:last-child {
  flex-shrink: 0;
}
.nav-links a.nav-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--white);
}
.nav-cta svg {
  flex-shrink: 0;
}
/* =====================================================================
   2b. HEADER "BOOK APPOINTMENT" — match the floating button's look
   The header button and the fixed floating button are two entry points
   to the same action, so they now share one visual: the same teal
   gradient, the same calendar icon, the same pill shape. Only sizing
   differs, since the header version sits inline next to text nav links
   while the floating one is a standalone corner button.
   ===================================================================== */
.nav-cta {
  background: linear-gradient(120deg, var(--teal-deep), var(--teal));
}
@media (min-width: 901px) and (max-width: 1366px) {
  .nav-links {
    gap: 18px;
  }
  .nav-links a {
    font-size: 0.82rem;
    letter-spacing: -0.01em;
  }
  .nav-links a.nav-cta {
    padding: 14px 28px;
    font-size: 0.8rem;
    min-height: 46px;
    letter-spacing: 0.01em;
    margin-left: 4px;
  }
}
@media (min-width: 1367px) {
  .nav-links {
    gap: 28px;
  }
  .nav-links a.nav-cta {
    padding: 16px 32px;
    min-height: 48px;
    letter-spacing: 0.02em;
    margin-left: 4px;
  }
}

/* =====================================================================
   3. PRIMARY NAVIGATION — accessible "Services" dropdown
   The plugin now renders one shared nav (all six pages) that exposes
   every generated page. This styles that dropdown; it degrades to a
   plain link with an inline sub-list on mobile.
   ===================================================================== */
.nav-links li.has-dropdown {
  position: relative;
}
.nav-links .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-links .dropdown-toggle .caret {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 10px;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 250px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 20px 45px -18px rgba(31, 59, 87, 0.32);
  border: 1px solid rgba(31, 59, 87, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1200;
}
.dropdown-menu li a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.dropdown-menu li a::after {
  display: none;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
  background: var(--teal-soft);
  color: var(--teal-deep);
}
.dropdown-menu li a.current {
  color: var(--coral);
}
.dropdown-heading {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 10px 14px 4px;
  opacity: 0.75;
}
.dropdown-heading:first-child {
  padding-top: 6px;
}
@media (min-width: 901px) {
  .nav-links li.has-dropdown:hover .dropdown-menu,
  .nav-links li.has-dropdown:focus-within .dropdown-menu,
  .nav-links li.has-dropdown.dpfm-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-links li.has-dropdown:hover .caret,
  .nav-links li.has-dropdown:focus-within .caret,
  .nav-links li.has-dropdown.dpfm-open .caret {
    transform: rotate(180deg);
  }
}
/* Mobile / tablet: dropdown becomes an inline accordion inside the
   slide-out panel, opened by tapping the caret. */
@media (max-width: 900px) {
  .nav-links li.has-dropdown {
    width: 100%;
  }
  .dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(31, 59, 87, 0.04);
    min-width: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    padding: 0 0 0 12px;
    transition: max-height 0.3s ease;
  }
  .nav-links li.has-dropdown.dpfm-open .dropdown-menu {
    max-height: 500px;
    padding: 6px 0 6px 12px;
  }
  .nav-links li.has-dropdown.dpfm-open .caret {
    transform: rotate(180deg);
  }
}
/* Current-page indicator, applied by shared JS comparing each nav link's
   href against the current page URL — works identically on every page
   without needing six hand-marked copies of the nav. */
.nav-links a.dpfm-current-page {
  color: var(--coral);
}
.nav-links a.dpfm-current-page::after {
  width: 100%;
}

/* =====================================================================
   4. "WHAT TO EXPECT" / step timelines — no hidden horizontal content
   Root cause: .path-track is `display:flex; overflow-x:auto`, so on
   mobile/tablet any step past the first screenful is invisible unless
   the visitor discovers they can swipe. Below 900px this switches the
   same markup (.path-track > .path-step, unchanged in the HTML) to a
   vertical numbered timeline with a connecting line — desktop keeps the
   original horizontal layout untouched.
   ===================================================================== */
@media (max-width: 900px) {
  .path-track {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    gap: 0;
    padding-bottom: 0;
    position: relative;
  }
  .path-step {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
    padding: 0 4px 34px 4px;
    position: relative;
  }
  .path-step:last-child {
    padding-bottom: 4px;
  }
  /* Vertical connecting line replaces the old horizontal ::before rule. */
  .path-step::before {
    content: '';
    position: absolute;
    top: 52px;
    left: 25px;
    width: 2px;
    height: calc(100% - 52px);
    background: var(--teal-soft);
  }
  .path-step:last-child::before {
    display: none;
  }
  .path-num {
    margin: 0;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
  }
  .path-step h4,
  .path-step p {
    margin-top: 4px;
  }
  .path-step > div:not(.path-num) {
    padding-top: 10px;
  }
}

/* =====================================================================
   5. HORIZONTAL CAROUSELS — visible affordance instead of hidden overflow
   Testimonials remain an intentional horizontal carousel (a common,
   well-understood pattern for short quote cards), but a scroll-snap
   track with no visual cue that more cards exist off-screen fails the
   same test as the step timeline. Add an edge fade + tappable progress
   dots (built by shared JS) so the interaction is obvious rather than
   accidental.
   ===================================================================== */
.testi-wrap {
  position: relative;
}
.testi-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  width: 56px;
  background: linear-gradient(90deg, transparent, var(--ivory-deep));
  pointer-events: none;
}
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.testi-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(31, 59, 87, 0.18);
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}
.testi-dots button.active {
  background: var(--coral);
  transform: scale(1.3);
}

/* =====================================================================
   6. HERO HEIGHT — remove oversized empty space on common laptop heights
   Root cause: `.hero{min-height:100vh}` forces a full-viewport hero on
   every screen. On short/wide laptop displays (1366x768, 1280x800,
   1536x864) this reserves far more vertical space than the hero copy
   needs, reading as a large empty band beneath the content before the
   next section starts. Capping the minimum height keeps the premium
   full-bleed feel on tall/large monitors while removing the dead space
   on the most common laptop resolutions.
   ===================================================================== */
.hero {
  min-height: clamp(560px, 88vh, 920px);
}

/* =====================================================================
   7. FETAL JOURNEY SCROLLYTELLING — bound the scroll-tunnel on short
   viewports
   Root cause: `.journey-scroll{height:340vh}` is a fixed multiple of the
   viewport height used to pace the sticky scroll animation. On short
   laptop viewports the same 340vh multiplier produces a much longer
   absolute scroll distance than the six-stage animation needs, which
   reads as "nothing happening" (blank motion) for an extended scroll.
   Bounding it keeps the desktop scrollytelling intact while shortening
   the tunnel specifically where it overshoots.
   ===================================================================== */
@media (min-width: 901px) and (max-height: 760px) {
  .journey-scroll {
    height: 240vh;
  }
}
@media (min-width: 901px) and (min-height: 761px) and (max-height: 900px) {
  .journey-scroll {
    height: 280vh;
  }
}

/* =====================================================================
   8. RESPONSIVE CONTENT IMAGES (new admin-uploaded image slots)
   Generic, reusable classes for every image slot added via
   Fetal Medicine Pages → Images. Uses aspect-ratio + object-fit so a
   single upload renders correctly at every breakpoint with no layout
   shift, matching the existing .about-img/.hero-photo-wrap treatment.
   ===================================================================== */
.dpfm-content-image-section {
  padding: 90px 0;
}
.dpfm-content-image-section .dpfm-img-frame {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16/9;
  background: var(--teal-soft);
}
.dpfm-content-image-section .dpfm-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.dpfm-content-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.dpfm-content-image-grid .dpfm-img-frame {
  aspect-ratio: 4/3;
}
@media (max-width: 860px) {
  .dpfm-content-image-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* =====================================================================
   9. APPOINTMENT FORM — new states (loading / success / error / consent)
   ===================================================================== */
.appt-form .dpfm-hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.appt-form .dpfm-form-msg {
  display: none;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 0.9rem;
  margin-bottom: 16px;
  line-height: 1.5;
}
.appt-form .dpfm-form-msg.show {
  display: block;
}
.appt-form .dpfm-form-msg.dpfm-error {
  background: #FBEAEA;
  color: #9B2C2C;
  border: 1px solid #F1C7C7;
}
.appt-form .dpfm-form-msg.dpfm-success {
  background: #E9F5EC;
  color: #1F5C34;
  border: 1px solid #C6E6CD;
}
.appt-form .dpfm-success-ref {
  font-weight: 700;
}
.appt-form .dpfm-whatsapp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  padding: 12px 20px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.88rem;
  margin-top: 12px;
}
.form-submit[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}
.form-submit .dpfm-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  margin-right: 8px;
  vertical-align: -2px;
  animation: dpfmSpin 0.7s linear infinite;
  display: none;
}
.form-submit.dpfm-loading .dpfm-spinner {
  display: inline-block;
}
@keyframes dpfmSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .form-submit .dpfm-spinner {
    animation: none;
  }
}
.cf-turnstile {
  margin: 4px 0 16px;
}

/* =====================================================================
   9b. APPOINTMENT FORM — confirmation panel replaces the form on submit
   Root cause: on a successful submission the form only ever prepended a
   one-line success message above the same field grid, then reset()
   blanked every input in place — so the visitor's actual experience was
   "the form I just filled in is now empty again", with the confirmation
   easy to miss above it. `.dpfm-submitted` (added by JS on success) now
   hides the input rows/submit button entirely and this panel becomes
   the sole content of the form, sized and centered like a proper
   confirmation state rather than a form-field callout. JS also scrolls
   this panel into view on submit; scroll-margin-top keeps it clear of
   the sticky header when it lands.
   ===================================================================== */
.appt-form.dpfm-submitted .form-row,
.appt-form.dpfm-submitted .dpfm-hp-field,
.appt-form.dpfm-submitted .cf-turnstile,
.appt-form.dpfm-submitted .form-submit,
.appt-form.dpfm-submitted .form-note {
  display: none;
}
.appt-form .dpfm-form-msg.dpfm-thanks {
  scroll-margin-top: 110px;
  display: block;
  text-align: center;
  padding: 44px 30px;
  border-radius: 22px;
  margin-bottom: 0;
}
.dpfm-thanks-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #1F5C34;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.appt-form .dpfm-form-msg.dpfm-thanks h3 {
  font-family: 'Petrona', serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: #1F5C34;
  margin-bottom: 10px;
}
.appt-form .dpfm-form-msg.dpfm-thanks p {
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}
.dpfm-thanks-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.appt-form .dpfm-whatsapp-cta {
  margin-top: 0;
}
.dpfm-call-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(31, 92, 52, 0.35);
  color: #1F5C34;
  padding: 12px 20px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.88rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.dpfm-call-cta:hover {
  background: #1F5C34;
  color: #fff;
}
.dpfm-thanks-reset {
  display: inline-block;
  margin-top: 22px;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1F5C34;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dpfm-thanks-reset:hover {
  opacity: 0.75;
}

/* =====================================================================
   10. SERVICE GALLERY — image-backed "related services" cards
   Reusable grid used by DPFM_Images::render_service_gallery() to turn a
   plain text link list into a professionally presented photo gallery.
   Matches the existing .service-card visual language (radius, shadow,
   coral hover accent) instead of introducing a new style.
   ===================================================================== */
.dpfm-service-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 8px;
}
.dpfm-gallery-card {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: var(--white, #fff);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dpfm-gallery-card:hover {
  transform: translateY(-6px);
}
.dpfm-gallery-frame {
  display: block;
  aspect-ratio: 4/3;
  background: var(--teal-soft, #eef3f6);
  overflow: hidden;
}
.dpfm-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.dpfm-gallery-card:hover .dpfm-gallery-frame img {
  transform: scale(1.06);
}
.dpfm-gallery-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--teal-deep);
}
.dpfm-gallery-label::after {
  content: "→";
  color: var(--coral);
  flex: none;
  transition: transform 0.25s ease;
}
.dpfm-gallery-card:hover .dpfm-gallery-label::after {
  transform: translateX(4px);
}
@media (max-width: 860px) {
  .dpfm-service-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .dpfm-service-gallery {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   10b. SERVICE GALLERY — "More related services" pointer list
   Companion to the gallery above. Items with no matching stock photo
   used to render inside the same 3-col image grid as a bordered card
   with just a title — CSS Grid then stretched that empty card to match
   the height of its taller, photo-bearing row siblings, producing a
   large blank white box under a single line of text. Those items are
   now rendered as a separate, compact link list below the photo grid
   instead (same "More {category}" pattern already used on the homepage
   services section), so there is never an empty card in the image grid.
   ===================================================================== */
.dpfm-gallery-pointer-wrap {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px dashed rgba(31, 59, 87, 0.14);
}
.dpfm-gallery-pointer-wrap.no-border {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.dpfm-gallery-pointer-heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 14px;
}
.dpfm-gallery-pointer-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.dpfm-gallery-pointer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white, #fff);
  border: 1px solid rgba(31, 59, 87, 0.08);
  border-radius: 14px;
  padding: 15px 16px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.3s ease;
}
.dpfm-gallery-pointer:hover {
  border-color: transparent;
  box-shadow: 0 10px 24px -16px rgba(31, 59, 87, 0.28);
  transform: translateY(-3px);
  color: var(--teal-deep);
}
.dpfm-gallery-pointer .arrow {
  color: var(--coral);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .dpfm-gallery-pointer-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .dpfm-gallery-pointer-list {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   11. HEADER "BOOK APPOINTMENT" — restore the missing nav item
   Root cause: every page's nav-links markup only ever listed About /
   Fetal Journey / Services / Stories / FAQ — the .nav-cta button style
   (and the earlier fixes to it above, in section 2) existed in the
   stylesheet but no <li class="nav-cta"> was ever present in the actual
   header HTML on ANY page, so the header genuinely had no Book
   Appointment button on desktop/laptop (the fixed floating button in
   the bottom corner was the only way to reach the appointment section
   from the header at those widths). The <li> has now been added back to
   the nav-links list on every page; this just adds a little breathing
   room above it inside the mobile slide-out drawer, where it now
   appears as a full-width pill at the end of the link list. The
   floating button stays as an additional, always-visible shortcut while
   scrolling — nothing here removes it.
   ===================================================================== */
@media (max-width: 900px) {
  .nav-links a.nav-cta {
    margin-top: 10px;
  }
}