/* Mobile Components – Store, Shopping List, Score, Typografie, Layout-Utilities.
 *
 * Wird zusammen mit mobile.css als LETZTES Stylesheet jeder Seite geladen
 * (siehe Kopfkommentar in mobile.css). Alles hier darf deshalb bewusst
 * überschreiben – im Gegenzug muss jeder Selektor eng gefasst sein.
 *
 * Bewusst NICHT (wieder) einführen:
 *   [class*="grid"] / [class*="flex"] – trafen u.a. .storemap-shelf-grid-row
 *     (5-spaltiger Regalplan) und hätten ihn mobil auf eine Spalte gezwungen.
 *   a { min-height: 44px; display: inline-flex } – zerreißt Fließtext-Links
 *     (Impressum/Datenschutz). WCAG 2.5.8 nimmt Inline-Links ausdrücklich aus;
 *     Tap-Targets werden gezielt über .nav-link & Co. gesetzt.
 */

/* ===== STORE SELECTION ===== */
@media (max-width: 768px) {
    .store-selector {
        flex-direction: column;
        gap: 12px;
    }

    #store-search-input {
        width: 100%;
    }

    #store-category-select,
    #store-radius-input {
        width: 100%;
    }
}

/* ===== SHOPPING LIST ITEMS ===== */
@media (max-width: 768px) {
    .list-item {
        padding: 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .item-details {
        width: 100%;
    }

    .item-actions {
        width: 100%;
        gap: 6px;
    }
}

/* ===== SCORE DISPLAY ===== */
@media (max-width: 768px) {
    .score-badge {
        min-width: 50px;
        padding: 8px;
    }

    .score-value {
        font-size: 0.875rem;
    }

    .score-details {
        max-width: 100%;
        font-size: 0.75rem;
    }
}

/* ===== TYPOGRAPHY ===== */
@media (max-width: 768px) {
    h1 {
        font-size: 1.25rem;
        margin: 12px 0;
    }

    h2 {
        font-size: 1.125rem;
        margin: 10px 0;
    }

    h3 {
        font-size: 1rem;
        margin: 8px 0;
    }

    p {
        margin: 8px 0;
    }
}

/* ===== LANDSCAPE MODE (Mobile) ===== */
@media (max-height: 500px) and (orientation: landscape) {
    header {
        padding: 8px 12px;
    }

    .container {
        margin: 4px auto;
        gap: 8px;
    }

    .card {
        padding: 8px;
        margin-bottom: 8px;
    }

    h1,
    h2 {
        margin: 4px 0;
    }
}

/* ===== SEHR SCHMALE GERÄTE (<= 360px) =====
   Hier ist 44px pro Zeile nicht mehr unterzubringen, ohne dass Formulare
   scrollen. 40px ist der bewusste Kompromiss – siehe mobile.css. */
@media (max-width: 360px) {
    button,
    input {
        min-height: 40px;
        padding: 10px 12px;
    }

    .card {
        padding: 8px;
    }

    .container {
        gap: 8px;
        padding: 0 6px;
    }
}

/* ===== TOUCH SCROLL ===== */
.store-results-container {
    scroll-behavior: smooth;
}

/* ===== DOPPELTIPP-ZOOM VERHINDERN ===== */
button,
[role="button"],
a {
    touch-action: manipulation;
}

/* ===== ACCESSIBILITY – FOKUS ===== */
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    /* Auf Touch-Geräten darf der Fokusring kräftiger ausfallen. */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
    }

    /* Tap-Target-Mindestgröße gezielt für Navigations-/Aktionslinks,
       nicht für Links im Fließtext. */
    .nav-link,
    .footer-links a,
    a.btn,
    a[role="button"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}