/* ============================================================
   WPCarSync — Ausstattung als Akkordeon (Fahrzeug-Einzelseite, Layout „gruppiert“)
   Markup: tpl/modern/single/features.php, Verhalten: js/vehicle-detail.js (initEquipmentAccordion)

   Bis zum Breakpoint (Standard 1024 px, PHP-Filter wpcs_equip_accordion_breakpoint) stehen alle
   Kategorien untereinander, die Tab-Leiste ist ausgeblendet. Die Media Query steht deshalb immer als
   (max-width: 1024px) – Template::_enqueue_equip_accordion() ersetzt sie bei einem anderen Breakpoint.
   Offen/zu: .wpcs-equip__panel.is-open + aria-expanded am Titel; die .hidden-Klasse der Tabs wirkt hier nicht.

   Anpassbar für Themes:
     --wpcs-equip-acc-font / -size / -weight       Schrift der Titel
     --wpcs-equip-acc-color / -bg                  Titel
     --wpcs-equip-acc-hover-color / -hover-bg      Titel bei Hover/Fokus (ohne Angabe wie -color / -bg)
     --wpcs-equip-acc-count-color                  Anzahl „(23)“
     --wpcs-equip-acc-icon-color                   Chevron
     --wpcs-equip-acc-border                       Trennlinien zwischen den Kategorien
     --wpcs-equip-acc-focus                        Fokusrahmen (Tastatur)
   ============================================================ */

:root {
    --wpcs-equip-acc-font:        var(--wpcs-font-label);
    --wpcs-equip-acc-size:        var(--wpcs-text-base);
    --wpcs-equip-acc-weight:      600;
    --wpcs-equip-acc-color:       var(--wpcs-color-text);
    --wpcs-equip-acc-bg:          transparent;
    --wpcs-equip-acc-count-color: var(--wpcs-color-text-muted);
    --wpcs-equip-acc-icon-color:  var(--wpcs-color-primary);
    --wpcs-equip-acc-border:      var(--wpcs-color-border);
    --wpcs-equip-acc-focus:       var(--wpcs-color-primary);
}

@media (max-width: 1024px) {

    .wpcs-equip--grouped .wpcs-equip__tabs {
        display: none;
    }

    .wpcs-equip--grouped .wpcs-equip__panels {
        border-bottom: 1px solid var(--wpcs-equip-acc-border);
    }

    /* Panels: es zählt nur offen/zu, nicht der aktive Tab (.hidden) */
    .wpcs-equip--grouped .wpcs-equip__panel {
        display: none;
    }

    .wpcs-equip--grouped .wpcs-equip__panel.is-open {
        display: grid;
        padding-bottom: 20px;
    }

    /* Titel: Selektoren mit Wrapper (0,2,0 bzw. 0,3,0 mit :hover/:focus), damit globale Button-Styles von
       Themes/Page-Buildern nicht durchschlagen (z. B. Elementor-Kit „.elementor-kit-N button“ 0,1,1, Hover/Fokus 0,2,1).
       Schrift, Großschreibung, Rahmen usw. deshalb ausdrücklich gesetzt. */
    .wpcs-equip .wpcs-equip__acc {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 16px 0;
        border: 0;
        border-top: 1px solid var(--wpcs-equip-acc-border);
        border-radius: 0;
        background: var(--wpcs-equip-acc-bg);
        color: var(--wpcs-equip-acc-color);
        box-shadow: none;
        text-shadow: none;
        font-family: var(--wpcs-equip-acc-font);
        font-size: var(--wpcs-equip-acc-size);
        font-weight: var(--wpcs-equip-acc-weight);
        font-style: normal;
        line-height: 1.3;
        letter-spacing: normal;
        text-align: left;
        text-transform: none;
        text-decoration: none;
        white-space: normal;
        cursor: pointer;
        transition: color var(--wpcs-transition), background var(--wpcs-transition);
    }

    /* erste Kategorie ohne Linie oben – darüber steht meist schon der unterstrichene Abschnittstitel */
    .wpcs-equip .wpcs-equip__acc:first-child {
        border-top: 0;
    }

    .wpcs-equip .wpcs-equip__acc:hover,
    .wpcs-equip .wpcs-equip__acc:focus,
    .wpcs-equip .wpcs-equip__acc:active {
        background: var(--wpcs-equip-acc-hover-bg, var(--wpcs-equip-acc-bg));
        color: var(--wpcs-equip-acc-hover-color, var(--wpcs-equip-acc-color));
        border-color: var(--wpcs-equip-acc-border);
        box-shadow: none;
        outline: none;
    }

    .wpcs-equip .wpcs-equip__acc:focus-visible {
        outline: 2px solid var(--wpcs-equip-acc-focus);
        outline-offset: 2px;
    }

    .wpcs-equip__acc-label {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .wpcs-equip__acc-count {
        color: var(--wpcs-equip-acc-count-color);
        font-weight: 400;
    }

    .wpcs-equip__acc-icon {
        flex-shrink: 0;
        color: var(--wpcs-equip-acc-icon-color);
        transition: transform var(--wpcs-transition);
    }

    .wpcs-equip__acc[aria-expanded="true"] .wpcs-equip__acc-icon {
        transform: rotate(180deg);
    }

}