/**
 * Blueprint Footer v3 — System Styles (Phase F)
 *
 * Scoped auf .bp-footer-v3 — kollidiert nicht mit v2 (.site-footer).
 *
 * Token-Strategie:
 *   - Lokale --bp-footer-v3-* Tokens für alle visuellen Werte
 *   - Themes setzen die Tokens auf Werte aus dem globalen Design-Token-System
 *     (--color-bg, --color-text, --color-primary etc.) — kein eigenes
 *     Farbsystem.
 *   - Layout-Presets mappen auf zusätzliche Tokens / Modifier-Klassen.
 *
 * Layer-Reihenfolge & Sektionen siehe templates/parts/footer-v3.php.
 *
 * Buttons: nutzt bestehendes .btn / .btn-primary|secondary|outline System.
 * Pattern-CSS: kommt NICHT aus dieser Datei (Phase G — Pattern-Render-Layer).
 *
 * @package BlueprintCore
 * @since   1.11.3
 */


/* ════════════════════════════════════════════════════════════════
   1 — TOKENS (Defaults — überschrieben von .--theme-* Modifikatoren)
   ════════════════════════════════════════════════════════════════ */

.bp-footer-v3 {
    /* Farben — pro Theme überschrieben */
    --bp-footer-v3-bg:        var(--color-bg-secondary, #f5f7fa);
    --bp-footer-v3-text:      var(--color-text, #1f2937);
    --bp-footer-v3-muted:     var(--color-text-muted, #6b7280);
    --bp-footer-v3-line:      var(--color-border, rgba(0, 0, 0, 0.1));
    --bp-footer-v3-link:      var(--color-text, currentColor);
    --bp-footer-v3-link-hover: var(--color-primary, #34aee4);

    /* Layout */
    --bp-footer-v3-pad-y:        4rem;
    --bp-footer-v3-pad-y-tight:  2rem;
    --bp-footer-v3-gap:          2rem;
    --bp-footer-v3-gap-sm:       1rem;
    --bp-footer-v3-gap-tight:    0.5rem;

    /* Brand Sizes — clamp() schützt Mobile */
    --bp-footer-v3-brand-sm:         1rem;
    --bp-footer-v3-brand-md:         clamp(1.25rem, 2vw, 1.5rem);
    --bp-footer-v3-brand-lg:         clamp(1.5rem, 3vw, 2rem);
    --bp-footer-v3-brand-xl:         clamp(2rem, 4vw, 3rem);
    --bp-footer-v3-brand-2xl:        clamp(2.5rem, 6vw, 4rem);
    --bp-footer-v3-brand-display:    clamp(3rem, 8vw, 5rem);
    --bp-footer-v3-brand-display-xl: clamp(3.5rem, 16vw, 9rem);

    /* Container Custom Width Token — gesetzt vom Template via inline style */
    --bp-footer-v3-container-max-width: 1600px;
}


/* ════════════════════════════════════════════════════════════════
   2 — ROOT
   ════════════════════════════════════════════════════════════════ */

.bp-footer-v3 {
    background-color: var(--bp-footer-v3-bg);
    color: var(--bp-footer-v3-text);
    font-size: 0.9375rem;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bp-footer-v3 a {
    color: var(--bp-footer-v3-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bp-footer-v3 a:hover,
.bp-footer-v3 a:focus-visible {
    color: var(--bp-footer-v3-link-hover);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.bp-footer-v3 .container-custom {
    max-width: var(--bp-footer-v3-container-max-width, 1600px);
    margin-inline: auto;
    width: 100%;
}


/* ════════════════════════════════════════════════════════════════
   3 — THEMES
   ════════════════════════════════════════════════════════════════ */

.bp-footer-v3--theme-light {
    --bp-footer-v3-bg:    var(--color-bg-secondary, #f5f7fa);
    --bp-footer-v3-text:  var(--color-text, #1f2937);
    --bp-footer-v3-muted: var(--color-text-muted, #6b7280);
    --bp-footer-v3-line:  var(--color-border, rgba(0, 0, 0, 0.1));
}

.bp-footer-v3--theme-dark {
    --bp-footer-v3-bg:    #0f172a;
    --bp-footer-v3-text:  #e5e7eb;
    --bp-footer-v3-muted: #94a3b8;
    --bp-footer-v3-line:  rgba(255, 255, 255, 0.08);
    --bp-footer-v3-link:  #e5e7eb;
    --bp-footer-v3-link-hover: var(--color-primary, #34aee4);
}

.bp-footer-v3--theme-brand {
    --bp-footer-v3-bg:    var(--color-primary, #34aee4);
    --bp-footer-v3-text:  #ffffff;
    --bp-footer-v3-muted: rgba(255, 255, 255, 0.75);
    --bp-footer-v3-line:  rgba(255, 255, 255, 0.2);
    --bp-footer-v3-link:  #ffffff;
    --bp-footer-v3-link-hover: rgba(255, 255, 255, 0.85);
}

.bp-footer-v3--theme-inverse {
    --bp-footer-v3-bg:    #0a0e1a;
    --bp-footer-v3-text:  #f5f7fa;
    --bp-footer-v3-muted: #9ca3af;
    --bp-footer-v3-line:  rgba(255, 255, 255, 0.06);
    --bp-footer-v3-link:  #f5f7fa;
    --bp-footer-v3-link-hover: var(--color-primary, #34aee4);
}


/* ════════════════════════════════════════════════════════════════
   4 — SECTION SPACING (Default — überschrieben pro Layout-Preset)
   ════════════════════════════════════════════════════════════════ */

.bp-footer-v3__prefooter,
.bp-footer-v3__brand,
.bp-footer-v3__main {
    padding-block: var(--bp-footer-v3-pad-y);
}

.bp-footer-v3__prefooter + .bp-footer-v3__brand,
.bp-footer-v3__prefooter + .bp-footer-v3__main,
.bp-footer-v3__brand + .bp-footer-v3__main {
    padding-block-start: 0;
}

.bp-footer-v3__bottom {
    padding-block: var(--bp-footer-v3-pad-y-tight);
    border-top: 1px solid var(--bp-footer-v3-line);
}

@media (max-width: 39.9375em) {
    .bp-footer-v3__prefooter,
    .bp-footer-v3__brand,
    .bp-footer-v3__main {
        padding-block: var(--bp-footer-v3-pad-y-tight);
    }
}


/* ════════════════════════════════════════════════════════════════
   5 — LAYER 1 — PRE-FOOTER
   ════════════════════════════════════════════════════════════════ */

.bp-footer-v3__prefooter {
    border-bottom: 1px solid var(--bp-footer-v3-line);
}

.bp-footer-v3__prefooter-inner {
    display: flex;
    flex-direction: column;
    gap: var(--bp-footer-v3-gap-sm);
    max-width: 64rem;
}

.bp-footer-v3__prefooter-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-footer-v3-muted);
}

.bp-footer-v3__prefooter-heading {
    margin: 0;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    font-weight: 600;
    color: var(--bp-footer-v3-text);
}

.bp-footer-v3__prefooter-text {
    margin: 0;
    color: var(--bp-footer-v3-muted);
    max-width: 48rem;
}

.bp-footer-v3__prefooter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bp-footer-v3-gap-sm);
    margin-top: var(--bp-footer-v3-gap-sm);
}

.bp-footer-v3__prefooter-cta {
    /* nutzt .btn — keine eigenen Farben/Styles */
}

/* Variant: split_cta — zwei Buttons nebeneinander */
.bp-footer-v3__prefooter--split_cta .bp-footer-v3__prefooter-actions {
    flex-wrap: wrap;
}

/* Variant: minimal_text — keine Buttons, etwas größerer Heading-Stil */
.bp-footer-v3__prefooter--minimal_text .bp-footer-v3__prefooter-inner {
    max-width: 48rem;
}

/* Variant: cta_statement / newsletter_statement — auf großen Screens
   kann das Heading + CTA nebeneinander stehen, falls Pre-Footer-Inner
   genug Platz hat. */
@media (min-width: 64em) {
    .bp-footer-v3__prefooter--cta_statement .bp-footer-v3__prefooter-inner,
    .bp-footer-v3__prefooter--newsletter_statement .bp-footer-v3__prefooter-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        max-width: none;
        gap: var(--bp-footer-v3-gap);
    }
    .bp-footer-v3__prefooter--cta_statement .bp-footer-v3__prefooter-actions,
    .bp-footer-v3__prefooter--newsletter_statement .bp-footer-v3__prefooter-actions {
        margin-top: 0;
        flex-shrink: 0;
    }
}


/* ════════════════════════════════════════════════════════════════
   6 — LAYER 2 — BRAND AREA
   ════════════════════════════════════════════════════════════════ */

.bp-footer-v3__brand-inner {
    display: flex;
    flex-direction: column;
    gap: var(--bp-footer-v3-gap-sm);
}

.bp-footer-v3__brand--align-left  .bp-footer-v3__brand-inner { align-items: flex-start;  text-align: left; }
.bp-footer-v3__brand--align-center .bp-footer-v3__brand-inner { align-items: center;     text-align: center; }
.bp-footer-v3__brand--align-right .bp-footer-v3__brand-inner { align-items: flex-end;    text-align: right; }

.bp-footer-v3__brand-text {
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--bp-footer-v3-text);
    /* default size */
    font-size: var(--bp-footer-v3-brand-md);
    /* overflow-wrap schützt sehr lange Wörter ohne Trennung */
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.bp-footer-v3__brand-text--sm         { font-size: var(--bp-footer-v3-brand-sm); }
.bp-footer-v3__brand-text--md         { font-size: var(--bp-footer-v3-brand-md); }
.bp-footer-v3__brand-text--lg         { font-size: var(--bp-footer-v3-brand-lg); }
.bp-footer-v3__brand-text--xl         { font-size: var(--bp-footer-v3-brand-xl); }
.bp-footer-v3__brand-text--2xl        { font-size: var(--bp-footer-v3-brand-2xl); }
.bp-footer-v3__brand-text--display    { font-size: var(--bp-footer-v3-brand-display); }
.bp-footer-v3__brand-text--display-xl { font-size: var(--bp-footer-v3-brand-display-xl); }

.bp-footer-v3__brand-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.bp-footer-v3__brand-logo {
    line-height: 0;
}

.bp-footer-v3__brand-claim {
    margin: 0;
    color: var(--bp-footer-v3-muted);
    font-size: 1rem;
    max-width: 48rem;
}


/* ════════════════════════════════════════════════════════════════
   7 — LAYER 3 — MAIN SLOTS
   ════════════════════════════════════════════════════════════════ */

.bp-footer-v3__main-row {
    /* Foundation grid-x grid-margin-x übernimmt Spaltenlogik;
       wir setzen nur vertikalen Abstand zwischen Cells beim Stack. */
    row-gap: var(--bp-footer-v3-gap);
}

.bp-footer-v3__slot {
    display: flex;
    flex-direction: column;
    gap: var(--bp-footer-v3-gap-tight);
}

.bp-footer-v3__slot-title {
    margin: 0 0 var(--bp-footer-v3-gap-sm);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bp-footer-v3-muted);
}

.bp-footer-v3__slot-body {
    color: var(--bp-footer-v3-text);
}

.bp-footer-v3__slot-body p,
.bp-footer-v3__slot-body ul,
.bp-footer-v3__slot-body ol {
    margin: 0 0 var(--bp-footer-v3-gap-tight);
}

.bp-footer-v3__slot-body p:last-child,
.bp-footer-v3__slot-body ul:last-child,
.bp-footer-v3__slot-body ol:last-child {
    margin-bottom: 0;
}

/* ── slot--brand (Inline-Mini, wenn Layer 2 nicht aktiv) ──────────────── */
.bp-footer-v3__slot-brand-text {
    font-weight: 700;
    font-size: var(--bp-footer-v3-brand-md);
    line-height: 1;
    color: var(--bp-footer-v3-text);
}
.bp-footer-v3__slot-brand-image {
    max-width: 100%;
    height: auto;
}

/* ── slot--contact ────────────────────────────────────────────────────── */
.bp-footer-v3__slot-contact-item {
    margin: 0 0 var(--bp-footer-v3-gap-tight);
}

/* ── slot--navigation / slot--legal ───────────────────────────────────── */
.bp-footer-v3__slot-nav,
.bp-footer-v3__slot-legal {
    /* wp_nav_menu Container */
}

.bp-footer-v3__slot-nav-list,
.bp-footer-v3__slot-legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bp-footer-v3-gap-tight);
}

.bp-footer-v3__slot-nav-list a,
.bp-footer-v3__slot-legal-list a {
    display: inline-block;
}

/* ── slot--social ─────────────────────────────────────────────────────── */
.bp-footer-v3__slot-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.bp-footer-v3__slot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--bp-footer-v3-line);
    border-radius: 50%;
    color: var(--bp-footer-v3-text);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bp-footer-v3__slot-social a:hover,
.bp-footer-v3__slot-social a:focus-visible {
    background-color: var(--bp-footer-v3-text);
    color: var(--bp-footer-v3-bg);
    border-color: var(--bp-footer-v3-text);
    text-decoration: none;
}

/* ── slot--custom ─────────────────────────────────────────────────────── */
.bp-footer-v3__slot-custom > :first-child { margin-top: 0; }
.bp-footer-v3__slot-custom > :last-child  { margin-bottom: 0; }

/* ── slot--spacer ─────────────────────────────────────────────────────── */
.bp-footer-v3__slot--spacer {
    /* Zelle bleibt sichtbar im Grid, Body bleibt leer */
    min-height: 0;
}

@media (max-width: 39.9375em) {
    .bp-footer-v3__slot--spacer {
        /* Auf Mobile spart Spacer keinen Platz ein → ausblenden */
        display: none;
    }
}


/* ════════════════════════════════════════════════════════════════
   8 — LAYER 4 — BOTTOM BAR
   ════════════════════════════════════════════════════════════════ */

.bp-footer-v3__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bp-footer-v3-gap-sm);
    color: var(--bp-footer-v3-muted);
    font-size: 0.8125rem;
}

.bp-footer-v3__bottom-copyright {
    flex: 0 1 auto;
}

.bp-footer-v3__bottom-meta {
    flex: 0 1 auto;
    color: var(--bp-footer-v3-muted);
}

.bp-footer-v3__bottom-legal {
    flex: 1 1 auto;
}

.bp-footer-v3__bottom-legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--bp-footer-v3-gap-sm);
    justify-content: flex-end;
}

.bp-footer-v3__bottom-legal-list a {
    color: var(--bp-footer-v3-muted);
}

.bp-footer-v3__bottom-legal-list a:hover,
.bp-footer-v3__bottom-legal-list a:focus-visible {
    color: var(--bp-footer-v3-text);
}

.bp-footer-v3__bottom-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.bp-footer-v3__bottom-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--bp-footer-v3-muted);
    transition: color 0.2s ease;
}

