/* ============================================================================
   wcag-remediation.css
   ----------------------------------------------------------------------------
   WCAG 2.2 AA remediation overrides for the Sugamya audit (2026-06-04).
   This file is ADDITIVE and OVERRIDE-ONLY. It does not modify any existing
   stylesheet. It is loaded LAST in _Layout.cshtml (after PageStyles) so its
   rules win by cascade order without raising specificity unnecessarily.

   To fully revert Module A: delete this file and remove its <link> from
   _Layout.cshtml. Nothing else depends on it.

   Organised by audit batch. Each rule cites the WCAG success criterion and the
   exact element(s) the auditor flagged so changes stay surgical and traceable.
   ============================================================================ */


/* ============================================================================
   BATCH A1 — Keyboard focus indicators
   WCAG 2.4.7 Focus Visible (AA) + 1.4.11 Non-Text Contrast (focus indicator)
   ----------------------------------------------------------------------------
   The site sets `outline: none/0` on links, buttons and form controls in
   several stylesheets, leaving keyboard users with no visible focus. We restore
   a strong, high-contrast focus ring.

   Scoped to :focus-visible so it appears ONLY for keyboard / AT navigation —
   mouse clicks do NOT show the ring, so the visual design is unchanged for
   pointer users. Outline colour #005fcc gives >=4.5:1 on white and >=3:1 on the
   light banner tints, satisfying 1.4.11 for the indicator itself.
   ============================================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
summary:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
    /* Halo improves visibility where outline-offset is clipped by overflow */
    box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.35) !important;
    border-radius: 2px;
}

/* The specific Locate-Us / Product-Finder / Get-in-Touch controls the auditor
   named as missing a visible focus indicator (Home tab 2.4.7 / 1.4.11).
   Listed explicitly so the fix is guaranteed even if a future rule resets the
   generic selectors above. */
#stateDropdown:focus-visible,
#cityDropdown:focus-visible,
#branchDropdown:focus-visible,
#ddlProductParentCategory:focus-visible,
#ddlProductChildCategory1:focus-visible,
#customerType:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.35) !important;
}

/* Fallback for browsers without :focus-visible support — keep a visible ring on
   plain :focus too, but only for keyboard-reachable controls. Modern engines
   honour :focus-visible and ignore this duplicate harmlessly. */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus {
        outline: 2px solid #005fcc !important;
        outline-offset: 2px !important;
    }
}


/* ============================================================================
   BATCH A2 — Form, dropdown, placeholder & Get-in-Touch text contrast
   WCAG 1.4.3 Contrast (Minimum) (AA)
   ----------------------------------------------------------------------------
   Each colour below is darkened by the MINIMUM needed to clear 4.5:1 against
   its measured background. Selectors are scoped to the exact controls the
   auditor flagged, so nothing else is affected.
   ============================================================================ */

/* --- Placeholder text: #999 on #fff = 2.85:1 -> #6f6f6f = 4.7:1.
   opacity:1 prevents Firefox's default placeholder fade from lowering it. --- */
input::placeholder,
textarea::placeholder {
    color: #6f6f6f !important;
    opacity: 1 !important;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: #6f6f6f !important; opacity: 1 !important; }
input::-moz-placeholder,
textarea::-moz-placeholder { color: #6f6f6f !important; opacity: 1 !important; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { color: #6f6f6f !important; }

/* --- Locate-Us dropdowns: text #999 on #f1f3f6 = 2.5:1 -> #555 (matches the
   already-passing #customerType control). Options inherit #555 on white = fine. --- */
#stateDropdown,
#cityDropdown,
#branchDropdown {
    color: #555555 !important;
}

/* --- Product Finder selects: lavender #c5c6f2 text on purple #6667b0 = 3.1:1
   -> #fff = 5.1:1. Pin <option> text to black so the OPENED list (rendered on a
   white menu by the OS) stays readable instead of white-on-white. --- */
#ddlProductParentCategory,
#ddlProductChildCategory1 {
    color: #ffffff !important;
}
#ddlProductParentCategory option,
#ddlProductChildCategory1 option {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* --- "Get in Touch" paragraph: #697283 on #f1f3f6 = 4.4:1 (just under) ->
   #5d6675 ~= 5.0:1. Also passes on the #f9f9f9 / #eff2f6 variants seen. --- */
.right-side-para-wrap p {
    color: #5d6675 !important;
}


/* ============================================================================
   BATCH A4 — Footer text contrast
   WCAG 1.4.3 Contrast (Minimum) (AA)
   ----------------------------------------------------------------------------
   Footer text sits on dark backgrounds, so these colours are LIGHTENED (not
   darkened) to clear 4.5:1. Values measured live: copyright/policy bar bg
   #2A2B3D, main footer bg #222331. Selectors scoped to the flagged blocks so
   the already-passing white headings/links are untouched.
   ============================================================================ */

