/* =====================================================================
   NCCL WCAG 2.2 Accessibility Shim - Stylesheet
   Site: test.nccl.co.in (OpenCms)
   Pairs with a11y-fixes.js. Load this in the theme template <head>.
   Covers (fully or partially): M5, M9, M13*, M14, MD5, MD9, plus
   supporting styles for M2/M3/M4/M8/M20/BP2 handled in JS.
   * M13 contrast block is CONSERVATIVE and clearly marked - confirm
     values against your brand palette before relying on it.
   ===================================================================== */

/* ---- Screen-reader-only utility (used by the JS shim) ------------- */
.a11y-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ---- M5: Visible keyboard focus indicator ------------------------ */
/* Only for keyboard users (:focus-visible), not mouse clicks.        */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: 3px solid #1F497D !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}
/* Lighter outline for dark backgrounds (top nav / footer) */
.nav-dark a:focus-visible,
.nav-dark button:focus-visible,
footer a:focus-visible,
header a:focus-visible {
  outline-color: #FFD700 !important;
}
/* Fallback for browsers without :focus-visible support */
.a11y-kbd a:focus,
.a11y-kbd button:focus,
.a11y-kbd input:focus,
.a11y-kbd select:focus,
.a11y-kbd textarea:focus {
  outline: 3px solid #1F497D !important;
  outline-offset: 2px !important;
}

/* ---- M4: Skip link (visible on focus) ---------------------------- */
.a11y-skip-link,
a[href="#about-nccl"],
a[href="#main-content"] {
  position: absolute;
  left: 0; top: -60px;
  background: #1F497D; color: #fff !important;
  padding: 10px 18px; z-index: 100000;
  font-size: 14px; text-decoration: none;
  border-radius: 0 0 4px 0;
  transition: top .15s ease;
}
.a11y-skip-link:focus,
a[href="#about-nccl"]:focus,
a[href="#main-content"]:focus { top: 0; }

/* ---- M9: External-link indicator --------------------------------- */
/* JS adds .a11y-external to off-site links; icon appended via CSS.   */
a.a11y-external::after {
  content: "\2197";           /* up-right arrow */
  display: inline-block;
  margin-left: .25em;
  font-size: .8em;
  line-height: 1;
  vertical-align: super;
  text-decoration: none;
}

/* ---- M19: Document-link indicator badge -------------------------- */
a.a11y-doc .a11y-doc-badge {
  display: inline-block;
  margin-left: .35em;
  padding: 0 .35em;
  font-size: .72em;
  font-weight: 700;
  line-height: 1.5;
  border: 1px solid currentColor;
  border-radius: 3px;
  vertical-align: middle;
}

/* ---- MD9: Submenu chevron indicator ------------------------------ */
.a11y-chevron {
  display: inline-block;
  margin-left: .35em;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  transition: transform .2s ease;
}
[aria-expanded="true"] > .a11y-chevron { transform: rotate(180deg); }

/* ---- MD5: Minimum touch-target size ------------------------------ */
.a11y-tap,
button.a11y-tap,
a.a11y-tap {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Accessibility-bar buttons (A+/A/A-) get a comfortable 40px */
.a11y-fontbtn {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- M14: Text-spacing resilience -------------------------------- */
/* Avoid clipping when users apply WCAG text-spacing overrides.       */
p, li, span, a, h1, h2, h3, h4, h5, h6, td, th, label { overflow: visible; }
p { line-height: 1.6; }

/* ---- BP2: Back-to-top button ------------------------------------- */
#a11y-back-to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 99999;
  min-width: 44px; min-height: 44px;
  padding: 8px 12px;
  background: #1F497D; color: #fff;
  border: none; border-radius: 6px;
  font-size: 14px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  display: none;
}
#a11y-back-to-top:hover { background: #163a63; }
#a11y-back-to-top[hidden] { display: none !important; }

/* ---- M17: Live-region visual for injected status (screen-reader) - */
.a11y-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =====================================================================
   M13 - COLOUR CONTRAST  (brand-aligned; based on the extracted NCCL palette)
   Findings (WCAG AA, computed against the theme's own --ct-* tokens):
     - Indigo primary  #4935C5 on white = 8.1:1   -> PASS (no change needed)
     - Body #1A1A18 / neutral-dusk #54534D / neutral-deep #6A6962 -> PASS
     - Coral secondary #FA6D4B as TEXT/UI = 2.9:1  -> FAILS AA
   Fix: keep the coral brand family, but use the accessible shade
   (secondary-deep #E8210E = 4.5:1) wherever coral carries text or icons.
   Reserve #FA6D4B for large decorative accents only.
   ===================================================================== */

/* Coral used as a TEXT / ICON colour -> accessible coral (>= 4.5:1) */
.color-secondary,
.color-secondary-default,
a.color-secondary,
.text-secondary {
  color: #E8210E !important;   /* secondary-deep, 4.5:1 on white */
}

/* Placeholder & muted text: raise to >= 4.5:1 on white */
input::placeholder,
textarea::placeholder { color: #6A6962 !important; }   /* neutral-deep, 5.5:1 */
.text-muted, .muted, small, .copyright { color: #54534D !important; }  /* neutral-dusk, 7.7:1 */

/* neutral-bold (#84837D) is 3.8:1 -> large-text only; bump small-text uses */
.font11.color-neutral-bold,
.font12.color-neutral-bold,
.font13.color-neutral-bold { color: #6A6962 !important; }