/**
 * Accessibility Enhancements for Trusted Advisors Realty AG
 * WCAG 2.1 AA+ Compliance
 *
 * Features:
 * - prefers-reduced-motion (WCAG 2.3.3)
 * - prefers-color-scheme: dark
 * - Enhanced focus indicators
 * - High contrast mode support
 */

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

/*
 * Users with vestibular disorders can experience nausea, dizziness,
 * and discomfort from animations. Respect their preference.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto !important;
    }

    /* Disable parallax effects */
    [data-scroll] {
        transform: none !important;
    }

    /* Remove scroll-triggered animations */
    .is-inview {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable hover animations */
    .btn,
    .service-card,
    .team-member {
        transition: none !important;
        transform: none !important;
    }

    /* Keep functional transforms (like dropdown menus) */
    .tar-navigation__menu.active {
        display: block;
        animation: none;
    }
}

/* ===== DARK MODE (prefers-color-scheme) ===== */

/*
 * Automatic dark mode for users who prefer it.
 * Maintains Swiss luxury aesthetic with muted tones.
 */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode color palette - Newsletter-aligned */
        --tar-dark-bg: #1a1918; /* Deep Graphite - warmer */
        --tar-dark-surface: #2a2826; /* Warm Graphite */
        --tar-dark-elevated: #3d3937; /* Modern Graphite */
        --tar-dark-text: #f7f5f2; /* Swiss Cream - warmer white */
        --tar-dark-text-secondary: #c5b8af; /* Light Trust */
        --tar-dark-accent: #8b6e5e; /* Lighter Brown +15% for contrast */
        --tar-dark-accent-light: #d4af8e; /* For badges */
        --tar-dark-border: rgb(212 175 142 / 15%); /* Subtle */
    }

    /* Base elements */
    body {
        background-color: var(--tar-dark-bg);
        color: var(--tar-dark-text);
    }

    /* Navigation */
    .tar-navigation {
        background-color: rgb(26 22 18 / 95%);
        border-bottom-color: var(--tar-dark-border);
    }

    .tar-navigation__link {
        color: var(--tar-dark-text);
    }

    .tar-navigation__link:hover,
    .tar-navigation__link.active {
        color: var(--tar-dark-accent-light);
    }

    /* Sections */
    section {
        background-color: var(--tar-dark-bg);
    }

    .philosophy,
    .services,
    .team {
        background-color: var(--tar-dark-surface);
    }

    /* Cards */
    .service-card,
    .team-member {
        background-color: var(--tar-dark-elevated);
        border-color: var(--tar-dark-border);
        color: var(--tar-dark-text);
    }

    .service-card:hover,
    .team-member:hover {
        background-color: var(--tar-dark-surface);
        border-color: var(--tar-dark-accent);
    }

    /* Buttons */
    .btn-primary {
        background-color: var(--tar-dark-accent);
        color: var(--tar-dark-text);
        border-color: var(--tar-dark-accent);
    }

    .btn-primary:hover {
        background-color: var(--tar-dark-accent-light);
    }

    .btn-secondary {
        background-color: transparent;
        color: var(--tar-dark-text);
        border-color: var(--tar-dark-accent);
    }

    .btn-secondary:hover {
        background-color: var(--tar-dark-accent);
    }

    /* Text colors */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--tar-dark-text);
    }

    p,
    li {
        color: var(--tar-dark-text-secondary);
    }

    /* Forms */
    input,
    textarea,
    select {
        background-color: var(--tar-dark-elevated);
        color: var(--tar-dark-text);
        border-color: var(--tar-dark-border);
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--tar-dark-accent);
        background-color: var(--tar-dark-surface);
    }

    /* Links */
    a {
        color: var(--tar-dark-accent-light);
    }

    a:hover {
        color: var(--tar-dark-accent);
    }

    /* Hero section adjustments */
    .hero {
        background-color: var(--tar-dark-surface);
    }

    /* Logo - Invert colors for dark mode */
    .tar-navigation__logo,
    .footer-logo-icon {
        filter: brightness(0) invert(1);
    }

    /* Images - dimmed for dark mode harmony (Newsletter-aligned) */
    img:not(.tar-navigation__logo, [data-no-dim]) {
        opacity: 0.9;
        filter: brightness(0.95);
    }

    img:not(.tar-navigation__logo, [data-no-dim]):hover {
        opacity: 1;
        filter: brightness(1);
    }

    /* Modal */
    .modal-content {
        background-color: var(--tar-dark-elevated);
        border-color: var(--tar-dark-border);
    }

    /* Footer */
    footer {
        background-color: var(--tar-dark-surface);
        border-top-color: var(--tar-dark-border);
    }

    /* SVG icons - adjust fill/stroke for dark mode - specific selectors only */
    .tar-icon svg,
    .tar-card__icon svg,
    .pillar-icon svg,
    .v1-pillar-icon svg {
        stroke: var(--tar-dark-text-secondary);
    }

    .footer-social-icon svg,
    .team-contact-link svg {
        fill: var(--tar-dark-text-secondary);
    }

    /* Scroll-to-top button */
    .scroll-to-top {
        background-color: var(--tar-dark-accent) !important;
    }

    /* Newsletter-aligned Badge & Button Dark Mode */
    .tar-badge,
    .hero-badge,
    .philosophy-hero__badge {
        color: var(--tar-dark-accent-light) !important;
        border-color: var(--tar-dark-accent-light);
    }

    .btn-secondary {
        color: var(--tar-dark-accent-light);
        border-bottom-color: var(--tar-dark-accent-light);
    }

    /* Dark Mode Fine-Tuning: Shadows & Depth */
    .service-card,
    .team-member,
    .team-card,
    .pillar-card,
    .location-card,
    .service-detail-card {
        box-shadow: 0 8px 32px rgb(0 0 0 / 40%) !important;
    }

    .service-card:hover,
    .team-member:hover,
    .team-card:hover,
    .pillar-card:hover,
    .location-card:hover,
    .service-detail-card:hover {
        box-shadow: 0 12px 40px rgb(0 0 0 / 50%) !important;
    }

    /* Dividers & Borders */
    hr,
    .divider,
    .tar-divider {
        opacity: 0.3;
        border-color: var(--tar-dark-border);
    }

    /* Subtle borders for sections */
    section {
        border-top: 1px solid rgb(212 175 142 / 10%);
    }

    /* Mobile-optimized Dark Mode Shadows - Reduced intensity for OLED displays */
    @media (width <= 768px) {
        .service-card,
        .team-member,
        .team-card,
        .pillar-card,
        .location-card,
        .service-detail-card {
            box-shadow: 0 6px 24px rgb(0 0 0 / 30%) !important;
        }

        .service-card:hover,
        .team-member:hover,
        .team-card:hover,
        .pillar-card:hover,
        .location-card:hover,
        .service-detail-card:hover {
            box-shadow: 0 8px 32px rgb(0 0 0 / 40%) !important;
        }
    }
}

