/* =============================================
   Easterseals Arkansas - Static Pages
   Interior page styles: page heads, prose content,
   bio grids, partner groups, forms, resource lists.
   Builds on css/base.css and css/site.css tokens.
   Hover effects limited to links and buttons only.
   ============================================= */

/* Page-title band + intro live in site.css now (shared .page-head band and
   .page-intro block). The old light-gradient .page-head styling was replaced
   by the WP amber hero band in FIX 2. */

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 1rem;
  color: var(--color-text-light);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--color-primary); }
.breadcrumb a:hover { color: var(--color-primary-dark); }
.breadcrumb span { margin: 0 6px; color: var(--color-border); }

/* ---------- Prose content ---------- */
.prose-section { padding: 64px 0; }
.prose-section.bg-light { background: var(--color-light); }
/* A prose section that follows a header with no paragraph under the h1
   (/non-discrimination-policy/, /hipaa-notice/): 40px of top padding instead
   of 64px. Same specificity as .prose-section and later in the file, so it
   wins. */
.prose-section--tight { padding-top: 40px; }
.prose {
  max-width: 820px;
  margin: 0 auto;
}
.prose-wide { max-width: 1040px; }
.prose h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-secondary);
  margin: 40px 0 16px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.3rem;
  color: var(--color-secondary);
  margin: 28px 0 12px;
}
.prose p {
  font-size: 1.125rem;
  color: var(--color-text-body);
  line-height: 1.8;
  margin-bottom: 18px;
}
.prose a:not(.btn) {
  color: var(--color-primary);
  font-weight: 600;
  /* Long unbroken URLs used as link text must wrap, or they overflow the
     viewport on narrow screens (privacy-policy, non-discrimination-policy). */
  overflow-wrap: anywhere;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.prose a:not(.btn):hover { color: var(--color-primary-dark); border-bottom-color: currentColor; }
.prose ul { list-style: none; margin: 0 0 20px; }
.prose ul li {
  position: relative;
  padding-left: 24px;
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.75;
  margin-bottom: 10px;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.prose figure { margin: 28px 0; }
.prose figure img { width: 100%; border-radius: var(--radius); }
.prose .figure-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}
.prose .figure-row img { width: 100%; border-radius: var(--radius); aspect-ratio: 1 / 1; object-fit: cover; }
.prose .note {
  font-size: 1rem;
  color: var(--color-text-light);
  font-style: italic;
}
.prose hr { border: none; border-top: 1px solid var(--color-border); margin: 32px 0; }

/* ---------- Split content blocks (circular imagery) ---------- */
.content-split { padding: 64px 0; }
.content-split .container {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
}
.content-split.reverse .split-media { order: 2; }
.split-media img {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 8px solid var(--color-white);
  box-shadow: 0 16px 40px rgba(0, 68, 115, 0.14);
  display: block;
}
.split-copy h2 { color: var(--color-secondary); margin-bottom: 14px; }
.split-copy p { font-size: 1.125rem; color: var(--color-text-body); line-height: 1.8; margin-bottom: 16px; }

/* ---------- Alternating image / copy rows (about page, CD-230) ----------
   WP's /about-us/ pairs each section heading with a circle-package photo on
   alternating sides. The copy column keeps .prose typography, and the figure is
   a SIBLING of .prose rather than a descendant on purpose: `.prose figure img`
   forces border-radius: var(--radius) and `.prose figure` forces margin 28px 0
   (lines 77 and 78 above), both of which fight the .eas-img circle package.
   .about-splits clips at the band edge exactly like .offer on the homepage
   (css/site.css:489). The orange -right disc sits at `right: -75px`
   (css/site.css:1041); once .container stops centring below roughly 1400px its
   24px padding is all that is left, so an unclipped disc overhangs by 51px and
   adds horizontal page scroll. Measured without this rule:
   documentElement.scrollWidth exceeded the viewport at 1100, 900, 760, 600, 500
   and 390px. The homepage .mission section needs no such rule because its
   blue -left disc overhangs LEFT, which never grows scrollWidth in LTR. */
.about-splits { position: relative; overflow: hidden; }
.about-split { margin-top: 56px; }
.about-split > .eas-img,
.about-split > .prose { position: relative; z-index: 1; }
/* A splits section that continues straight after a band whose bottom padding
   already opens the gap (/about-us/our-history/, after the statement box,
   eas-easterseals#146) drops its own top padding. The first row keeps its
   56px margin, and no .eas-img disc reaches above its figure (discs sit at
   top: 0 or bottom: 0), so the clipped top edge cuts nothing. */
.about-splits--continued { padding-top: 0; }
/* Centred orange heading that opens a splits section ("A History of Firsts"
   on /about-us/our-history/). Its size is the page title's: the clamp is the
   one on `.area-hero-copy h1` in css/template-kit.css, so the two scale
   together; change both or neither. No margins: the band above supplies the
   gap over it and the first row's own 56px margin the gap under it, so the
   heading sits closer to the timeline it introduces. */
.about-splits-heading {
  margin: 0;
  color: var(--color-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  text-align: center;
}

/* Centred closing call to action inside a prose band (/about-us/our-history/,
   eas-easterseals#147). An 880px measure (Jen, a little wider than the 820px
   .prose default) keeps the centred lines readable; it still shrinks with the
   container on narrow screens. The button sits under the text. */
.prose-cta { max-width: 880px; text-align: center; }
.prose-cta-actions { margin-top: 28px; }
/* The Leadership Team page's closing CTA (iprov-agency/eas-easterseals#165)
   uses a 720px measure (Jen): at 820px its paragraph broke onto a second
   line holding a single word. Same specificity as .prose-cta and later, so
   it wins only where the modifier class is set; Our History keeps 880px. */
.prose-cta--narrow { max-width: 720px; }
/* The Guardians page's closing CTA (iprov-agency/eas-easterseals#170) keeps
   the 820px .prose measure (Jen), between Our History's 880px and the
   Leadership Team's 720px. Same specificity as .prose-cta and later, so it
   wins only where the modifier class is set. Its paragraph keeps the
   tel: link, and the .prose orange link text is 3.62:1 on cream (4.5:1
   needed), so a link in a cream CTA band is navy (8.08:1). No other CTA
   band has a link in its text. */
.prose-cta--medium { max-width: 820px; }
.bg-cream .prose-cta a:not(.btn) { color: var(--color-primary-dark); }

/* ---------- People hub (/about-us/people/) ---------- */
/* .people-intro, its h1, its paragraph, the 600px padding step, the --wide
   measure and .people-intro-tagline all MOVED to css/site.css on 2026-10-21,
   next to the .page-head band they replace. The 7 archive hubs next in line
   for the title block load site.css but not this 41 KB sheet. The family
   moved as one contiguous run so the documented same-specificity ordering
   (--wide p after p, the tagline after both) still holds. The card sections,
   .people-roster here and .people-hub below, are this page's own layout and
   stayed. */
.people-roster { padding-top: 50px; }
/* The hub's cards. Scoped to .people-hub so every other .area-card page
   (/areas-of-support/ and the three /who-we-serve/ audiences) keeps the shared
   template-kit card. 50px instead of the shared .section top padding pulls
   the cards up under the intro. The fill is --color-light (#f3f3f3): body
   text 6.81:1, navy title 9.12:1, the 19px/700 orange link-arrow 4.06:1 (large
   text, 3:1 needed; see the .link-arrow note in css/base.css).
   The title is an h2 on this page only. Its size is 26px (1.625rem) from 900px
   up, easing to a 22px (1.375rem) floor at 700px and under. text-wrap undoes
   the site-wide h2 balance from css/site.css so the h2 keeps every other
   property of the shared .area-card-title span (weight, colour, line-height,
   margins); only the size changes. */
.people-hub { padding-top: 50px; }
.people-hub .area-card { background-color: var(--color-light); }
.people-hub .area-card-title {
  font-size: clamp(1.375rem, 0.5rem + 2vw, 1.625rem);
  text-wrap: wrap;
}

/* ---------- Bio grid (board, guardians) ---------- */
.bio-intro { max-width: 820px; margin: 0 auto 48px; }
.bio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.bio-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}
.bio-card .bio-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  border: 4px solid var(--color-light);
}
.bio-card h3 { color: var(--color-secondary); margin-bottom: 4px; font-size: 1.2rem; }
.bio-card .bio-role {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.6px;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.bio-card p { font-size: 1rem; color: var(--color-text-body); line-height: 1.7; margin-bottom: 12px; }
.bio-card p:last-child { margin-bottom: 0; }

/* ---------- Meeting / schedule list ---------- */
.schedule-box {
  background: var(--color-light);
  border-radius: var(--radius);
  padding: 28px 32px;
  max-width: 820px;
  margin: 0 auto 40px;
}
/* Promoted h3 -> h2 to fix heading-order (h1 skipped straight to h3).
   Size is pinned to the old h3 scale so the semantic change is invisible. */
.schedule-box h2 {
  color: var(--color-secondary);
  margin-bottom: 14px;
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  font-weight: 700;
}
.schedule-box ul { list-style: none; columns: 2; column-gap: 40px; }
.schedule-box li {
  font-size: 1rem;
  color: var(--color-text-body);
  padding: 6px 0;
  break-inside: avoid;
}
/* The Board of Directors page (/about-us/people/board-of-directors/,
   iprov-agency/eas-easterseals#172 and #173). Its Board Meetings box and the
   non-discrimination note sit BELOW the member cards, in the cards' own
   .container, so the box spans the card grid's width at every viewport
   (1152px at 1440) instead of the shared 820px .schedule-box measure. The
   56px above it is the gap between two .staff-group grids on the Leadership
   Team page. The note under the list gets the site's 20px text gap (it sat
   flush under the last date). Its phone link rendered as plain text (links
   inherit colour, no underline, in base.css); it takes the .prose link weight
   in navy, underlined: the .prose orange is 4.06:1 on the box's #f3f3f3
   (4.5:1 needed), navy is 9.12:1. Hover thickens the underline, keyboard
   focus draws a navy ring. Only the Board page carries these classes. */
.schedule-box.board-meetings { max-width: none; margin-top: 56px; }
.board-meetings .note { margin-top: 20px; }
.board-meetings .note a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.board-meetings .note a:hover { text-decoration-thickness: 2px; }
.board-meetings .note a:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
/* The non-discrimination note keeps the 820px .prose measure, centred with
   centred text, and it ends the section, so its paragraph's 18px bottom margin
   stays dropped: the section's 64px padding is the only gap to the footer, as
   under the cards on main.
   The 40px TOP margin is back as of iprov-agency/eas-easterseals#324. It was
   dropped when the Board Meetings box was introduced, because that box carried
   margin-top: 56px and supplied the air above the note. The box has now been
   removed, and measured at both 1440px and 390px the note sat flush against
   the last card row at a 0px gap. This restores the spacing the note had
   before the box existed. */
.prose.board-policy-note { margin: 40px auto 0; }
.board-policy-note .note { margin-bottom: 0; text-align: center; }

/* ---------- Partner groups ---------- */
.partner-group { margin-bottom: 48px; }
.partner-group > h2 {
  color: var(--color-secondary);
  text-align: center;
  margin-bottom: 8px;
}
.partner-group .group-sub {
  text-align: center;
  color: var(--color-text-light);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 1.5px;
  margin-bottom: 28px;
}
.partner-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 18px;
}
.partner-card h3 { color: var(--color-secondary); margin-bottom: 10px; font-size: 1.15rem; }
.partner-card h3 a { color: var(--color-primary); }
.partner-card h3 a:hover { color: var(--color-primary-dark); }
.partner-card p { font-size: 1rem; color: var(--color-text-body); line-height: 1.75; }
/* Constrain partner logos so a large source image does not blow out the card
   or leave uneven whitespace; keep aspect ratio and cap the visual height. */
