/* ============================================================
   Style Updates 2026 — Accessibility Fixes
   Loaded after wp-custom-css (Customizer Additional CSS)
   via a wp_head priority > 101.

   Color palette (replaces non-WCAG-compliant accents):
     --apbf-orange:   #B63C0C   (5.77:1 on #fff — was #F15D22 / #F05619)
     --apbf-green:    #4D7A1F   (5.20:1 on #fff — was #8DC63F)
   ============================================================ */

/* ----- 1. Accent color contrast (WCAG 1.4.3) ----- */

/* Green used as text or interactive accent — replace with accessible green.
   Original #8DC63F = 2.04:1 on white (fails). */

a:hover {
  color: #B63C0C; /* keep link-family hue on hover; underline added below */
}

nav.primary .primary-nav li:hover a,
.article main .cover-artists a:hover,
.article .bookstore li a:hover,
.article .page-nav li a:hover,
.article .connect li a:hover,
.contest-resources li a:hover {
  color: #4D7A1F;
}

/* Button hover: white text on light green (#8DC63F) = 1.94:1.
   Darken background so white text passes. */
.button:hover,
button:hover,
.cta-nav a:hover,
nav.more .button:hover,
.sub-nav a:hover {
  background-color: #4D7A1F;
  border-color: #4D7A1F;
  color: #fff;
}

/* Category badge: white on green background — only in templates that still
   use the original green (Customizer rule already darkens it to #4d4d4d). */
.blog-highlights article .category a {
  background-color: #4D7A1F;
}

/* Decorative star/marker — small enough that 3:1 isn't guaranteed. */
.contest-resources li:before {
  color: #B63C0C;
}

/* Orange headings via Customizer (#F05619 ≈ 3.47:1, only "large text" passes).
   Bump to the accessible darker orange so size doesn't matter. */
.our-programs header h2,
.blog-highlights header h2,
.home .flex-grid header h1 {
  color: #B63C0C;
}

/* In Table-of-Contents partial, $green is used for active/current item text.
   Override to accessible darker green. */
.toc .current-menu-item,
.toc a:hover,
.toc .active {
  color: #4D7A1F;
}

/* Other places green is referenced as text */
.article main a:hover,
nav.primary .primary-nav li a:hover {
  color: #4D7A1F;
}

/* ----- 2. Non-color hover indicators (WCAG 1.4.1) -----
   Color change alone is not a sufficient hover cue. Add a visible
   underline / border on hover & keyboard focus for links and menus. */

/* In-text links: add underline on hover and on keyboard focus.
   Scoped to `.content` (the prose wrapper used across page templates)
   so it doesn't underline card titles, buttons, or nav links elsewhere
   inside <main>. */
.content a:hover,
.content a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Explore menu and related sidebar nav lists (page-nav widget):
   underline on hover/focus so the cue isn't color-only. */
.explore-menu li a:hover,
.explore-menu li a:focus-visible,
.page-nav li a:hover,
.page-nav li a:focus-visible,
.bookstore li a:hover,
.bookstore li a:focus-visible,
.connect li a:hover,
.connect li a:focus-visible,
.contest-resources li a:hover,
.contest-resources li a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Primary top nav: Customizer already adds `border-bottom: 1px solid transparent`
   on each link; reveal it on hover/focus so the indicator isn't color-only.
   Use currentColor so it matches the accessible hover color. */
nav.primary .primary-nav li a:hover,
nav.primary .primary-nav li a:focus-visible,
nav.primary .primary-nav li:hover a {
  border-bottom-color: currentColor;
  padding-bottom: 0;
}

/* Buttons (.button, button, .cta-nav, etc.) already change background on
   hover, which is a non-color cue (shape/luminance change). No extra
   underline needed — keep them visually buttoned. */

/* Skip-link style focus state is fine as-is via :focus outlines.
   Ensure :focus-visible has a visible ring even when hover is also styled. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #4D7A1F;
  outline-offset: 2px;
}

/* ----- 4. Blog post metadata: target size (WCAG 2.5.8) -----
   Original behavior at >=768px slides `.post-info` (which contains
   `.post-meta`) out of view on hover to reveal the cover image — kept,
   because after switching the cards to the single-link pattern the
   author/date are non-anchor text, so nothing inside the meta needs
   to be clickable on hover. The only remaining link is the category
   chip, sized below to a 24px target. */

/* Bump meta font size + give the remaining category link a >=24px hit area */
.our-blog article .post-meta,
.with-thumb .post-info .post-meta {
  font-size: 1rem;
}

.our-blog article .post-meta a,
.with-thumb .post-info .post-meta a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
  padding: 2px 4px 2px 0;
}

/* ----- 6. Explore menu heading: h3 -> h2 -----
   The "Explore:" widget heading was promoted from h3 to h2 for proper
   document outline. Original styles targeted `.page-nav h3` etc.; mirror
   them on h2 so the visual stays put across contexts. */

