/* ==========================================================================
   Accessibility toolbar — PLT-AX-WEB-01
   Integrates with the DubaiWay design tokens (--dw-*) already defined in
   :root. Night/Day and Contrast work by REDEFINING those same variables
   under [data-ax-theme] / [data-ax-contrast], so every component already
   built on --dw-* tokens updates automatically — no per-component changes.
   ========================================================================== */

:root {
    --ax-font-scale: 1; /* drives html font-size, Size control */
    --ax-letter-spacing: normal; /* Spacing control */
    --ax-line-height: 1.5; /* Spacing control */
}

/* ---------------------------------------------------------------------
   NIGHT THEME
   --------------------------------------------------------------------- */
html[data-ax-theme="night"] {
    --dw-white: #14181A;
    --dw-white-90: #000000;
    --dw-white-70: #000000;
    --dw-white-40: #000000;
    --dw-white-100: #101314;
    --dw-bg-body: #101314;
    --dw-bg-body-l: #14181A;
    --dw-bg-body-400: #14181A;
    --dw-bg-gray: rgba(20, 24, 26, .67);
    --dw-surf: #1B2022;
    --dw-surf-b: #262C2E;
    --dw-surf-l: #14181A;
    --dw-surf-m: #262C2E;
    --dw-surf-outline: #2A3133;
    --dw-muted: #ecededc9;
    --dw-muted-70: #ecededc9;
    --dw-text2: #ecededc9;
    --dw-ink: #F2F4F4;
    --dw-body: #B7BABC;
    --dw-label: #C9CBCC;
    --dw-gray-70: rgba(200, 200, 200, 0.7);
    --dw-gray-700: #D6D8D9;
    --dw-gray-800: #E1E3E3;
    --dw-gray-900: #ECEDED;
    --dw-placeholder: #ecededc9;
    --dw-bdr: #2A3133;
    --dw-bdr-b: #ecededc9;
    --dw-brd-100: #3A4143;
    --dw-bdr-200: #3E484A;
    --dw-bdr-300: #2E3536;
    --dw-teal: #4FD1C5;
    --dw-teal-b: #3AD1D1;
    --dw-teal-bold: #6FE3D8;
    --dw-teal-2: #0a7a8470;
    --dw-teal-4: rgb(79 209 197 / 84%);
    --dw-teal-5: rgba(79, 209, 197, .05);
    --dw-teal-30: rgb(171 237 248 / 11%);
    --dw-teal-10: rgba(79, 209, 197, .1);
    --dw-teal-20: rgba(79, 209, 197, .2);
    --dw-teal-90: rgba(79, 209, 197, .9);
    --faq-hero-bg: #101314;
    --home-hero-bg: #101314;
    /* Tokens global.css only ever gave a light value. Left undefined here they kept their day value in
       night mode, which meant dark-on-dark body text (--dw-teal-300/400/500/600 carry 50+ `color:`
       declarations between them, --dw-gray-b another 12) and near-white chips (--dw-teal-l). */
    --dw-teal-300: #6FE3D8;
    --dw-teal-400: #4FD1C5;
    --dw-teal-500: #4FD1C5;
    --dw-teal-600: #3AD1D1;
    --dw-teal-l: #13322F;
    --dw-teal-light: rgba(79, 209, 197, .28);
    --dw-teal-50: #9AF0F8;
    --dw-teal-100: #ABEDF8;
    --dw-gray-b: #C9CBCC;
    --dw-blue: #7FB6E0;
    /* Buttons follow the same day/night inversion as the teal family: the blue lightens so it
       still carries contrast against the dark surfaces, and the ghost/outline wash goes dark. */
    --dw-btn: #63B3ED;
    --dw-btn-bold: #90CDF4;
    --dw-btn-l: #10293A;
    --dw-btn-50: #9AC8F8;
    --dw-btn-grad-from: #1E4E6E;
    --dw-btn-grad-to: #63B3ED;
    --dw-shadow: 0 8px 32px rgba(0, 0, 0, .45);
    --dw-shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
}