.partner-card img {
  max-height: 64px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 12px;
}

/* ---------- Ways to give grid ---------- */
.give-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.give-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.give-card h3 { color: var(--color-secondary); margin-bottom: 8px; font-size: 1.2rem; }
.give-card p { font-size: 1rem; color: var(--color-text-body); line-height: 1.7; margin-bottom: 16px; flex-grow: 1; }
.give-card .link-arrow {
  align-self: flex-start;
  font-weight: 700;
  color: var(--color-primary);
}
.give-card .link-arrow:hover { color: var(--color-primary-dark); }

/* ---------- Donation embed placeholder ---------- */
.embed-placeholder {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-light);
  padding: 56px 32px;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.embed-placeholder h3 { color: var(--color-secondary); margin-bottom: 10px; }
.embed-placeholder p { font-size: 1rem; color: var(--color-text-body); line-height: 1.7; max-width: 520px; margin: 0 auto 20px; }

/* ---------- Donate panel (GiveSmart button) ---------- */
.donate-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-light);
  padding: 48px 32px;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.donate-panel h3 { color: var(--color-secondary); margin-bottom: 10px; }
.donate-panel p { font-size: 1rem; color: var(--color-text-body); line-height: 1.7; max-width: 560px; margin: 0 auto 22px; }
.donate-btn { font-size: 1.0625rem; padding: 15px 40px; }

