/* ========================================
   Accessibility Styles
   Font scaling is handled by JavaScript (dynamic)
   CSS handles: panel styling, spacing, contrast, and the site-wide
   primitives below that every frontend needs and none should restate
   ======================================== */

/* ========================================
   Skip link (checklist 3.12, WCAG 2.4.1)

   Lives here, not in a project stylesheet, because pc_render_head() loads this
   file on every site unconditionally (core/functions/head.php) — so a project
   that writes the markup gets the styling with no wiring at all. The rules
   carry no !important: a theme that wants its own skip link should be able to
   restyle this one, and every project stylesheet loads after this file.
   ======================================== */

.pc-skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: #0b1c3f;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    border-radius: 0 0 0.375rem 0.375rem;
    transition: top 0.15s ease-in-out;
}

.pc-skip-link:focus,
.pc-skip-link:focus-visible {
    top: 0;
    color: #fff;
    outline: 3px solid #ffd400;
    outline-offset: 2px;
}

/* <main tabindex="-1"> is the skip link's target and is focused programmatically,
   but it is not an interactive control — a focus ring around the whole page body
   is noise. Without this rule, clicking anywhere in <main> draws one.

   SCOPED TO tabindex="-1", AND IT HAS TO BE. A bare `main:focus` also matches a
   <main tabindex="0">, which a keyboard user reaches by tabbing — removing that
   ring is a 2.4.7 failure, and this file is loaded by pc_render_head() on every
   site, so it would be one the client never opted into. It also subsumed the
   :focus-visible selector it was paired with, leaving that one dead. */
main[tabindex="-1"]:focus {
    outline: none;
}

/* ========================================
   Accessibility Toggle Button
   ======================================== */

#accessibility-toggle {
    cursor: pointer !important;
    background: transparent !important;
}

#accessibility-toggle:hover {
    opacity: 0.8;
}

#accessibility-toggle i {
    color: var(--bs-primary, #3f78e0);
}

#accessibility-toggle span {
    color: var(--bs-body-color, #60697b) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

/* High contrast mode overrides */
body.a11y-contrast-high #accessibility-toggle i,
body.a11y-contrast-high #accessibility-toggle span {
    color: #ff0 !important;
}

/* ========================================
   Accessibility Controls Panel
   ======================================== */

