/* Annual report year pages (annual-reports/<year>/).
   Styles the WordPress block classes preserved by scripts/generate_annual_reports.py
   so the ported markup reads as part of the vanilla site. Scoped to .ar-report. */

.ar-report {
  max-width: 960px;
  margin: 0 auto;
  color: var(--color-text, #1a2733);
  /* No font-size here: body copy takes the site's 18px from body in base.css.
     This block used to set 1.05rem, which made every annual report paragraph
     smaller than the same paragraph anywhere else on the site. */
  line-height: 1.7;
}

.ar-report > *:first-child { margin-top: 0; }

/* Intro band (genesis-blocks container on the older reports). */
.ar-report .gb-block-container,
.ar-report .gb-container-inside,
.ar-report .gb-container-content { margin: 0 auto; max-width: 100%; }

.ar-report h2,
.ar-report h3 { color: var(--color-secondary); line-height: 1.25; }
.ar-report h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 16px; }
.ar-report h3 { font-size: 1.4rem; margin: 0 0 12px; }
.ar-report p { margin: 0 0 20px; }
.ar-report strong { font-weight: 700; }

/* WordPress alignment / size utility classes. */
.ar-report .has-text-align-center { text-align: center; }
.ar-report .has-medium-font-size { font-size: 1.15rem; }
.ar-report .has-navy-color { color: var(--color-secondary); }
.ar-report .has-white-color,
.ar-report .has-white-color a { color: #fff; }

/* Images. */
.ar-report figure { margin: 28px 0; }
.ar-report .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius, 10px);
}
.ar-report .alignfull.wp-block-image img,
.ar-report figure.alignfull img { border-radius: var(--radius, 10px); }

/* Separators. */
.ar-report .wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-border, #e2e6ec);
  margin: 40px 0;
}

/* Two-up rows: media + colored heading panel. */
.ar-report .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
  margin: 32px 0;
}
.ar-report .wp-block-column {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}

/* Financial statements (iprov-agency/eas-easterseals#285, "This should be a
   table"). scripts/generate_annual_reports.py turns each Revenue / Expenses
   column block into one <table>, so a label and its amount share a row. The
   two tables sit side by side in the existing column layout and stack under
   it at 768px. Amounts are right-aligned and tabular so the digits line up;
   the group labels (SUPPORT, PROGRAM SERVICES) are the brand orange, 4.51:1 on
   the white ground, and the total rows are navy on the light gray. */
.ar-report .ar-fin-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}
.ar-report .ar-fin-table caption {
  caption-side: top;
  padding: 0 0 10px;
  border-bottom: 3px solid var(--color-secondary);
  text-align: left;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-secondary);
}
.ar-report .ar-fin-table th,
.ar-report .ar-fin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.ar-report .ar-fin-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--color-text, #1a2733);
}
.ar-report .ar-fin-table td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #1a2733);
}
/* The Revenue and Expenses tables are equal-width columns (basis 0), not sized
   by their content, which left the wider-labelled Expenses table the larger
   of the two. At 767px and under the stacking rule below sets the basis. */
.ar-report .financial-table-cols > .wp-block-column { flex: 1 1 0; }
/* "How Funds are Spent": three equal columns. They were sized by their content,
   so the middle one ("Management and General") ran wider than the others. The
   chart images are 223px square, so they keep that size, centred in the
   column, rather than being stretched soft. */
.ar-report .graph-cols > .wp-block-column { flex: 1 1 0; }
.ar-report .graph-cols .wp-block-image img {
  display: block;
  max-width: 223px;
  margin: 0 auto;
}

/* The "Audit FYE" download panel under the statements (financials, 2019-2020
   to 2023-2024; the 2024-2025 page has none). Cream ground, rounded, padded,
   set well clear of the tables above it, with the two PDF links as buttons in
   one centred row (they wrap on a narrow screen). */
.ar-report .ar-audit {
  margin: 72px 0 0;
  padding: 40px 32px;
  background: var(--color-cream);
  border-radius: 24px;
}
.ar-report .ar-audit .gb-container-content { max-width: 988px; }
.ar-report .ar-audit h2 { margin: 0 0 24px; }
.ar-report .ar-audit .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.ar-report .ar-audit .wp-block-button { margin: 0; }

/* The tbody th rule above is (0,2,2); the group and total rows are scoped to
   .ar-fin-table so they outrank it. The labels are title case in the markup
   and uppercased here. */
.ar-report .ar-fin-table .ar-fin-group th {
  padding-top: 20px;
  border-bottom: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-primary);
}
.ar-report .ar-fin-table .ar-fin-total th,
.ar-report .ar-fin-table .ar-fin-total td {
  background: var(--color-light);
  border-top: 2px solid var(--color-secondary);
  font-weight: 800;
  color: var(--color-secondary);
}
.ar-report .ar-fin-table .ar-fin-total th { text-transform: uppercase; }

