/*
 * Header grid mirrors Bootstrap container/row/cols so the nav layout is stable
 * before the deferred app bundle loads. Icon slots are sized for Lucide SVGs.
 */
 header {
    --header-gutter-x: 0.75rem;
    position:relative;
    gap:2em;
    display:flex;
    flex-direction:column;
}

header .container {
    width: 100%;
    padding-right: var(--header-gutter-x);
    padding-left: var(--header-gutter-x);
    margin-right: auto;
    margin-left: auto;
    position: relative;
    z-index: 1;
}


header .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--header-gutter-x));
    margin-left: calc(-1 * var(--header-gutter-x));
}

header .col-navbar,
header .col-social-logos {
    flex: 0 0 auto;
    padding-right: var(--header-gutter-x);
    padding-left: var(--header-gutter-x);
}

.header-background {
    width: 100%;
    height: 100%;
    display: block;
    position:absolute;
    z-index:0;
    background-color: var(--brand-colour-surface);
    border-bottom:4px solid var(--brand-colour-accent);
}

.header-title {
    color:#fff;
}

nav.navbar {
    top:0;
    width:100%;
    padding:0;
    display:flex;
}

nav.navbar .navbar-nav li a,
nav.navbar .navbar-nav li button {
    background-color: var(--brand-colour-surface);
    padding: 1rem;
    color: var(--brand-colour-text);
    font-family: var(--font-family-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border:0;


    &:hover {
        color:var(--brand-colour-accent);
    }
}

nav.navbar .navbar-nav li a svg,
nav.navbar .navbar-nav li button svg {
    opacity:0.5;
    width:1.5rem;
    height:1.5rem;
}

nav.navbar .navbar-nav li a:hover svg,
nav.navbar .navbar-nav li button:hover svg {
    opacity:1;
}

nav.navbar .navbar-nav li .nav-icon {
    position:relative;
    top:-2px;
    display:inline-block;
    width:1.5rem;
    height:1.5rem;
    flex-shrink:0;
}

nav.navbar .nav-icon-container {
    display:inline-block;
    width:1.5rem;
    height:1.5rem;
    flex-shrink:0;
}

nav.navbar ul.navbar-nav {
    list-style:none;
    margin:0 0 0.5rem;
    padding:0;
}
nav.navbar ul.navbar-nav a,
#navbar-toggle button {
    color:#fff;
    font-family: var(--font-family-primary);
}

nav.navbar ul.navbar-nav a:hover,
#navbar-toggle button:hover {
    background-color: var(--brand-colour-surface-hover);
    border-radius:var(--border-radius-s);
}

@media (width > 1200px) {
    .header-social-logos {
        gap:1em;
    }
}

/** Desktop styles */
@media (width <= 1200px) {
    nav.navbar {
        ul.navbar-nav a {
            font-size:1em;
            gap:1em;
        }
    }
}
@media (width > 992px) {
    header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding:2em;
    }

    nav.navbar {
        & ul.navbar-nav {
            order:1;
            display:flex;
            flex-wrap:wrap;
            flex-grow:1;
            flex-direction:row;
            justify-content:center;
            opacity:1;

        }

        &.navbar--state-synced.collapsed ul.navbar-nav {
            opacity:0;
        }

        & ul.navbar-nav {
            margin-bottom:0;
        }

        .nav-icon-container {
            display:inline-block;
        }

        & li a,
        & li button {
            display:flex;
            gap: 0.5em;
            justify-content: flex-start;
        }

        & li.nav-item-mobile-menu {
            display:none;
        }

        & li:nth-child(2) a {
            padding-left: 1rem;
        }

        & li:last-child a {
            padding-right: 2em;
        }

        #navbar-toggle {
            display:none;
        }
    }

    .header-social-logos {
        list-style-type:none;
        display:flex;
        padding-top:0.2em;
        justify-content:center;
        gap: 1em;

        & img {
            height:50px;
        }
    }

}

@media (width <= 992px) {

    header {
        gap:0;
    }
    .header-background img {
        object-position:0 0;
    }

    nav.navbar {
        flex-direction:column;
        z-index:200;
        margin-bottom:1em;

        & #navbar-toggle {
            /* padding-top:1em; */
        }

        & #navbar-toggle button {
            border:0;
            padding:1rem;
            font-size:1.2em;
            background-color:var(--brand-colour-primary);
            color:var(--brand-colour-text);
            border-radius: var(--nav-button-border-radius);
        }

        &.collapsed #navbar-toggle {
            order:1;
        }

        & ul.navbar-nav {
            position:absolute;
            top:0;
            order:2;
            width:100%;
            overflow:hidden;
            opacity:0;
            pointer-events:none;
        }

        &:not(.collapsed) ul.navbar-nav {
            position:fixed;
            top:0;
            opacity:1;
            pointer-events:auto;

            a, button {
                background-color:var(--brand-colour-primary);
            }
        }

        & li a,
        & li button {
            display:flex;
            justify-content: space-between;
            width:100%;
            font-size:1em;
        }

        & li:not(:last-child) a,
        & li:not(:last-child) button {
            border-bottom:1px solid var(--brand-colour-secondary);
        }

        .nav-text {
            flex-grow:1;
            text-align:center;
        }
        .nav-icon-container {
            justify-self:flex-start;
            display:inline-block;
        }

    }

    .header-social-logos {
        list-style-type:none;
        display:flex;
        justify-content:center;
        gap:1em;
        padding:0;
        position:relative;
        margin-top:1rem;

        & img {
            height:30px;
        }
    }

}

@media (width < 576px) {
    nav.navbar ul.navbar-nav svg,
    nav.navbar .nav-icon-container {
        display:none;
    }
}