/* CLS: GiveSmart's form_btn_modal.js INJECTS its own donate button into the
   page, and js/givesmart-donate.js then removes it (see the comment at the
   top of that file for why we load the script at all: we want window.mc, not
   their button). Those are two layout changes in a row, an insert then a
   delete, and /donate/ measured CLS 0.252 desktop, which is in the "poor"
   band and was the worst score on the site.
   It is also a RACE, which is why it looked intermittent: measured 2026-10-15
   the same page scored 0.000 and 0.252 on two consecutive runs, depending on
   whether the removal landed in the same frame as the injection.
   Taking the button out of flow before it can be painted removes the shift
   whatever the timing, and it no longer depends on our JS winning the race.
   !important because GiveSmart sets inline styles on it.
   This matters more than the number: /donate/ is a donation page, and layout
   shift under the button someone is reaching for costs real gifts. */
.mc-donate-button {
  display: none !important;
}
.donate-note { font-size: 1rem; color: var(--color-text-light); margin: 20px auto 0; }
/* The gap above the note (#161). The rule above never wins: `.donate-panel p`
   is more specific (0,1,1 against 0,1,0) and resets the note to
   `margin: 0 auto 22px`, so the note sat flush under the Donate button. The
   button is inline-flex on its own line, and that line ends exactly at the
   button's bottom edge, so nothing else separates the two. This restores only
   the top margin, at the panel's specificity; the note's 22px bottom margin and
   its colour stay as they render today. */
.donate-panel .donate-note { margin-top: 20px; }

/* ---------- Resource / report lists ----------
   The .resource-list card itself lives in css/site.css since 2026-10-29, so
   the program pages' Resources sections (css/programs.css) share it. Only
   the .prose interactions stay here, because only pages.css pages have .prose. */
/* .resource-list rows are cards, and the card draws its own bullet in
   `.resource-list a::before`. Cancel the generic `.prose ul li` bullet and its
   24px indent here, or every row shows two bullets, one outside the card and
   one inside it. */
.prose ul.resource-list li { padding-left: 0; }
.prose ul.resource-list li::before { content: none; }
/* eas-easterseals#232 ("Weird border effect on mouse over"). The cards sit in
   .prose, and `.prose a:not(.btn)` (0,2,1) gave every link a TRANSPARENT bottom
   border, so the card's bottom edge was missing at rest. Its hover rule
   (0,3,1) then set only border-bottom-color to currentColor, so on hover the
   bottom edge was a different color from the other three. These two rules
   outrank both: the bottom border is the card's own at rest, and hover is one
   solid color on all four sides. The text is orange at rest (the .prose link
   color wins over .resource-list a) and goes navy on hover, as it did before. */
