/**
 * Kommunale Exzellenz Suite - Accessibility Styles
 * =================================================
 * WCAG 2.1 compliant accessibility features
 * Created: January 2026
 */

/* =================================================================
   SKIP TO CONTENT LINK (WCAG 2.4.1)
   ================================================================= */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 1rem 1.5rem;
    background: var(--primary-color, #003D83);
    color: white;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--accent-color, #FFD700);
    outline-offset: 2px;
}

/* =================================================================
   FONT SIZE SCALING (Content only - keeps navigation consistent)
   ================================================================= */

/* Extra Small font size - 12px base */
[data-font-size="extra-small"] .main-content {
    font-size: 0.75rem;
}

[data-font-size="extra-small"] .main-content h1 {
    font-size: 1.5rem;
}

[data-font-size="extra-small"] .main-content h2 {
    font-size: 1.25rem;
}

[data-font-size="extra-small"] .main-content h3 {
    font-size: 1rem;
}

[data-font-size="extra-small"] .main-content p,
[data-font-size="extra-small"] .main-content li,
[data-font-size="extra-small"] .main-content td,
[data-font-size="extra-small"] .main-content th,
[data-font-size="extra-small"] .main-content label,
[data-font-size="extra-small"] .main-content span,
[data-font-size="extra-small"] .main-content div,
[data-font-size="extra-small"] .main-content small {
    font-size: inherit !important;
}

[data-font-size="extra-small"] .main-content .info-value,
[data-font-size="extra-small"] .main-content .info-label {
    font-size: 0.75rem;
}

[data-font-size="extra-small"] .main-content input,
[data-font-size="extra-small"] .main-content select,
[data-font-size="extra-small"] .main-content textarea,
[data-font-size="extra-small"] .main-content button {
    font-size: 0.8125rem;
}

/* Small font size - 14px base */
[data-font-size="small"] .main-content {
    font-size: 0.875rem;
}

[data-font-size="small"] .main-content h1 {
    font-size: 1.75rem;
}

[data-font-size="small"] .main-content h2 {
    font-size: 1.375rem;
}

[data-font-size="small"] .main-content h3 {
    font-size: 1.125rem;
}

[data-font-size="small"] .main-content p,
[data-font-size="small"] .main-content li,
[data-font-size="small"] .main-content td,
[data-font-size="small"] .main-content th,
[data-font-size="small"] .main-content label,
[data-font-size="small"] .main-content span,
[data-font-size="small"] .main-content div,
[data-font-size="small"] .main-content small {
    font-size: inherit !important;
}

[data-font-size="small"] .main-content .info-value,
[data-font-size="small"] .main-content .info-label {
    font-size: 0.875rem;
}

[data-font-size="small"] .main-content input,
[data-font-size="small"] .main-content select,
[data-font-size="small"] .main-content textarea,
[data-font-size="small"] .main-content button {
    font-size: 0.9375rem;
}

/* Large font size - 18px base */
[data-font-size="large"] .main-content {
    font-size: 1.125rem;
}

[data-font-size="large"] .main-content h1 {
    font-size: 2rem;
}

[data-font-size="large"] .main-content h2 {
    font-size: 1.625rem;
}

[data-font-size="large"] .main-content h3 {
    font-size: 1.375rem;
}

[data-font-size="large"] .main-content p,
[data-font-size="large"] .main-content li,
[data-font-size="large"] .main-content td,
[data-font-size="large"] .main-content th,
[data-font-size="large"] .main-content label,
[data-font-size="large"] .main-content span,
[data-font-size="large"] .main-content div,
[data-font-size="large"] .main-content small {
    font-size: inherit !important;
}

[data-font-size="large"] .main-content .info-value,
[data-font-size="large"] .main-content .info-label {
    font-size: 1rem;
}

[data-font-size="large"] .main-content input,
[data-font-size="large"] .main-content select,
[data-font-size="large"] .main-content textarea,
[data-font-size="large"] .main-content button {
    font-size: 1.0625rem;
}

/* Extra Large font size - 20px base */
[data-font-size="extra-large"] .main-content {
    font-size: 1.25rem;
}

[data-font-size="extra-large"] .main-content h1 {
    font-size: 2.25rem;
}

[data-font-size="extra-large"] .main-content h2 {
    font-size: 1.875rem;
}

[data-font-size="extra-large"] .main-content h3 {
    font-size: 1.5rem;
}

[data-font-size="extra-large"] .main-content p,
[data-font-size="extra-large"] .main-content li,
[data-font-size="extra-large"] .main-content td,
[data-font-size="extra-large"] .main-content th,
[data-font-size="extra-large"] .main-content label,
[data-font-size="extra-large"] .main-content span,
[data-font-size="extra-large"] .main-content div,
[data-font-size="extra-large"] .main-content small {
    font-size: inherit !important;
}

[data-font-size="extra-large"] .main-content .info-value,
[data-font-size="extra-large"] .main-content .info-label {
    font-size: 1.125rem;
}

[data-font-size="extra-large"] .main-content input,
[data-font-size="extra-large"] .main-content select,
[data-font-size="extra-large"] .main-content textarea,
[data-font-size="extra-large"] .main-content button {
    font-size: 1.125rem;
}

