/* =============================================
   /get-support/ hub: the two card grids
   =============================================

   Loaded by /get-support/ only, and by nothing else. A dedicated sheet rather
   than more rules in pages.css or programs.css because both are shared far
   wider than they look: .program-hero alone is used by 22 pages, and the last
   two defects on this page came from rules that reached further than their
   author expected (.prose ul li::before bleeding into .resource-list, and
   site.css h2,h3 repainting the CTA headline).

   Written against the Figma "What We Offer" and "Browse All Programs" bands,
   Get Support 107:1557. Colors come from the tokens in base.css, never
   literals, so a brand change moves these with everything else.
   ============================================= */

/* ---------- shared card affordances ---------- */

.gs-area-card,
.gs-program-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: var(--radius);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gs-area-card:hover,
.gs-program-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -12px rgba(0, 68, 115, 0.45);
}

/* The whole card is the anchor, so the visible focus ring has to sit on the
   card. Without this the keyboard user gets the browser default outline hugging
   a flex container with no visible edge on the cream variant. */
.gs-area-card:focus-visible,
.gs-program-card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gs-area-card,
  .gs-program-card {
    transition: none;
  }
  .gs-area-card:hover,
  .gs-program-card:hover {
    transform: none;
  }
}

.gs-card-more {
  margin-top: auto;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Areas of support: navy cards ---------- */

/* Wrapping flex rather than grid, in both card bands, so a partial final row
   centres instead of hanging to the left. The programs groups hold 10 each
   today, which leaves one orphan card in a 3-up grid. A fixed 5-up grid would
   divide 10 evenly, but it only looks right while the count is exactly 10, and
   this page is generated from the data precisely so the count can change
   without anyone editing markup. Centring handles any N. */
.gs-area-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}
.gs-area-grid > .gs-area-card {
  flex: 0 1 calc((100% - 48px) / 3);
}

.gs-area-card {
  background: var(--color-secondary);
  padding: 32px 28px;
  min-height: 260px;
  text-align: center;
  align-items: center;
}

/* site.css:67 sets `h2, h3 { color: var(--color-secondary) }` and loads before
   this sheet, so an h3 on a navy card is navy on navy unless the color is
   stated here. That exact cascade produced finding 01 of the pre-demo audit, a
   headline that was invisible on 64 pages. State it, do not inherit it. */
.gs-area-card-title {
  color: var(--color-white);
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0 0 14px;
}

.gs-area-card-desc {
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 20px;
}

.gs-area-card .gs-card-more {
  color: var(--color-white);
}

/* ---------- Programs: cream cards in two groups ---------- */

.gs-group-label {
  font-size: 1.15rem;
  margin: 0 0 18px;
  text-align: center;
}

.gs-group-label a {
  color: var(--color-secondary);
  text-decoration: none;
}

.gs-group-label a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.gs-program-group + .gs-program-grid {
  margin-bottom: 36px;
}

.gs-program-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.gs-program-grid > .gs-program-card {
  flex: 0 1 calc((100% - 40px) / 3);
}