/* Copyright line + bottom policy links: #65677E on #2A2B3D = 2.51:1 -> #bcbec9. */
.copyright-wrap p,
.policy-links-wrap ul li a {
    color: #bcbec9 !important;
}

/* "Support" column labels (Call Toll Free:, Write to us at:, ...):
   #7C7E8C on #222331 = 3.86:1 -> #adafbb. Value lines set their own (white)
   colour and are unaffected. */
.support-links-wrap ul li {
    color: #adafbb !important;
}

/* DICGC link in the About block: bootstrap blue #337AB7 on #222331 = 3.41:1 ->
   lighter link blue #6aa9e0 (still clearly a link). */
.about-footer-wrap .about p a {
    color: #6aa9e0 !important;
}


/* ============================================================================
   BATCH A3 — Inner-page banner: heading + breadcrumb contrast
   WCAG 1.4.3 Contrast (Minimum) (AA) + 1.4.11 Non-Text Contrast
   ----------------------------------------------------------------------------
   On every inner/product page the banner background is a PER-PAGE PHOTO (an
   <img> inside a Bootstrap carousel), NOT a CSS colour — so there is no colour
   to swap. White title text and the grey/blue breadcrumb sit directly on these
   varying-light images and fail contrast.

   Fix: a left-weighted dark gradient SCRIM behind the text. It guarantees a dark
   backdrop regardless of the underlying image (works on light AND dark banners,
   so no page regresses), while the right ~1/4 stays clear to keep the product
   photo visible. The title is locked inside the carousel's transformed stacking
   context, so its scrim lives on .carousel-caption (same context, above the
   image); the breadcrumb gets a matching scrim on its own bar.

   Scoped to .inner-pg-banner only — the homepage carousel (.home-pg-banner) is
   untouched. Tunable via the --wcag-banner-scrim variable.
   ============================================================================ */

:root {
    --wcag-banner-scrim: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.68) 0%,
        rgba(0, 0, 0, 0.56) 55%,
        rgba(0, 0, 0, 0.25) 78%,
        rgba(0, 0, 0, 0) 95%
    );
}

/* Title scrim — on the carousel caption, behind the white <h3> title. */
.inner-pg-banner .carousel-caption {
    background: var(--wcag-banner-scrim) !important;
}

/* Breadcrumb scrim — on the breadcrumb bar (paints above the banner image). */
.inner-pg-banner .breadcrumbs-div {
    background: var(--wcag-banner-scrim) !important;
}

/* Breadcrumb text -> white on the scrim. Non-active links #fff; the active
   (current page) item slightly off-white so it stays distinguishable. */
.inner-pg-banner .breadcrumbs-inner-div .breadcrumb li a,
.inner-pg-banner .breadcrumbs-inner-div .breadcrumb .breadcrumb-item a {
    color: #ffffff !important;
}
.inner-pg-banner .breadcrumbs-inner-div .breadcrumb li.active a,
.inner-pg-banner .breadcrumbs-inner-div .breadcrumb .breadcrumb-item.active a {
    color: #e8eef7 !important;
}

/* Breadcrumb separators (1.4.11) -> light so the arrow/glyph is visible. */
.inner-pg-banner .breadcrumbs-inner-div .breadcrumb > li + li::before,
.inner-pg-banner .breadcrumbs-inner-div .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #dfe3ea !important;
}


/* ============================================================================
   BATCH A5 — Sticky-header overlap at zoom (Reflow / Resize)
   WCAG 1.4.10 Reflow (AA) + 1.4.4 Resize Text (AA)
   ----------------------------------------------------------------------------
   The header uses Bootstrap Affix (data-spy="affix") -> after 197px scroll it
   gets position:fixed via .affix. A manual spacer `.affix + .container-fluid
   {padding-top:70px}` compensates for the ~70px DESKTOP header height.

   At 200% / 400% browser zoom the effective viewport narrows, the header wraps
   to multiple rows and grows much taller (measured 208px at ~640px wide), but
   the spacer is still only 70px -> the fixed header covers main content. That
   is the audit's "main region content hides under overlapped sticky header"
   failure, reported on ~322 pages.

   Fix: below the desktop breakpoint (which is exactly where the header wraps and
   where 200%/400% zoom lands), neutralise the fixed positioning so the header
   scrolls normally in document flow -> nothing is ever hidden beneath it. The
   >=992px desktop behaviour (header ~70px, spacer correct) is left untouched.
   Verified: at 640px the affixed header changes from position:fixed (208px
   overlap) to static (no overlap); no horizontal overflow introduced.
   ============================================================================ */

@media (max-width: 991px) {
    header.affix,
    .affix {
        position: static !important;
        top: auto !important;
    }
    /* Remove the now-unneeded desktop spacer so no empty gap is left. */
    .affix + .container-fluid {
        padding-top: 0 !important;
    }

    /* Reflow: contain wide DATA TABLES so they scroll inside their own box
       instead of forcing the WHOLE page to scroll sideways (which would push
       surrounding, non-exempt content off-screen). Data tables themselves are
       exempt from 1.4.10, but the page around them must still reflow. Verified
       at 320px: page horizontal overflow drops from ~160px to ~0 on both the
       product accordion tables and the interest-rate tables. */
    .accordion-table-wrap,
    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}


