/*
 * Legacy-site compatibility overrides for a11y-widget.css.
 *
 * App_Themes/{ar,en}/css/zstyle.css still carries CSS rules written for this site's old,
 * hand-rolled accessibility panel (Javascript_Files/accessibilities-*.js, no longer loaded).
 * Two of its selectors — .a11y-panel and .a11y-close — happen to share class names with the
 * new widget's own markup, and both legacy rules use !important:
 *
 *   .a11y-panel { border-radius: 0 !important; z-index: 1000004 !important; ... }
 *   .a11y-close { border-radius: 0 !important; ... }
 *
 * A normal (non-!important) declaration always loses to an !important one regardless of
 * selector specificity, so without this file the new panel would render with square corners
 * and a legacy z-index it was never designed for (which can also stack it above the
 * "voice not available" popup). Do not delete this file, and do not remove the old
 * .a11y-panel/.a11y-close rules from zstyle.css instead — that file is otherwise unrelated
 * site styling and out of scope here.
 *
 * The fix: re-declare the same properties, also !important, on a selector scoped under
 * #a11y-widget-root. #a11y-widget-root .a11y-panel has higher specificity (one ID + one
 * class) than the legacy bare .a11y-panel (one class), so between two !important
 * declarations this one wins regardless of stylesheet load order.
 *
 * The same legacy rule also sets `opacity: 0` (not !important) with no matching
 * `.a11y-panel.is-open` rule ever applied (the old JS that toggled that class no longer
 * loads), and `word-spacing: .08em; letter-spacing: .01em`. a11y-widget.css only ever sets
 * opacity via its `a11y-panel-enter` @keyframes animation, which does not leave a lasting
 * value once the 160ms entrance finishes — so without an explicit resting-state opacity of
 * its own to out-specify the legacy rule, the panel would stay invisible (opacity 0)
 * permanently after opening. Declaring `opacity: 1` here (deliberately NOT !important, so it
 * does not fight the entrance animation itself) gives the cascade something of matching
 * priority to prefer by specificity once the animation ends. word-spacing/letter-spacing
 * only need the same non-important treatment, direct-match vs. inherited (inheritance always
 * loses to any directly-matching rule, no matter how it compares to #a11y-widget-root's own
 * declared values).
 */

/*
 * SSIF brand palette override.
 *
 * a11y-widget.css ships with the generic CMS2026 navy/gold theme. These custom properties
 * are declared on #a11y-widget-root itself (the exact same selector a11y-widget.css uses),
 * so — being a normal (non-!important) declaration loaded after it in the same cascade
 * origin at equal specificity — this wins by source order and simply repaints every rule
 * that already consumes var(--a11y-navy)/var(--a11y-navy-dark)/var(--a11y-gold)/
 * var(--a11y-gold-soft): feature icons, the reset button, active states, focus rings, etc.
 * Sampled directly from the live site: nav bar background (#17495B), the "Contact Us" /
 * hero CTA gold (#EBA828), and the site's link color (#35A5C9) for focus/active accents.
 */
#a11y-widget-root {
  --a11y-navy: #17495b;
  --a11y-navy-dark: #0f323f;
  --a11y-gold: #eba828;
  --a11y-gold-soft: #fbeeda;
}

#a11y-widget-root .a11y-panel {
  border-radius: 12px !important;
  z-index: auto !important;
  opacity: 1 !important;
  word-spacing: normal;
  letter-spacing: normal;
}

#a11y-widget-root[dir="rtl"] .a11y-panel {
  /* Same shape override; kept separate only because a11y-widget.css also has an RTL block. */
  border-radius: 12px !important;
}

#a11y-widget-root .a11y-close {
  border-radius: 6px !important;
}

@media (max-width: 600px) {
  #a11y-widget-root .a11y-panel,
  #a11y-widget-root[dir="rtl"] .a11y-panel {
    border-radius: 16px !important;
  }
}

