/*
 * Accessibility options.
 *
 * A small native panel - deliberately NOT a third-party overlay widget. Those
 * scripts are widely criticised because they sit on top of a page without
 * fixing its markup, they interfere with real assistive technology, and on a
 * government site they add an external dependency, a privacy exposure, and a
 * network the proxy may block.
 *
 * The controls here are the ones a browser does NOT already do better:
 *   - text size    : browser zoom scales layout too; this scales TEXT only,
 *                    which keeps the page shape and helps low-vision readers
 *   - high contrast: the OS forced-colours mode is blunt; this is a tuned
 *                    theme built from the site's own tokens
 *   - underline links: restores the underline the design removes
 *   - reduce motion: an explicit control for visitors whose OS setting is not
 *                    set, on a site with a great deal of movement
 *
 * Screen-reader users are served by the page's semantics - landmarks,
 * headings, labels, alt text - not by anything in this file.
 *
 * @package Templates.abn_governorate
 */

/* ------------------------------------------------------------ text scaling */

/*
 * Scale the ROOT font size, so every rem-based size in the design follows.
 * The site uses clamp() widely; clamp ceilings are in rem too, so they scale
 * with it. px values do not scale - that is deliberate, it keeps borders,
 * icon strokes and shadows crisp instead of bloating them.
 *
 * WCAG 1.4.4 asks for 200% without loss of content. 130% is offered here
 * because beyond that this layout starts to wrap awkwardly; visitors needing
 * more should use browser zoom, which this does not interfere with.
 */
:root[data-abn-text="large"] {
    font-size: 115%;
}

:root[data-abn-text="larger"] {
    font-size: 130%;
}

