/**
 * DAUK Accessibility Styles
 *
 * High Contrast Mode, Font Size Scaling, and Reduced Motion preferences
 * @package DAUK
 */

/* ==========================================================================
   CSS Custom Properties for Accessibility
   ========================================================================== */

:root {
    /* Font scale factor - modified by JavaScript */
    --a11y-font-scale: 1;
}

/* ==========================================================================
   Universal Focus Indicators
   ========================================================================== */

/* Universal focus indicator for all interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
[role="button"]:focus,
[role="tab"]:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Enhanced in high contrast mode */
.dauk-high-contrast *:focus {
    outline-width: 3px;
    outline-offset: 3px;
}

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

.dauk-high-contrast {
    /* Override primary colors for better contrast */
    --color-primary: #003d38;
    --color-primary-dark: #001f1c;
    --color-primary-light: #005a52;
    --color-secondary: #002926;
    --color-accent: #004d47;

    /* Maximum contrast text */
    --color-gray-900: #000000;
    --color-gray-800: #0a0a0a;
    --color-gray-700: #1a1a1a;
    --color-gray-600: #2a2a2a;
    --color-gray-500: #3a3a3a;

    /* High contrast backgrounds */
    --color-gray-50: #ffffff;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
}

/* Links must be underlined in high contrast mode */
.dauk-high-contrast a:not(.btn):not(.site-logo):not(.footer-social a) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dauk-high-contrast a:hover:not(.btn):not(.site-logo) {
    text-decoration-thickness: 2px;
}

/* Stronger button borders */
.dauk-high-contrast .btn {
    border: 3px solid currentColor;
}

.dauk-high-contrast .btn--primary {
    border-color: var(--color-primary-dark);
}

.dauk-high-contrast .btn--secondary {
    border-color: var(--color-gray-700);
}

/* More visible input borders */
.dauk-high-contrast input,
.dauk-high-contrast select,
.dauk-high-contrast textarea {
    border-width: 2px;
    border-color: var(--color-gray-700);
}

.dauk-high-contrast input:focus,
.dauk-high-contrast select:focus,
.dauk-high-contrast textarea:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary-dark);
}

/* Stronger focus outlines globally */
.dauk-high-contrast *:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Card borders more visible */
.dauk-high-contrast .card,
.dauk-high-contrast .profile-card,
.dauk-high-contrast .membership-card,
.dauk-high-contrast .event-card,
.dauk-high-contrast .resource-card {
    border: 2px solid var(--color-gray-300);
}

/* Navigation link focus */
.dauk-high-contrast .primary-menu a:focus,
.dauk-high-contrast .mobile-menu a:focus {
    background-color: var(--color-primary);
    color: var(--color-white);
    outline: none;
}

/* Hero text must be fully opaque */
.dauk-high-contrast .hero__content {
    background: rgba(0, 0, 0, 0.85);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
}

/* Status badges */
.dauk-high-contrast .badge,
.dauk-high-contrast .category-badge {
    border: 2px solid currentColor;
}

/* Footer navigation links */
.dauk-high-contrast .footer-nav a,
.dauk-high-contrast .footer-menu a {
    color: var(--color-white);
    font-weight: 600;
}

/* Newsletter cards */
.dauk-high-contrast .newsletter-card {
    border: 2px solid var(--color-gray-300);
}

/* Poll options */
.dauk-high-contrast .poll-option {
    border: 2px solid var(--color-gray-700);
}

.dauk-high-contrast .poll-option:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.dauk-high-contrast .poll-option label {
    font-weight: 600;
}

/* Tables */
.dauk-high-contrast table {
    border: 2px solid var(--color-gray-700);
}

.dauk-high-contrast th,
.dauk-high-contrast td {
    border: 2px solid var(--color-gray-400);
}

.dauk-high-contrast thead th {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    font-weight: 700;
}

/* Alert/message boxes */
.dauk-high-contrast .alert,
.dauk-high-contrast .message,
.dauk-high-contrast .notice {
    border: 3px solid currentColor;
}

.dauk-high-contrast .poll-feedback {
    border: 3px solid currentColor;
    font-weight: 600;
}

/* Carousel dots */
.dauk-high-contrast .carousel-dot {
    border: 2px solid var(--color-gray-700);
}

