/* ═══════════════════════════════════════════════════════════
   providers.css: "Find a provider" directory page (page-providers).
   Brand-gradient hero + stat strip, sticky search/state picker,
   per-region provider cards. Filtering logic lives in providers.js.
   Uses site tokens from base.css (--magenta, --grad-text, --radius).
   ═══════════════════════════════════════════════════════════ */

/* ── HERO (white; left: eyebrow/heading/text/button · right: flags+numbers) ── */
.pv-hero{ position:relative; background:#FFFFFF; }

/* Opaque strip behind the floating nav so the scrolling list headings can't
   bleed through it. The whole page is white, so this is invisible at rest;
   it sits above page content (z auto / sticky 20) but below the nav (z 100). */
body.page-providers::before{
  content:''; position:fixed; top:0; left:0; right:0; height:80px;
  background:var(--bg); z-index:40; pointer-events:none;
}
.pv-hero-inner{
  position:relative; z-index:1;
  padding-block: clamp(100px, 14vh, 150px) clamp(40px, 6vh, 64px);
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem, 5vw, 4rem); align-items:center;
}
.pv-hero-text{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.pv-hero-title{
  margin:.5rem 0 0;
  font-family:var(--font-display); font-weight:600; color:#15101F;
  font-size:clamp(2.1rem, 1rem + 3.2vw, 3.4rem);
  line-height:1.06; letter-spacing:-.02em;
}
/* Same gradient as "Cells" in the home tech-teaser: dark ink fading into the
   brand magenta/pink, so it blends out of the solid heading text. */
.pv-grad{ background:linear-gradient(96deg, #15101F 0%, #15101F 22%, #CE00B8 66%, #F06FD6 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.pv-hero-lead{
  margin:1rem 0 0; max-width:46ch;
  font-family:var(--font-prose); font-size:var(--text-lg); line-height:1.6; color:#5b6470;
}
.pv-hero-cta{ margin-top:1.8rem; }
/* Slim + wide variant of the standard silk button (this page only). */
.ep-cta2.ep-cta2--slim{ --ep-h:38px; --ep-w:360px; }

/* Right column: flag ticker + number counters. */
.pv-hero-aside{ display:flex; flex-direction:column; align-items:center; gap:clamp(1.6rem, 3vw, 2.2rem); }

.pv-flagticker{
  width:300px; overflow:hidden;
}
.pv-flag-track{ display:flex; gap:16px; width:max-content; animation:pv-flagscroll 26s linear infinite; }
@keyframes pv-flagscroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
/* Just the flag: natural width (not cropped/squished), no card, hairline edge
   so white-edged flags stay visible on the white page. (.pv-tflag = ticker flag,
   kept distinct from .pv-flag which is the card "note" badge.) */
.pv-tflag{ height:21px; width:auto; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.07); }
@media (prefers-reduced-motion:reduce){
  .pv-flag-track{ animation:none; flex-wrap:wrap; justify-content:center; }
  .pv-locate-btn--bar .pv-locate-radar::before{ animation:none; }
}

/* Number counters (one row). */
.pv-nums{ display:flex; flex-wrap:nowrap; justify-content:center; }
.pv-num{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 clamp(16px,3vw,30px); }
.pv-num + .pv-num{ border-left:1px solid rgba(26,26,46,.1); }
.pv-num-v{
  font-family:var(--font-display); font-weight:600; line-height:1; white-space:nowrap;
  font-size:clamp(3.5rem, 2rem + 3.7vw, 4.8rem);   /* +20% per Eddie */
  color:var(--text);   /* black now (was a magenta -> purple gradient) */
}
.pv-num-k{
  font-family:var(--font-body); font-weight:600; font-size:var(--text-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}

/* ── MAP (custom Google Maps JS API, brand-styled, full width below the hero) ── */
.pv-map{ background:var(--bg); padding-block: clamp(.5rem,2vh,1.2rem) clamp(2.5rem,6vh,4rem); }
/* Breathing room between the map and the footer (the directory used to sit here). */
.pv-map-tail{ height: clamp(2rem, 6vh, 4.5rem); }
/* Map uses the standard container, so its left/right edges line up with the
   hero text margins. */
.pv-map-frame{
  position:relative; width:100%;
  height:clamp(540px, 67vh, 900px);
  border:1px solid rgba(123,47,190,.18); border-radius:14px; overflow:hidden;
  background:#ECECF1; box-shadow:0 26px 60px -30px rgba(26,26,46,.42);
}


.pv-map-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.4rem; text-align:center;
  padding:1.5rem; color:var(--muted); font-family:var(--font-body);
}
.pv-map-placeholder svg{ width:34px; height:34px; color:var(--border2); margin-bottom:.4rem; }
.pv-map-ph-title{ margin:0; font-size:var(--text-lg); font-weight:600; color:var(--text2); }
.pv-map-ph-sub{ margin:0; max-width:42ch; font-size:var(--text-sm); line-height:1.5; }
.pv-map-ph-sub code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em;
  background:rgba(26,26,46,.06); padding:.05rem .3rem; border-radius:4px; color:var(--text2);
}