.accessibility-controls {
    background-color: #000 !important;
    color: #fff !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    animation: a11y-slideDown 0.3s ease-in-out !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

@keyframes a11y-slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accessibility-heading {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.accessibility-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.accessibility-controls .form-check {
    margin-bottom: 0.75rem;
}

.accessibility-controls .form-check-input {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.accessibility-controls .form-check-input:checked {
    background-color: #ffd700;
    border-color: #ffd700;
}

.accessibility-controls .form-check-input:focus {
    border-color: #ffd700;
    box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

.accessibility-controls .form-check-label {
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.accessibility-controls .form-group {
    margin-bottom: 0;
}

/* Preview classes for accessibility labels */
.accessibility-controls .fs-20 {
    font-size: 20px !important;
}

.accessibility-controls .fs-30 {
    font-size: 30px !important;
}

.accessibility-controls .word-spacing-preview {
    word-spacing: 0.3em;
}

.accessibility-controls .letter-spacing-preview {
    letter-spacing: 0.2em;
}

#accessibility-close {
    /* A btn-link wrapping a single icon collapses to the glyph's own box. The
       minimum is a pointer target, not a decoration — checklist 14.2. */
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

#accessibility-close:hover {
    color: #ffd700 !important;
}

/* Hidden on mobile until the toggle opens it.
 *
 * SCOPED TO THE CLOSED STATE, AND THAT IS THE WHOLE POINT. togglePanel() opens
 * the panel by setting an inline `display: block`, and an inline declaration
 * carries no `!important` — so a bare `display: none !important` here beat it,
 * and below 992px the button flipped aria-expanded to true while nothing
 * appeared. A control that announces itself open and shows nothing is worse
 * than no control. The body class is the one accessibility.js already toggles,
 * so a closed panel stays hidden exactly as before.
 */
@media (max-width: 991.98px) {
    .accessibility-controls {
        display: none !important;
    }

    body.accessibility-controls-visible .accessibility-controls {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* A full-height bar on a short phone screen has to scroll. Vertically
           only: nothing in the panel overflows sideways (measured against real
           Bootstrap at 320/375/768 — the container's padding absorbs the rows'
           negative margins), and clipping a scroll container on x is how an
           overflowing control becomes one nobody can reach. If the layout ever
           does overflow, the browser suite says so and the fix is the layout. */
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* ========================================
   Accessibility Spacing Classes
   ======================================== */

/* Paragraph Spacing */
body.a11y-paragraph-spacing p,
body.a11y-paragraph-spacing li,
body.a11y-paragraph-spacing div:not(.accessibility-controls):not(.accessibility-controls *) {
    line-height: 2 !important;
    margin-bottom: 1.5rem !important;
}

/* Word Spacing */
body.a11y-word-spacing *:not(.accessibility-controls):not(.accessibility-controls *) {
    word-spacing: 0.3em !important;
}

/* Letter Spacing */
body.a11y-letter-spacing *:not(.accessibility-controls):not(.accessibility-controls *) {
    letter-spacing: 0.1em !important;
}

/* ========================================
   Accessibility High Contrast Mode
   ======================================== */

body.a11y-contrast-high,
body.a11y-contrast-high .body,
body.a11y-contrast-high .main {
    background-color: #000 !important;
}

body.a11y-contrast-high a,
body.a11y-contrast-high button,
body.a11y-contrast-high .btn,
body.a11y-contrast-high h1,
body.a11y-contrast-high h2,
body.a11y-contrast-high h3,
body.a11y-contrast-high h4,
body.a11y-contrast-high h5,
body.a11y-contrast-high h6,
body.a11y-contrast-high p,
body.a11y-contrast-high span,
body.a11y-contrast-high div,
body.a11y-contrast-high li,
body.a11y-contrast-high label,
body.a11y-contrast-high strong,
body.a11y-contrast-high em,
body.a11y-contrast-high i:not(.uil):not([class*="icon"]),
body.a11y-contrast-high b,
body.a11y-contrast-high input,
body.a11y-contrast-high textarea,
body.a11y-contrast-high select {
    color: #ff0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

body.a11y-contrast-high .dropdown-menu {
    background-color: #000 !important;
    border-color: #ff0 !important;
}

body.a11y-contrast-high .dropdown-item {
    color: #ff0 !important;
    background-color: transparent !important;
}

body.a11y-contrast-high .dropdown-item:hover,
body.a11y-contrast-high .dropdown-item:focus,
body.a11y-contrast-high .dropdown-item.active {
    background-color: #333 !important;
    color: #ff0 !important;
}

body.a11y-contrast-high a,
body.a11y-contrast-high button {
    text-decoration: underline;
}

body.a11y-contrast-high a:hover,
body.a11y-contrast-high button:hover {
    color: #fff !important;
}

body.a11y-contrast-high img {
    filter: grayscale(100%) contrast(120%) brightness(1.2);
    opacity: 0.8;
}

body.a11y-contrast-high svg {
    filter: none;
    opacity: 1;
}

body.a11y-contrast-high input,
body.a11y-contrast-high textarea,
body.a11y-contrast-high select,
body.a11y-contrast-high button,
body.a11y-contrast-high .btn {
    border: 2px solid #ff0 !important;
    background-color: #000 !important;
}

body.a11y-contrast-high .form-check-input {
    background-color: #000 !important;
    border-color: #ff0 !important;
}

body.a11y-contrast-high .form-check-input:checked {
    background-color: #000 !important;
    border-color: #ff0 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffff00' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

body.a11y-contrast-high .form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffff00'/%3e%3c/svg%3e") !important;
}

body.a11y-contrast-high .form-check-label {
    color: #ff0 !important;
}

/* Override theme-specific backgrounds */
body.a11y-contrast-high .bg-primary,
body.a11y-contrast-high .bg-secondary,
body.a11y-contrast-high .bg-tertiary,
body.a11y-contrast-high .bg-light,
body.a11y-contrast-high .bg-dark,
body.a11y-contrast-high [class*="bg-"],
body.a11y-contrast-high section,
body.a11y-contrast-high header,
body.a11y-contrast-high footer,
body.a11y-contrast-high nav,
body.a11y-contrast-high .container,
body.a11y-contrast-high .row,
body.a11y-contrast-high [class*="col-"],
body.a11y-contrast-high .card,
body.a11y-contrast-high .card-body,
body.a11y-contrast-high .card-header,
body.a11y-contrast-high .card-footer {
    background-color: #000 !important;
    background-image: none !important;
}

/* Override SVG fills */
body.a11y-contrast-high svg path[fill]:not([fill="none"]) {
    fill: #ff0 !important;
}

body.a11y-contrast-high svg text {
    fill: #ff0 !important;
    color: #ff0 !important;
}

/* Ensure borders are visible */
body.a11y-contrast-high .card,
body.a11y-contrast-high .border,
body.a11y-contrast-high [class*="border"] {
    border-color: #ff0 !important;
}