/**
 * Public site visual accessibility — contrast AA, touch targets, zoom/reflow.
 * FILE_PATH: assets/css/a11y/site_a11y_visual.css
 * SCOPE_ID: site_a11y_visual_css
 *
 * Practical WCAG 2.1 AA helpers. Does not claim ADA compliance.
 */

/* --- Contrast boost (muted text / placeholders / secondary links) --- */
html.bc-a11y-visual-contrast {
    --bc-a11y-muted: #495057; /* ~7:1 on white — exceeds 4.5:1 AA for normal text */
    --bc-a11y-placeholder: #595959;
    --bc-a11y-link-secondary: #0b5ed7;
}

html.bc-a11y-visual-contrast .text-muted,
html.bc-a11y-visual-contrast .form-text,
html.bc-a11y-visual-contrast .text-secondary,
html.bc-a11y-visual-contrast small.text-muted,
html.bc-a11y-visual-contrast .small.text-muted {
    color: var(--bc-a11y-muted) !important;
}

html.bc-a11y-visual-contrast .form-control::placeholder,
html.bc-a11y-visual-contrast .form-control::-webkit-input-placeholder,
html.bc-a11y-visual-contrast textarea::placeholder,
html.bc-a11y-visual-contrast input::placeholder {
    color: var(--bc-a11y-placeholder);
    opacity: 1;
}

html.bc-a11y-visual-contrast a.link-secondary,
html.bc-a11y-visual-contrast .link-secondary {
    color: var(--bc-a11y-link-secondary) !important;
}

html.bc-a11y-visual-contrast .btn-outline-secondary {
    color: #343a40;
    border-color: #495057;
}

html.bc-a11y-visual-contrast .btn-outline-secondary:hover,
html.bc-a11y-visual-contrast .btn-outline-secondary:focus-visible {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

/* Footer / nav muted copy on light panels */
html.bc-a11y-visual-contrast .site-footer .text-muted,
html.bc-a11y-visual-contrast .content-wrapper .text-muted {
    color: var(--bc-a11y-muted) !important;
}

/* --- Focus-visible reinforcement (authors often clear outline on :focus) --- */
html.bc-a11y-focus-ring.bc-a11y-visual-contrast .form-control:focus-visible,
html.bc-a11y-focus-ring .festive-input:focus-visible,
html.bc-a11y-focus-ring .form-control:focus-visible,
html.bc-a11y-focus-ring a:focus-visible,
html.bc-a11y-focus-ring button:focus-visible,
html.bc-a11y-focus-ring .btn:focus-visible,
html.bc-a11y-focus-ring summary:focus-visible,
html.bc-a11y-focus-ring [tabindex]:focus-visible {
    outline: 3px solid #ff6b6b;
    outline-offset: 2px;
}

/* --- Touch targets ≥ 44×44 CSS px --- */
html.bc-a11y-touch-targets .btn,
html.bc-a11y-touch-targets .btn-sm,
html.bc-a11y-touch-targets .btn-nav-menu,
html.bc-a11y-touch-targets .nav-sidebar-close,
html.bc-a11y-touch-targets .social-icon,
html.bc-a11y-touch-targets .pagination .page-link,
html.bc-a11y-touch-targets .nav-link,
html.bc-a11y-touch-targets .dropdown-item {
    min-height: 44px;
    min-width: 44px;
}

html.bc-a11y-touch-targets .btn-sm {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

html.bc-a11y-touch-targets .btn-close {
    width: 44px;
    height: 44px;
    padding: 0.75rem;
    box-sizing: border-box;
    background-position: center;
}

html.bc-a11y-touch-targets .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

html.bc-a11y-touch-targets .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
}

html.bc-a11y-touch-targets .form-check-label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-left: 0.35rem;
}

/* Icon-only / compact controls */
html.bc-a11y-touch-targets a.icon-link,
html.bc-a11y-touch-targets button.icon-btn,
html.bc-a11y-touch-targets [data-bc-a11y-touch="1"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Zoom / reflow (320px CSS width / ~200% zoom) --- */
html.bc-a11y-zoom-reflow {
    overflow-x: clip;
}

html.bc-a11y-zoom-reflow body,
html.bc-a11y-zoom-reflow .site-content,
html.bc-a11y-zoom-reflow .content-wrapper,
html.bc-a11y-zoom-reflow .container,
html.bc-a11y-zoom-reflow .container-fluid {
    max-width: 100%;
}

html.bc-a11y-zoom-reflow img,
html.bc-a11y-zoom-reflow video,
html.bc-a11y-zoom-reflow canvas,
html.bc-a11y-zoom-reflow svg {
    max-width: 100%;
    height: auto;
}

html.bc-a11y-zoom-reflow pre,
html.bc-a11y-zoom-reflow code,
html.bc-a11y-zoom-reflow .table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

html.bc-a11y-zoom-reflow table {
    max-width: 100%;
}

@media (max-width: 400px) {
    html.bc-a11y-zoom-reflow .row > [class*="col-"] {
        min-width: 0;
    }

    html.bc-a11y-zoom-reflow .btn-group {
        flex-wrap: wrap;
    }

    html.bc-a11y-zoom-reflow .d-flex.gap-2,
    html.bc-a11y-zoom-reflow .d-flex.gap-3 {
        flex-wrap: wrap;
    }
}

/* Prefer readable wrapping at high zoom */
@media (min-resolution: 2dppx) {
    html.bc-a11y-zoom-reflow .content-card,
    html.bc-a11y-zoom-reflow .festive-card {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}