/*
 * Highlight-headings / highlight-links — full redesign, round 3.
 *
 * History: a11y-widget.css originally hardcoded a bright yellow (#f5dc9d) that doesn't read
 * --a11y-gold/--a11y-navy at all (round 1 fix: literal SSIF hex instead). Round 2 fixed the
 * highlight box stretching full-width on block-level elements (width: fit-content, kept
 * below). This round replaces the actual look: solid cream fill + a 2px outline border reads
 * as a text-input field, not a "highlighted" state — and it looked especially bad in the main
 * nav specifically because nav links are ALREADY white text on the site's own teal bar
 * (confirmed live via getComputedStyle); forcing dark navy text onto a pale cream box there
 * flips the whole item to the opposite of its normal look, landing like a foreign patch
 * stuck onto the menu rather than a highlight of it.
 *
 * New design, no yellow/cream anywhere:
 * - Default (body/paragraph/footer/breadcrumb links, and headings anywhere): a solid teal
 *   "badge" — background var equivalent #17495b, white text, small border-radius so it reads
 *   as a tag/chip rather than a form field. Headings additionally get a gold left-edge stripe
 *   (the same accent treatment already used for the image-description caption, so the brand
 *   language is consistent across every a11y-widget surface on this site). No outline anywhere
 *   — outline is exactly what made the old design look like an input box.
 * - Main-menu override further down: the teal fill would be invisible against the nav's own
 *   teal background, so inside .mega-menu-wrapper / .mean__menu-wrapper links get NO fill at
 *   all — just a switch from the nav's normal white to gold text with a bold gold underline.
 *   Gold-on-teal is the same combination the site's own CTA buttons already use, so it reads
 *   as on-brand rather than as an accessibility overlay bolted on top.
 */
html.a11y-highlight-headings body :where(h1, h2, h3, h4, h5, h6):not(#a11y-widget-root *) {
  color: #ffffff !important;
  background: #17495b !important;
  border-inline-start: 4px solid #eba828 !important;
  outline: none !important;
  padding: 2px 10px !important;
  border-radius: 4px !important;
  /* Headings are block-level and default to width:auto, which for a block box means "fill the
     available width" — so the highlight box stretched across the entire page/column instead of
     hugging just the heading text (confirmed live: a short "About Us" h1 produced a highlight
     bar spanning the full content width). fit-content shrink-wraps the box to its own content
     without changing `display`, so normal (non-highlighted) layout is untouched. */
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100% !important;
}

html.a11y-highlight-links body a:not(#a11y-widget-root *) {
  color: #0f323f !important;
  background: none !important;
  text-decoration: underline !important;
  text-decoration-color: #eba828 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  /*
   * Round 4: dropped the filled "badge" box entirely (kept for headings, which are block-level
   * and take it fine — headings are approved as-is). Two confirmed problems with a filled box
   * specifically on links:
   *  1. `padding: 1px 6px` on an inline <a> does not reserve space in the surrounding LINE BOX
   *     — a link mid-paragraph would visually overlap the line above/below it, not just look
   *     "boxy" but actually break running body text.
   *  2. Every nav item got `padding: 0 !important` to compensate for its own box, which
   *     stripped the padding the main menu actually depends on for both its bar height and the
   *     gap between adjacent items — items visibly collapsed together. Removing the box removes
   *     the need to touch padding at all, so the menu's own spacing is now left completely alone.
   * Underline + color change only, no box, no padding touched anywhere.
   */
}

/*
 * Dark-background contexts: the main nav bar (teal) and the breadcrumb strip (rendered over
 * the dark hero image) both start with light/white text by default (confirmed live) — the
 * default rule's dark navy text would be unreadable there, same problem the original
 * cream-box design had. Gold matches the site's own CTA buttons, so it reads as on-brand.
 */
