/* ==========================================
   FFG Header Section
========================================== */

.section-header {
    background-color: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--white);
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-top: clamp(0.5rem, 2vw, 1rem);
    padding-bottom: clamp(0.5rem, 2vw, 1rem);
}
/* ==========================================
    LAYOUT FIX: Menü links, Logo mittig
========================================== */

.section-header .section-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(12px, 2vw, 24px);
}


/* Logo exakt mittig */
.section-header .header-image-desktop,
.section-header .header-image-mobile {
    grid-column: 2;
    justify-self: center;
    margin: 0;
}

/* rechter Platzhalter für echtes Zentrieren */
.section-header .section-header-inner::after {
    content: "";
    grid-column: 3;
}

/* Desktop Logo */
.section-header .header-image-desktop {
    width: clamp(260px, 38vw, 700px);
}

.section-header .header-image-desktop .theme-svg > svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile Logo initial aus */
.section-header .header-image-mobile {
    display: none;
}

/* ==========================================
    Mobile
========================================== */

@media (max-width: 900px) {

    .section-header .section-header-inner {
        grid-template-columns: 1fr auto 1fr;
    }

    .section-header .header-image-desktop {
        display: none;
    }

    .section-header .header-image-mobile {
        display: block;
        width: min(220px, 100%);
    }

    .section-header .header-image-mobile .theme-svg > svg {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* ==========================================
   BEST PRACTICE BURGER (3 Linien)
========================================== */

.wp-block-navigation__responsive-container-open svg {
    display: none;
}

.wp-block-navigation__responsive-container-open {
    position: relative;
    width: clamp(35px, 5vw, 70px);
    height: clamp(35px, 5vw, 70px);
}

/* eine Linie + Schatten = 3 Linien */
.wp-block-navigation__responsive-container-open::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20%;
    width: 60%;
    height: 3px;
    background: white;
    transform: translateY(-50%);
    box-shadow: 
        0 -12px 0 white,
        0 12px 0 white;
}

/* ==========================================
   Modales Fenster: Hintergrund/Textfarbe
========================================== */

.wp-block-navigation__responsive-container {
    background-color: var(--wp--preset--color--dark) !important;
    color: var(--wp--preset--color--base) !important;
}
.wp-block-navigation *:focus:not(:focus-visible) {
    outline: none;
}