/* =====================================================================
   NCCL WCAG 2.2 Accessibility Shim - PHASE 3 stylesheet
   Pairs with a11y-phase3.js. Load in the theme <head> after
   a11y-phase2.css.
   Covers: M13 (contrast finish), M12/MD7 (responsive safety net),
   plus styling for the carousel pause button and table scroll wrapper.
   ===================================================================== */

/* ---- M13: finish contrast (brand-aligned) --------------------- */
/* Coral used as text/icon anywhere -> accessible coral (>=4.5:1).   */
.text-secondary,
.color-secondary,
.color-secondary-default,
a.text-secondary,
.link-secondary { color: #E8210E !important; }

/* Common muted/footer text raised to >=4.5:1 on their backgrounds.  */
.text-muted, .muted, small.text-muted { color: #54534D !important; }

/* ---- M11: carousel pause/play button -------------------------- */
.a11y-carousel-toggle {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 20;
  min-width: 44px; min-height: 44px;
  font-size: 18px; line-height: 1;
  color: #fff; background: rgba(31,27,75,.75); /* primary-dark, ~ */
  border: 2px solid #fff; border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.a11y-carousel-toggle:hover { background: rgba(31,27,75,.95); }
.a11y-carousel-toggle:focus-visible { outline: 3px solid #FFD700; outline-offset: 2px; }

/* ---- M12 / MD7: responsive safety net ------------------------- */
/* These are guards, not a full responsive redesign. They stop the
   PAGE from scrolling sideways and let wide tables scroll instead.   */

/* Never let the page scroll horizontally */
html, body { overflow-x: clip; }

/* Media/images never overflow their container */
img, svg, video, iframe { max-width: 100%; height: auto; }

/* Wide tables scroll inside their own box (wrapper added by the JS) */
.a11y-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.a11y-table-scroll:focus-visible { outline: 3px solid #1F497D; outline-offset: 2px; }

/* Small-screen fallbacks (only apply where the theme leaves gaps) */
@media (max-width: 575.98px) {
  /* Footer columns stack full width */
  footer [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
  /* Long words / URLs wrap instead of forcing width */
  p, li, a, td, th, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
  /* Banner scales to viewport */
  #carouselHome img, .carousel img { width: 100%; height: auto; object-fit: cover; }
}

/* ---- 7.1 (WCAG 1.4.3 AA): link contrast on grey panels ------------- */
/* Theme links use --ct-primary-dusk #6963F1: 4.28:1 on the #F9F9F9      */
/* accordion panels (AA needs 4.5:1). Use NCCL primary #4935C5 (7.68:1)  */
/* and a darker hover #362E81 (10.7:1). Buttons keep their own colours.  */
.accordion-collapse a:not(.btn):not([class*="btn-"]),
.accordion-body a:not(.btn):not([class*="btn-"]) {
  color: var(--ct-primary-default, #4935C5);
}
.accordion-collapse a:not(.btn):not([class*="btn-"]):hover,
.accordion-collapse a:not(.btn):not([class*="btn-"]):focus,
.accordion-body a:not(.btn):not([class*="btn-"]):hover,
.accordion-body a:not(.btn):not([class*="btn-"]):focus {
  color: var(--ct-primary-midnight, #362E81);
  text-decoration: underline;
}

/* ---- 1.4.10 reflow: data tables on phones -------------------------- */
/* The rule above (overflow-wrap:anywhere) let table cells break inside */
/* words ("D-i-r-e-c-t-o-r"). Tables keep normal wrapping and scroll    */
/* sideways inside .a11y-table-scroll (allowed for data tables).        */
@media (max-width: 575.98px) {
  .a11y-table-scroll > table { min-width: 560px; }
  .a11y-table-scroll td, .a11y-table-scroll th,
  .a11y-table-scroll td *, .a11y-table-scroll th * { overflow-wrap: normal; word-break: normal; }
}