/* Dubai Way re-declares the whole --dw-teal* ladder in blue on its own <body class="dw-portal">
   (see dubaiway-landing.css). A custom property set on the element beats one inherited from
   `html`, so the Night values above never reach a Dubai Way page on their own — the blue ladder
   has to be re-inverted here, at a selector that outranks the plain `.dw-portal` one. */
html[data-ax-theme="night"] .dw-portal {
    --dw-teal: #63B3ED;
    --dw-teal-b: #7AC0F0;
    --dw-teal-bold: #90CDF4;
    --dw-teal-light: rgba(99, 179, 237, .28);
    --dw-teal-l: #10293A;
    --dw-teal-2: rgba(10, 90, 140, .44);
    --dw-teal-4: rgb(99 179 237 / 84%);
    --dw-teal-5: rgba(99, 179, 237, .05);
    --dw-teal-10: rgba(99, 179, 237, .1);
    --dw-teal-20: rgba(99, 179, 237, .2);
    --dw-teal-30: rgb(179 224 248 / 11%);
    --dw-teal-40: rgba(99, 179, 237, .8);
    --dw-teal-90: rgba(99, 179, 237, .9);
    --dw-teal-50: #9AC8F8;
    --dw-teal-100: #B3E0F8;
    --dw-teal-300: #90CDF4;
    --dw-teal-400: #63B3ED;
    --dw-teal-500: #63B3ED;
    --dw-teal-600: #7AC0F0;
    --dw-stats-from: #1E4E6E;
    --dw-stats-to: #63B3ED;
    --dw-shadow: 0 8px 32px rgba(0, 0, 0, .45);
    --dw-shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
}

/* --dw-teal-l is a surface tint above, but the exam panels in every program's learner-view.css also
   use it as an ink. Give those two their own light value rather than compromising the tint. */
html[data-ax-theme="night"] :is(.fe-sub, .fe-note) {
    color: var(--dw-teal-100);
}

/* ---------------------------------------------------------------------
   HIGH CONTRAST
   --------------------------------------------------------------------- */
