/* =========================================================
   NANCYS SITE SHELL V2
   Header + Seitenrahmen
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

body > header,
.site-header {

    position: sticky;
    top: 0;
    z-index: 500;

    width: 100%;

    background:
        rgba(255, 250, 240, 0.96);

    border-bottom:
        1px solid
        rgba(19, 35, 51, 0.07);

    box-shadow:
        0 4px 24px
        rgba(19, 35, 51, 0.035);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


/*
|--------------------------------------------------------------------------
| Header-Innenbereich
|--------------------------------------------------------------------------
*/

body > header > div,
body > header > .container,
body > header > .site-header-inner,
body > header > .site-shell,

.site-header > div,
.site-header > .container,
.site-header > .site-header-inner,
.site-header > .site-shell {

    box-sizing: border-box;

    display: flex !important;

    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: 1100px;

    min-height: 74px;

    margin: 0 auto;

    padding:
        7px 24px;
}


/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/

body > header img,
.site-header img,
.site-header .custom-logo {

    display: block;

    width: 60px !important;
    height: 60px !important;

    max-width: 60px !important;
    max-height: 60px !important;

    object-fit: cover;

    border-radius: 14px;
}


body > header a:has(img),
.site-header a:has(img) {

    display: inline-flex;

    align-items: center;

    flex: 0 0 auto;

    line-height: 0;
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

body > header nav,
.site-header nav,
.site-header .main-navigation {

    display: flex !important;

    align-items: center;

    gap: 5px;

    margin-left: auto;
}


body > header nav a,
.site-header nav a,
.site-header .main-navigation a {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding:
        8px 13px;

    border-radius: 999px;

    color:
        #142334;

    font-size: 14px;
    font-weight: 750;

    line-height: 1;

    text-decoration: none;

    transition:
        background 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}


body > header nav a:hover,
.site-header nav a:hover,
.site-header .main-navigation a:hover {

    background:
        rgba(15, 74, 133, 0.07);

    color:
        #0b4b88;
}


/*
|--------------------------------------------------------------------------
| Bestellen als primärer Header-CTA
|--------------------------------------------------------------------------
*/

body > header nav a[href*="bestellen"],
.site-header nav a[href*="bestellen"],
.site-header .main-navigation a[href*="bestellen"] {

    margin:
        0 3px;

    padding:
        10px 17px;

    background:
        #0b4f8f;

    color:
        #fff;

    box-shadow:
        0 8px 20px
        rgba(11, 79, 143, 0.13);
}


body > header nav a[href*="bestellen"]:hover,
.site-header nav a[href*="bestellen"]:hover,
.site-header .main-navigation a[href*="bestellen"]:hover {

    background:
        #083f74;

    color:
        #fff;

    transform:
        translateY(-1px);
}


/*
|--------------------------------------------------------------------------
| Leere alte Homepage-Sektionen
|--------------------------------------------------------------------------
*/

main > section.is-nancys-empty-section {
    display: none !important;

    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;

    border: 0 !important;
}


/*
|--------------------------------------------------------------------------
| Mobile Header
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    body > header,
    .site-header {

        box-shadow:
            0 3px 18px
            rgba(19, 35, 51, 0.055);
    }


    body > header > div,
    body > header > .container,
    body > header > .site-header-inner,
    body > header > .site-shell,

    .site-header > div,
    .site-header > .container,
    .site-header > .site-header-inner,
    .site-header > .site-shell {

        min-height: 62px;

        padding:
            6px 14px;
    }


    body > header img,
    .site-header img,
    .site-header .custom-logo {

        width: 48px !important;
        height: 48px !important;

        max-width: 48px !important;
        max-height: 48px !important;

        border-radius: 12px;
    }


    body > header nav,
    .site-header nav,
    .site-header .main-navigation {

        gap: 2px;
    }


    body > header nav a,
    .site-header nav a,
    .site-header .main-navigation a {

        min-height: 36px;

        padding:
            7px 8px;

        font-size: 12px;
    }


    body > header nav a[href*="bestellen"],
    .site-header nav a[href*="bestellen"],
    .site-header .main-navigation a[href*="bestellen"] {

        margin: 0;

        padding:
            9px 11px;
    }

}


/*
|--------------------------------------------------------------------------
| Sehr kleine Smartphones
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {

    body > header nav,
    .site-header nav,
    .site-header .main-navigation {

        gap: 0;
    }


    body > header nav a,
    .site-header nav a,
    .site-header .main-navigation a {

        padding:
            7px 6px;

        font-size: 11px;
    }


    body > header nav a[href*="bestellen"],
    .site-header nav a[href*="bestellen"],
    .site-header .main-navigation a[href*="bestellen"] {

        padding:
            8px 9px;
    }

}