.prose .resource-list a:not(.btn) { border-bottom: 1px solid var(--color-border); }
.prose .resource-list a:not(.btn):hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.report-year {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 18px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.report-year h3 { color: var(--color-secondary); margin-bottom: 12px; }
/* Optional one-line note under a card heading (publication date, "current
   issue", etc.). Additive: no .report-year on /annual-reports/ carries a <p>,
   so this rule changes nothing there. */
.report-year p {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.7;
  margin-bottom: 16px;
}
.report-links { display: flex; flex-wrap: wrap; gap: 12px; }
.report-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 50px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.report-links a:hover { background: var(--color-primary); color: #fff; }

/* ---------- Contact page: routing layout ----------
   /contact/ is a routing page, not a form page with a sidebar. The old
   .contact-layout split is gone and so are .contact-info / .info-block /
   .info-label: a grep of the whole tree on 2026-10-01 found contact/index.html
   as their only renderer, so removing them strands nothing.

   The "what do you need" router reuses the homepage tile vocabulary
   (.audience-badges--wide --text --cols-3 in css/site.css) rather than forking
   a card. Six cards divide evenly by 3 and by 1, which are the only column
   counts that band collapses through, so no width strands an orphan tile.
   Only the parts that vocabulary does not already provide live here.

   Near-silent tier per .planning/RESTYLE-CONTRACT.md: nothing paints a
   decorative surface near the ask. Ground colors are attached to role hooks
   (.contact-direct, .contact-form-section) instead of bg-light in the markup,
   which rule 1 bans. */

.contact-form-section { background: var(--color-light); }

/* Direct contact: details beside a map. The map sits in a ratio box rather
   than at a fixed pixel height so it never letterboxes, and the Get directions
   link sits OUTSIDE the frame so the address stays reachable when the embed is
   blocked, slow, or awkward to use with a screen reader. */
.contact-direct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}
/* The details sit in a light gray panel; the map beside it stretches to the
   panel's height (the grid row), with a floor so it never collapses. */
.contact-direct-details {
  background: var(--color-light);
  border-radius: var(--radius);
  padding: 36px 40px;
}
.contact-direct-details h2 { margin: 0 0 28px; }
/* The next band supplies the gap under this one. */
.section.contact-direct { padding-bottom: 0; }
.contact-direct-block + .contact-direct-block { margin-top: 26px; }
.contact-direct-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--color-text-light);
  margin-bottom: 6px;
}
.contact-direct-value {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text-body);
  margin: 0;
}
.contact-direct-value a { color: var(--color-primary); font-weight: 700; }
.contact-direct-value a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.contact-direct-directions { margin-top: 8px; }
.contact-direct-map {
  position: relative;
  min-height: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-white);
}
.contact-direct-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Locations strip: name and phone only. The hours field in data/locations.json
   reads "Monday to Sunday, 9:30 AM to 6:30 PM" for both the corporate office
   and a preschool, which is store-locator junk, so it is deliberately NOT
   rendered. Eight records divide evenly by 4, 2 and 1, which is the whole
   collapse ladder below, so no width leaves a partial row. */
.contact-locations-note {
  font-size: 1.0625rem;
  color: var(--color-text-body);
  line-height: 1.6;
  text-align: center;
  max-width: 680px;
  margin: -24px auto 32px;
}
.contact-location-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 24px;
  margin: 0 0 36px;
  padding: 0;
}
.contact-location {
  border-left: 4px solid var(--color-accent);
  padding: 2px 0 2px 18px;
}
.contact-location-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-secondary);
  margin-bottom: 6px;
}
.contact-location-name:hover { color: var(--color-primary); text-decoration: underline; }
.contact-location-phone { margin: 0; }
/* 19px/700, not the 16px the rest of the strip uses, for two reasons. It is a
   phone number on a page people open on a phone, so it is a tap target: 19px
   at line-height 1.6 plus 7px of vertical padding measures 44px. And orange
   #cf4b04 at 16px/700 is normal text, which scores 4.51 on white, inside half
   a point of the 4.5 floor and an outright fail (4.06) if this band ever moves
   onto the light-gray ground. At 19px/700 it is large text and the bar is 3. */
.contact-location-phone a {
  display: inline-block;
  padding: 7px 0;
  font-size: 1.1875rem;
  color: var(--color-primary);
  font-weight: 700;
}
.contact-location-phone a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* The form card is its own band now, not a grid cell, so it needs a measure. */
.contact-form-section .form-card { max-width: 760px; margin: 0 auto; }

@media (max-width: 1000px) {
  .contact-location-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* Stacked, the map spans the whole container, and 4:3 at that width costs
     540px of vertical on a tablet. 16:9 holds the same place in the reading
     order for 405px. */
  .contact-direct-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-direct-map { height: 500px; min-height: 0; }
  .contact-direct-details { padding: 28px 24px; }
}
@media (max-width: 520px) {
  .contact-location-list { grid-template-columns: minmax(0, 1fr); }
  .contact-form-section .form-card { padding: 24px 20px; }
}
/* ---------- Forms ----------
   The shared form kit (.form-card, .form-req, .field-error, .choice,
   .hp-field, .form-message and the rest) moved to css/base.css with issue
   #139, so the generated program pages, which do not load this sheet, get
   the same form styles as every hand-authored form. Page-specific form
   layout, such as .contact-form-section, stays in this file. */

/* ---------- Start-here accordion page ---------- */
.support-steps { max-width: 860px; margin: 0 auto; }
.support-steps .faq-item { border-color: var(--color-border); }
.support-steps .faq-btn { color: var(--color-secondary); font-size: 1rem; }
.support-steps .faq-icon {
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-primary);
  transition: transform 0.2s;
}
.support-steps .faq-item.active .faq-icon { transform: rotate(45deg); }
.support-steps .faq-answer-inner p { margin-bottom: 12px; }
/* A list inside an answer (#161, the funding answer on /faqs/). The base reset
   (`*, *::before, *::after { margin: 0; padding: 0 }`) left it with no indent,
   so its bullets hung in the answer's side padding with the text flush against
   the paragraphs' left edge, and no bottom margin, so the paragraph after it
   sat flush under the last item. 24px of indent and 20px below are the
   `.prose ul` values (its items' padding-left and its bottom margin); the
   browser's own bullet is kept. Direct children only: /start-here/ shares
   `.support-steps`, but its lists sit inside `.faq-panel` as `.faq-checks`. */
.support-steps .faq-answer-inner > ul { padding-left: 24px; margin-bottom: 20px; }
.support-steps .faq-answer-inner a { color: var(--color-primary); font-weight: 600; }
.support-steps .faq-answer-inner a:hover { color: var(--color-primary-dark); }

