/* Accessibility toolbar: floating widget + the effects it toggles.
   All effects are gated behind data-a11y-* attributes on <html>, set by
   accessibility.js (and mirrored by an inline bootstrap script in <head>
   so the right state is applied before first paint, avoiding a flash). */

/* ---------- Font size (steps applied via zoom, since the theme's CSS
   uses fixed px sizes almost everywhere rather than rem/em) ---------- */
html[data-a11y-font-step="1"] { zoom: 112%; }
html[data-a11y-font-step="2"] { zoom: 125%; }
html[data-a11y-font-step="3"] { zoom: 137%; }

/* ---------- Display mode (single-select: normal / dark / grayscale / high contrast) ---------- */
/* "dark" and "grayscale" apply only to #a11y-content (the @yield('content') region in
   master.blade.php), not to <html>/<body>/<header>/<footer>. Two reasons:
   - `filter` on any ancestor of the sticky header makes that ancestor the containing
     block for the header's own position:fixed inner bar, which breaks it (it stops
     tracking the viewport and can collapse visually). #a11y-content isn't an ancestor
     of the header, so this never comes up.
   - The header/footer/offcanvas menu are already dark-navy-with-white-text by design,
     so they don't need inverting for a "dark mode" to make sense on them anyway. */
html[data-a11y-mode="dark"] #a11y-content {
    filter: invert(1) hue-rotate(180deg);
    background: #fff;
}
html[data-a11y-mode="dark"] #a11y-content .rr-btn:not([style*="background-image"] *) {
    /* Theme buttons (blue bg + white text) already read fine as-is; counter-invert
       them so they don't get flipped into low-contrast dark-text-on-blue. */
    filter: invert(1) hue-rotate(180deg);
}
/* Elements with an inline background-image (the theme's data-background -> JS
   pattern, e.g. the banner-2 hero section) are their own counter-inverted block, same
   idea as .rr-btn above. Anything nested inside one - like a plain <img> banner photo -
   must NOT also match the generic media rule below, or the two counter-invert filters
   would stack and cancel each other back to fully inverted again. */
html[data-a11y-mode="dark"] #a11y-content img:not(.rr-btn *):not([style*="background-image"] *),
html[data-a11y-mode="dark"] #a11y-content picture:not(.rr-btn *):not([style*="background-image"] *),
html[data-a11y-mode="dark"] #a11y-content video:not(.rr-btn *):not([style*="background-image"] *),
html[data-a11y-mode="dark"] #a11y-content iframe:not(.rr-btn *):not([style*="background-image"] *),
html[data-a11y-mode="dark"] #a11y-content svg image:not(.rr-btn *):not([style*="background-image"] *),
html[data-a11y-mode="dark"] #a11y-content [style*="background-image"]:not(.rr-btn *) {
    /* Counter-invert twice-over so photos/videos still look normal. */
    filter: invert(1) hue-rotate(180deg);
}

html[data-a11y-mode="grayscale"] #a11y-content {
    filter: grayscale(1);
}

html[data-a11y-mode="contrast"] body,
html[data-a11y-mode="contrast"] body * {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #ffe000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html[data-a11y-mode="contrast"] body a,
html[data-a11y-mode="contrast"] body a * {
    color: #ffe000 !important;
    text-decoration: underline !important;
}
html[data-a11y-mode="contrast"] body img,
html[data-a11y-mode="contrast"] body svg,
html[data-a11y-mode="contrast"] body picture,
html[data-a11y-mode="contrast"] body video {
    filter: grayscale(1) contrast(1.3);
}
html[data-a11y-mode="contrast"] body [style*="background-image"] {
    background-image: none !important;
}

/* ---------- Independent toggles ---------- */
html[data-a11y-underline="true"] a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

html[data-a11y-readable-font="true"] body,
html[data-a11y-readable-font="true"] body * {
    font-family: Verdana, Arial, "Segoe UI", sans-serif !important;
    letter-spacing: 0.02em !important;
    word-spacing: 0.06em !important;
    line-height: 1.6 !important;
}

html[data-a11y-reduce-motion="true"] *,
html[data-a11y-reduce-motion="true"] *::before,
html[data-a11y-reduce-motion="true"] *::after {
    animation-play-state: paused !important;
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* =================== Widget UI =================== */
.a11y-widget {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 100000;
}

.a11y-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-left: auto;
    padding: 0;
    border: none;
    border-radius: 50% 0 0 50%;
    background-color: var(--rr-theme-primary, #185EC8);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}
.a11y-toggle-btn:hover,
.a11y-toggle-btn:focus-visible {
    background-color: #124a9e;
}

.a11y-panel {
    position: absolute;
    top: 50%;
    right: 62px;
    transform: translateY(-50%);
    width: 320px;
    max-width: calc(100vw - 90px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    color: var(--rr-theme-black, #02110B);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.a11y-panel[hidden] {
    display: none;
}

.a11y-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(2, 17, 11, 0.1);
}
.a11y-panel__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
.a11y-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(2, 17, 11, 0.06);
    color: inherit;
    cursor: pointer;
}
.a11y-panel__close:hover {
    background: rgba(2, 17, 11, 0.12);
}

.a11y-panel__body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.a11y-section__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.a11y-font-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.a11y-font-control button {
    flex: 0 0 auto;
    width: 40px;
    height: 36px;
    border: 1px solid rgba(2, 17, 11, 0.15);
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
}
.a11y-font-control button:hover {
    border-color: var(--rr-theme-primary, #185EC8);
    color: var(--rr-theme-primary, #185EC8);
}
.a11y-font-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}
.a11y-font-dots i {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(2, 17, 11, 0.15);
    font-style: normal;
}
.a11y-font-dots i.is-active {
    background: var(--rr-theme-primary, #185EC8);
}

.a11y-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.a11y-mode-grid button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 1px solid rgba(2, 17, 11, 0.15);
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
.a11y-mode-grid button i {
    font-size: 16px;
}
.a11y-mode-grid button:hover {
    border-color: var(--rr-theme-primary, #185EC8);
}
.a11y-mode-grid button.is-active {
    border-color: var(--rr-theme-primary, #185EC8);
    background: rgba(24, 94, 200, 0.08);
    color: var(--rr-theme-primary, #185EC8);
}

.a11y-switches {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.a11y-switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
}
.a11y-switch-row:hover {
    background: rgba(2, 17, 11, 0.05);
}
.a11y-switch-row i:first-child {
    width: 18px;
    flex: 0 0 auto;
    opacity: 0.75;
}
.a11y-switch-row span:nth-child(2) {
    flex: 1 1 auto;
}
.a11y-switch {
    flex: 0 0 auto;
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: rgba(2, 17, 11, 0.15);
    transition: background-color 0.2s ease;
}
.a11y-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}
.a11y-switch-row.is-on .a11y-switch {
    background: var(--rr-theme-primary, #185EC8);
}
.a11y-switch-row.is-on .a11y-switch::before {
    transform: translateX(16px);
}

.a11y-panel__footer {
    padding: 12px 18px 18px;
}
.a11y-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(2, 17, 11, 0.15);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.a11y-reset-btn:hover {
    border-color: var(--rr-theme-primary, #185EC8);
    color: var(--rr-theme-primary, #185EC8);
}

@media (max-width: 480px) {
    .a11y-widget {
        top: auto;
        bottom: 90px;
        right: 0;
        transform: none;
    }
    .a11y-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        transform: none;
    }
}