/**
 *  Style definition of the header section
 */
@layer base {
    header {
        @apply sticky top-0 bg-[var(--color-background)] z-20 transition-all duration-200 ease-in;
        box-shadow: 12px 0 12px rgba(0, 0, 0, 0.1);
    }

    header .top-bar {
        background-image: url('../images/header.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left top;
        @apply py-2 font-light text-base text-white;
    }

    header .top-bar .container {
        @apply flex justify-end items-center;
    }

    header .top-bar a {
        @apply text-white mr-7.5;
    }

    header .top-bar .site-header-topbar-socials a:not(:last-child) {
        @apply mr-2.5;
    }

    header nav {
        @apply relative flex flex-wrap items-start justify-between px-4 py-2;
    }

    header nav a.logo {
        @apply inline-block mr-4 pt-1 pb-1 text-xl whitespace-nowrap;
    }

    header nav a.logo img {
        width: 225px;
        height: auto;
    }

    header nav .navbar-collapse {
        @apply flex-grow flex items-center;
        flex-basis: 100%;
    }

    header nav .navbar-collapse ul {
        @apply flex flex-wrap p-0 m-0 list-none justify-end;
    }

    header nav .navbar-collapse ul > li {
        @apply mt-1.5;
    }

    header nav .navbar-collapse ul > li.hamburger div {
        @apply hidden mt-0.75; /* 3px */
    }

    header nav .nav-link {
        @apply block text-[var(--color-vinacles-text)] text-xl font-light px-4 py-2 transition duration-200 ease-in;
    }

    /* CTA buttons */
    header nav .menu_cta .nav-link {
        color: var(--color-vinacles-orange);
        font-family: Vinacles, sans-serif;
        border: 1px solid var(--color-vinacles-orange);
        font-size: 14px;
        margin-left: 15px;
        padding-left: 30px;
        padding-right: 30px;
        transition: all 0.2s ease-in;
    }

    header nav .menu_cta .nav-link:hover {
        background-color: var(--color-vinacles-orange);
        color: #fff;
        text-decoration: none;
    }

    header nav .menu_cta_blue .nav-link {
        color: var(--color-vinacles-blue);
        font-family: Vinacles, sans-serif;
        border: 1px solid var(--color-vinacles-blue);
        font-size: 14px;
        margin-left: 15px;
        padding-left: 30px;
        padding-right: 30px;
        transition: all 0.2s ease-in;
    }

    header nav .menu_cta_blue .nav-link:hover {
        background-color: var(--color-vinacles-blue);
        color: #fff;
        text-decoration: none;
    }
}

@media (max-width: 1200px) {
    header .top-bar {
        @apply hidden;
    }

    header nav a.logo img {
        width: 175px;
    }

    header nav .navbar-collapse ul {
        @apply flex-row;
    }

    header nav .navbar-collapse ul > li:not(.hamburger) {
        @apply hidden;
    }

    header nav .navbar-collapse ul > li.hamburger div {
        cursor: pointer;
        @apply block p-1.5;
        width: 30px;
        height: 25px;
        background-image: url('../images/Burgermenu.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    header nav .navbar-collapse {
        @apply flex-grow-0;
        flex-basis: auto;
    }
    .navbar-collapse {
        display: flex !important;
    }

    header nav div.responsive-menu {
        flex-basis: 100%;

        > ul {
            @apply list-none m-0 p-0;
        }

        .menu_cta {
            @apply my-4;

            .nav-link {
                @apply inline-block;
            }
        }
    }
}