/* =================================================================
   SIDEBAR NAV SCALING (Bug #6)
   The font-size levels above are all scoped to .main-content, but the
   sidebar nav (<aside class="sidebar">) is a sibling of <main>, so it
   never scaled. Mirror the scale here for .nav-text (top-level items)
   and .nav-subitem (submenu links). Scaled a touch more gently than the
   body — .nav-text is white-space:nowrap in a fixed-width sidebar, so
   the ends are compressed (xs 0.8125 / xl 1.125rem) to avoid overflow.
   No !important: accessibility.css loads after basis.css and nothing in
   the default theme sets font-size on these selectors directly. (Brand
   themes that pin nav font-size with !important keep their locked nav
   typography by design.) Applies to both the desktop persistent sidebar
   and the <900px hamburger drawer — same .sidebar element.
   ================================================================= */
[data-font-size="extra-small"] .sidebar .nav-text {
    font-size: 0.8125rem;
}
[data-font-size="extra-small"] .sidebar .nav-subitem {
    font-size: 0.75rem;
}

[data-font-size="small"] .sidebar .nav-text {
    font-size: 0.875rem;
}
[data-font-size="small"] .sidebar .nav-subitem {
    font-size: 0.8125rem;
}

[data-font-size="large"] .sidebar .nav-text {
    font-size: 1.0625rem;
}
[data-font-size="large"] .sidebar .nav-subitem {
    font-size: 0.9375rem;
}

[data-font-size="extra-large"] .sidebar .nav-text {
    font-size: 1.125rem;
}
[data-font-size="extra-large"] .sidebar .nav-subitem {
    font-size: 1rem;
}

/* =================================================================
   REDUCE MOTION (WCAG 2.3.3)
   ================================================================= */

/* User explicitly enabled reduce motion */
[data-reduce-motion="true"] *,
[data-reduce-motion="true"] *::before,
[data-reduce-motion="true"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Respect OS preference when user hasn't overridden (auto mode) */
@media (prefers-reduced-motion: reduce) {
    [data-reduce-motion="auto"] *,
    [data-reduce-motion="auto"] *::before,
    [data-reduce-motion="auto"] *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =================================================================
   ENHANCED KEYBOARD NAVIGATION (WCAG 2.4.7)
   ================================================================= */

/* Enhanced focus indicators for keyboard users */
[data-keyboard-nav="true"] :focus {
    outline: 3px solid var(--primary-color, #003D83) !important;
    outline-offset: 2px !important;
}

/* Only show enhanced focus for keyboard navigation (not mouse clicks) */
[data-keyboard-nav="true"] :focus:not(:focus-visible) {
    outline: none !important;
}

[data-keyboard-nav="true"] :focus-visible {
    outline: 3px solid var(--primary-color, #003D83) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(0, 61, 131, 0.2) !important;
}

/* High visibility focus for form elements */
[data-keyboard-nav="true"] input:focus-visible,
[data-keyboard-nav="true"] select:focus-visible,
[data-keyboard-nav="true"] textarea:focus-visible {
    border-color: var(--primary-color, #003D83) !important;
    box-shadow: 0 0 0 3px rgba(0, 61, 131, 0.3) !important;
}

/* Focus indicators for buttons */
[data-keyboard-nav="true"] button:focus-visible,
[data-keyboard-nav="true"] [role="button"]:focus-visible,
[data-keyboard-nav="true"] .btn:focus-visible {
    outline: 3px solid var(--primary-color, #003D83) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(0, 61, 131, 0.2) !important;
}

/* Focus indicators for links */
[data-keyboard-nav="true"] a:focus-visible {
    outline: 3px solid var(--primary-color, #003D83) !important;
    outline-offset: 2px !important;
    text-decoration: underline !important;
}

/* =================================================================
   SCREEN READER OPTIMIZATION
   ================================================================= */

/* Show additional descriptive elements when screen reader mode is active */
[data-screen-reader="true"] .sr-verbose {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
}

/* Ensure screen reader only text is properly hidden when not in SR mode */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Make sr-only text available when screen reader mode is enabled */
[data-screen-reader="true"] .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Enhanced ARIA live region visibility */
[data-screen-reader="true"] [aria-live] {
    position: relative;
}

/* Better landmark visibility for debugging (hidden by default) */
[data-screen-reader="true"] [role="main"]::before,
[data-screen-reader="true"] [role="navigation"]::before,
[data-screen-reader="true"] [role="complementary"]::before {
    /* Content added for debugging if needed */
}

/* =================================================================
   HIGH CONTRAST SUPPORT (automatic for system preference)
   ================================================================= */

@media (prefers-contrast: more) {
    :root {
        --border-gray: #000000;
    }

    /* Increase border visibility */
    input,
    select,
    textarea,
    button,
    .profile-card,
    .theme-option,
    .language-option,
    .counter-option {
        border-width: 2px !important;
    }
}

/* =================================================================
   MAIN CONTENT ID FOR SKIP LINK
   ================================================================= */
#main-content {
    scroll-margin-top: 80px;
}

/* =================================================================
   FORM ACCESSIBILITY ENHANCEMENTS
   ================================================================= */

/* Ensure labels are associated with inputs visually */
label {
    cursor: pointer;
}

/* Required field indicator */
.required::after {
    content: " *";
    color: var(--color-danger, #dc3545);
}

/* Error state for form fields */
.field-error {
    border-color: var(--color-danger, #dc3545) !important;
}

.field-error-message {
    color: var(--color-danger, #dc3545);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}