/* Colored heading panels (navy / orange). Both new class-based and older
   inline-background columns carry .has-background. */
.ar-report .wp-block-column.has-background {
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border-radius: var(--radius, 10px);
  text-align: center;
}
.ar-report .wp-block-column.has-background h2,
.ar-report .wp-block-column.has-background h3 {
  color: #fff;
  margin: 0;
  /* One size for every panel title on every year's page. They were 22px, 32px
     and 36px depending on the year, set inline by WordPress. */
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
}
.ar-report .has-primary-yellow-background-color { background-color: #ffa300; }
.ar-report .has-navy-background-color { background-color: #004473; }
/* The amber panel takes navy type (5.06:1), not the white the WordPress page
   uses (2.1:1). The navy panel takes white. */
.ar-report .wp-block-column.has-primary-yellow-background-color h2,
.ar-report .wp-block-column.has-primary-yellow-background-color h3 { color: #004473; }
.ar-report .wp-block-column.has-navy-background-color h2,
.ar-report .wp-block-column.has-navy-background-color h3 { color: #fff; }

/* #288: a video column and its title panel sit side by side, as on the
   WordPress page. They are 66.66% and 350px wide, which with the 24px gap is
   more than the 960px article, and .wp-block-columns wraps, so the panel
   dropped under the video as a full-width bar. These rows do not wrap; the
   video takes whatever the 350px panel leaves, and the stacking rule at 767px
   puts them in one column. */
.ar-report .colored-cols { flex-wrap: nowrap; align-items: stretch; }
.ar-report .colored-cols > .wp-block-column:not(.has-background) { flex: 1 1 0; }
.ar-report .colored-cols > .wp-block-column.has-background { flex: 0 0 350px; }
/* Rows with a photo instead of a video: the figure's 28px top and bottom margin
   (and the inline image's baseline gap) made the photo column taller than the
   photo, so the title panel, which stretches to the column, stood taller than
   the picture. With both gone the photo and the panel are the same height. */
.ar-report .colored-cols figure { margin: 0; }
.ar-report .colored-cols figure picture { display: block; }
.ar-report .colored-cols figure img { display: block; }

/* The "Year in Review" block under the hero photo on the older years' pages:
   no padding, paragraphs left-aligned like 2024-2025 (the headings keep their
   own centring). WordPress centred some of the text and padded the block 7%. */
.ar-report .ar-intro { padding: 0; }
.ar-report .ar-intro .gb-container-content { max-width: none; }
.ar-report .ar-intro p { text-align: left; }

/* Responsive 16:9 video wrapper (privacy-mode YouTube iframe). */
.ar-report .ar-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius, 10px);
  overflow: hidden;
  background: #000;
}
.ar-report .ar-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Pull quotes. */
.ar-report .home-quote {
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-secondary);
  text-align: center;
  max-width: 760px;
  margin: 8px auto 24px;
}

/* Highlight callout paragraphs. */
.ar-report .well {
  background: #f3fafc;
  color: #004473;
  padding: 20px 24px;
  border-radius: var(--radius, 10px);
  font-size: 1rem;
}

/* Event-logo gallery. */
.ar-report .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: center;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.ar-report .wp-block-gallery figure { margin: 0; }
.ar-report .wp-block-gallery img {
  width: auto;
  max-height: 90px;
  border-radius: 0;
}

/* Data tables. */
.ar-report .tg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 24px; }
.ar-report table.tg { border-collapse: collapse; width: 100%; font-size: 1rem; }
.ar-report table.tg th,
.ar-report table.tg td {
  border: 1px solid #e2e6ec;
  padding: 10px 8px;
  vertical-align: top;
}
.ar-report table.tg th {
  background: var(--color-secondary);
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.ar-report table.tg td { text-align: center; }
.ar-report table.tg td:first-child { text-align: left; }

/* Partners page (iprov-agency/eas-easterseals#286, #287).
   LOGOS: scripts/generate_annual_reports.py puts each tier's logos in a
   <ul class="ar-logos ar-logos--<tier>"> and sizes every <img> from its aspect
   ratio (width and height attributes): each logo gets about the same AREA as
   the others in its tier, so a wide wordmark and a square mark carry the same
   weight, and the area grows with the tier, as on /about-us/our-partners/. */
.ar-report .ar-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 56px;
  margin: 28px 0 56px;
  padding: 0;
  list-style: none;
}
.ar-report .ar-logos li { margin: 0; padding: 0; }
.ar-report .ar-logos img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 60px above the "Donors" heading, to set the donor list clear of the
   corporate partners above it (collapses with the 20px paragraph margin). */
.ar-report h2.ar-donors-heading { margin-top: 60px; }

/* DONORS: one list per tier, flowed into three columns (two under 900px, one
   under 560px), so the page is a third as tall. Names read down each column. */