/* ---------- Start Here rich accordion (Figma 99:745) ----------
   SCOPE. `.support-steps` is NOT a Start Here hook: /faqs/ uses the same
   wrapper for its 18 items. So every rule below is gated on the compound
   `.support-steps.support-steps-rich`, a second class carried only by
   /start-here/. The compound also outranks the plain `.support-steps ...`
   rules above by one class, so these overrides do not depend on source order.

   HEIGHT. The shared handler (js/main.js:315) pins
   `answer.style.maxHeight = answer.scrollHeight + 'px'` at click time and
   never recomputes it. That is harmless for the single-column panel on /faqs/
   and fatal here: a two column panel restacks to one column under 900px and
   roughly doubles in height, so a panel opened at 1440px and then narrowed
   (resize, or a phone rotating) clipped its own content. This block drops
   max-height animation for an animated grid row, 0fr to 1fr, whose track is
   intrinsic and therefore correct at every width. `max-height:none!important`
   is what neutralises the inline pin; an inline style cannot be beaten any
   other way. The handler itself is deliberately NOT edited, because /faqs/
   shares it and the one-open-at-a-time behaviour is wanted on both pages.
   Trade-off: a browser that cannot interpolate `fr` snaps the panel open
   instead of sliding it. That is cosmetic. The clipping was not. */
.support-steps.support-steps-rich { max-width: none; }

/* Figma: white card, 1px orange border, ~16px radius. #cf4b04 on white is
   4.51:1, over the 3:1 WCAG 1.4.11 boundary requirement. */
.support-steps.support-steps-rich .faq-item {
  border: 1px solid var(--color-primary);
  border-radius: 16px;
  margin-bottom: 16px;
  background: var(--color-white);
}
.support-steps.support-steps-rich .faq-btn {
  align-items: flex-start;
  gap: 24px;
  padding: 28px 32px;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--color-secondary); /* navy on white, 10.12:1 */
  background: transparent;
}
.support-steps.support-steps-rich .faq-btn:hover {
  background: transparent;
  color: var(--color-primary); /* 4.51:1 on white */
}
.support-steps.support-steps-rich .faq-btn:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}
.support-steps.support-steps-rich .faq-q { flex: 1 1 auto; }
/* Figma uses a chevron, not the `+` glyph the other accordions carry. 12px of
   SVG against a 27px line box, so 8px of top margin optically centres it on
   the first line of a question that wraps. */
.support-steps.support-steps-rich .faq-chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 12px;
  margin-top: 8px;
  color: var(--color-primary);
  transition: transform 0.25s ease;
}
.support-steps.support-steps-rich .faq-item.active .faq-chevron { transform: rotate(180deg); }

.support-steps.support-steps-rich .faq-answer {
  max-height: none !important;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  background: transparent;
}
.support-steps.support-steps-rich .faq-item.active .faq-answer { grid-template-rows: 1fr; }

/* A collapsed panel must not hold tab stops. grid-template-rows:0fr (and the
   max-height:0 pattern it replaced) hides a panel visually but leaves every
   link inside it focusable and announced, so a keyboard or screen reader user
   walks links that are not on screen. Measured on this page before this rule:
   19 of the 26 stops between the first question and the page CTA were
   invisible.

   visibility:hidden removes them from the tab order and from the accessibility
   tree. The asymmetric transition is the load-bearing part: on OPEN it is 0s so
   the panel becomes focusable immediately and focus is never swallowed, and on
   CLOSE it is delayed by the 0.3s of the row collapse so the content does not
   blink out before the card has finished closing.

   /faqs/ has the same defect (3 stops) and is NOT fixed here: it carries no
   support-steps-rich class, so it needs its own rule. Tracked separately. */
.support-steps.support-steps-rich .faq-answer-inner {
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
.support-steps.support-steps-rich .faq-item.active .faq-answer-inner {
  visibility: visible;
  transition: visibility 0s;
}

/* /faqs/ has the same defect and carries .support-steps WITHOUT
   .support-steps-rich, so the rule above never reached it. Measured on
   origin/main 2026-10-02: 21 controls in the group, all 21 keyboard reachable
   with every panel collapsed, of which 3 are links inside closed panels.

   Same asymmetric transition, and for the same reasons: 0s on OPEN so the panel
   is focusable immediately and focus is never swallowed, delayed by the 0.3s
   max-height collapse on CLOSE so content does not blink out before the panel
   finishes closing. /faqs/ opens by the handler setting inline max-height and
   adding .active, so keying off .active is correct here.

   Scope is exact: .support-steps appears on /faqs/ and /start-here/ only, and
   every .faq-item on the site sits inside one (checked). */
.support-steps:not(.support-steps-rich) .faq-answer-inner {
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
.support-steps:not(.support-steps-rich) .faq-item.active .faq-answer-inner {
  visibility: visible;
  transition: visibility 0s;
}
.support-steps.support-steps-rich .faq-answer-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 32px;
}

/* The hairline sits on the panel, not on the button, so it is inside the
   collapsing track and is therefore visible only while the card is open. */
.support-steps.support-steps-rich .faq-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.07fr) minmax(0, 1fr);
  gap: 40px;
  border-top: 1px solid var(--color-border);
  padding: 24px 0 32px;
}
/* Some questions have no honest checklist. They get one column rather than a
   padded-out second one. */
.support-steps.support-steps-rich .faq-panel--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}
.support-steps.support-steps-rich .faq-answer-inner p {
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 16px;
}
/* :not(.btn) keeps this off .faq-cta, whose own white-on-orange is set below.
   Without it this rule (0,4,1) outranks `.faq-cta` (0,3,0) and paints the
   button's label #cf4b04 on its own #cf4b04 fill. */