.dauk-high-contrast .carousel-dot.active {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* ==========================================================================
   Font Size Scaling
   ========================================================================== */

/* Large fonts (12.5% increase) */
.dauk-font-large {
    --a11y-font-scale: 1.125;
}

/* Larger fonts (25% increase) */
.dauk-font-larger {
    --a11y-font-scale: 1.25;
}

/* Apply scaling to base font sizes */
.dauk-font-large,
.dauk-font-larger {
    --text-xs: calc(0.75rem * var(--a11y-font-scale));
    --text-sm: calc(0.875rem * var(--a11y-font-scale));
    --text-base: calc(1rem * var(--a11y-font-scale));
    --text-lg: calc(1.125rem * var(--a11y-font-scale));
    --text-xl: calc(1.25rem * var(--a11y-font-scale));
    --text-2xl: calc(1.5rem * var(--a11y-font-scale));
    --text-3xl: calc(1.875rem * var(--a11y-font-scale));
    --text-4xl: calc(2.25rem * var(--a11y-font-scale));
    --text-5xl: calc(3rem * var(--a11y-font-scale));
}

/* Scale base font-size on body for elements not using CSS vars */
.dauk-font-large body,
.dauk-font-large {
    font-size: calc(1rem * 1.125);
}

.dauk-font-larger body,
.dauk-font-larger {
    font-size: calc(1rem * 1.25);
}

/* Improve line-height for larger fonts */
.dauk-font-large,
.dauk-font-larger {
    --line-height-base: 1.8; /* Increase from 1.6 */
}

.dauk-font-large * {
    line-height: 1.8;
}

.dauk-font-larger * {
    line-height: 1.8;
}

/* Ensure form inputs scale */
.dauk-font-large input,
.dauk-font-large select,
.dauk-font-large textarea,
.dauk-font-large button {
    font-size: calc(1rem * 1.125);
}

.dauk-font-larger input,
.dauk-font-larger select,
.dauk-font-larger textarea,
.dauk-font-larger button {
    font-size: calc(1rem * 1.25);
}

/* Scale icons proportionally — scoped to decorative/icon SVGs only */
.dauk-font-large .dashicons,
.dauk-font-large .a11y-widget svg,
.dauk-font-large .footer-social svg {
    transform: scale(1.125);
}

.dauk-font-larger .dashicons,
.dauk-font-larger .a11y-widget svg,
.dauk-font-larger .footer-social svg {
    transform: scale(1.25);
}

/* Scale button padding proportionally */
.dauk-font-large .btn {
    padding: calc(var(--space-3) * 1.125) calc(var(--space-5) * 1.125);
}

.dauk-font-larger .btn {
    padding: calc(var(--space-3) * 1.25) calc(var(--space-5) * 1.25);
}

/* Prevent text overflow in containers */
.dauk-font-large .card__title,
.dauk-font-large .section__title,
.dauk-font-larger .card__title,
.dauk-font-larger .section__title {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

.dauk-reduced-motion,
.dauk-reduced-motion * {
    /* Disable all animations */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;

    /* Disable all transitions */
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
}

/* Disable smooth scrolling */
.dauk-reduced-motion html {
    scroll-behavior: auto !important;
}

/* Mobile menu - instant open/close */
.dauk-reduced-motion .mobile-menu {
    transition: none !important;
}

.dauk-reduced-motion .mobile-menu.is-open {
    transform: none;
}

/* Header scroll behavior - instant */
.dauk-reduced-motion .site-header {
    transition: none !important;
}

/* Card hover effects - disable lift */
.dauk-reduced-motion .card:hover,
.dauk-reduced-motion .event-card:hover,
.dauk-reduced-motion .resource-card:hover,
.dauk-reduced-motion .membership-card:hover {
    transform: none !important;
}

/* Image zoom on hover - disable */
.dauk-reduced-motion .card__image img:hover,
.dauk-reduced-motion .news-card__image img:hover {
    transform: none !important;
}

/* Button hover effects - instant color change only */
.dauk-reduced-motion .btn:hover {
    transform: none !important;
}

/* Disable loading spinner animation */
.dauk-reduced-motion .btn-loader,
.dauk-reduced-motion .spinner,
.dauk-reduced-motion .loading-spinner {
    animation: none !important;
}

/* Auth tab fadeIn - instant */
.dauk-reduced-motion .auth-pane.active {
    animation: none !important;
    opacity: 1;
}

/* Navigation underline animation - instant */
.dauk-reduced-motion .primary-menu a::after {
    transition: none !important;
}

/* Hamburger menu animation - instant */
.dauk-reduced-motion .menu-toggle span {
    transition: none !important;
}

/* Poll widget fade out - instant */
.dauk-reduced-motion #dauk-poll-widget {
    transition: none !important;
}

/* Smooth scroll override */
.dauk-reduced-motion,
.dauk-reduced-motion * {
    scroll-behavior: auto !important;
}

/* Modal/Dialog animations */
.dauk-reduced-motion .modal,
.dauk-reduced-motion .overlay,
.dauk-reduced-motion .dropdown {
    transition: none !important;
    animation: none !important;
}

/* Carousel transitions */
.dauk-reduced-motion .carousel-viewport,
.dauk-reduced-motion .carousel-slide {
    transition: none !important;
}

/* Poll widget submit fade-out */
.dauk-reduced-motion #dauk-poll-widget {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================================================================
   Native OS High Contrast Preference
   ========================================================================== */

@media (prefers-contrast: more) {
    :root {
        --color-primary: #003d38;
        --color-primary-dark: #001f1c;
        --color-primary-light: #005a52;
        --color-secondary: #002926;
        --color-accent: #004d47;
        --color-gray-900: #000000;
        --color-gray-800: #0a0a0a;
        --color-gray-700: #1a1a1a;
        --color-gray-600: #2a2a2a;
        --color-gray-500: #3a3a3a;
        --color-gray-50: #ffffff;
        --color-gray-100: #f5f5f5;
        --color-gray-200: #e5e5e5;
    }

    a:not(.btn):not(.site-logo) {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .btn {
        border: 3px solid currentColor;
    }

    input, select, textarea {
        border-width: 2px;
        border-color: var(--color-gray-700);
    }

    *:focus {
        outline-width: 3px;
        outline-offset: 3px;
    }
}

/* ==========================================================================
   Accessibility Widget (Public)
   ========================================================================== */

.a11y-widget {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 9999;
    font-family: var(--font-sans);
}

.a11y-widget__toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.a11y-widget__toggle:hover {
    background: var(--color-primary-dark);
    transform: scale(1.05);
}

.a11y-widget__toggle:focus {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

.a11y-widget__toggle svg {
    width: 24px;
    height: 24px;
}

/* Widget Panel */
.a11y-widget__panel {
    position: absolute;
    bottom: calc(100% + var(--space-3));
    right: 0;
    width: 280px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-200);
    padding: var(--space-5);
    display: none;
}

.a11y-widget__panel.is-open {
    display: block;
}

.a11y-widget__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.a11y-widget__panel-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-gray-900);
    margin: 0;
}

