/* /world global coverage map. Brand tokens only (see custom.css :root --bia-*). */

/* The full-bleed map spans 100vw; clip the scrollbar-width sliver so it never forces horizontal scroll.
   Scoped to this page (world.css only loads on /world). clip (not hidden) keeps sticky/anchors working. */


/* Transparent full-width section wrapper. Replaces the shared .wrapper (which is a white card) so this
   page controls exactly which sections are cards, instead of stacking a card behind every block. */
.worldBlock {
  width: 100%;
  margin: 0 0 30px;
  padding: 0;
  background: none;
  border: none;
}

/* This page runs a bolder heading weight than the site default (500) to match the campaign design. */
.worldTitle,
.worldMapTitle,
.worldPanelTitle,
.worldShare h2,
.worldJoinCard h2,
.worldCommunity h2 {
  font-weight: 700;
  color: var(--bia-fg);
}

/* Soft page wash so the popped cards and map lift off the background. */
.worldHero { text-align: center; padding-top: 8px; }

/* Eyebrow is now a pill badge with a live status dot. */
.worldEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e7e3fa;
  color: var(--bia-accent);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 7px 15px;
  border-radius: 999px;
  margin: 0 0 18px;
}
.worldLiveDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bia-teal-surface);
  display: inline-block;
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .worldLiveDot { animation: worldPulse 2.4s infinite; }
}
@keyframes worldPulse {
  0%   { box-shadow: 0 0 0 0 rgba(69, 196, 162, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(69, 196, 162, 0); }
  100% { box-shadow: 0 0 0 0 rgba(69, 196, 162, 0); }
}

.worldTitle {
  max-width: 860px;
  margin: 0 auto 18px;
  line-height: 1.12;
  font-size: 3rem;
}
/* Poppy pops on the two key words: brighter takes on Bia's blue-purple and mint-emerald (large heading, stays legible). */
.worldTitle .worldPopPurple { color: #6f5cf0; }
.worldTitle .worldPopGreen { color: #08a06b; }

.worldLede {
  max-width: 680px;
  margin: 0 auto 14px;
  color: var(--bia-fg);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* Hero CTA row */
.worldHeroCta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 26px;
}
/* World-scoped pill buttons: brighter, rounder versions of the shared buttons for this campaign page. */
/* Compound selectors (.worldBtn.worldBtnX) so these colours beat a.noStyle { color: inherit }, which
   would otherwise leave the primary button with dark text instead of white. */
.worldBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Standard Bia hover lift, matching onboarding.html / welcomeNocd2.html buttons. */
.worldBtn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .worldBtn:hover { transform: none; }
}
.worldBtn.worldBtnPrimary {
  background: var(--bia-accent);
  color: #ffffff;
  border-color: var(--bia-accent);
  box-shadow: 0 10px 24px -8px rgba(108, 95, 192, 0.6);
}
.worldBtn.worldBtnPrimary:hover { background: var(--bia-focus); border-color: var(--bia-focus); color: #ffffff; }
.worldBtn.worldBtnOutline {
  background: #ffffff;
  color: var(--bia-accent);
  border-color: #e2def4;
}
.worldBtn.worldBtnOutline:hover { border-color: var(--bia-accent); color: var(--bia-accent); }

/* Founder note */
.worldFounder {
  max-width: 760px;
  margin: 14px auto 48px;
  display: flex;
  gap: 18px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #ece9f9;
  border-radius: 20px;
  padding: 22px 26px;
  box-shadow: 0 14px 34px -24px rgba(60, 50, 120, 0.4);
}
.worldFounderPhoto {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 16px -8px rgba(60, 50, 120, 0.5);
}
.worldFounderQuote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bia-fg);
  text-align: left;
}
.worldFounderQuote .worldFounderLede { font-weight: 600; }
.worldFounderName {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bia-teal);
}
@media (max-width: 620px) {
  .worldFounder { flex-direction: column; align-items: flex-start; text-align: left; }
}

.worldStatsWrap { margin-top: 4px; }
.worldStats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 0;
}
.worldStat {
  background: #ffffff;
  border: 1px solid #ece9f9;
  border-radius: 20px;
  padding: 26px 28px;
  min-width: 190px;
  flex: 1 1 200px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 14px 34px -26px rgba(60, 50, 120, 0.45);
}
/* Rotate the accent across the three tiles so the row pops without adding off-brand colours. */
.worldStat:nth-child(1) .worldStatNum { color: var(--bia-accent); }
.worldStat:nth-child(2) .worldStatNum { color: var(--bia-teal); }
.worldStat:nth-child(3) .worldStatNum { color: var(--bia-link); }
.worldStatNum {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}
.worldStatLabel {
  font-size: 0.9rem;
  color: var(--bia-muted);
  text-align: center;
}

