/* ==========================================================================
   Accessibility Tools (Views/Partials/_AccessibilityTool.cshtml)
   --------------------------------------------------------------------------
   Ported from the GIG site and restyled with the cm.sa tokens (--c-*), so it
   follows light/dark mode. State is carried as data-a11y-* attributes on
   <html>, set before first paint by the inline script in Master.cshtml and
   afterwards by js/a11y.js.

   Kept in its own file because the main stylesheet is a prebuilt Tailwind
   bundle; nothing here depends on a utility class being in that build.
   ========================================================================== */

/* --- Zoom -------------------------------------------------------------------
   Applied to #a11y-root (header, main, footer) so the panel itself stays at
   100% and always fits on screen. */
html[data-a11y-zoom="75"]  #a11y-root { zoom: .75; }
html[data-a11y-zoom="90"]  #a11y-root { zoom: .9; }
html[data-a11y-zoom="110"] #a11y-root { zoom: 1.1; }
html[data-a11y-zoom="125"] #a11y-root { zoom: 1.25; }
html[data-a11y-zoom="150"] #a11y-root { zoom: 1.5; }

/* --- Colour vision ------------------------------------------------------------
   On <html> rather than #a11y-root: a filter on any other element becomes the
   containing block for position:fixed descendants, which would detach the
   mobile bottom bar, the floating buttons and the menu drawer from the
   viewport. The root element is exempt from that rule. */