.bp-footer-v3__bottom-social a:hover,
.bp-footer-v3__bottom-social a:focus-visible {
    color: var(--bp-footer-v3-text);
    text-decoration: none;
}

@media (max-width: 39.9375em) {
    .bp-footer-v3__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .bp-footer-v3__bottom-legal-list {
        justify-content: flex-start;
    }
}


/* ════════════════════════════════════════════════════════════════
   9 — LAYOUT PRESETS
   ════════════════════════════════════════════════════════════════ */

/* ── default — keine Modifier nötig, Basis-Layout ─────────────────────── */

/* ── brand_centered — Brand-Area zentriert, Slots darunter ────────────── */
.bp-footer-v3--layout-brand_centered .bp-footer-v3__brand-inner {
    align-items: center;
    text-align: center;
    margin-inline: auto;
}

.bp-footer-v3--layout-brand_centered .bp-footer-v3__main-row {
    justify-content: center;
}

/* ── asymmetric — Brand-Area linksbündig, Slots rechts (auf large+) ──── */
.bp-footer-v3--layout-asymmetric .bp-footer-v3__brand {
    padding-block-end: var(--bp-footer-v3-pad-y-tight);
}

@media (min-width: 64em) {
    .bp-footer-v3--layout-asymmetric .bp-footer-v3__main-row {
        justify-content: flex-end;
    }
}

/* ── stacked — alle Slots zwingend untereinander, kein horizontales Grid */
.bp-footer-v3--layout-stacked .bp-footer-v3__main-row > .cell {
    flex: 0 0 100%;
    max-width: 100%;
}

.bp-footer-v3--layout-stacked .bp-footer-v3__brand-inner {
    align-items: flex-start;
}


/* ════════════════════════════════════════════════════════════════
   10 — RESPONSIVE GLOBAL
   ════════════════════════════════════════════════════════════════
   Foundation XY (.cell small-12) sorgt dafür, dass Slots auf small
   automatisch full-width sind — keine eigene Override nötig. Die
   Brand-Sizes nutzen clamp() (siehe §1), display-xl bleibt damit auch
   auf 320px-Devices lesbar.
*/

@media (max-width: 39.9375em) {
    .bp-footer-v3__prefooter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bp-footer-v3__prefooter-actions .btn {
        width: 100%;
        text-align: center;
    }
}