/* Default context (sidebar widget on white): small gray inline label. */
.article .page-nav h2,
.article .bookstore h2,
.article .connect h2,
.archive-navigation h2 {
  font-size: 1rem;
  display: inline-block;
  color: #656565;
  margin: 0 0.5rem 0 0;
}

/* Full-bleed page header (orange/colored banner): white text. */
.article.full-bleed .header-wrapper h2 {
  color: #fff;
}

/* Full-bleed page header without header image: dark text. */
.article.full-bleed .full-bleed-header.no-header-img .header-wrapper h2 {
  color: #4d4d4d;
}

/* Full-bleed page-nav: smaller heading with letter-spacing to match li. */
.article.full-bleed .page-nav h2 {
  font-size: 0.85em;
  letter-spacing: 1px;
}

/* Contests / Libraries full-bleed: reset border/padding like the h3 rule. */
.contests.full-bleed .header-wrapper h2,
.libraries-page.full-bleed .header-wrapper h2 {
  color: #fff;
  border: 0;
  padding: 0;
}

/* ============================================================
   Audit pass 2 — site-wide a11y fixes (see docs/accessibility-audit.md)
   ============================================================ */

/* ----- A. `.screen-reader-text` recipe -----
   The theme's original `display: none` hides text from screen readers too.
   Use the standard visually-hidden pattern so SR-only labels work. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  display: block;
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
  word-wrap: normal !important;
}

/* Restore visibility when an SR-only element is focused (e.g., skip link) */
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #4d4d4d;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ----- D. CTA pill buttons fail contrast -----
   `.cta-nav a` has opacity: 0.75 which blends #4d4d4d to #7a7a7a on white
   (4.29:1, fails). Restore full opacity so the customizer's #4d4d4d bg
   reads at full 10.4:1 against the white text. */
.cta-nav a {
  opacity: 1;
}

/* ".button.ghost" (and sub-nav links): gray text/border on transparent.
   On the Libraries page's yellow section bg (#ffca3b), the original
   #656565 text was only 3.82:1. Darkening to #4d4d4d gives 5.68:1 on
   the yellow and stays clean on white (10.4:1). */
.button.ghost,
.sub-nav a {
  color: #4d4d4d;
  border-color: #4d4d4d;
}

/* ----- F. Sidebar widget heading -----
   Sidebar widget titles were registered with <h6> (fails heading-order
   since the document has h1/h2 only and no h3-h5 between). Upgraded
   the `register_sidebar` to emit <h2 class="widget-title">; mirror the
   original small h6 visual so the sidebar look is unchanged. */
.widget-title {
  font-size: 16px;
  font-weight: 900;
  color: #4d4d4d;
  margin: 0 0 0.5rem;
  letter-spacing: normal;
  text-transform: none;
}

/* ----- C. Default underline for in-text body links (WCAG 1.4.1) -----
   In-text links share color family with body text (~1.74:1 between them),
   so they must be distinguishable by something other than color. Default
   to underline; hover/focus already adds a thicker underline.

   Scope is limited to `.content` and `.article .content` — the editor-
   authored prose wrappers. We deliberately do NOT target `main p/li a`
   because `<main>` also contains card layouts (program list, blog
   highlights, hero grid) whose links shouldn't be underlined. */
.content p a,
.content li a,
.content td a,
.content dd a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Don't underline image-wrapping links or button-styled links inside content */
.content p a:has(> img),
.content li a:has(> img),
.content a.thumb,
.content a.thumbnail,
.content a.button,
.content a.more {
  text-decoration: none;
}

/* ----- E. Home program-list heading was h4; promoted to h3 -----
   Keep the original visual: 1.2em uppercase, 1px tracking,
   yellow underline border, dark gray on default state. */
.our-programs .program-list li h3 {
  margin: 0 0 5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: 900;
  padding: 0 2rem 2px 0;
  border-bottom: 1px solid rgba(255, 196, 37, 0.9);
}
.our-programs .program-list li h3 a {
  color: #656565;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
}
.our-programs .program-list li h3:hover,
.our-programs .program-list li h3:hover a {
  transform: skewX(0);
}
@media (min-width: 768px) {
  .our-programs .program-list li h3 {
    order: 2;
  }
}
@media (max-width: 991px) {
  .our-programs .program-list li .info-wrap h3 {
    border: 0;
    padding: 0.5rem 0 0;
  }
}

/* ----- "Card link" pattern for the program list -----
   Only the h3 contains a real <a>. An invisible ::after on that anchor
   stretches over the entire <li>, so clicking anywhere in the card
   follows the link. This removes WAVE's "redundant link" alert by
   collapsing 3 anchors-per-item down to 1.

   The former image-circle <a> and "Learn More" <a> are now <span>s;
   their original visual styles are mirrored below so the design holds. */