.support-steps.support-steps-rich .faq-answer-inner a:not(.btn) {
  color: var(--color-primary);
  font-weight: 600;
}
.support-steps.support-steps-rich .faq-answer-inner a:not(.btn):hover {
  color: var(--color-primary-dark); /* navy on white, 10.12:1 */
}
.support-steps.support-steps-rich .faq-cta {
  display: inline-flex;
  margin: 6px 0 18px;
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-white); /* white on #cf4b04, 4.51:1 */
}
.support-steps.support-steps-rich .faq-cta:hover { color: var(--color-white); }
.support-steps.support-steps-rich .faq-help { margin: 0; }
.support-steps.support-steps-rich .faq-help a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.support-steps.support-steps-rich .faq-side-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 14px;
}
.support-steps.support-steps-rich .faq-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.support-steps.support-steps-rich .faq-checks li {
  position: relative;
  padding-left: 34px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-text-body);
}
/* Decorative circled check. Orange disc on the white card is 4.51:1 and the
   white tick on the orange disc is 4.51:1, both over the 3:1 that WCAG 1.4.11
   asks of a meaningful graphic. Encoded the same way as the select caret at
   the top of this file; img-src in the worker CSP already allows `data:`. */
.support-steps.support-steps-rich .faq-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23cf4b04'/%3E%3Cpath d='M5.6 10.3 8.7 13.4 14.4 7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
}

/* Stacks at the same 900px the program hero stacks at, so the whole page
   changes shape once rather than twice. */