.ar-report .ar-donors {
  columns: 3;
  column-gap: 40px;
  margin: 20px 0 48px;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.4;
}
.ar-report .ar-donors li {
  break-inside: avoid;
  margin: 0 0 8px;
  padding: 0;
}
@media (max-width: 900px) { .ar-report .ar-donors { columns: 2; } }
@media (max-width: 560px) { .ar-report .ar-donors { columns: 1; } }

/* Back link. */
.ar-back { max-width: 960px; margin: 40px auto 0; }
/* Link styling and a hover state for "All Annual Reports", the same pattern
   as a link inside .prose: brand orange at rest (4.51:1 on white at weight
   600), navy with an underline on hover. */
.ar-back a {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.ar-back a:hover {
  color: var(--color-primary-dark);
  border-bottom-color: currentColor;
}

@media (max-width: 767px) {
  .ar-report .wp-block-columns { flex-direction: column; gap: 16px; }
  .ar-report .wp-block-column { flex-basis: auto !important; width: 100%; }
  .ar-report .wp-block-column.has-background { padding: 28px 24px; }
}

/* Microsite tab nav: Overview plus the four sub-pages, on every year page.
   A static centered tab band (not sticky, so it never collides with the sticky
   site header). It sat directly below the amber .page-head band until the
   Option B opener landed; it now follows the .people-intro title block, which
   is where the gap rule below comes from. */
.ar-microsite-nav {
  background: #fff;
  border-bottom: 1px solid var(--color-border, #e2e6ec);
}
/* .people-intro carries no bottom padding by design: on the 5 pages it already
   ships on, the next section's own top padding opens the gap under the title
   (css/site.css). .ar-microsite-nav-inner's 12px is not that gap, and it is the
   band's own padding rather than space above it, so 12px is all a lead
   paragraph would get. The space is declared here, on the adjacency, so it
   reaches exactly the 30 annual-report pages and cannot move the shared
   component on the other 5. 40px is .prose-section's 64px less the nav's own
   12px and the bar it sits above, measured to read as one gap. The band is
   white on a white page, so this only moves the hairline border down. */
.people-intro + .ar-microsite-nav { margin-top: 40px; }
.ar-microsite-nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  justify-content: center;
  padding: 12px 24px;
}
.ar-microsite-nav a {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-secondary, #004473);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.ar-microsite-nav a:hover { background: #f3fafc; }
.ar-microsite-nav a.is-active {
  background: var(--color-secondary, #004473);
  color: #fff;
}
@media (max-width: 640px) {
  .ar-microsite-nav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
}

/* Genesis Blocks image container (Impact-page stat panels): the original theme
   rendered .stats-image-section as a full-bleed dimmed background image with an
   overlaid orange stat number + white description. That theme CSS was not ported,
   so reconstruct the essentials here (and neutralize the inline padding-bottom
   aspect hack that otherwise leaves a tall empty grey gap). */
.ar-report .stats-image-section.gb-block-container {
  /* CONTRAST (audit 2026-09-15): the dark panel behind these stats is produced
     ENTIRELY by the semi-transparent .gb-container-image-wrap::after overlay
     (rgba(0,34,58,.6)). axe cannot resolve a translucent overlay, so it fell
     back to the container's own #f1f1f1 and reported white text at 1.12:1 --
     a false positive; the rendered pixel is rgb(96,116,131) and white measures
     4.86 there. Declaring the container opaque in the overlay's own navy makes
     the computed background match what actually renders, so axe is correct and
     the panel stays readable even if the image or overlay ever fails to paint.
     With an image present this is covered and nothing changes visually. */
  background-color: #00223a;
  position: relative;
  display: flex;
  min-height: 320px;
  padding-bottom: 0 !important;
  margin: 28px 0 0;
  overflow: hidden;
  border-radius: var(--radius, 10px);
}
.ar-report .stats-image-section .gb-container-image-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ar-report .stats-image-section .gb-container-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.ar-report .stats-image-section .gb-container-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 34, 58, 0.6);
}
.ar-report .stats-image-section .gb-container-inside {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 40px;
}
.ar-report .stats-image-section .gb-container-content { position: relative; z-index: 1; max-width: 680px; }
.ar-report .stats-image-section .gb-container-content .wp-block-group { margin: 0; }
.ar-report .stats-image-section .gb-container-content h3 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 8px;
}
.ar-report .stats-image-section .gb-container-content p { color: #fff; margin: 0; }

/* Itemized breakdown table that follows each stat panel. */
.ar-report .wp-block-table.is-style-annual-report { margin: 0 0 28px; overflow-x: auto; }
.ar-report .wp-block-table.is-style-annual-report table { border-collapse: collapse; width: 100%; }
.ar-report .wp-block-table.is-style-annual-report td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border, #e2e6ec);
}
.ar-report .wp-block-table.is-style-annual-report td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--color-secondary);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .ar-report .stats-image-section .gb-container-inside { padding: 28px 24px; }
}