.a11y-widget__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    color: var(--color-gray-500);
    border-radius: var(--radius-sm);
}

.a11y-widget__close:hover {
    color: var(--color-gray-900);
    background: var(--color-gray-100);
}

.a11y-widget__close:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Widget Options */
.a11y-widget__option {
    margin-bottom: var(--space-4);
}

.a11y-widget__option:last-child {
    margin-bottom: 0;
}

.a11y-widget__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.a11y-widget__label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.a11y-widget__option-title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
}

/* Font Size Buttons */
.a11y-widget__font-sizes {
    display: flex;
    gap: var(--space-2);
}

.a11y-widget__font-btn {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--color-gray-700);
    transition: all var(--transition-fast);
}

.a11y-widget__font-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.a11y-widget__font-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.a11y-widget__font-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.a11y-widget__font-btn--normal {
    font-size: var(--text-sm);
}

.a11y-widget__font-btn--large {
    font-size: var(--text-base);
}

.a11y-widget__font-btn--larger {
    font-size: var(--text-lg);
}

/* Reset Button */
.a11y-widget__reset {
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.a11y-widget__reset:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-900);
}

.a11y-widget__reset:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Mobile adjustments for widget */
@media (max-width: 640px) {
    .a11y-widget {
        bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
        right: var(--space-4);
    }

    .a11y-widget__panel {
        width: calc(100vw - var(--space-8));
        max-width: 320px;
        right: calc(-1 * var(--space-4));
    }

    .a11y-widget__toggle {
        width: 48px;
        height: 48px;
    }

    .a11y-widget__toggle svg {
        width: 22px;
        height: 22px;
    }
}

/* Extra small screens - center the widget */
@media (max-width: 400px) {
    .a11y-widget {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    }

    .a11y-widget__panel {
        max-width: 280px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

/* Ensure widget stays above mobile keyboards */
@media (max-width: 640px) {
    body.keyboard-open .a11y-widget {
        bottom: calc(var(--space-20) + env(safe-area-inset-bottom));
    }
}

/* High contrast overrides for the widget itself */
.dauk-high-contrast .a11y-widget__panel {
    border-width: 2px;
    border-color: var(--color-gray-700);
}

.dauk-high-contrast .a11y-widget__toggle {
    border: 3px solid var(--color-primary-dark);
}

/* Reduced motion for widget */
.dauk-reduced-motion .a11y-widget__toggle:hover {
    transform: none;
}

.dauk-reduced-motion .a11y-widget__panel {
    transition: none;
}

/* ==========================================================================
   Visual Indicators for Active Modes
   ========================================================================== */

/* Badge showing active mode on the toggle button */
.dauk-high-contrast .a11y-widget__toggle::after,
.dauk-font-large .a11y-widget__toggle::after,
.dauk-font-larger .a11y-widget__toggle::after,
.dauk-reduced-motion .a11y-widget__toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: var(--color-success);
    border-radius: 50%;
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 1px var(--color-primary);
}

/* Ensure badge stays visible in high contrast */
.dauk-high-contrast .a11y-widget__toggle::after {
    background: #10b981;
    border-color: var(--color-white);
}