/* Give scaled text somewhere to go rather than clipping it. */
:root[data-abn-text="large"] .abn-section__title,
:root[data-abn-text="larger"] .abn-section__title,
:root[data-abn-text="large"] .abn-hero__title,
:root[data-abn-text="larger"] .abn-hero__title {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Fixed-height cards must become auto-height, or larger text overflows. */
:root[data-abn-text="large"] .abn-fact,
:root[data-abn-text="larger"] .abn-fact,
:root[data-abn-text="large"] .abn-news-card,
:root[data-abn-text="larger"] .abn-news-card {
    height: auto;
    min-height: 0;
}

/* --------------------------------------------------------- high contrast */

/*
 * Re-points the existing design tokens rather than overriding component rules,
 * so every component that already consumes them inherits the theme for free.
 * Ratios against #ffffff: ink 21:1, primary 8.6:1, deep 12.6:1 - all clearing
 * AA for body text, where the standard palette clears it more narrowly.
 */
:root[data-abn-contrast="high"] {
    --abn-surface: #ffffff;
    --abn-surface-soft: #ffffff;
    --abn-surface-blue: #ffffff;
    --abn-surface-sand: #ffffff;
    --abn-ink: #000000;
    --abn-ink-soft: #1a1a1a;
    --abn-primary: #004a80;
    --abn-primary-dark: #003356;
    --abn-primary-deep: #00263f;
    --abn-turquoise: #005f6e;
    --abn-green: #2f5449;
    --abn-gold: #6b4c12;
    --abn-border: #000000;
    --abn-focus: #000000;
}

/* Decorative layers carry no information and only lower contrast. */
:root[data-abn-contrast="high"] .abn-news__mast,
:root[data-abn-contrast="high"] .abn-news__orbit,
:root[data-abn-contrast="high"] .abn-hero__canvas,
:root[data-abn-contrast="high"] .abn-media-sheen,
:root[data-abn-contrast="high"] .abn-news-media__sheen {
    display: none !important;
}

/* Photographs behind text are the main contrast hazard: hold the veil down. */
:root[data-abn-contrast="high"] .abn-hero__media,
:root[data-abn-contrast="high"] .abn-page-hero__media {
    filter: contrast(0.72) brightness(0.5);
}

/* Borders must be visible, not suggested. */
:root[data-abn-contrast="high"] .abn-fact,
:root[data-abn-contrast="high"] .abn-news-card,
:root[data-abn-contrast="high"] .abn-news-feature,
:root[data-abn-contrast="high"] .mod-abn-cards__link,
:root[data-abn-contrast="high"] .abn-map__legend-item a {
    border-width: 2px !important;
    box-shadow: none !important;
}

/* -------------------------------------------------------- underline links */

/*
 * WCAG 1.4.1: colour alone must not convey meaning. The design distinguishes
 * links by colour in running text, so this restores the underline for anyone
 * who needs it.
 */
:root[data-abn-links="underline"] .abn-main a,
:root[data-abn-links="underline"] .abn-footer a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Buttons and cards are shapes, not running text - underlining them is noise. */
:root[data-abn-links="underline"] .abn-button,
:root[data-abn-links="underline"] .mod-abn-cards__link,
:root[data-abn-links="underline"] .abn-news-card a,
:root[data-abn-links="underline"] .abn-news-feature a,
:root[data-abn-links="underline"] .abn-map__legend-item a {
    text-decoration: none !important;
}

/* ------------------------------------------------------------ reduce motion */

/*
 * The manual equivalent of prefers-reduced-motion, for visitors whose OS
 * setting is not set. experience.js also reads this flag so GSAP, the hero
 * canvas and the card tilts never start.
 */
:root[data-abn-motion="reduce"] *,
:root[data-abn-motion="reduce"] *::before,
:root[data-abn-motion="reduce"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

:root[data-abn-motion="reduce"] .abn-hero__canvas,
:root[data-abn-motion="reduce"] .abn-news__orbit {
    display: none !important;
}

/* =========================================================== the panel === */

.abn-a11y {
    position: relative;
}

.abn-a11y__panel {
    position: absolute;
    inset-block-start: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 60;
    width: min(92vw, 310px);
    padding: 18px;
    background: var(--abn-surface);
    border: 1px solid color-mix(in oklch, var(--abn-primary-deep) 18%, var(--abn-border));
    border-radius: 14px;
    box-shadow: 0 24px 60px oklch(20% 0.05 240 / 26%);
}

.abn-a11y__panel[hidden] {
    display: none;
}

/* The panel receives focus when it opens (see setOpen in a11y.js) purely so
   screen readers announce it and Tab starts inside. It is not itself a
   control, so it does not need a focus ring - the controls within it have
   their own. */
.abn-a11y__panel:focus {
    outline: none;
}

.abn-a11y__group {
    margin-block-end: 16px;
}

.abn-a11y__group:last-of-type {
    margin-block-end: 10px;
}

.abn-a11y__legend {
    display: block;
    margin-block-end: 8px;
    padding: 0;
    color: var(--abn-primary-deep);
    font-weight: 700;
    font-size: 0.82rem;
}

.abn-a11y__choices {
    display: flex;
    gap: 6px;
}

/*
 * Real radio inputs, visually hidden but focusable: the group is announced as
 * a radiogroup and arrow keys work, which a div-with-role never quite gets
 * right. The label is the visible control.
 */
.abn-a11y__choices input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.abn-a11y__choices label {
    flex: 1;
    padding: 8px 6px;
    color: var(--abn-ink) !important;
    font-size: 0.82rem;
    text-align: center;
    background: var(--abn-surface-soft);
    border: 1px solid var(--abn-border);
    border-radius: 9px;
    cursor: pointer;
    transition: background-color 200ms var(--abn-ease-out), border-color 200ms var(--abn-ease-out);
}

.abn-a11y__choices label:hover {
    border-color: color-mix(in oklch, var(--abn-primary) 50%, transparent);
}

.abn-a11y__choices input:checked + label {
    color: var(--abn-surface) !important;
    background: var(--abn-primary);
    border-color: var(--abn-primary);
}

.abn-a11y__choices input:focus-visible + label {
    outline: 3px solid var(--abn-focus);
    outline-offset: 2px;
}

/* Sizing preview: the labels show their own effect. */
.abn-a11y__choices label[data-size="large"] { font-size: 0.94rem; }
.abn-a11y__choices label[data-size="larger"] { font-size: 1.06rem; }

.abn-a11y__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    gap: 12px;
    cursor: pointer;
}

.abn-a11y__toggle span {
    color: var(--abn-ink);
    font-size: 0.86rem;
}

.abn-a11y__toggle input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--abn-primary);
    cursor: pointer;
}

.abn-a11y__toggle input:focus-visible {
    outline: 3px solid var(--abn-focus);
    outline-offset: 2px;
}

.abn-a11y__reset {
    width: 100%;
    padding: 9px;
    color: var(--abn-primary) !important;
    font-weight: 600;
    font-size: 0.84rem;
    background: transparent;
    border: 1px solid var(--abn-border);
    border-radius: 9px;
    cursor: pointer;
}

.abn-a11y__reset:hover {
    background: var(--abn-surface-soft);
    border-color: var(--abn-primary);
}

.abn-a11y__note {
    margin: 10px 0 0;
    color: var(--abn-ink-soft);
    font-size: 0.72rem;
    line-height: 1.5;
}

/* No JavaScript: the trigger would do nothing, so do not offer it. */
.abn-a11y[hidden] {
    display: none;
}

@media (max-width: 767.98px) {
    .abn-a11y__panel {
        position: fixed;
        inset-block-start: auto;
        inset-block-end: 0;
        inset-inline: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .abn-a11y__choices label,
    .abn-a11y__reset {
        transition: none;
    }
}