/* INSURANCE & PAYMENT BAND */

/* Full-bleed band rather than an inset card: it sits between two
   sections that now run to the gutters, where a rounded panel with
   its own margins read as a floating card between them. */
.sh-insurance-band {
  padding: 0;
}

/* Full-bleed background, page-width content: without the inner cap
   below, the logo row would run to the panel's own gutter and visibly
   overhang the About and Services sections above it. */
/* Only the full-screen width needs its content capped back to the
   page measure — at the other two widths the outer element is already
   on the measure, and capping again would inset the content twice. */
.sh-bw-screen.sh-insurance-band .sh-insurance-band__panel > * {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}



.sh-insurance-band__panel {
  padding: 5rem var(--gutter);
  text-align: center;
  /* --banner-bg comes from banner.php's Background override, when the
     placement set one; otherwise the default mint. */
  background: var(--banner-bg, var(--color-divider-teal));
  /* Rounded like the other banner layouts once inset (any width but
     full screen). The width classes live on the outer.sh-insurance-
     band section, not on this panel, so the screen-mode reset below
     has to be scoped explicitly rather than inherited. */
  border-radius: 1rem;
}

.sh-bw-screen.sh-insurance-band .sh-insurance-band__panel {
  border-radius: 0;
}

/* Every banner runs full-screen on mobile regardless of its own Width setting (see the.sh-bw-page/.sh-bw-column reset in sections.css) — but that reset only touches the outer.sh-insurance-band section. */
@media (max-width: 768px) {
  .sh-bw-page.sh-insurance-band .sh-insurance-band__panel,
  .sh-bw-column.sh-insurance-band .sh-insurance-band__panel {
    border-radius: 0;
  }
}

.sh-insurance-band__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  /* --banner-fg is one contrast-checked colour for the whole panel —
     an override recolours title and note together rather than keeping
     the default's two-tone split, the same way an overridden one/two-
     column banner gets one foreground for headline and body. */
  color: var(--banner-fg, var(--color-heading-dark));
  margin-bottom: 0.75rem;
}

/* The brand deep blue rather than the generic muted grey: on the DEFAULT mint panel #555 measures 5.20:1 — a pass, but the weakest text on the page — where this is 7.27:1 (AAA). */
.sh-insurance-band__note {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--banner-fg, var(--color-secondary));
  margin-bottom: 2.5rem;
}

/* A phone number inside the note (the location-open default's "please
   call: …" — see banner.php's {phone_link} token) renders as a real
   tel: link via starfish_marks()'s [label](url) syntax; this is what
   makes it visibly read as clickable rather than a plain string of
   digits sitting in body copy. --banner-bullet is the same per-
   background accent banner.php already computes for the plan-list
   marker below (brand primary on a white/near-white panel, unset
   everywhere else) — reused here rather than a second hardcoded
   colour, so the link stays visible instead of blending into
   --banner-fg on a brand-blue or dark panel where plain primary blue
   would be low-contrast or invisible. */
.sh-insurance-band__note a {
  color: var(--banner-bullet, var(--banner-fg, var(--color-secondary)));
  text-decoration: underline;
}

/* Logo carousel --- One row, never wrapping. */
.sh-insurance-band__carousel {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
  text-align: left;
}

/* The 2.5rem gap above the logos normally comes from the summary line's own bottom margin. */
.sh-insurance-band__title + .sh-insurance-band__carousel {
  margin-top: 1.75rem;
}

.sh-insurance-band__logos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3.5rem;
  margin: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Native scrollbar hidden: a bar under a logo row reads as a
     rendering artefact. Scrolling by touch, trackpad and keyboard
     all still work. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sh-insurance-band__logos::-webkit-scrollbar { display: none; }

.sh-insurance-band__logos > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 10rem;
}

@media (prefers-reduced-motion: reduce) {
  .sh-insurance-band__logos { scroll-behavior: auto; }
}

/* An active location's own Insurance & Payment page (insurance-band.php's
   $open case) shows every plan it accepts at once — no carousel to
   scroll, so this overrides the carousel-only rules above: wraps
   instead of scrolling, centered instead of left-aligned against the
   panel edge, no snap/scrollbar behaviour to speak of. */
.sh-insurance-band__logos--static {
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: visible;
  margin: 1.75rem 0 2.5rem;
}

.sh-insurance-band__logos img {
  display: block;
  max-width: 10rem;
  max-height: 3.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Medicaid.gov / Medicare.gov are pure wordmarks with no icon or
   mark to shorten the string — a 12-character single-line logotype
   is inherently wider, relative to its own height, than a short brand
   name like "Aetna" or a logo that pairs a compact icon with its
   name. At the shared max-width every logo here gets, that shows up
   as this pair alone reading noticeably smaller — not a rendering
   bug, just what a long word does to a fixed-width box. Widening
   their own allowance (height cap unchanged) lets them reach the same
   height the shorter marks do instead of being throttled by width
   first. */
.sh-insurance-band__logos img[src*="medicaid-gov"],
.sh-insurance-band__logos img[src*="medicare-gov"] {
  max-width: 14rem;
}

/* ── Grid display style ───────────────────── Every accepted plan as its own soft panel, logo above its name — an alternative to the scrolling carousel, picked per placement (see starfish_acf_insurance_display_style_field()). */
/* Centred and wrapping, the same shape.sh-insurance-band__logos--static
   already uses on a location's own page — not an auto-fit grid, which
   stretches a short plan list across the full width and leaves the
   last row hanging. */
.sh-insurance-band__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1.75rem 0 2.5rem;
  padding: 0;
  list-style: none;
}

.sh-insurance-band__tile {
  flex: 0 0 auto;
  width: 9.5rem;
}

.sh-insurance-band__tile,
.sh-insurance-band__tile > a {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-decoration: none;
}

