/* Find Expert Care (Stage 1) — page-scoped styles, loaded ONLY by
   find-expert-care.html (after styles.css). PORTED from the client-approved
   Claude Design component: Marker A (gold ripple) + Card 1 (cream card).
   The Design's exploration scaffolding (marker/card chooser pills, the three
   Marker A/B/C explainer cards) is intentionally NOT reproduced.

   FONT MAPPING: the Design's Spectral -> the site serif (--font-head, Lora);
   the Design's Karla -> the site sans (--font-body, Inter). No new webfonts.

   DEVICE SAFETY: no backdrop-filter, no WebGL, no flex `gap` (Safari <14.1),
   no `inset` shorthand — consistent on iOS/macOS Safari, Android Chrome, WeChat.
   Design-specific shades that have no site token are declared once here. */
.fc-scope {
  --fc-ink:        #2E2150;   /* = --purple-deep */
  --fc-dot:        #B9A9D6;   /* dot-matrix lavender */
  --fc-panel-1:    #3E2C72;
  --fc-panel-2:    #33245A;
  --fc-panel-3:    #2A1D48;
  --fc-panel-head: #E8E1F3;
  --fc-panel-mute: #A294C4;
  --fc-gold-soft:  #F0CE95;
  --fc-card-role:  #6E6089;
  --fc-label:      #9A8CB8;
}

/* (The hero framing paragraph was removed 2026-08 by client direction —
   its .fc-hero-note rules went with the markup; history has both.) */

/* ==================== MAP (open on the page — no box) ====================
   The deep-purple panel/card was removed by client direction: the map sits
   cleanly on the page's light background. Header above, meta line below. */
.fc-map-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: clamp(0.9rem, 2vw, 1.4rem);
}
.fc-map-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.3;
  color: var(--purple-deep);            /* ~13:1 on the light page */
  margin: 0 20px 0 0;                   /* margin, not flex gap */
}
.fc-map-hint {
  font-size: 0.95rem;                   /* legibility pass (was 0.85rem) */
  letter-spacing: 0.03em;
  color: #4A4658;                       /* warm grey ~9:1 (was muted 6:1, pale) */
  margin: 0.25rem 0 0;
}
.fc-map-meta {
  display: flex;
  flex-wrap: wrap;
  margin: clamp(0.9rem, 2vw, 1.4rem) 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(58, 42, 102, 0.12);
  font-size: 0.95rem;                   /* legibility pass (was 0.85rem) */
  color: #4A4658;                       /* warm grey ~9:1 (was muted 6:1) */
}
.fc-map-meta > * + * { margin-left: 26px; }   /* margin, not flex gap */
.fc-map-meta__sep { color: rgba(58, 42, 102, 0.35); }

/* ---- Parallax scene (subtle depth; pure CSS transform driven by JS) ----
   find-care.js nudges this wrapper a few px toward the cursor on pointer-fine
   devices only (never touch), and not under prefers-reduced-motion. Map and
   markers move TOGETHER, so pin alignment is never disturbed. */
.fc-scene { transition: transform 0.25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .fc-scene { transition: none; transform: none !important; }
}

/* ---- Map surface ---- */
.fc-map { position: relative; }
.fc-map__svg { width: 100%; height: auto; display: block; overflow: visible; }
/* COUNTRIES — one path each (real Natural Earth admin-0 borders): soft brand
   purple fills with a slightly darker purple hairline border. No labels, no
   decorations — clean geography. Gentle hover highlight (pure CSS). */
