/* ==========================================================================
   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;
    --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;
    --ax-accent: #FFFFFF;
    --ax-accent-danger: #FF453A;
}

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

/* ---------------------------------------------------------------------
   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 {
    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;
}

/* ==========================================================================
   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: 13.5px;
    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);
}

.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;
    }
}