@media (max-width: 900px) {
  .support-steps.support-steps-rich .faq-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .support-steps.support-steps-rich .faq-btn {
    padding: 22px;
    gap: 16px;
    font-size: 1.125rem;
  }
  .support-steps.support-steps-rich .faq-answer-inner { padding: 0 22px; }
}
@media (max-width: 480px) {
  .support-steps.support-steps-rich .faq-btn { padding: 18px; font-size: 1.0625rem; }
  .support-steps.support-steps-rich .faq-answer-inner { padding: 0 18px; }
  .support-steps.support-steps-rich .faq-panel { padding: 20px 0 26px; }
  .support-steps.support-steps-rich .faq-cta {
    width: 100%;
    justify-content: center;
    letter-spacing: 1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .support-steps.support-steps-rich .faq-answer,
  .support-steps.support-steps-rich .faq-answer-inner,
  .support-steps.support-steps-rich .faq-chevron { transition: none; }
}

/* ---------- Simple CTA band ---------- */
.page-cta {
  padding: 60px 0;
  background: var(--color-secondary);
  color: #fff;
  text-align: center;
}
.page-cta h2 { color: #fff; margin-bottom: 12px; }
.page-cta p { font-size: 1rem; max-width: 600px; margin: 0 auto 24px; opacity: 0.9; line-height: 1.6; }

/* Inset panel variant of the closing CTA, per the Figma, used by the hub pages.
   A modifier so the other 6 .page-cta pages keep the full-bleed band.
   .page-cta h2 states color: #fff just above, so the headline does not depend
   on inheritance here. */
/* Figma closing CTA: an inset rounded panel rather than a full-bleed band.
   .page-cta is used by 8 pages, so this is a modifier and the base is untouched.
   .page-cta h2 already states color: #fff (css/pages.css:689), so the headline
   does not depend on inheritance here. */
.page-cta--panel {
  max-width: 1160px;
  margin: 72px auto;
  border-radius: var(--radius);
  padding: 56px 24px;
}

@media (max-width: 1220px) {
  .page-cta--panel {
    margin-left: 24px;
    margin-right: 24px;
  }
}

/* Light yellow closing band (iprov-agency/eas-easterseals#246, #256, #259,
   #284 and #191): --color-cream #ffe3b3, the ground of the profile closing CTAs
   and the Our History band. A modifier set where the markup is produced, on
   exactly the five full-width pages that take it: /curriculum/, /events/,
   /faqs/ and /get-involved/ by hand, and /get-support/ by
   scripts/generate_get_support.py, which also drops .page-cta--panel there so
   the band runs edge to edge as the reviewer asked. The other .page-cta pages
   (/start-here/, /our-future/) keep their navy. Navy heading 8.14:1, body-gray
   copy 6.08:1; the band's button is the orange .btn-primary (white label
   4.51:1, fill 3.62:1 against the band), because the white .btn-white pill it
   wore on navy meets cream at 1.24:1 and would vanish. */
.page-cta--cream {
  background: var(--color-cream);
  color: var(--color-text-body);
}
.page-cta--cream h2 { color: var(--color-secondary); }
.page-cta--cream p { color: var(--color-text-body); opacity: 1; }

/* ---------- 404 ---------- */
.error-page {
  padding: 96px 0;
  text-align: center;
}
.error-page .code {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 12px;
}
.error-page h1 { color: var(--color-secondary); margin-bottom: 14px; }
.error-page p { font-size: 1.0625rem; color: var(--color-text-body); max-width: 520px; margin: 0 auto 28px; line-height: 1.6; }
.error-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Thank you ---------- */
.thankyou-page { padding: 88px 0; text-align: center; }
.thankyou-page .checkmark {
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  background: var(--eas-pale-yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thankyou-page .checkmark svg { width: 44px; height: 44px; fill: var(--color-primary); }
.thankyou-page h1 { color: var(--color-secondary); margin-bottom: 16px; }
.thankyou-page p { font-size: 1.0625rem; color: var(--color-text-body); max-width: 540px; margin: 0 auto 28px; line-height: 1.65; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .content-split .container { grid-template-columns: 1fr; gap: 28px; }
  .content-split.reverse .split-media { order: -1; }
  .contact-layout .container { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .bio-grid,
  .give-grid { grid-template-columns: 1fr; }
  .schedule-box ul { columns: 1; }
  .prose .figure-row { grid-template-columns: 1fr; }

  .about-split-reverse > .eas-img { order: -1; }
}

/* CONTRAST (audit 2026-09-15). Orange #cf4b04 links inside .prose measure
   4.06:1 on the light-gray card and 3.79:1 on the pale-yellow panel, both
   under the 4.5 that normal-weight text requires. 19px at weight 700 is
   14.25pt bold, which crosses WCAG's large-text line so the bar drops to 3.0
   and both surfaces pass, keeping the brand orange.

   SPECIFICITY: these must out-rank `.prose a:not(.btn)` above (0,2,1), which
   pins weight to 600. A bare `.wp-block-button__link` (0,1,0) loses to it --
   the first attempt applied the size but not the weight, leaving 14.3pt at
   weight 600, which WCAG still judges as normal text. 600 is NOT bold; the
   threshold is 700. Keep these selectors at or above that specificity.
   Note also that /annual-reports/ loads pages.css and NOT annual-reports.css,
   which is why .report-links lives here. */
.prose a.wp-block-button__link,
.prose a.wp-element-button {
  font-size: 1.1875rem;
  font-weight: 700;
}

/* .report-links sits under section.prose-section, NOT .prose -- a `.prose
   .report-links a` selector silently matches nothing. This needs no extra
   specificity: it is the same (0,2,1) as the .report-links a rule above and
   simply comes later in the file. */
.report-links a {
  font-size: 1.1875rem;
}

/* ---------- /advocacy/ (body.advocacy-page) ----------
   Every list item in a content band reads at the regular paragraph size.
   `.prose ul li` is 1rem (16px) and `.prose p` is 1.125rem (18px); on this page
   the lists carry the policy agenda and the contact numbers, so they match the
   paragraphs around them. Scoped to .prose-section so the injected header and
   footer lists, which are not in a .prose-section, keep their own sizes.
   (0,2,2) beats `.prose ul li` (0,1,2). */
.advocacy-page .prose-section ul li { font-size: 1.125rem; }
/* The Latest Updates and Advocacy News tiles reuse css/partners.css, whose tile
   paragraphs are 1rem; on this page they read at the regular paragraph size. */
.advocacy-page .partner-tile-body p { font-size: 1.125rem; }

/* ---------- Disclosure (native <details> accordion) ----------
   The look of the .wh-faq accordion inline in /waiver-help/ (white card, 1px
   --color-border, 10px radius, bold navy summary, an orange + that becomes a minus
   when open) as a reusable class, so a second page does not paste the inline block
   again. Closed by default; the browser handles toggling, Enter and Space, and a
   closed <details> takes its contents out of the tab order. /waiver-help/ is not
   migrated to it here (its inline copy is left alone). The summary is 1.3rem,
   the size of the `.prose h3` it replaces on /advocacy/. */
.disclosure {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 12px;
}
.disclosure > summary {
  cursor: pointer;
  padding: 16px 20px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-secondary);
  list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: "+";
  float: right;
  margin-left: 16px;
  font-weight: 700;
  color: var(--color-primary);
}
.disclosure[open] > summary::after { content: "\2212"; }
.disclosure > summary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 10px;
}
.disclosure-body { padding: 0 20px 8px; }
/* The paragraph that follows the last accordion (a link, outside any card). */
.disclosure + p { margin-top: 24px; }

/* ---------- Quote block ----------
   <figure class="quote-block"><blockquote>title + text</blockquote>
   <figcaption><cite>Name</cite></figcaption></figure>. The signature dash is
   generated here (an em dash escape plus a no-break space), so the markup holds
   only the name. Inside .prose the figure keeps `.prose figure`'s 28px margins
   (0,1,1 beats this block's 0,1,0), the paragraphs keep `.prose p`. */
.quote-block {
  background: var(--color-light);
  border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px 32px;
}
.quote-block blockquote { margin: 0; }
.quote-block-title {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-secondary);
  margin-bottom: 12px;
}
.quote-block blockquote p:last-child { margin-bottom: 0; }
.quote-block figcaption {
  margin-top: 16px;
  font-weight: 700;
  color: var(--color-secondary);
}
.quote-block cite { font-style: normal; }
.quote-block figcaption::before { content: "\2014\00a0"; }
@media (max-width: 600px) {
  .quote-block { padding: 22px 20px; }
}

/* The Join Our Advocates form band (/advocacy/): a jump from the box button lands
   below the sticky site header instead of under it. */
#join-our-advocates { scroll-margin-top: calc(var(--eas-header-h, 96px) + 24px); }

/* ---------- /advocacy/ review revisions ---------- */
/* The Latest Updates and Advocacy News cards sit flush under the blue box. */
.prose-section--flush-top { padding-top: 0; }
.advocacy-page .partner-tile { background: var(--color-light); padding: 36px 34px; }

/* Legislative Landmarks: one row per year, the year large in navy. */
.advocacy-page .landmarks-heading { text-align: center; }
.landmark-year {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px 28px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
}
/* Prefixed with .prose so it outranks the generic `.prose h3`. */
.prose .landmark-year-label {
  margin: 8px 0 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-secondary);
}
p + .landmark-year { margin-top: 30px; }
.prose .landmark-year-items { margin: 0; }
.landmark-year-items li { margin-bottom: 14px; }
.landmark-year-items li:last-child { margin-bottom: 0; }

/* The Latest Updates link: the site's prose link weight and hover treatment, in navy
   rather than orange because orange on the card gray is 4.06:1 (AA needs 4.5). */
.advocacy-page .partner-tile-body a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.advocacy-page .partner-tile-body a:hover {
  text-decoration-thickness: 3px;
}
@media (max-width: 600px) {
  .landmark-year { grid-template-columns: 1fr; }
}

/* ---------- /events/ (body.events-page) ---------- */
/* The closing CTA paragraph runs wider than the default 600px. */
.events-page .page-cta p { max-width: 820px; }

/* Upcoming events: a centered heading on gray, one featured event as a full-width
   photo band with a left-to-right navy gradient, then the rest as a card grid.
   The placeholder photos are gone: every photo on the page is now the client's own
   event photography, supplied 2026-10-23, living in img/events/. */
.events-section .prose { max-width: 820px; margin-inline: auto; text-align: center; }

.event-feature {
  margin-top: 40px;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-secondary);
  color: var(--color-white);
}
.event-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 68, 115, 0.96) 0%, rgba(0, 68, 115, 0.88) 38%, rgba(0, 68, 115, 0) 72%);
}
.event-feature-photo { position: absolute; inset: 0; margin: 0; }
.event-feature-photo picture { display: block; height: 100%; }
.event-feature-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centered, not right-aligned. `right center` was tuned to a placeholder whose
     subject sat on the right. The real photo puts its subject in the middle of the
     frame, and at narrow widths the band is taller than the photo's 3:2, so the
     crop turns horizontal: right-aligned slid the children out of view and left
     fence and trees sitting under the copy. */
  object-position: center;
}
.event-feature-body { position: relative; z-index: 2; max-width: 560px; padding: 56px 48px; }
.events-page .event-feature-body h3 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  color: var(--color-white);
}
.event-feature-body .btn { margin-top: 24px; }
.event-feature-body p { color: var(--color-white); font-size: 1.0625rem; line-height: 1.7; }
.event-feature-body p:last-of-type { margin-bottom: 0; }
/* Orange fails contrast on the navy gradient, so the featured date uses the accent. */
.event-feature .event-date { color: var(--color-accent); /* ground: --es-secondary-navy */ }