html[data-ax-contrast="on"] {
    --dw-white: #000000;
    --dw-white-40: #000000;
    --dw-white-50: #000000;
    --dw-white-70: #000000;
    --dw-white-90: #000000;
    --dw-white-100: #000000;
    --dw-bg-body: #000000;
    --dw-bg-body-l: #000000;
    --dw-bg-body-400: #000000;
    --dw-surf: #000000;
    --dw-surf-b: #000000;
    --dw-surf-l: #000000;
    --dw-surf-m: #000000;
    --faq-hero-bg: #000000;
    --home-hero-bg: #000000;
    --dw-bg-gray: #000000;
    --dw-ink: #50d0a0;
    --dw-muted: #50d0a0;
    --dw-text2: #50d0a0;
    --dw-muted-70: #50d0a0;
    --dw-header: #FFE600;
    --dw-body: #50d0a0;
    --dw-placeholder: #50d0a0;
    --dw-label: #FFFFFF;
    --dw-gray-b: #FFE600;
    --dw-gray-70: rgba(255, 255, 255, 0.7);
    --dw-gray-700: #FFE600;
    --dw-gray-800: #FFE600;
    --dw-gray-900: #FFE600;
    --dw-bdr: #FFFFFF;
    --dw-bdr-b: #FFFFFF;
    --dw-teal: #FFE600;
    --dw-teal-b: #FFE600;
    --dw-teal-light: rgba(255, 230, 0, .5);
    --dw-teal-bold: #FFE600;
    --dw-teal-l: #a69813;
    --dw-teal-4: #FFE600;
    --dw-teal-2: #ffe6003b;
    --dw-teal-5: rgba(255, 230, 0, .05);
    --dw-teal-10: rgba(255, 230, 0, .1);
    --dw-teal-20: rgba(255, 230, 0, .2);
    --dw-teal-30: rgb(171 237 248 / 11%);
    --dw-teal-40: #FFE600;
    --dw-teal-50: #988b13;
    --dw-teal-90: #ffe600e6;
    --dw-teal-100: #50d0a0b3;
    --dw-teal-300: #FFE600;
    --dw-teal-400: #b6a613;
    --dw-teal-500: #FFE600;
    --dw-teal-600: #FFE600;
    --dw-stats-from: #B98900;
    --dw-stats-to: #FFE600;
    --dw-btn: #FFE600;
    --dw-btn-bold: #FFE600;
    --dw-btn-l: #a69813;
    --dw-btn-50: #988b13;
    --dw-btn-grad-from: #B98900;
    --dw-btn-grad-to: #FFE600;
    --ax-accent: #FFFFFF;
    --ax-accent-danger: #FF453A;
}

    /* Same reasoning as the Night block: Dubai Way's blue ladder sits on the element itself, so
       High Contrast has to reach it explicitly or the portal keeps its blues at contrast level. */
    html[data-ax-contrast="on"] .dw-portal {
        --dw-teal: #FFE600;
        --dw-teal-b: #FFE600;
        --dw-teal-light: rgba(255, 230, 0, .5);
        --dw-teal-bold: #FFE600;
        --dw-teal-l: #a69813;
        --dw-teal-4: #FFE600;
        --dw-teal-2: #ffe6003b;
        --dw-teal-5: rgba(255, 230, 0, .05);
        --dw-teal-10: rgba(255, 230, 0, .1);
        --dw-teal-20: rgba(255, 230, 0, .2);
        --dw-teal-30: rgb(171 237 248 / 11%);
        --dw-teal-40: #FFE600;
        --dw-teal-90: #ffe600e6;
        --dw-teal-50: #988b13;
        --dw-teal-100: #50d0a0b3;
        --dw-teal-300: #FFE600;
        --dw-teal-400: #b6a613;
        --dw-teal-500: #FFE600;
        --dw-teal-600: #FFE600;
        --dw-stats-from: #B98900;
        --dw-stats-to: #FFE600;
        --dw-btn: #FFE600;
        --dw-btn-bold: #FFE600;
        --dw-btn-l: #a69813;
        --dw-btn-50: #988b13;
        --dw-btn-grad-from: #B98900;
        --dw-btn-grad-to: #FFE600;
    }

    html[data-ax-contrast="on"] *:focus-visible {
        outline: 3px solid #FFE600 !important;
        outline-offset: 2px;
    }

/* Each program's learner-view.css paints the exam confirm dialog (SweetAlert2) with a white label on
   --dw-teal / --dw-btn. Night and High Contrast lighten those to pale teal/blue and #FFE600, so the
   white label vanishes — use the page's dark ink on the button and a dark fill on Cancel instead. */
html:is([data-ax-theme="night"], [data-ax-contrast="on"]) .swal2-styled.swal2-confirm {
    color: var(--dw-bg-body) !important;
}

html:is([data-ax-theme="night"], [data-ax-contrast="on"]) .swal2-styled.swal2-cancel {
    background-color: var(--dw-bg-body) !important;
}

/* ---------------------------------------------------------------------
   GRAYSCALE — the panel's "Colors" toggle
   Remapping --dw-* tokens (the way Night and Contrast do) cannot desaturate
   a page: every portal hardcodes brand hexes outside the token system, and
   logos, hero photos and course thumbnails carry colour of their own. One
   filter on the root covers all of it.

   The filter MUST stay on `html`. On any other element it would become the
   containing block for fixed-position descendants and unpin the hero headers
   (.tg-header--hero), the mobile nav drawer and every modal; the filter spec
   exempts the document root element from that rule.
   --------------------------------------------------------------------- */