/* ============================================================================
   BATCH B4 — Accessible news ticker (replaces deprecated <marquee>)
   WCAG 2.2.2 Pause, Stop, Hide (A)
   ----------------------------------------------------------------------------
   CSS-animated, seamless (duplicated track) ticker. Pauses on hover AND
   keyboard focus, has a keyboard-operable Pause/Play button, and stops
   entirely for users who prefer reduced motion.
   ============================================================================ */

.wcag-ticker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wcag-ticker-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.wcag-ticker-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    animation: wcag-ticker-scroll 45s linear infinite;
}

.wcag-ticker-dup {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.wcag-ticker-track .marquee-pointer-div,
.wcag-ticker-track .wcag-ticker-dup {
    flex: 0 0 auto;
}

/* DB ticker content may contain <br> / block markup that would force an item to
   two lines and stretch the whole ticker. Keep every item on one line. */
.wcag-ticker .marquee-pointer-div,
.wcag-ticker .marquee-pointer-number,
.wcag-ticker .marquee-pointer-content,
.wcag-ticker .marquee-pointer-content * {
    white-space: nowrap !important;
}
.wcag-ticker .marquee-pointer-content br {
    display: none !important;
}

/* Some DB ticker items contain a malformed/unclosed <font> tag that the HTML
   parser extends to wrap sibling content (including the duplicate track),
   breaking the single-row layout. display:contents removes the stray wrapper
   from layout so its children lay out as normal ticker items. */
.wcag-ticker-track font {
    display: contents;
}

/* Pause on hover, on keyboard focus anywhere inside, or via the button. */
.wcag-ticker:hover .wcag-ticker-track,
.wcag-ticker:focus-within .wcag-ticker-track,
.wcag-ticker.is-paused .wcag-ticker-track {
    animation-play-state: paused;
}

@keyframes wcag-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Respect reduced-motion: no auto-scroll at all. */
@media (prefers-reduced-motion: reduce) {
    .wcag-ticker-track {
        animation: none;
        transform: none;
        flex-wrap: wrap;
    }
}

/* Pause/Play button */
.wcag-ticker-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #393185;
    color: #ffffff;
    cursor: pointer;
}

.wcag-ticker-btn:hover,
.wcag-ticker-btn:focus-visible {
    background: #2a2566;
}

/* Pause glyph: two vertical bars (the gap between left/right borders). */
.wcag-ticker-btn-pause {
    display: inline-block;
    width: 8px;
    height: 11px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
    box-sizing: border-box;
}

/* When paused, the button offers Play: a right-pointing triangle. */
.wcag-ticker.is-paused .wcag-ticker-btn-pause {
    width: 0;
    height: 0;
    border-left: 11px solid currentColor;
    border-right: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    margin-left: 2px;
}


/* ============================================================================
   BATCH D — Form labels, required marker, hints
   WCAG 3.3.2 Labels or Instructions (A) + 3.3.3 Error Suggestion (AA)
   ----------------------------------------------------------------------------
   Visible <label>s added to the Get-in-Touch form (was placeholder-only). These
   styles keep them compact and on-brand, with contrast-safe colours.
   ============================================================================ */
.wcag-form-label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    line-height: 1.3;
}
.wcag-req {
    color: #c0392b; /* ~5.9:1 on white */
    font-weight: 700;
}
.wcag-form-hint {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #5d6675; /* contrast-safe on light backgrounds */
}
.wcag-form-required-note {
    margin-bottom: 12px;
    font-size: 13px;
    color: #5d6675;
}

/* ============================================================================
   BATCH F3 — "Enquire Now" CTA link contrast
   WCAG 1.4.3 Contrast (Minimum) (AA)
   ----------------------------------------------------------------------------
   The "Enquire Now" link uses brand orange/green (~2.7:1) on light backgrounds.
   Darkened to a burnt orange that clears 4.5:1 while staying a recognisable CTA.
   BRAND-TUNABLE: adjust #b34700 if a different shade is preferred.
   ============================================================================ */
.orange-text-button-three,
a.orange-text-button-three,
.right-side-link-wrap a {
    color: #b34700 !important;
}


/* Visually-hidden but screen-reader-available (used for the injected h1). */
.wcag-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ----------------------------------------------------------------------------
   NOTE (Batch C2 — Owl carousel keyboard): the site hides the Owl arrows with
   `.owl-buttons { display:none }` because these carousels display all items at
   once (clicking next does not navigate — verified). Revealing the dead arrows
   would be misleading, so no CSS change is made here. The carousel CONTENT
   (cards/links) stays in the DOM and Tab-reachable, so content is accessible.
   The JS still applies aria-labels + a carousel region label for screen readers.
   ---------------------------------------------------------------------------- */