/* ===== ENHANCED FOCUS INDICATORS ===== */

/*
 * Visible focus indicators for keyboard navigation
 * WCAG 2.4.7 (Focus Visible) - AA
 */
*:focus {
    outline: 2px solid var(--tar-brown-80, #73574a);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--tar-brown-80, #73574a);
    outline-offset: 2px;
}

/* Button focus states */
.btn:focus-visible,
button:focus-visible {
    outline: 3px solid var(--tar-brown-80, #73574a);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgb(92 67 56 / 20%);
}

/* Link focus states */
a:focus-visible {
    outline: 2px dashed var(--tar-brown-80, #73574a);
    outline-offset: 2px;
    text-decoration: underline;
    box-shadow: 0 0 0 4px rgb(92 67 56 / 15%);
}

/* Navigation focus */
.tar-navigation__link:focus-visible {
    outline: 2px solid var(--tar-brown-80, #73574a);
    outline-offset: 4px;
    background-color: rgb(92 67 56 / 10%);
}

/* Form focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--tar-brown-80, #73574a);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgb(92 67 56 / 20%);
}

/* Dark mode focus adjustments */
@media (prefers-color-scheme: dark) {
    *:focus-visible {
        outline-color: var(--tar-dark-accent-light);
    }

    .btn:focus-visible,
    button:focus-visible {
        outline-color: var(--tar-dark-accent-light);
    }

    a:focus-visible {
        outline-color: var(--tar-dark-accent-light);
    }

    .tar-navigation__link:focus-visible {
        outline-color: var(--tar-dark-accent-light);
        background-color: rgb(141 116 99 / 20%);
    }

    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline-color: var(--tar-dark-accent-light);
    }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */

/*
 * Support for Windows High Contrast Mode
 */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }

    .btn,
    .service-card,
    .team-member {
        border: 2px solid currentcolor !important;
    }

    *:focus-visible {
        outline-width: 4px !important;
    }
}

/* ===== SKIP LINK ===== */

/*
 * Hidden skip-to-content link for keyboard users
 * WCAG 2.4.1 (Bypass Blocks) - A
 */

/* Skip Navigation Link (WCAG 2.4.1 Level A) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--tar-brown-100);
    color: var(--tar-alpine-white);
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    transition: top 0.2s ease-in-out;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--tar-graphite);
    outline-offset: 2px;
}

/* ===== SCREEN READER ONLY ===== */

/*
 * Visually hidden but accessible to screen readers
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ===== REDUCED TRANSPARENCY ===== */

/*
 * NOTE: prefers-reduced-transparency is not a standard CSS media feature
 * It is currently not supported by any browser and causes validation warnings
 *
 * Standard alternatives available:
 * - prefers-reduced-motion (for animation)
 * - prefers-contrast (for contrast)
 * - prefers-color-scheme (for dark/light mode)
 *
 * This feature may be standardized in the future. For now, commented out.
 * Reference: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency
 */

/*
@media (prefers-reduced-transparency: reduce) {
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .tar-navigation {
        background-color: rgb(255, 255, 255) !important;
    }

    @media (prefers-color-scheme: dark) {
        .tar-navigation {
            background-color: rgb(26, 22, 18) !important;
        }
    }
}
*/

/* ===== ENHANCED TOUCH TARGETS (Android 48px) ===== */

/*
 * WCAG 2.5.5 (Target Size) - AAA
 * Minimum touch target: 44x44px (iOS), 48x48px (Android Material Design)
 * Enhanced for better mobile accessibility
 */
@media (pointer: coarse) {
    /* Footer links - enhanced to 48px for Android compliance */
    .footer-link,
    .footer-nav__link,
    .tar-footer__link,
    .tar-footer a {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 16px;
        display: inline-flex;
        align-items: center;
    }

    /* Social media icons in footer */
    .footer-social-link,
    .tar-footer__social-link {
        min-height: 48px;
        min-width: 48px;
        padding: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Legal links (Impressum, Datenschutz, AGB) */
    .footer-legal__link,
    .tar-footer__legal-link {
        min-height: 48px;
        padding: 12px 8px;
    }

    /* Navigation links on mobile */
    .tar-navigation__link {
        min-height: 48px;
        padding: 12px 16px;
    }

    /* Form elements */
    input[type='text'],
    input[type='email'],
    input[type='tel'],
    input[type='number'],
    select,
    textarea {
        min-height: 48px;
    }

    /* Checkboxes and radio buttons - larger hit area */
    input[type='checkbox'],
    input[type='radio'] {
        min-width: 24px;
        min-height: 24px;
    }

    /* Checkbox/radio labels - ensure adequate spacing */
    .tar-form__checkbox label,
    .tar-form__radio label {
        min-height: 48px;
        padding: 12px 8px 12px 32px;
        display: inline-flex;
        align-items: center;
    }
}