html.a11y-highlight-links .mega-menu-wrapper a:not(#a11y-widget-root *),
html.a11y-highlight-links .mean__menu-wrapper a:not(#a11y-widget-root *),
html.a11y-highlight-links .mean-nav a:not(#a11y-widget-root *),
html.a11y-highlight-links .breadcrumb-wrapper a:not(#a11y-widget-root *),
html.a11y-highlight-links .breadcrumb-items a:not(#a11y-widget-root *) {
  color: #eba828 !important;
  text-decoration: underline !important;
  text-decoration-color: #eba828 !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
}

/*
 * Cursor: make the size change actually register as a visible change.
 *
 * a11y-widget.css's cursor is a 42x42 white-filled arrow with a thin (2.5px) dark-navy
 * (#133054) outline. Verified live (including during an actual :hover) that the CSS is being
 * applied correctly everywhere on this site — computed `cursor` was always the widget's custom
 * value, no site rule blocks it. The likely real issue is visual, not functional: 42px is not
 * dramatically larger than a typical system pointer, and a mostly-white glyph reads as barely
 * different against this site's mostly-white/light content areas — so "Cursor" can look like
 * it did nothing even though it worked. Same selector as a11y-widget.css (loaded after, so it
 * wins on cascade order alone — no specificity trick needed): scaled up to 56px and switched
 * the outline to solid black for maximum contrast against any background, light or dark.
 */
html.a11y-big-cursor body :not(#a11y-widget-root, #a11y-widget-root *) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 42 42'%3E%3Cpath fill='white' stroke='black' stroke-width='3.5' d='M4 3v31l8-8 7 13 6-3-7-13h13z'/%3E%3C/svg%3E") 5 4, auto !important;
}

/*
 * Image-description caption recolor + font-family fix.
 *
 * a11y-widget.css hardcodes the caption it injects after each described image with CMS2026's
 * navy/gold (#1b3a6b/#c79a3c, not SSIF's) AND a fixed Arial/Tahoma font via the `font`
 * shorthand — same class of bug as the highlight-headings/links fix above: `.a11y-alt-caption`
 * is a bare class, not scoped under #a11y-widget-root, so the --a11y-navy/--a11y-gold
 * variable override earlier in this file never reaches it either.
 *
 * Colors: recolored to the same SSIF teal/gold used everywhere else in this file.
 *
 * Font: set to `inherit` rather than a second hardcoded stack. The caption is inserted as a
 * DOM sibling immediately after the image it describes (a11y-widget.js:
 * image.insertAdjacentElement('afterend', caption)), so `inherit` simply picks up whatever
 * font already applies at that point in the page — which is already correct per language,
 * since ar/en are served from entirely separate theme stylesheets (confirmed:
 * App_Themes/ar/css/main.css sets body/headings to Almarai first, App_Themes/en/css/main.css
 * sets "Plus Jakarta Sans" first). No need to hand-maintain a second per-language font list
 * here — inherit tracks whichever theme file the current page load already loaded.
 */
.a11y-alt-caption[data-a11y-alt-caption] {
  color: #fff !important;
  background: #17495b !important;
  border-inline-start: 4px solid #eba828 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/*
 * #lnkAccessibility exemption from "hide images".
 *
 * a11y-widget.css exempts its own panel (#a11y-widget-root *) and its own injected default
 * trigger (.a11y-fab) from "hide images" — but this site passes triggerSelector:
 * '#lnkAccessibility' to reuse its OWN existing trigger instead of the injected one, which
 * a11y-widget.css has no way to know about, so its <img> (the accessibility icon itself) was
 * being hidden along with every other content image. Needs a=2 (two ID-level selector
 * components: #lnkAccessibility itself, plus the same :not(#a11y-widget-root *) guard used
 * upstream) to beat the original rule's a=1 outright, regardless of its class count.
 */
html.a11y-hide-images body #lnkAccessibility img:not(#a11y-widget-root *) {
  visibility: visible !important;
}

/*
 * Contrast / monochrome / saturation: fixed-position elements pushed off-screen.
 *
 * a11y-widget.css applies `filter` to `body > :not(#a11y-widget-root)` — on this site, that's
 * the page's own <form>. A CSS `filter` other than `none` makes its element the *containing
 * block* for any `position: fixed` descendant (same rule as `transform`/`perspective`) — so
 * #lnkAccessibility and the chatbot's #ssif-chatbot-root (both position:fixed, both nested
 * inside <form>) stop being positioned against the viewport and instead position against the
 * (page-length-tall) <form> box, landing far outside the visible viewport. This can only be
 * fixed by keeping those two elements out of the filtered subtree in the DOM itself — see the
 * reparenting script added next to each page's A11yWidget.init() call, which moves both nodes
 * to be direct children of <body> (siblings of <form>, exactly like this site's own pre-2026
 * accessibility script already did for the sticky header for the same underlying reason).
 * No CSS selector can work around this — it is a structural side effect of `filter` itself.
 */