.gs-program-card {
  background: var(--color-cream);
  padding: 26px 24px;
  min-height: 132px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.gs-program-card-title {
  color: var(--color-secondary);
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 12px;
}

/* Orange on the cream card, which is the one contrast failure on this page and
   the only one on the whole 460-page site (axe, 2026-10-13: #cf4b04 on
   #ffe3b3 measures 3.62 against a 4.5 requirement, 20 nodes).
   ground: --color-cream
   The fix is the HOUSE RULE already written at the top of css/site.css rather
   than a new colour: orange text on any non-white ground stays at or above
   1.1875rem (19px) AND font-weight 700, which is 14.25pt bold and clears
   WCAG's real large-text line of 18.66px bold. At that size the threshold is
   3.0 and 3.62 passes with margin.
   Changing the colour instead was considered and rejected: #cf4b04 is
   --es-primary-orange, PMS 1665 C, and the 2025 playbook states verbatim "Do
   not create any additional tints not reflected here". Casey chose this on
   2026-10-15. The navy cards keep white at 1rem; they are not affected. */
.gs-program-card .gs-card-more {
  color: var(--color-primary);
  font-size: 1.1875rem;
  font-weight: 700;
  margin-top: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .gs-area-grid > .gs-area-card {
    flex-basis: calc((100% - 24px) / 2);
  }
  .gs-program-grid > .gs-program-card {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (max-width: 600px) {
  .gs-area-grid > .gs-area-card,
  .gs-program-grid > .gs-program-card {
    flex-basis: 100%;
  }
  .gs-area-card {
    min-height: 0;
    padding: 26px 22px;
  }
  .gs-program-card {
    min-height: 0;
  }
}

/* ---------- Figma alignment (slice 2) ---------- */

/* "Contents:" label on the in-page nav, per the Figma. The nav element already
   carries aria-label="On this page", so this is decorative and hidden from
   assistive tech rather than announced twice. */
/* No opacity. White at 0.85 over the Blue bar computes to #d9ebf3, which
   measures 3.79 on #007cb1 and fails the 4.5 this needs at 0.8rem bold
   (9.6pt, under WCAG's large-text line). Full white measures 4.65 and
   passes. The opacity was cosmetic, the shortfall was not, and dropping it
   is a smaller visual change than restyling the bar.
   Noted because it is a trap worth recognising: an opacity on a colour that
   passes produces a COMPUTED colour that does not, and the stylesheet still
   reads as if it uses --color-white. Only a computed-style check sees it. */
.gs-secnav-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  align-self: center;
  white-space: nowrap;
  margin-right: 4px;
}

/* The bar already scrolls horizontally on a phone. The links are the functional
   part, so the label yields rather than stealing width from them. */
@media (max-width: 700px) {
  .gs-secnav-label { display: none; }
}

/* ---------- Locations: card rail + map (slice 3) ---------- */

.gs-loc-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 36px;
}

/* The rail runs full height and the map sticks beside it. An earlier pass gave
   the rail its own scroll container capped at the map's height; that cut the
   third card off mid-title, which reads as broken markup rather than as "scroll
   for more". Card heights vary, so no cap can be guaranteed to land in a gutter. */
.gs-loc-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gs-loc-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.gs-loc-card.is-active {
  border-color: var(--color-primary);
}

.gs-loc-title {
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--color-secondary);
}

.gs-loc-address,
.gs-loc-phone {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0 0 6px;
}

.gs-loc-phone a { color: var(--color-primary); }

.gs-loc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.gs-loc-actions .btn {
  font-size: 0.9rem;
  padding: 8px 18px;
}

.gs-loc-show {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.gs-loc-show:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.gs-loc-show[aria-pressed="true"] {
  color: var(--color-secondary);
  text-decoration: none;
  cursor: default;
}

/* Sticky so the map stays beside the rail as the reader moves down all 8 cards.
   align-self: start is required: a grid item defaults to stretch, and a
   stretched item is already full height so it has nothing to stick within.
   The offset clears the sticky site header plus the pinned sub-nav sliver. */
.gs-loc-map {
  position: sticky;
  top: 140px;
  align-self: start;
}

/* The iframe needs an explicit height or it collapses to nothing. */
.gs-loc-map iframe {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: var(--radius);
  /* Loading placeholder: the Google embed takes a moment, and the iframe's
     own background shows until the map paints over it. */
  background-color: #808080;
}

@media (max-width: 900px) {
  .gs-loc-layout { grid-template-columns: 1fr; }
  /* Stacked, the map leads and does not stick: a sticky map would cover the
     cards the reader is scrolling to. */
  .gs-loc-map { order: -1; position: static; }
  .gs-loc-map iframe { height: 320px; }
  /* With js/get-support.js running, each card opens its own map instead
     (issue #112), so the shared one above the list is redundant. Without the
     script the class is absent and the shared map stays, as the only map. */
  .gs-loc-layout.gs-loc-js .gs-loc-map { display: none; }
}

/* The map inside a card, built by js/get-support.js on first tap at 900px
   and below. Above 900px the rail drives the shared map, so an inline map is
   never shown there, even if one was open when the window was widened. */
.gs-loc-inline-map {
  margin-top: 14px;
}

.gs-loc-inline-map iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
  border-radius: var(--radius);
  /* Same loading placeholder as the shared map. */
  background-color: #808080;
}