html[data-ax-palette="grayscale"] {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

/* ---------------------------------------------------------------------
   SIZE
   --------------------------------------------------------------------- */
/* `html:root` rather than `html`: global.css also declares `html { font-size: 100% }`, and pages
   include the two sheets in whichever order they were written — where the page's own CSS lands
   after this file, a bare `html` here loses the tie and the Size control silently does nothing.
   The extra :root raises specificity above that rule so the control works whatever the order. */
html:root {
    font-size: calc(16px * var(--ax-font-scale));
}

/* ---------------------------------------------------------------------
   SPACING
   --------------------------------------------------------------------- */
body {
    letter-spacing: var(--ax-letter-spacing);
    line-height: var(--ax-line-height);
}

body, header, footer, .tg-header, .dw-footer {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* The hamburger is an <img> (menu-gray.svg once the header turns solid), so the token swap above cannot
   recolour it: grey on the dark Night / High Contrast header was barely visible. Render it white there. */
html[data-ax-theme="night"] .tg-nav-toggle img,
html[data-ax-contrast="on"] .tg-nav-toggle img {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   TRIGGER BUTTONS
   ========================================================================== */
.tg-icon-btn[aria-pressed="true"] {
    background: var(--dw-teal-10);
    box-shadow: inset 0 0 0 1px var(--dw-teal);
}

/* ==========================================================================
   ACCESSIBILITY PANEL
   ========================================================================== */
.ax-panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 334px;
    max-width: calc(100vw - 32px);
    background: var(--dw-white);
    border: 1px solid var(--dw-brd-100);
    border-radius: 12px;
    box-shadow: var(--dw-shadow-lg);
    padding: 8px;
    z-index: 1000;
    color: var(--dw-ink);
}

    .ax-panel[hidden] {
        display: none;
    }

.ax-panel__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.ax-panel__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: none;
    border-inline-end: 1px solid var(--dw-bdr);
    border-radius: 0;
    background: transparent;
    color: var(--dw-teal-300);
    font-size: 0.875rem;
    line-height: 0.84375rem;
    cursor: pointer;
    white-space: nowrap;
}

.ax-panel__grid .ax-panel__btn:last-child {
    border-inline-end: none;
}

.ax-panel__btn svg {
    width: 16px;
    height: 16px;
    fill: none;
}

.ax-panel__btn[data-ax-control="reset"] svg {
    stroke: var(--dw-red);
}

.ax-panel__btn[data-ax-control="reset"] span {
    color: var(--dw-red);
}

/* --dw-red (#BA1A1A) is a day-mode red: on the black Night / High Contrast panel it is ~2.5:1, and
   once Colors (grayscale) is on it collapses to a near-black grey that reads as a disabled control
   (NANNY-PL-26). A light red keeps the "destructive" hint and still greys out to a bright tone. */
html[data-ax-theme="night"] .ax-panel__btn[data-ax-control="reset"] svg,
html[data-ax-contrast="on"] .ax-panel__btn[data-ax-control="reset"] svg {
    stroke: #FF8A80;
}

html[data-ax-theme="night"] .ax-panel__btn[data-ax-control="reset"] span,
html[data-ax-contrast="on"] .ax-panel__btn[data-ax-control="reset"] span {
    color: #FF8A80;
}

.ax-panel__btn:hover,
.ax-panel__btn:focus-visible {
    border-color: var(--dw-teal-300);
    background: var(--dw-teal-l);
    color: var(--dw-teal-bold);
    border-radius: 8px;
}

.ax-panel__btn[aria-pressed="true"] {
    border-color: var(--dw-teal);
    background: var(--dw-teal-l);
    box-shadow: inset 0 0 0 1px var(--dw-teal);
    border-radius: 8px;
}

.ax-panel__value {
    font-size: 0.65rem;
    color: var(--dw-body);
}

/* Screen-reader-only live region */
.ax-sr-live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

[dir="rtl"] .ax-panel {
    inset-inline-end: auto;
    inset-inline-start: 16px;
}

@media (max-width: 480px) {
    .ax-panel {
        top: 64px;
        inset-inline: 12px;
        width: auto;
    }
}

/* Opened from the mobile drawer, accessibility.js moves the panel in after the drawer's trigger.
   The drawer is a fixed column, so the panel flows inside it instead of floating off its edge. */
.tg-mob-actions > .ax-panel {
    position: static;
    inset: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    box-shadow: none;
}