.our-programs .program-list li {
  position: relative;
}
.our-programs .program-list li h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Keep focus ring around the actual link, not the whole card */
.our-programs .program-list li h3 a:focus-visible {
  outline: 2px solid #4D7A1F;
  outline-offset: 2px;
}
/* Whole card is one click target — use pointer cursor throughout so
   the cursor doesn't flicker between pointer and I-beam as the user
   moves across the description text. */
.our-programs .program-list li,
.our-programs .program-list li * {
  cursor: pointer;
}

/* Mirror original `.circle` <a> styles onto the new <span> */
.our-programs .program-list li span.circle {
  display: inline-block;
  overflow: hidden;
  border-radius: 100%;
  box-shadow: 0 8px 6px -5px #8c8c8c;
}
@media (min-width: 768px) {
  .our-programs .program-list li span.circle {
    order: 1;
    max-width: 100%;
    min-width: 200px;
    width: 200px;
    margin-right: 1.5rem;
  }
}
@media (max-width: 991px) {
  .our-programs .program-list li span.circle {
    max-width: 100%;
    flex: 0 0 100%;
    margin: 2rem 0 2rem 1rem;
    width: 100%;
  }
  .our-programs .program-list li span.circle img {
    width: 100%;
  }
}

/* Mirror original `.more` <a> styles onto the new <span>.
   Original was an <a>, so the global link color (#B63C0CE6 in the
   Customizer "Additional CSS") painted it orange. As a <span>,
   color must be set explicitly. */
.our-programs .program-list li .info-wrap span.more {
  display: inline-block;
  float: left;
  text-transform: uppercase;
  font-size: 0.9em;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
  color: #B63C0C;
}
@media (max-width: 991px) {
  .our-programs .program-list li .info-wrap span.more {
    float: none;
  }
}

/* Hover/focus cue: underline "Learn More" when the card is hovered or
   when the heading link inside is keyboard-focused. (Original used a
   color shift to green — not accessible. Underline is a non-color cue.) */
.our-programs .program-list li:hover span.more,
.our-programs .program-list li:has(a:focus-visible) span.more {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----- Books archive: single-link card pattern -----
   Each book figure used to have two same-href anchors (the cover thumb
   and the h2 title). The cover thumb is now a <span> (decorative wrap
   for the cover image), and the h2 anchor is the single tab stop. An
   ::after overlay stretches that link across the whole <figure>. */
.our-books figure {
  position: relative;
}
.our-books figure figcaption h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.our-books figure figcaption h2 a:focus-visible {
  outline: 2px solid #4D7A1F;
  outline-offset: 2px;
}
.our-books figure,
.our-books figure * {
  cursor: pointer;
}

/* ----- Authors / Artists / Staff archive: single-link card pattern -----
   The `.apbf-author` block had three anchors (thumb, empty overlay,
   byline). Thumb is now a <span>, the empty overlay is removed, and
   the h2 byline's link is stretched to cover the whole <figure>. */
.our-authors figure,
.our-artists figure,
.our-staff figure {
  position: relative;
}
.our-authors figure h2 a.byline::after,
.our-artists figure h2 a.byline::after,
.our-staff figure h2 a.byline::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* above the figcaption's z-index:1 hover panel */
}
.our-authors figure h2 a.byline:focus-visible,
.our-artists figure h2 a.byline:focus-visible,
.our-staff figure h2 a.byline:focus-visible {
  outline: 2px solid #4D7A1F;
  outline-offset: 2px;
}
.our-authors figure,
.our-authors figure *,
.our-artists figure,
.our-artists figure *,
.our-staff figure,
.our-staff figure * {
  cursor: pointer;
}
/* Sub-links inside the figure (e.g. the country chip) need to sit
   above the byline ::after overlay so they remain independently
   clickable. */
.our-authors figure .apbf-country a,
.our-artists figure .apbf-country a,
.our-staff figure .apbf-country a {
  position: relative;
  z-index: 3;
}

/* ----- Blog archive: single-link card pattern -----
   Each blog article had four same-href anchors (image wrap, title,
   author, date) plus a category link with a different href. Image
   wrap is now a <span>; author is a <span>; date is a <time>; only
   the title link remains, with ::after stretching the click area
   over the whole .wrapper. The category link sits above the overlay. */
.our-blog article .wrapper {
  position: relative;
}
.our-blog article .wrapper h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.our-blog article .wrapper h3 a:focus-visible {
  outline: 2px solid #4D7A1F;
  outline-offset: 2px;
}
.our-blog article .wrapper,
.our-blog article .wrapper * {
  cursor: pointer;
}
.our-blog article .wrapper .post-meta a.cat-link {
  position: relative;
  z-index: 2;
}