/* Only the anchor fills its tile — the tile's own width is set above
   and must not be overwritten here. */
.sh-insurance-band__tile > a { width: 100%; }

/* The panel itself. On the tile when the plan has no link, on the
   anchor when it does — either way exactly one bordered box per
   plan, never one nested in another. */
.sh-insurance-band__tile:not(:has(> a)),
.sh-insurance-band__tile > a {
  padding: 1.5rem 1rem;
  background: transparent;
  /* Derived from --banner-fg (the auto-contrast text colour) rather than a fixed white: on a dark band that resolves to the same translucent white this was, on a light one it becomes a faint dark rule instead of an invisible white one. */
  border: 1px solid color-mix(in srgb, var(--banner-fg, var(--color-secondary)) 22%, transparent);
  border-radius: 1rem;
}

.sh-insurance-band__tile img {
  max-width: 100%;
  max-height: 2.25rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sh-insurance-band__tile-name {
  font-family: var(--font-nav);
  font-size: var(--text-md);
  color: var(--banner-fg, var(--color-secondary));
}

/* Expanded plan list --- Only rendered when the button's behaviour resolved to "expand" — see banner.php. */
.sh-insurance-band__groups {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  margin-bottom: 2.5rem;
}

.sh-insurance-band__groups:not(.is-open) {
  margin-bottom: 0;
}

/* Everywhere.is-open is added WITHOUT the click-to-expand JS ever
   running (an active location's own Insurance & Payment page, open
   from first render — see insurance-band.php's $open branch) there is
   no inline max-height for the JS transition to have set: this is
   what actually shows the content in that case. Harmless where JS
   *does* run too — insurance-band-expand.js sets the same max-height:
   none inline once its own transition finishes, and an inline style
   always wins over this rule regardless of which lands second. */
.sh-insurance-band__groups.is-open {
  max-height: none;
  overflow: visible;
}

/* [hidden] alone loses to.sh-btn's own `display: inline-flex` (an author rule always beats the UA stylesheet, regardless of order or specificity) — same issue already documented in pages.css/ locations.css for other JS-toggled elements. */
[data-insurance-expand-trigger][hidden] {
  display: none;
}

/* Separates the logo row from the named list below it — the two are complementary views of the same plans, not alternatives, so the carousel stays put and this marks where one ends and the other begins. */
.sh-insurance-band__divider {
  height: 0;
  margin: 0 0 2.5rem;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--banner-fg, var(--color-secondary)) 18%, transparent);
}

/* The revealed summary line sits below the divider (see the note in
   insurance-band.php on why it is not shown before expanding) and
   wants the same measure as body copy rather than running the full
   panel width. */
.sh-insurance-band__note--revealed {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

/* the groups sit as columns side by side, each a
   FILLED card rather than a bare outline. Each group is one grid
   cell, so a fourth category added later wraps to a second row with
   no rule change. */
.sh-insurance-band__groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  text-align: left;
}

/* Fill and border are both MIXED FROM the panel's own two colours rather than hardcoded to the navy in the design file. */
.sh-insurance-band__group {
  padding: 1.5rem;
  background: color-mix(in srgb, var(--banner-fg, var(--color-secondary)) 4%, var(--banner-bg, var(--color-divider-teal)));
  border: 1px solid color-mix(in srgb, var(--banner-fg, var(--color-secondary)) 14%, var(--banner-bg, var(--color-divider-teal)));
  border-radius: var(--radius-lg, 1rem);
}

/* Sentence case and muted, not the uppercase micro-label this was
   before — the design file reads it as a quiet caption above the
   names, closer to #a0a0a0 on the card than to a heading. */
.sh-insurance-band__group-title {
  font-family: var(--font-nav);
  font-size: var(--text-md);
  font-weight: 400;
  color: color-mix(in srgb, var(--banner-fg, var(--color-secondary)) 62%, transparent);
  margin-bottom: 1.25rem;
}

.sh-insurance-band__group-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  list-style: none;
}

.sh-insurance-band__group-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: var(--text-md);
  color: var(--banner-fg, var(--color-heading-dark));
}

/* A chunky rounded pill, not a hairline rule: the design file's marker is ~14x8 with a full radius, which reads as a deliberate bullet rather than a stray underscore. */
.sh-insurance-band__group-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.5rem;
  border-radius: var(--radius-pill, 999px);
  /* --banner-bullet is only ever set when the panel's background is
     white/near-white (see banner.php) — everywhere else this falls
     straight through to the usual --banner-fg. */
  background: var(--banner-bullet, var(--banner-fg, var(--color-heading-dark)));
  opacity: 0.92;
  /* Sits optically on the text's midline; baseline alignment alone
     would drop it onto the baseline itself. */
  transform: translateY(-0.15em);
}

@media (max-width: 768px) {
  .sh-insurance-band__panel { padding: 2.5rem var(--gutter); }
  .sh-insurance-band__logos { gap: 1.5rem 2rem; }
  /* One column below the fold-out width: two 15rem columns cannot fit
     a phone, and auto-fit would otherwise leave them cramped. */
  .sh-insurance-band__groups-grid { grid-template-columns: 1fr; }
}

/* Unified payer list (workbook W2-01 / IMP-04). With the Commercial /
   Medicaid-MCO buckets gone there is a single untitled card, so the
   names flow in columns rather than running down one long line — the
   grid above stretches a lone card to full width. */
.sh-insurance-band__group:only-child .sh-insurance-band__group-list {
  display: block;
  columns: 2;
  column-gap: 2.5rem;
}

.sh-insurance-band__group:only-child .sh-insurance-band__group-list li {
  break-inside: avoid;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .sh-insurance-band__group:only-child .sh-insurance-band__group-list { columns: 1; }
}