@media (min-width: 901px) {
  .gs-loc-inline-map { display: none; }
}

/* ---------- Who We Serve as the audience picker ----------
   iprov-agency/eas-easterseals#187 to #190. This section moved directly under
   the hero and now drives the Areas, Programs and Locations sections below it.

   Everything here is scoped under #who-we-serve on purpose. `.audience-badge`
   and `.audience-badges` are declared in css/site.css and render on 24 pages,
   including the homepage, /contact/ and all 20 program pages. Restyling the
   bare class to build this picker would repaint every one of them. */

#who-we-serve .gs-aud-hint {
  margin-top: 10px;
  color: var(--color-text-body);
}

#who-we-serve .gs-aud-option {
  display: block;
  cursor: pointer;
}

/* Visually hidden, NOT display:none and NOT visibility:hidden, because both
   take the control out of the tab order. The checkbox stays focusable and
   keeps its native keyboard handling and announcement; the checked and focus
   states are drawn on .gs-aud-face below. */
#who-we-serve .gs-aud-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#who-we-serve .gs-aud-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

#who-we-serve .gs-aud-title {
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.25;
}

/* --color-text-light #5f6773 measures 5.72:1 on white and 5.15:1 on
   --color-light, both clear of the 4.5 floor. check-contrast.mjs carries both
   pairs as declared. */
#who-we-serve .gs-aud-count {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

#who-we-serve .gs-aud-option:hover .gs-aud-face {
  border-color: var(--color-secondary);
}

/* The selected state is carried by THREE things at once, not colour alone:
   a navy fill, a weight and colour change on the label, and the check glyph
   added below. Colour by itself would fail anyone who cannot separate the
   two border treatments. */
#who-we-serve .gs-aud-input:checked + .gs-aud-face {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  box-shadow: 0 10px 26px rgba(0, 68, 115, 0.22);
}
#who-we-serve .gs-aud-input:checked + .gs-aud-face .gs-aud-title {
  color: var(--color-white);
}
/* White on navy is 11.7:1. The pale count text would only reach about 2.4:1 on
   this fill, so it goes white too and leans on size rather than tint. */
#who-we-serve .gs-aud-input:checked + .gs-aud-face .gs-aud-count {
  color: var(--color-white);
}
#who-we-serve .gs-aud-input:checked + .gs-aud-face .gs-aud-title::after {
  content: " \2713";
}

#who-we-serve .gs-aud-input:focus-visible + .gs-aud-face {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

#who-we-serve .audience-badge-desc {
  margin-top: 12px;
}

/* ---------- the live count and empty state on each filtered section ----------
   Modelled on .people-count and .people-empty from the Staff page, which is
   the pattern the client asked for by name. */

.gs-filter-count {
  margin: 0 0 18px;
  text-align: center;
  font-weight: 700;
  color: var(--color-text-body);
}

.gs-filter-empty {
  margin: 0 0 18px;
  text-align: center;
  color: var(--color-text-body);
}

/* A real button, so it is reachable by keyboard and announced as a control,
   painted to read as the link it looks like. */
.gs-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-secondary);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.gs-link-btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.gs-aud-reset-wrap {
  margin-top: 28px;
}

/* The four tiles hold descriptions of different lengths, so their Learn More
   links used to land at four different heights. Stretch the tiles to equal
   height and push the link to the bottom of each, so the row reads as one
   control strip rather than four ragged columns. Scoped to this section, so
   the badge on the homepage and the 20 program pages is untouched. */
#who-we-serve .audience-badges {
  align-items: stretch;
}
#who-we-serve .gs-aud {
  display: flex;
  flex-direction: column;
}
#who-we-serve .gs-aud .link-arrow {
  margin-top: auto;
  padding-top: 10px;
}