.fc-country {
  fill: #C9BCE4;                        /* soft #B9A9D6-family land */
  stroke: #9A86C4;                      /* darker purple hairline border */
  stroke-width: 1;                      /* 1 unit of the 2000 viewBox ≈ 0.5 display px */
  stroke-linejoin: round;
  transition: fill 0.2s ease;
}
.fc-country:hover { fill: #B3A0D6; }    /* subtle country highlight under the cursor */
@media (prefers-reduced-motion: reduce) {
  .fc-country { transition: none; }
}
/* The layer must NOT swallow country hovers: the wrapper ignores the pointer,
   the marker buttons re-enable it for themselves. */
.fc-markers { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }   /* longhand, not `inset` */
.fc-marker { pointer-events: auto; }

/* ---- Marker A — gold ripple (44x44 tap target centred on the point) ---- */
.fc-marker {
  position: absolute;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.fc-marker__ring,
.fc-marker__glow,
.fc-marker__core {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
/* Strengthened for the LIGHT map (the dark panel used to carry the contrast):
   firmer ripple ring, warmer denser halo, and a deeper-gold core with a white
   separation ring so each light pops off the lavender land. */
.fc-marker__ring {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border: 2px solid rgba(187, 134, 63, 0.7);
  animation: gemRing 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.fc-marker__glow {
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  background: radial-gradient(circle, rgba(214, 168, 102, 0.65) 0%, rgba(187, 134, 63, 0.25) 55%, rgba(187, 134, 63, 0) 72%);
}
.fc-marker__core {
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--gold);              /* deeper brand gold reads on the light land */
  border: 2px solid var(--white);       /* white separation ring — the "light" pops */
  box-shadow: 0 0 10px rgba(187, 134, 63, 0.95), 0 0 22px rgba(187, 134, 63, 0.55), 0 1px 3px rgba(46, 33, 80, 0.35);
}
@keyframes gemRing {
  0%   { transform: scale(.45); opacity: .75; }
  70%  { opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}
.fc-marker:focus-visible { outline: 3px solid var(--fc-gold-soft); outline-offset: 0; border-radius: 50%; }
.fc-marker:hover .fc-marker__core,
.fc-marker:focus-visible .fc-marker__core { box-shadow: 0 0 14px rgba(187, 134, 63, 1), 0 0 32px rgba(187, 134, 63, 0.85), 0 1px 3px rgba(46, 33, 80, 0.4); }

/* ---- Card 1 — cream popup (no backdrop-filter, by design) ---- */
.fc-cardwrap {
  position: absolute;
  z-index: 5;
  pointer-events: none;                 /* never blocks the markers underneath */
}
.fc-card {
  width: 268px;
  max-width: min(268px, calc(100vw - 4.5rem));   /* stays on-screen on small phones */
  padding: 20px 22px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFDFA 0%, #FBF7F1 100%);
  box-shadow: 0 22px 44px -18px rgba(24, 14, 48, 0.62), 0 0 0 1px rgba(187, 134, 63, 0.22);
  animation: gemCardIn .22s ease-out;
  text-align: left;
}
@keyframes gemCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.fc-card__eyebrow {
  font-size: 0.74rem;                   /* legibility pass (was 0.66rem/10.6px) */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);              /* accessible deep gold #8A6222 — AA on the cream card */
  margin-bottom: 9px;
}
.fc-card__eyebrow--sample { color: var(--gold-deep); font-weight: 700; }
.fc-card__name {
  font-family: var(--font-head);        /* Design: Spectral */
  font-size: 1.32rem;
  line-height: 1.2;
  color: var(--fc-ink);
}
.fc-card__role { font-size: 0.9rem; color: #4A4658; margin-top: 5px; line-height: 1.45; }   /* legibility pass: was 0.84rem #6E6089 (5.5:1) -> warm grey ~8.6:1 */
.fc-card__rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(187, 134, 63, 0.35), rgba(187, 134, 63, 0));
  margin: 13px 0 11px;
}
.fc-card__place { display: flex; align-items: center; font-size: 0.85rem; color: var(--purple); }   /* legibility pass: small step up (contrast already ~11:1) */
.fc-card__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 8px;                    /* margin, not flex gap */
  flex-shrink: 0;
}
/* Pointer tail — bottom by default; flips to the top when the card is placed
   below the light (small screens, where there is no room above). */
.fc-card__tail {
  position: absolute;
  left: calc(50% + var(--fc-tail, 0px));
  bottom: -8px;
  width: 16px; height: 16px;
  margin-left: -8px;
  background: #FBF7F1;
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(187, 134, 63, 0.14);
}
.fc-cardwrap--below .fc-card__tail {
  bottom: auto;
  top: -8px;
  background: #FFFDFA;
  box-shadow: -2px -2px 0 rgba(187, 134, 63, 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .fc-marker__ring { animation: none; opacity: 0.5; transform: scale(.85); }   /* steady ring, no ripple */
  .fc-card { animation: none; }
}

/* ============================ LOOKUP ============================ */
.fc-lookup-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr auto;
  gap: 18px;                            /* GRID gap (supported), not flex gap */
  align-items: end;
  background: var(--white);
  border: 1px solid #E7E0F1;
  border-radius: 22px;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 1.875rem);
  box-shadow: 0 18px 40px -28px rgba(46, 33, 80, 0.5);
}
@media (max-width: 859.98px) {
  .fc-lookup-card { grid-template-columns: 1fr; }
}
.fc-lookup__intro { grid-column: 1 / -1; margin-bottom: 4px; }
.fc-lookup__title {
  font-family: var(--font-head);        /* Design: Spectral */
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.56rem);
  color: var(--fc-ink);
  margin: 0 0 6px;
}
.fc-lookup__sub { font-size: 0.95rem; color: #4A4658; margin: 0; }   /* legibility pass: was 0.88rem #7C6F96 (4.6:1, pale) -> warm grey ~9:1 */
.fc-field { display: flex; flex-direction: column; }
.fc-field__label {
  font-size: 0.78rem;                   /* legibility pass 2026-08 (was 0.69rem/11px) */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5B4A8A;                       /* was --fc-label #9A8CB8 = 3.1:1 FAIL; purple-mid ~7:1 on the white card = AA */
  margin-bottom: 8px;                   /* margin, not flex gap */
}
.fc-field input {
  font-family: var(--font-body);        /* Design: Karla */
  font-size: 0.94rem;
  color: var(--fc-ink);
  min-height: 44px;                     /* tap target */
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px solid #DFD6EE;
  background: #FBF9FD;
  width: 100%;
}
.fc-field input:focus-visible {
  outline: none;
  border-color: var(--purple-bright);
  box-shadow: 0 0 0 3px rgba(107, 79, 160, 0.25);
  background: var(--white);
}
.fc-submit {
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #FBF8FF;
  min-height: 44px;
  padding: 15px 20px;
  border-radius: 13px;
  border: 1px solid rgba(187, 134, 63, 0.35);
  background: linear-gradient(180deg, #4A3583 0%, #38285F 100%);
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(46, 33, 80, 0.9);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.fc-submit:hover {
  border-color: rgba(187, 134, 63, 0.85);
  box-shadow: 0 12px 26px -12px rgba(46, 33, 80, 0.95), 0 0 22px -6px rgba(187, 134, 63, 0.5);
}
.fc-submit:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fc-geo {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--purple-bright);
  min-height: 44px;
  padding: 15px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.fc-geo:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.fc-geo:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.fc-privacy {
  margin: 0.9rem 0 0;
  /* Full available width: the old 62ch cap (~530px) broke this one sentence
     into a cramped two-line block under the wide card. It now runs the
     container's measure — one clean line on desktop, wrapping only when the
     viewport genuinely forces it (below ~880px). */
  max-width: none;
  /* Left-aligned to the card's INNER text (same inset as the card padding),
     so it reads as the card's own footnote rather than floating at the
     rounded shell's outer edge. */
  padding-left: clamp(1.1rem, 3vw, 1.875rem);
  color: #4A4658;                       /* legibility pass: warm grey (was muted; ~8:1 on the lavender section) */
  font-size: 0.95rem;                   /* was 0.85rem */
}

/* ---- Results ---- */
.fc-results { margin-top: 1.25rem; }
/* Hopeful empty state (2026-08): warm card, message + register-interest
   button + quiet contact link. */
.fc-results__empty {
  background: var(--white);
  border: 1px solid rgba(58, 42, 102, 0.14);
  border-top: 4px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 10px 26px -14px rgba(46, 33, 80, 0.35);
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.8vw, 1.75rem);
}
.fc-results__empty .fc-results__msg { margin: 0; }
.fc-results__actions { margin: 1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; }
.fc-results__actions .btn { margin: 0.35rem 1rem 0.35rem 0; }   /* margin, not flex gap */
.fc-results__contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                     /* tap target */
  color: var(--purple-bright);          /* 6.5:1 on white = AA */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fc-results__contact:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.fc-results__msg { color: var(--text-warm); }
.fc-results__msg a { color: var(--purple-bright); }
.fc-results__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 0.75rem;
}
@media (min-width: 620px)  { .fc-results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fc-results__grid { grid-template-columns: repeat(3, 1fr); } }
.fc-result {
  background: linear-gradient(180deg, #FFFDFA 0%, #FBF7F1 100%);
  border-radius: 18px;
  box-shadow: 0 10px 26px -18px rgba(24, 14, 48, 0.5), 0 0 0 1px rgba(187, 134, 63, 0.22);
  padding: 1.1rem 1.2rem;
}
.fc-result__badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(187, 134, 63, 0.12);
  border: 1px solid rgba(187, 134, 63, 0.5);
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.fc-result__name { margin: 0.2rem 0 0.15rem; font-family: var(--font-head); font-weight: 400; font-size: 1.2rem; color: var(--fc-ink); }
.fc-result__role { margin: 0 0 0.4rem; color: var(--fc-card-role); font-size: 0.86rem; line-height: 1.5; }
.fc-result__place { margin: 0; color: var(--purple); font-size: 0.84rem; }


/* ============ MARKER HONESTY (2026-08) ============
   SAMPLE lights are visually distinct BEFORE any hover, so placeholder dots
   can never be mistaken for listed specialists: hollow, dimmed core (pale
   gold fill + gold outline instead of the solid gold disc with its white
   ring) and softened glow/ripple. The ONE real listing keeps the full solid
   treatment — nothing is inflated, the single bright light is the point. */
.fc-marker--sample .fc-marker__core {
  background: rgba(187, 134, 63, 0.22);        /* hollow — clearly not the solid listed light */
  border: 2px solid var(--gold);
  box-shadow: 0 0 7px rgba(187, 134, 63, 0.4), 0 1px 3px rgba(46, 33, 80, 0.25);
}
.fc-marker--sample .fc-marker__glow { opacity: 0.4; }
.fc-marker--sample .fc-marker__ring { opacity: 0.45; }

/* Sample-card honesty note (shown only when the hovered light is a sample). */
.fc-card__note {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);                    /* 6:1 on the cream card = AA */
}

/* ============ SUNRISE PHOTO HERO (2026-08, page-scoped) ============
   Mirrors the Patient Stories hero pattern exactly (the shared .page-banner is
   untouched): ::after (z -1) carries the photo as a WEBP background-image (the
   .jpg twin ships alongside as the manual swap-in fallback - the site's
   established convention; no <picture>, no image-set); ::before (z 0) is the
   LEFT deep-purple brand scrim fading clear to the RIGHT so the sunrise, the
   road and the five walking figures (~62-68% of frame) stay visible; content
   at z 2. Copy flips LIGHT. Static image - no parallax, no motion. The old
   gradient/constellation hero treatment is retired (history has it).
   EYEBROW COLOUR NOTE: the brief asked for canonical gold #BB863F, but it
   measures ~4.0:1 on this scrim - below small-text AA - which is exactly why
   both sibling photo heroes use the champagne light-gold tint; matched here. */
.fc-hero {
  position: relative;
  isolation: isolate;
  background: var(--purple-deep);                  /* image-missing fallback */
  padding-block: clamp(3.5rem, 7.5vw, 5.75rem);    /* banner presence — same scale as the sibling heroes */
}
.fc-hero::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;   /* longhand, not `inset` (Safari <14.1) */
  z-index: -1;
  background-image: url("../img/find-expert-care-hero.webp");
  background-size: cover;
  background-position: 66% center;                 /* sun (~68%) + walking figures (~62%) stay in frame, clear of the left text */
  background-repeat: no-repeat;
}
.fc-hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  background: linear-gradient(90deg,
    rgba(28, 18, 56, 0.86) 0%,
    rgba(28, 18, 56, 0.72) 30%,
    rgba(28, 18, 56, 0.40) 52%,
    transparent 68%);                              /* the stories-hero scrim stops — the proven AA recipe */
}
.fc-hero > .container { position: relative; z-index: 2; }
.fc-hero .eyebrow {
  color: #ECD6AE;                                  /* champagne light gold (see note above) — ~9:1 on the scrim */
  text-shadow: 0 1px 2px rgba(20, 14, 40, 0.5);
}
.fc-hero h1 {
  color: var(--white);                             /* ~13:1 under the left scrim */
  max-width: 17ch;                                 /* copy stays in the scrim-protected left half */
  text-shadow: 0 1px 2px rgba(20, 14, 40, 0.5), 0 2px 12px rgba(20, 14, 40, 0.22);
}
.fc-hero .page-banner__subtitle {
  font-family: var(--font-head);                   /* the sibling heroes' Lora italic subtitle voice */
  font-style: italic;
  font-weight: 500;
  color: #EFEAF6;                                  /* light lavender-white — ~11:1 under the scrim */
  max-width: 40ch;
  text-shadow: 0 1px 2px rgba(20, 14, 40, 0.5);
}
/* Phones: the copy spans nearly the full width — keep a scrim floor across the
   band and ease the focal point so the figures stay in the narrow crop. */
@media (max-width: 639.98px) {
  .fc-hero::before {
    background: linear-gradient(90deg,
      rgba(28, 18, 56, 0.86) 0%,
      rgba(28, 18, 56, 0.74) 55%,
      rgba(28, 18, 56, 0.56) 100%);
  }
  .fc-hero::after { background-position: 62% center; }
}
/* Tablet: the container loses side gutters — extend the fade further right. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .fc-hero::before {
    background: linear-gradient(90deg,
      rgba(28, 18, 56, 0.86) 0%,
      rgba(28, 18, 56, 0.76) 38%,
      rgba(28, 18, 56, 0.52) 62%,
      transparent 86%);
  }
}