.event-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Photo carousel on each card: native scroll-snap, so it works by swipe or
   keyboard without script; the arrows and dots are the script's progressive layer. */
.event-carousel { position: relative; }
.event-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.event-carousel-track::-webkit-scrollbar { display: none; }
.event-slide { flex: 0 0 100%; margin: 0; aspect-ratio: 3 / 2; scroll-snap-align: center; }
.event-slide picture { display: block; height: 100%; }
.event-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.event-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: rgba(0, 68, 115, 0.85);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s;
}
.event-carousel-arrow:hover { background: var(--color-primary); }
/* Focus: an orange ring with a white halo so it reads on both dark and light photos. */
.event-carousel-arrow:focus-visible,
.event-carousel-dot:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--color-white);
}
.event-carousel-track:focus-visible {
  outline: 4px solid var(--color-primary);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 7px var(--color-white);
}
.event-carousel-arrow svg { width: 22px; height: 22px; fill: var(--color-white); }
.event-carousel-arrow--prev { left: 12px; }
.event-carousel-arrow--next { right: 12px; }
.event-carousel-dots {
  position: absolute;
  right: 0;
  bottom: 12px;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.event-carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  pointer-events: auto;
}
.event-carousel-dot.is-active { background: var(--color-white); }
@media (prefers-reduced-motion: reduce) {
  .event-carousel-track { scroll-behavior: auto; }
}
.event-card-body { padding: 26px 28px 30px; }
/* Three events now, not four, so the track count follows the container instead of
   being pinned at two: auto-fit gives three cards across the 1152px container, two
   between roughly 800px and 1000px, and the 800px query below takes it to one. A
   pinned two-column track left the third card alone in a half-empty second row. */
.event-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.event-date {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.events-page .event-card-body h3 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  color: var(--color-secondary);
}
.event-card-body p + p { margin-top: 14px; }
.event-card-body p:last-child { margin-bottom: 0; }
@media (max-width: 800px) {
  .event-feature { min-height: 0; }
  .event-feature-body { padding: 40px 28px; }
  .event-feature::before { background: rgba(0, 68, 115, 0.86); }
  .event-grid { grid-template-columns: 1fr; }
}

/* ---------- /volunteer/ (body.volunteer-page) ---------- */
/* The Get in Touch CTA carries a phone number and an email address. A colour change
   alone is not enough affordance for links in running text, so they are underlined. */
.volunteer-page .page-cta a:not(.btn) {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.volunteer-page .page-cta a:not(.btn):hover { text-decoration-thickness: 3px; }

/* ---------- /about-us/ (body.about-us-page) ---------- */
/* The three split headings (Enriching Education, Elevating Community, Expanding
   Employment) take the page's standard h2 size, the one the closing CTA heading
   uses (the `h2` rule in base.css), instead of the smaller `.prose h2` size.
   Scoped to this page: the same splits on Our History and Our Future keep theirs.
   base.css sets the global h2 in TWO stages, so matching it takes two as well:
   the rule below covers 769px and up, the media query covers 768px and down.
   With only the first stage these three headings kept 28px at 390 while every
   other h2 dropped to 24px, which made them the largest headings on the page,
   the opposite of "same size as the closing CTA". Both clamps are copied from
   base.css verbatim; change them only alongside it, and re-measure that the
   sequence stays non-decreasing across the 768/769 boundary. */
.about-us-page .about-split .prose h2,
.history-page .prose h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
}
@media (max-width: 768px) {
  .about-us-page .about-split .prose h2,
  .history-page .prose h2 { font-size: clamp(1.5rem, 5vw, 1.875rem); }
}
/* iprov-agency/eas-easterseals#308: Our History's timeline headings and the
   "Today" heading take the same standard h2 size (body.history-page). */

/* ---------- /ways-to-give/ ---------- */
/* The eight giving cards sit on the light gray band; white grounds lift them off it. */
.ways-cards .give-card { background: var(--color-white); }

/* Two buttons side by side in a closing CTA (/programs/easterseals-academy/curriculum/). */
.page-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* The Academy Curriculum closing CTA paragraph runs wider than the default 600px. */
.curriculum-page .page-cta p { max-width: 720px; }