html[data-a11y-vision="protanopia"]   { filter: url(#a11y-protanopia); }
html[data-a11y-vision="deuteranopia"] { filter: url(#a11y-deuteranopia); }
html[data-a11y-vision="tritanopia"]   { filter: url(#a11y-tritanopia); }

.a11y-filters { position: absolute; width: 0; height: 0; overflow: hidden; }

.a11y-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* --- High contrast ------------------------------------------------------------
   Forced black / white / yellow rather than re-tinted tokens: colour also comes
   from images, gradients and fixed hex values, and only an outright override
   guarantees the ratio. Covers the page content (#a11y-root) and the floating
   buttons / bottom bar (.a11y-scope), not the accessibility panel itself. */
html[data-a11y-contrast="on"],
html[data-a11y-contrast="on"] body { background-color: #000 !important; }

html[data-a11y-contrast="on"] :is(#a11y-root, .a11y-scope),
html[data-a11y-contrast="on"] :is(#a11y-root, .a11y-scope) * {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Inline SVG icons carry colour in fill/stroke attributes. */
html[data-a11y-contrast="on"] :is(#a11y-root, .a11y-scope) svg [fill]:not([fill="none"]) { fill: #fff !important; }
html[data-a11y-contrast="on"] :is(#a11y-root, .a11y-scope) svg [stroke]:not([stroke="none"]) { stroke: #fff !important; }

html[data-a11y-contrast="on"] :is(#a11y-root, .a11y-scope) a,
html[data-a11y-contrast="on"] :is(#a11y-root, .a11y-scope) a * { color: #ff0 !important; }
html[data-a11y-contrast="on"] #a11y-root main a:not(.btn) { text-decoration: underline !important; }

html[data-a11y-contrast="on"] :is(#a11y-root, .a11y-scope) :is(button, input, select, textarea, .btn) {
    border: 1px solid #fff !important;
}

/* Selected choices (chips, segmented controls, radios) must still read as
   selected when every background is black. */
html[data-a11y-contrast="on"] #a11y-root input:checked + span {
    background-color: #ff0 !important;
    color: #000 !important;
}

/* Errors stay distinguishable from labels (7.3:1 on black, plus weight). */
html[data-a11y-contrast="on"] #a11y-root :is(.field-validation-error, .field-validation-error *, .umbraco-forms-indicator) {
    color: #ff6666 !important;
    font-weight: 700 !important;
}
html[data-a11y-contrast="on"] #a11y-root .input-validation-error {
    border-color: #ff6666 !important;
    border-width: 2px !important;
}

html[data-a11y-contrast="on"] :is(#a11y-root, .a11y-scope) :focus-visible {
    outline: 3px solid #ff0 !important;
    outline-offset: 2px !important;
}

/* --- Widget -------------------------------------------------------------------
   Tab on the side edge, vertically centred: inset-inline-end puts it on the
   right in English and the left in Arabic. Above the header (z 50) and the
   mobile bars (z 50). */
.a11y-widget {
    position: fixed;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.a11y-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
    background-color: rgb(var(--c-brand));
    color: rgb(var(--c-on-brand));
    box-shadow: 0 2px 10px rgb(0 0 0 / .18);
    transition: background-color .15s ease-in-out;
}
.a11y-toggle:hover { background-color: rgb(var(--c-brand-hover)); }

.a11y-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 176px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid rgb(var(--c-line));
    border-radius: 12px;
    background-color: rgb(var(--c-raised));
    box-shadow: 0 1px 2px rgb(13 46 68 / .04), 0 12px 32px -12px rgb(13 46 68 / .28);
    order: -1; /* panel opens inward, the tab stays against the edge */
}

.a11y-panel-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    color: rgb(var(--c-ink));
    padding-bottom: 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgb(var(--c-line));
}

.a11y-item,
.a11y-subitem {
    border-radius: 8px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: rgb(var(--c-ink));
    background-color: rgb(var(--c-sunken));
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.a11y-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
}
.a11y-subitem { display: block; padding: 7px 6px; }
.a11y-item:hover:not(:disabled),
.a11y-subitem:hover { background-color: rgb(var(--c-brand-subtle)); color: rgb(var(--c-brand-text)); }
.a11y-item:disabled { opacity: .45; cursor: not-allowed; }

.a11y-item-active,
.a11y-item-active:hover {
    background-color: rgb(var(--c-brand)) !important;
    color: rgb(var(--c-on-brand)) !important;
}

.a11y-zoom-level {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: rgb(var(--c-ink));
    padding: 2px 0;
}

.a11y-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgb(var(--c-line));
}
.a11y-panel-title + .a11y-group,
html[data-a11y-no-zoom] .a11y-panel-title + .a11y-group + .a11y-group {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.a11y-group-title {
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgb(var(--c-ink-muted));
    padding-bottom: 2px;
}

html[data-a11y-no-zoom] .a11y-zoom-control,
html[data-a11y-no-voice] .a11y-voice-control { display: none !important; }

.a11y-widget :focus-visible,
.a11y-voice :focus-visible {
    outline: 2px solid rgb(var(--c-brand));
    outline-offset: 2px;
}

/* --- Voice command dialog ------------------------------------------------------ */
.a11y-voice-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background-color: rgb(0 0 0 / .5);
}

.a11y-voice-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 81;
    width: min(440px, calc(100vw - 32px));
    max-height: min(88vh, 660px);
    overflow-y: auto;
    border: 1px solid rgb(var(--c-line));
    border-radius: 16px;
    background-color: rgb(var(--c-raised));
    box-shadow: 0 18px 50px rgb(13 46 68 / .28);
    text-align: start;
}

.a11y-voice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background-color: rgb(var(--c-brand));
    color: rgb(var(--c-on-brand));
}
/* The site styles every p (colour) and every li (disc bullet);
   the widget and dialog set their own. */
.a11y-voice-chips li { list-style: none; }
.a11y-voice-title { font-size: 18px; font-weight: 700; line-height: 26px; color: rgb(var(--c-on-brand)); }
.a11y-voice-intro { margin-top: 4px; font-size: 13px; line-height: 20px; color: rgb(var(--c-on-brand) / .85); }

.a11y-voice-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: inherit;
    background-color: rgb(255 255 255 / .14);
    transition: background-color .15s ease-in-out;
}
.a11y-voice-close:hover { background-color: rgb(255 255 255 / .26); }
.a11y-voice-head :focus-visible { outline-color: #fff; }

.a11y-voice-body { padding: 18px 20px 20px; }

.a11y-voice-langs {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background-color: rgb(var(--c-sunken));
}
.a11y-voice-lang {
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 18px;
    color: rgb(var(--c-ink-2));
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.a11y-voice-lang-active {
    background-color: rgb(var(--c-brand));
    color: rgb(var(--c-on-brand));
    font-weight: 700;
}

.a11y-voice-list-title {
    margin-top: 18px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: rgb(var(--c-ink-muted));
}

.a11y-voice-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.a11y-voice-chip {
    padding: 6px 14px;
    border: 1px solid rgb(var(--c-line));
    border-radius: 999px;
    background-color: rgb(var(--c-brand-subtle));
    font-size: 13px;
    line-height: 18px;
    color: rgb(var(--c-brand-text));
    cursor: default;
}

.a11y-voice-status {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    border-inline-start: 3px solid rgb(var(--c-ink-muted));
    background-color: rgb(var(--c-sunken));
    font-size: 13px;
    line-height: 20px;
    color: rgb(var(--c-ink-2));
}
.a11y-voice-status-listening { border-inline-start-color: rgb(var(--c-brand)); background-color: rgb(var(--c-brand-subtle)); color: rgb(var(--c-brand-text)); font-weight: 700; }
.a11y-voice-status-ok        { border-inline-start-color: #16a34a; background-color: rgb(22 163 74 / .12); color: rgb(var(--c-ink)); font-weight: 700; }
.a11y-voice-status-error     { border-inline-start-color: #dc2626; background-color: rgb(220 38 38 / .1); color: #b91c1c; font-weight: 700; }
.dark .a11y-voice-status-error { color: #fca5a5; }

.a11y-voice-heard { margin-top: 6px; font-size: 12px; line-height: 17px; font-style: italic; color: rgb(var(--c-ink-muted)); }

.a11y-voice-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
    padding: 13px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: rgb(var(--c-on-brand));
    background-color: rgb(var(--c-brand));
    transition: background-color .15s ease-in-out;
}
.a11y-voice-start:hover { background-color: rgb(var(--c-brand-hover)); }
.a11y-voice-start-active,
.a11y-voice-start-active:hover { background-color: #dc2626; color: #fff; }

.a11y-voice-mic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgb(255 255 255 / .16);
}
.a11y-voice-start-active .a11y-voice-mic { animation: a11y-voice-pulse 1.4s ease-out infinite; }
@keyframes a11y-voice-pulse {
    0%   { box-shadow: 0 0 0 0 rgb(255 255 255 / .55); }
    70%  { box-shadow: 0 0 0 12px rgb(255 255 255 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); }
}

.a11y-voice-privacy { margin-top: 10px; font-size: 11px; line-height: 16px; color: rgb(var(--c-ink-muted)); }

/* --- The panel and dialog in high-contrast mode ---------------------------------- */
html[data-a11y-contrast="on"] :is(.a11y-panel, .a11y-toggle, .a11y-voice-dialog, .a11y-voice-head, .a11y-voice-langs) {
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
}
html[data-a11y-contrast="on"] :is(.a11y-panel-title, .a11y-group-title, .a11y-zoom-level, .a11y-item, .a11y-subitem,
    .a11y-voice-title, .a11y-voice-intro, .a11y-voice-list-title, .a11y-voice-privacy, .a11y-voice-heard,
    .a11y-voice-chip, .a11y-voice-status, .a11y-voice-lang, .a11y-voice-close) {
    background-color: #000;
    color: #fff;
    border-color: #fff;
    opacity: 1;
}
html[data-a11y-contrast="on"] :is(.a11y-item, .a11y-subitem, .a11y-voice-chip, .a11y-voice-lang, .a11y-voice-close) { border: 1px solid #fff; }
html[data-a11y-contrast="on"] :is(.a11y-item-active, .a11y-voice-lang-active, .a11y-voice-start) {
    background-color: #ff0 !important;
    color: #000 !important;
}
html[data-a11y-contrast="on"] .a11y-voice-status-error { color: #ff6666; border-color: #ff6666; }

@media (max-width: 640px) {
    .a11y-panel { width: 156px; }
}

@media (prefers-reduced-motion: reduce) {
    .a11y-toggle, .a11y-item, .a11y-subitem, .a11y-voice-lang, .a11y-voice-close, .a11y-voice-start { transition: none; }
    .a11y-voice-start-active .a11y-voice-mic { animation: none; box-shadow: 0 0 0 3px rgb(255 255 255 / .5); }
}