/**
 * DasSchmecktuns.de – Barrierefreiheit (A11y) Ergänzungen
 * Wird NACH style.css geladen.
 *
 * Inhalt:
 *  1. Skip-Link
 *  2. Focus-Visible Styles
 *  3. prefers-reduced-motion
 *  4. Farbkontrast-Korrekturen
 *  5. Screen-Reader Utilities
 *  6. Flash-Message Live-Region
 */

/* ========================================
   1. SKIP-LINK
   ======================================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    z-index: 10000;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-bg-dark, #2D2A3E);
    color: #fff;
    font-weight: 700;
    font-size: var(--font-size-base);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-decoration: none;
    transition: top 0.15s ease;
}

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


/* ========================================
   2. FOCUS-VISIBLE STYLES
   Sichtbarer Focus-Ring für Tastaturnutzer,
   unterdrückt bei Maus-/Touch-Klick.
   ======================================== */

/* Globaler Focus-Ring */
:focus-visible {
    outline: 3px solid var(--color-accent-dark, #359588);
    outline-offset: 2px;
}

/* Links & Buttons im Header (auf dunklem Hintergrund) */
.header__nav-link:focus-visible,
.header__nav-dd-toggle:focus-visible,
.header__burger:focus-visible,
.header__user-btn:focus-visible,
.header .btn:focus-visible {
    outline-color: #fff;
    outline-offset: 4px;
}

/* Navigation Dropdown-Items */
.header__nav-dd-item:focus-visible {
    outline-color: var(--color-accent-dark, #359588);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

/* Buttons */
.btn:focus-visible {
    outline: 3px solid var(--color-accent-dark, #359588);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(53, 149, 136, 0.2);
}

/* Formularfelder – Box-Shadow beibehalten, aber outline NICHT entfernen */
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
    outline: 3px solid var(--color-accent-dark, #359588);
    outline-offset: -1px;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(232, 168, 124, 0.2);
}

/* Recipe Card */
.recipe-card:focus-visible {
    outline: 3px solid var(--color-accent-dark, #359588);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}

/* Recipe Card Favorite Button */
.recipe-card__favorite:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Mobile Bottom Navigation */
.mobile-nav-item:focus-visible {
    outline: 3px solid var(--color-accent-dark, #359588);
    outline-offset: -2px;
}

/* Mobile Menu Links */
.mobile-menu__link:focus-visible,
.mobile-menu__dd-link:focus-visible,
.mobile-menu__dd-toggle:focus-visible,
.mobile-menu__close:focus-visible {
    outline: 3px solid var(--color-accent-dark, #359588);
    outline-offset: -2px;
}

/* Footer Links */
.footer a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Header User-Dropdown Items */
.header__dropdown-item:focus-visible {
    outline: 2px solid var(--color-accent-dark, #359588);
    outline-offset: -2px;
}

/* Pagination */
.tips-pagination__btn:focus-visible,
.pagination a:focus-visible,
.pagination span:focus-visible {
    outline: 3px solid var(--color-accent-dark, #359588);
    outline-offset: 2px;
}


/* ========================================
   3. PREFERS-REDUCED-MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .mobile-menu {
        transition: none !important;
    }

    .mobile-menu-overlay {
        transition: none !important;
    }

    .header__nav-dd-menu {
        transition: none !important;
    }

    .header__nav-caret {
        transition: none !important;
    }
}


/* ========================================
   4. FARBKONTRAST-KORREKTUREN
   Primär-, Sekundär- und Akzentfarben werden
   abgedunkelt, damit Weiß-auf-Farbe WCAG AA
   erreicht (mind. 4.5:1 Kontrast).
   ======================================== */

:root {
    /* Accessible Farb-Varianten (für Text & Buttons mit weißer Schrift) */
    --color-primary-accessible: #B87B50;       /* 4.55:1 auf Weiß */
    --color-secondary-accessible: #8E5C6D;     /* 4.93:1 auf Weiß */
    --color-accent-accessible: #2D7D71;         /* 4.78:1 auf Weiß */
    --color-text-muted-accessible: #717171;     /* 4.72:1 auf Weiß */
}

/* Primäre Buttons: dunklere Hintergrundfarbe */
.btn--primary {
    background: var(--color-primary-accessible);
}
.btn--primary:hover {
    background: #9A6843;
}

/* Sekundäre Buttons */
.btn--secondary {
    background: var(--color-secondary-accessible);
}

/* Gedämpfter Text: dunkler für besseren Kontrast */
.recipe-card__author,
.recipe-card__stat,
.footer__tagline,
.header__dropdown-header span {
    color: var(--color-text-muted-accessible, #717171);
}

/* Links im Fließtext: kein globales Underline – wird ggf. pro View gesetzt */


/* ========================================
   5. SCREEN-READER UTILITIES
   ======================================== */

/* Visuell versteckt, aber für Screenreader sichtbar */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* sr-only, aber bei Focus sichtbar (z.B. Skip-Link) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: inherit !important;
}


/* ========================================
   6. FLASH-MESSAGE LIVE-REGION
   Unterstützt role="alert" / aria-live
   ======================================== */
.flash-container[role="status"],
.flash-container[aria-live] {
    /* Keine visuellen Änderungen – nur semantisch markiert */
}


/* ========================================
   7. HIGH-CONTRAST MODUS
   Für Windows High Contrast und
   prefers-contrast: more
   ======================================== */
@media (prefers-contrast: more) {
    :root {
        --color-primary: #9E6535;
        --color-primary-dark: #7A4F2A;
        --color-secondary: #7A4A5C;
        --color-accent: #1A6B5E;
        --color-text-light: #555555;
        --color-text-muted: #555555;
    }

    .btn--primary,
    .btn--secondary {
        border: 2px solid currentColor;
    }

    .recipe-card {
        border: 2px solid var(--color-text);
    }
}


/* Zusätzliche sichere Fokus-Ringe für späte Einzel-Fixes */
.p-icon-btn:focus-visible,
.pm-action-btn:focus-visible,
.modal__close:focus-visible,
.p-section__head:focus-visible,
.mobile-menu__dd-toggle:focus-visible {
    outline: 3px solid var(--color-accent-dark, #359588);
    outline-offset: 2px;
}