/**
 * REG Allyant Accessibility Fixes (Round 2) — CSS
 *
 * Focus indicators, contrast fixes, and other visual accessibility improvements.
 * Each rule is keyed to Allyant Hub issue numbers.
 */

/* ------------------------------------------------------------------ */
/*  Focus indicators — Issues #110, #119                               */
/*  "Focus indicators for actionable elements must be present and      */
/*   meet contrast requirements." (WCAG 1.4.11, 2.4.7)                */
/* ------------------------------------------------------------------ */

/*
 * Image links and other elements that may lose their focus outline
 * due to theme CSS. We use a 3px solid outline with a 2px offset
 * for clear visibility at 3:1+ contrast.
 */

/* Image links specifically called out in the audit */
a:has(> img):focus-visible,
a:has(> picture):focus-visible,
a img:focus-visible {
  outline: 3px solid #1a5276 !important;
  outline-offset: 2px !important;
}

/* General focus indicator for all interactive elements — safety net */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: 3px solid #1a5276 !important;
  outline-offset: 2px !important;
}

/* Nectar buttons — ensure focus ring is visible on colored backgrounds */
.nectar-button:focus-visible {
  outline: 3px solid #1a5276 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #1a5276 !important;
}

/* Cards and tile image links */
.nectar-recent-posts-single-full a:focus-visible,
.blog-recent a:focus-visible,
.post-area a:focus-visible {
  outline: 3px solid #1a5276 !important;
  outline-offset: 2px !important;
}


/* ------------------------------------------------------------------ */
/*  Contrast fixes — Issues #105, #111, #114, #139                     */
/*  REMOVED: All contrast CSS disabled to avoid visual regressions.     */
/*  Leave for Allyant to flag; address manually if needed.              */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/*  Visual adjustments for role="list" ARIA patterns                    */
/*  Issues #11, #125, #133                                             */
/*  Ensure ARIA-based lists don't introduce visual regressions.         */
/* ------------------------------------------------------------------ */

[role="list"] {
  /* Reset any unexpected list-style that browsers may apply to ARIA lists */
  list-style: none;
}

[role="listitem"] {
  list-style: none;
}


/* ------------------------------------------------------------------ */
/*  Heading-level preservation classes                                  */
/*  Issues #4, #25, #30, #56, #74, #99, #120                          */
/*                                                                      */
/*  When changing a heading's semantic level for WCAG 1.3.1 compliance  */
/*  (e.g. H4 → H3), add the matching "keep-hN-style" class in the      */
/*  WPBakery editor to preserve the original visual appearance.         */
/*                                                                      */
/*  Salient theme options (computed from live site):                     */
/*    H1: 68px / 500 weight / 78px line / Playfair Display              */
/*    H2: 50px / 400 weight / 58px line / Playfair Display              */
/*    H3: 40px / 500 weight / 46px line / Playfair Display              */
/*    H4: 32px / 600 weight / 36px line / Playfair Display              */
/*    H5: 27px / 500 weight / 29px line / Playfair Display              */
/*    H6: 22px / 400 weight / 29px line / Mulish                        */
/*                                                                      */
/*  NOTE: Headings inside .nectar-highlighted-text[class*="font_size_"] */
/*  are sized by the wrapper — no keep-hX-style needed there.           */
/* ------------------------------------------------------------------ */

/*
 * Usage: Add "keep-hN-style" to the WPBakery element's "Extra class name"
 * field (on the parent container). The class goes on the parent because
 * WPBakery strips inline class="" from heading elements.
 *
 * Example: "Vacation Planning" is H3 but should be H2 for hierarchy.
 *   → Change heading to H2 in WPBakery
 *   → Add class "keep-h3-style" to the parent text block
 *   → It renders as H2 semantically but looks like the old H3.
 */

/* Preserve H2 appearance — on the heading itself or inherited from parent */
h1.keep-h2-style,
.keep-h2-style h1 {
  font-size: 50px !important;
  font-weight: 400 !important;
  line-height: 58px !important;
}

/* Preserve H3 appearance */
h1.keep-h3-style,
h2.keep-h3-style,
.keep-h3-style h1,
.keep-h3-style h2 {
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 46px !important;
}

/* Preserve H4 appearance */
h1.keep-h4-style,
h2.keep-h4-style,
h3.keep-h4-style,
.keep-h4-style h1,
.keep-h4-style h2,
.keep-h4-style h3 {
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 36px !important;
}

/* Preserve H5 appearance */
h2.keep-h5-style,
h3.keep-h5-style,
h4.keep-h5-style,
.keep-h5-style h2,
.keep-h5-style h3,
.keep-h5-style h4 {
  font-size: 27px !important;
  font-weight: 500 !important;
  line-height: 29px !important;
}

/* Preserve H6 appearance */
h3.keep-h6-style,
h4.keep-h6-style,
h5.keep-h6-style,
.keep-h6-style h3,
.keep-h6-style h4,
.keep-h6-style h5 {
  font-family: "Mulish", sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 29px !important;
}

/* Also apply to <p> elements (for H6 → <p> conversions on blog form subtitles) */
p.keep-h6-style,
.keep-h6-style p {
  font-family: "Mulish", sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 29px !important;
}