/* Manual search + "locate me", sitting above the map frame. */
.pv-map-tools{
  display:flex; gap:.7rem; align-items:stretch; flex-wrap:wrap;
  margin-bottom:.9rem;
}
.pv-map-search{
  position:relative; flex:1 1 320px; min-width:0;
  display:flex; align-items:center;
}
.pv-map-search .pv-search-ico{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--muted); pointer-events:none;
}
.pv-map-search-input{
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--text);   /* 16px min: stops iOS auto-zooming on focus */
  padding:.72rem 6.4rem .72rem 2.6rem; border:1px solid rgba(26,26,46,.14); border-radius:18px;   /* neutral border + nav's 18px corner (not a full pill) */
  background:#fff; transition:border-color var(--t), box-shadow var(--t);
}
.pv-map-search-input::placeholder{ color:var(--muted); }
.pv-map-search-input:focus-visible{
  outline:none; border-color:var(--magenta);
  box-shadow:0 0 0 4px rgba(206,0,184,.12);
}
/* As-you-type suggestion dropdown (our own list, styled to match). */
.pv-ac{
  list-style:none; margin:.4rem 0 0; padding:.3rem; position:absolute;
  top:100%; left:0; right:0; z-index:30;
  background:#fff; border:1px solid rgba(26,26,46,.14); border-radius:18px;
  box-shadow:0 20px 46px -18px rgba(26,26,46,.45);
  max-height:290px; overflow-y:auto;
}
.pv-ac[hidden]{ display:none; }
.pv-ac-item{
  display:flex; align-items:baseline; gap:.4rem; cursor:pointer;
  padding:.6rem .8rem; border-radius:10px;
  font-family:var(--font-body); font-size:16px; color:var(--text);
}
.pv-ac-item.is-active, .pv-ac-item:hover{ background:#F5EEFB; }
.pv-ac-main{ font-weight:600; }
.pv-ac-sub{ color:var(--muted); font-size:var(--text-sm); }
.pv-map-search-go{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; color:#fff;
  background:var(--magenta); border:0; border-radius:12px; cursor:pointer;
  padding:.5rem 1.1rem; transition:background var(--t);
}
.pv-map-search-go:hover{ background:var(--purple); }
.pv-locate-btn{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; color:var(--text2);
  background:#fff; border:1px solid var(--border2); border-radius:999px; cursor:pointer;
  padding:.7rem 1.1rem; transition:border-color var(--t), color var(--t);
  white-space:nowrap;
}
.pv-locate-btn svg{ width:17px; height:17px; color:var(--magenta); flex:none; }
.pv-locate-btn:hover{ border-color:var(--magenta); color:var(--magenta); }

/* ── Full-width "Use my location" bar (sits above the map). Solid popping green
   so nobody misses it, with a "radar ping" rippling out from the crosshair
   (like a GPS scanning for you) that keeps going even after it's used. ── */
.pv-locate-btn--bar{
  display:flex; width:100%; justify-content:center; gap:.6rem;
  background:#12B24A; color:#fff; border:0; border-radius:18px;
  padding:.95rem 1.1rem; font-size:var(--text-md); margin:0 0 .9rem;
  box-shadow:0 8px 20px -8px rgba(18,178,74,.55);
}
.pv-locate-btn--bar:hover{ background:#0EA043; color:#fff; box-shadow:0 10px 24px -8px rgba(18,178,74,.6); }   /* stay green + white on hover (never the magenta accent) */
.pv-locate-btn--bar svg{ color:#fff; width:20px; height:20px; }
.pv-locate-radar{ position:relative; display:inline-flex; }
.pv-locate-radar::before{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  animation:pvRadar 1.8s ease-out infinite;
}
@keyframes pvRadar{
  0%   { transform:scale(.6); opacity:.7; }
  100% { transform:scale(2.3); opacity:0; }
}

.pv-map-msg{
  margin:0 0 .7rem; font-family:var(--font-body); font-size:var(--text-sm);
  color:var(--muted); font-style:italic;
}
.pv-map-msg.is-error{ color:#B23A3A; font-style:normal; }
@media (max-width:600px){
  .pv-map-tools{ flex-direction:column; }
  /* In the column layout the 320px flex-basis was being read as HEIGHT, blowing
     the search box up to 320px tall. Collapse it to the input's natural height. */
  .pv-map-search{ flex:0 0 auto; }
  .pv-map-search-input{ padding-right:5.4rem; }
}

/* ── Marker InfoWindow content (simplified .ep-cta2 language for a cramped
   popup: solid magenta primary action, white-with-border secondary). ── */
.pv-iw{ font-family:var(--font-body); min-width:0; width:min(280px, 78vw); max-width:290px; box-sizing:border-box; padding-bottom:.9rem; }
.pv-iw-eyebrow{
  margin:0 0 .25rem; font-family:var(--font-body); font-weight:700; font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase; color:#0E9A42;
}
.pv-iw-name{ margin:0; display:flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600; font-size:var(--text-lg); color:var(--text); line-height:1.2; }
.pv-iw-name span{ min-width:0; }
/* Every detail line is icon + text; icons share one column so text left-aligns. */
.pv-iw-line{ margin:.32rem 0 0; display:flex; align-items:center; gap:.5rem; min-width:0; font-size:var(--text-sm); line-height:1.35; }
.pv-iw-line span{ flex:1 1 auto; min-width:0; }
.pv-iw-person{ color:var(--magenta); font-weight:500; }
.pv-iw-addr{ color:var(--text2); }
.pv-iw-rows{ margin:.55rem 0 0; display:flex; flex-direction:column; gap:.4rem; }
.pv-iw-row{ display:flex; align-items:center; gap:.5rem; min-width:0; text-decoration:none; font-size:var(--text-sm); color:var(--text2); transition:color var(--t); }
.pv-iw-row span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-iw-row:hover{ color:var(--magenta); }
/* One icon size across the whole popup so every row's text lines up. */
.pv-iw-name svg, .pv-iw-line svg, .pv-iw-row svg{ width:16px; height:16px; color:var(--magenta); flex:none; }
/* Google auto-focuses the first link when the popup opens; keep that focus subtle
   (magenta text) instead of the browser's stray gold outline box. */
.pv-iw-row:focus, .pv-iw-row:focus-visible{ outline:none; color:var(--magenta); }
.pv-iw-acts{ display:flex; gap:.4rem; margin-top:.85rem; }
.pv-iw-btn{
  flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:.4rem;
  white-space:nowrap; text-align:center; text-decoration:none; border-radius:8px;
  font-size:var(--text-sm); font-weight:600; padding:.5rem .5rem;
  transition:opacity var(--t);
}
.pv-iw-btn svg{ width:15px; height:15px; flex:none; }
.pv-iw-btn:focus-visible{ outline:2px solid var(--magenta); outline-offset:2px; }
/* Kill the horizontal scrollbar Google's info-window wrapper can add on phones. */
.gm-style-iw-d{ overflow-x:hidden !important; }
.gm-style-iw-c{ max-width:88vw !important; }
.pv-iw-btn:hover{ opacity:.85; }
.pv-iw-btn--primary{ background:var(--magenta); color:#fff; }
.pv-iw-btn--secondary{ background:#fff; color:var(--text2); border:1px solid var(--border2); }

/* ── DIRECTORY SECTION ────────────────────────────────────── */
.pv-dir{ background:var(--bg); padding-block: clamp(2rem,5vh,3rem) clamp(4rem,9vh,6rem); }

/* Sticky controls: search + state chips stay reachable while scrolling.
   Offset clears the floating nav pill (fixed at top:12px, ~56px tall). */
.pv-controls{
  position:sticky; top:78px; z-index:20;
  padding:1rem 0 1.1rem;
  /* Solid bar (was a fading gradient, which let card text show through it
     while scrolling). A soft shadow separates it from the list underneath. */
  background:var(--bg);
  box-shadow:0 12px 16px -12px rgba(26,26,46,.18);
}

.pv-search{ position:relative; max-width:720px; margin:0 auto .9rem; }
.pv-search-ico{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--muted); pointer-events:none;
}
.pv-search-input{
  width:100%; font-family:var(--font-body); font-size:var(--text-lg); color:var(--text);
  padding:.85rem 2.6rem; border:1px solid var(--border2); border-radius:999px;
  background:#fff; transition:border-color var(--t), box-shadow var(--t);
}
.pv-search-input::placeholder{ color:var(--muted); }
.pv-search-input:focus-visible{
  outline:none; border-color:var(--magenta);
  box-shadow:0 0 0 4px rgba(206,0,184,.12);
}
.pv-search-clear{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:none; border-radius:50%; cursor:pointer;
  background:rgba(26,26,46,.06); color:var(--text2);
  font-size:1.2rem; line-height:1; display:grid; place-items:center;
}
.pv-search-clear:hover{ background:rgba(206,0,184,.12); color:var(--magenta); }
/* display:grid above would override the plain [hidden] UA rule, so re-assert it. */
.pv-search-clear[hidden]{ display:none; }

/* "or" divider between the search box and the state dropdown */
.pv-or{ display:flex; align-items:center; gap:.8rem; max-width:720px; margin:0 auto .9rem; }
.pv-or::before, .pv-or::after{ content:''; flex:1; height:1px; background:rgba(26,26,46,.12); }
.pv-or span{
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* Cascade filters: Country -> State -> City, three dropdowns in a row. */
.pv-filters{
  display:flex; gap:.7rem; max-width:720px; margin:0 auto; align-items:stretch;
  transition:opacity var(--t);
}
/* While a search is active the cascade is overridden, so dim + lock it. */
.pv-filters.is-disabled{ opacity:.4; pointer-events:none; }

.pv-dd{ position:relative; flex:1 1 0; min-width:0; }
.pv-dd[hidden]{ display:none; }      /* State dropdown hides when Country != US */
.pv-dd-trigger{
  display:flex; flex-wrap:wrap; align-items:center; gap:.05rem .45rem; width:100%;
  text-align:left; cursor:pointer; background:#fff;
  border:1px solid var(--border2); border-radius:14px;
  padding:.5rem .9rem .58rem; transition:border-color var(--t), box-shadow var(--t);
}
.pv-dd-trigger:hover{ border-color:var(--magenta); }
.pv-dd-trigger:focus-visible{ outline:none; border-color:var(--magenta); box-shadow:0 0 0 4px rgba(206,0,184,.12); }
.pv-dd-eyebrow{
  flex-basis:100%; font-family:var(--font-body); font-size:var(--text-xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); line-height:1.4;
}
.pv-dd-lbl{
  flex:1 1 auto; min-width:0; font-family:var(--font-body); font-size:var(--text-md);
  font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pv-dd-car{ margin-left:auto; width:17px; height:17px; color:var(--magenta); flex:none; transition:transform .2s ease; }
.pv-dd-trigger[aria-expanded="true"] .pv-dd-car{ transform:rotate(180deg); }

.pv-dd-panel{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30;
  background:#fff; border:1px solid rgba(26,26,46,.12); border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(26,26,46,.4); max-height:320px; overflow:auto; padding:6px;
}
.pv-dd-panel[hidden]{ display:none; }
.pv-dd-row{
  display:flex; justify-content:space-between; align-items:center; gap:.6rem; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; font-family:var(--font-body); font-size:var(--text-md);
  color:var(--text2); padding:.6rem .7rem; border-radius:8px;
}
.pv-dd-row:hover{ background:rgba(206,0,184,.07); color:var(--magenta); }
.pv-dd-row[aria-selected="true"]{ background:rgba(206,0,184,.10); color:var(--magenta); font-weight:600; }
.pv-dd-name{ display:inline-flex; align-items:center; gap:.5rem; min-width:0; overflow-wrap:anywhere; }
.pv-dd-flag{ width:20px; height:14px; flex:none; border-radius:2px; box-shadow:0 0 0 1px rgba(26,26,46,.08); }
.pv-dd-n{ font-size:var(--text-sm); color:var(--muted); flex:none; }
.pv-dd-empty{ padding:.7rem .7rem; font-size:var(--text-sm); color:var(--muted); font-style:italic; }

/* ── REGIONS + CARDS ──────────────────────────────────────── */
.pv-regions{ margin-top:1.6rem; }
.pv-region{ margin-top:2.6rem; }
.pv-region:first-child{ margin-top:.6rem; }
.pv-region.is-hidden{ display:none; }

.pv-region-head{
  display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
  padding-bottom:.7rem; margin-bottom:1.2rem;
  border-bottom:1px solid var(--border);
}
.pv-region-title{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.4rem,1rem+1.4vw,1.9rem); color:var(--text);
}
.pv-region-count{
  font-family:var(--font-body); font-size:var(--text-sm); color:var(--muted);
}

.pv-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}

.pv-card{
  display:flex; flex-direction:column; min-width:0;   /* allow shrink so long URLs wrap, not overflow */
  padding:1.15rem 1.2rem; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.pv-card:hover{
  border-color:var(--border2);
  box-shadow:0 14px 34px -22px rgba(26,26,46,.4);
  transform:translateY(-2px);
}
.pv-card.is-hidden{ display:none; }

.pv-card-name{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:var(--text-2xl); color:var(--text); line-height:1.25;
}
.pv-card-biz{
  margin:.2rem 0 0; font-family:var(--font-body); font-size:var(--text-md);
  color:var(--magenta); font-weight:500;
}
.pv-card-loc{
  display:flex; align-items:center; gap:.35rem;
  margin:.55rem 0 0; font-family:var(--font-body);
  font-size:var(--text-sm); color:var(--text2);
}
.pv-pin{ width:15px; height:15px; color:var(--muted); flex:none; }
.pv-flag{
  margin-left:.15rem; font-size:var(--text-xs); color:var(--muted);
  background:rgba(26,26,46,.05); border-radius:4px; padding:.05rem .4rem;
}

.pv-card-acts{
  display:flex; flex-direction:column; gap:.3rem;
  margin-top:.9rem; padding-top:.85rem;
  border-top:1px solid var(--border);
}
.pv-act{
  display:inline-flex; align-items:center; gap:.5rem; max-width:100%;
  font-family:var(--font-body); font-size:var(--text-sm); color:var(--text2);
  text-decoration:none; transition:color var(--dur-hover) var(--ease);
}
.pv-act > span{ min-width:0; overflow-wrap:anywhere; }   /* long URLs/emails wrap instead of stretching the card */
.pv-act svg{ width:15px; height:15px; flex:none; color:var(--muted); }
.pv-act:hover{ color:var(--magenta); }
.pv-act:hover svg{ color:var(--magenta); }
.pv-card-noinfo{
  margin:.9rem 0 0; padding-top:.85rem; border-top:1px solid var(--border);
  font-family:var(--font-body); font-size:var(--text-sm); color:var(--muted); font-style:italic;
}

.pv-empty{
  text-align:center; margin:3rem auto; max-width:42ch;
  font-family:var(--font-prose); font-size:var(--text-lg); color:var(--text2);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
/* Tablet/phone: hero stacks (text + button on top, then flags + numbers). */
@media (max-width:860px){
  .pv-hero-inner{
    grid-template-columns:1fr; gap:1.6rem;
    /* Less empty space above the heading (still clears the floating nav + the
       white strip behind it, which sits at 80px). */
    padding-block: clamp(88px, 9vh, 100px) clamp(32px, 5vh, 48px);
  }
  /* Stacked view: everything left-aligned; extra breathing room between the
     flag row and the numbers (per Eddie). First number sits flush with flags. */
  .pv-hero-text{ align-items:flex-start; text-align:left; }
  .pv-hero-lead{ margin-inline:0; }
  .pv-hero-aside{ align-items:flex-start; gap:clamp(2.2rem, 6vw, 2.9rem); }
  .pv-nums{ justify-content:flex-start; }
  .pv-nums .pv-num:first-child{ padding-left:0; }
  /* Wider map on phones (smaller side gap than the text), per Eddie. */
  .pv-map > .container{ padding-inline:14px; }
}
/* Narrow tablets: 3 filters get cramped side by side, so stack them. */
@media (max-width:680px){
  .pv-filters{ flex-direction:column; gap:.6rem; }
}
@media (max-width:600px){
  .pv-controls{ top:72px; }
  .pv-grid{ grid-template-columns:1fr; }
  /* Full-width button + tighter numbers so the three fit on one line. */
  .pv-hero-cta.ep-cta2--slim{ --ep-w:100%; }
  .pv-num{ padding:0 10px; }
  .pv-num-v{ font-size:2.34rem; }   /* +20% per Eddie */
  .pv-num-k{ font-size:.52rem; letter-spacing:.05em; }
  /* Keep the map centered in the container (symmetric gap), just tall. */
  /* Map's default view is now zoomed in (fills the frame), so it can be tall. */
  .pv-map-frame{ height:63vh; min-height:400px; }   /* ~30% shorter on phones */
}