/* Full-bleed map: breaks out of the centered container to span the viewport width.
   Negative margins (not width:100vw) so the viewport scrollbar doesn't force horizontal scroll. */
.worldMapFull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 8px;
  padding: 24px 0 12px;
  background: linear-gradient(180deg, #faf9fe 0%, #f4f6fb 100%);
  border-top: 1px solid #ece8fb;
  border-bottom: 1px solid #ece8fb;
  box-sizing: border-box;
}
/* Header + legend stay in a readable centered column; the canvas itself goes edge to edge. */
.worldMapBar, .worldMapUnder {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.worldMapBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.worldMapTitle { margin: 0; }
/* Live indicator beside the map title. */
.worldMapLive {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bia-teal);
}
.worldBackBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f5f3ff;
  border: 1px solid #ddd8ff;
  color: var(--bia-link);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 7px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.worldBackBtn:hover { background: #ece7ff; }
/* display overrides above beat the UA [hidden] rule, so restore it explicitly. */
.worldBackBtn[hidden], .worldShareBtn[hidden] { display: none !important; }

/* --worldMapAspect is set by js/world.js to the shape of whatever is on the map. Without it a tall
   country (the UK is about 0.55 wide for its height) sits in a landscape card using a quarter of the
   width, with the rest white. The card narrows to the country instead of the country shrinking to
   the card. Defaults to the world's own ratio so the page renders correctly before the chart runs. */
.worldMapCanvasWrap {
  position: relative;
  width: 100%;
  --worldMapHeight: clamp(380px, 64vh, 760px);
  max-width: min(1180px, calc(var(--worldMapAspect, 2) * var(--worldMapHeight)));
  margin: 0 auto;
  height: var(--worldMapHeight);
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e7e3f6;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px -38px rgba(60, 50, 120, 0.45);
}
@media (max-width: 860px) {
  .worldMapCanvasWrap { --worldMapHeight: clamp(300px, 52vh, 620px); border-radius: 18px; }
}

/* Honest overlay labels drawn over the live map (no fabricated pins). */
.worldMapBadge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px -10px rgba(60, 50, 120, 0.4);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bia-fg);
  pointer-events: none;
}
.worldMapBadgeTop { top: 18px; right: 18px; color: var(--bia-teal); }
.worldMapBadgeBottom { left: 18px; bottom: 18px; }
@media (max-width: 620px) {
  .worldMapBadgeTop { display: none; }
  .worldMapBadgeBottom { font-size: 0.72rem; left: 12px; bottom: 12px; }
}

.worldLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--bia-muted);
}
.worldLegendItem { display: inline-flex; align-items: center; gap: 6px; }
.worldLegendSwatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid #b9b4cc;
  display: inline-block;
}
/* Popped ramp to match the map fills. */
.worldSwatchNone { background: #e7e4f1; }
/* Mirrors the canvas hatch in js/world.js (reachPattern): reachable from elsewhere in the country, but
   nobody licensed in this region. Deliberately not a fourth tint, so the tier does not rest on colour. */
.worldSwatchReach {
  background: repeating-linear-gradient(45deg, #e7e4f1 0 2px, #a99fd6 2px 3px);
}
.worldSwatchLow { background: #cdc6f5; }
.worldSwatchMid { background: #9488f0; }
.worldSwatchHigh { background: var(--bia-accent); border-color: var(--bia-accent); }

.worldMapHint {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--bia-muted);
}

/* Panel */
.worldPanel {
  background: #ffffff;
  border: 1px solid #ece9f9;
  border-radius: 24px;
  padding: 28px 30px;
  box-shadow: 0 20px 50px -40px rgba(60, 50, 120, 0.4);
}
.worldPanelTitle { margin: 0 0 20px; }
.worldPanelDetail:empty { display: none; }
.worldPanelDetail {
  margin-bottom: 18px;
  padding: 16px 18px;
  background: #faf9fe;
  border: 1px solid #ece8fb;
  border-radius: 16px;
}
.worldDetailHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.worldDetailName { font-weight: 700; color: var(--bia-fg); }
.worldDetailCount { font-weight: 600; color: var(--bia-accent); white-space: nowrap; }
.worldDetailNone { color: var(--bia-muted); }
.worldDetailBased {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--bia-muted);
}
.worldDetailRegions, .worldDetailRegions li { list-style: none; margin: 0; padding: 0; }
.worldDetailRegions { margin-top: 10px; }
.worldDetailRegions li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.9rem;
  color: var(--bia-muted);
}
.worldDetailHint { margin: 10px 0 0; font-size: 0.85rem; color: var(--bia-muted); }

.worldCoverageList, .worldCoverageList ul { list-style: none; margin: 0; padding: 0; }
/* Horizontal tile grid so the list uses the full page width instead of a single tall column. */
.worldCoverageList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  align-items: start;
}
/* Each country is now a clean bordered card: header (name + count) over a divider, then region rows. */
.worldCoverageCountry {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  border: 1px solid #eeebf8;
  border-radius: 16px;
  padding: 6px;
  background: #ffffff;
}
.worldCoverageRow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
}
.worldCoverageRow:hover { background: #f3f0ff; }
.worldCoverageName { font-weight: 700; color: var(--bia-fg); }
.worldCoverageCount { font-size: 0.85rem; color: var(--bia-accent); font-weight: 600; white-space: nowrap; }
.worldCoverageRegions {
  margin: 2px 8px 8px;
  padding: 12px 6px 2px;
  border-top: 1px solid #f0eef8;
  /* Cap tall lists at ~5 region rows (~30px each) and scroll the rest, so one busy country
     can't stretch its card far taller than the others. */
  max-height: 162px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* Only overflowing lists get tabindex (added in world.js); show a focus ring when keyboard-focused. */
.worldCoverageRegions:focus-visible { outline: 3px solid var(--bia-focus); outline-offset: 2px; border-radius: 6px; }
.worldCoverageRegions li {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--bia-muted);
  padding: 5px 8px;
}
.worldRegionCount { font-weight: 600; color: var(--bia-fg); }
.worldEmpty { color: var(--bia-muted); line-height: 1.5; }

/* Share */
.worldShare {
  text-align: center;
  border-radius: 28px;
  padding: 48px 36px;
  border: 1px solid #e4e0f6;
  background: linear-gradient(120deg, #eeebfd 0%, #e6f0fb 52%, #e4f7ef 100%);
}
.worldShare h2 { margin-top: 0; }
.worldShareLede {
  max-width: 600px;
  margin: 14px auto 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--bia-fg);
}
.worldShareRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.worldShareBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  line-height: 1 !important;
  min-width: 150px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  background: #ffffff;
  color: var(--bia-fg);
  border: 1.5px solid #dad5f0;
}
.worldShareBtn:hover { border-color: var(--bia-accent); color: var(--bia-accent); }
.worldShareBtn.worldSharePrimary {
  background: var(--bia-accent);
  color: #ffffff;
  border-color: var(--bia-accent);
  box-shadow: 0 10px 22px -8px rgba(108, 95, 192, 0.6);
}
.worldShareBtn.worldSharePrimary:hover { background: var(--bia-focus); border-color: var(--bia-focus); color: #ffffff; }
.worldShareFinePrint {
  max-width: 600px;
  margin: 24px auto 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--bia-muted);
}

/* Two join cards */
.worldJoinGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) {
  .worldJoinGrid { grid-template-columns: 1fr; }
}
.worldJoinCard {
  background: #ffffff;
  border: 1px solid #ece9f9;
  border-radius: 24px;
  padding: 30px 32px;
  box-shadow: 0 18px 46px -36px rgba(60, 50, 120, 0.4);
}
.worldJoinCard h2 { margin-top: 0; }
.worldJoinCard p { color: var(--bia-fg); line-height: 1.6; }
.worldJoinCard .worldBtn { margin-top: 6px; }
/* Secondary "looking for support yourself?" CTAs collapsed into the invite card. */
.worldJoinAlt {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #f0eef8;
}
.worldJoinAltLabel {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bia-muted);
}
.worldJoinAlt .worldBtn { margin: 0 8px 8px 0; }

/* Emetophobia training note inside the therapist card. */
.worldTrain {
  margin: 16px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--bia-muted);
}
.worldTrain a { color: var(--bia-link); font-weight: 600; }

/* Provider testimonial inside the therapist card. */
.worldTestimonial {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid #f0eef8;
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--bia-muted);
}
.worldTestimonial .worldTestimonialName {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-weight: 600;
  color: var(--bia-teal);
}

/* Research / conferences / partners scroller moved to css/researchTalks.css (reusable via researchTalks.html). */

.worldCommunity { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; padding-top: 88px; padding-bottom: 88px; }
.worldCommunity .worldBtn { margin: 6px; }
.worldSources {
  margin-top: 22px;
  font-size: 0.78rem;
  color: var(--bia-muted);
  line-height: 1.5;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}