header {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    position: fixed;
    top: 0;
    z-index: 1000;

    a, span, p, ul {
        display: flex;
        align-items: center;
        gap: 6px;
        
        color: #FFF;
        font-family: Poppins;
        font-size: var(--small, 14px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-decoration: none;

        white-space: nowrap;
    }

    .link-button svg, #toggle-menu svg {
        fill: var(--latte, #EFE9CE);
    }

    .menu {
        display: flex;
        padding: 20px 0;
        align-items: center;
        gap: 20px;    
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            display: block;

            svg {
                display: block;
                height: var(--small, 14px);
                fill: var(--latte, #EFE9CE);
            }
        }
    }
}

header nav {
    display: flex;
    padding: 20px 40px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background-color: var(--olive, #1C5551);
    flex-wrap: nowrap;

    .col-1 {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        max-width: 80%;
        overflow: hidden;
        max-height: 20px;
    }

    .col-2 {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    @media screen and (max-width: 767px) {
        .col-1 {
            display: none;
        }
        .col-2 {
            justify-content: space-between;
            flex: 1 1 0;
        }
    }
}

header .contact {
    display: flex;
    padding: 20px 80px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    border-bottom: 1px solid #54504B;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);

    .col {
        display: flex;
        align-items: center;
        gap: 40px;

        .logo {
            max-width: 283px;
        }
    }

    .col .contact-info {
        display: flex;
        align-items: center;
        gap: 10px;

        span {
            color: var(--olive-light, #96B0A6);
            font-family: Poppins;
            font-size: var(--small, 14px);
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        a {
            color: var(--latte, #EFE9CE);
            font-family: Poppins;
            font-size: var(--small, 14px);
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
    }

    @media screen and (max-width: 1024px) {
        .col .book-link {
            display: none;
        }
    }

    @media screen and (max-width: 767px) {
        padding: 20px;

        .col .contact-info {
            display: none;
        }
    }
}

header .extended-header {
    display: none; /* Flex is added when header gets .hidden added to it */
    padding: 20px 80px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;

    border-radius: 0 0 12px 12px;
    background: var(--olive, #1C5551);
    border-bottom: 1px solid black;

    .title {
        color: #FFF;
        font-family: Poppins;
        font-size: var(--h1, 50px);
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
    }

    .links {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;

        .col {
            display: flex;
            align-items: flex-start;
            gap: 80px;

            .links-heading {
                color: var(--latte, #EFE9CE);
                font-family: Castoro;
                font-size: var(--h4, 28px);
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }

            .link-group, .link-group .menu {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
                
                a {
                    color: var(--olive-light, #96B0A6) !important;
                }
            }

            .link-group.collapsed .menu {
                display: grid;
                grid-auto-flow: column;
                grid-template-rows: repeat(4, 1fr);
                gap: 10px 40px;
            }
        }
    }

    .extended-contact {
        display: flex;
        align-items: center;
        align-self: stretch;
        gap: 20px;

        .contact-info {
            display: flex;
            align-items: center;
            gap: 10px;

            span {
                color: var(--olive-light, #96B0A6);
                font-family: Poppins;
                font-size: var(--small, 14px);
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }

            a {
                color: var(--latte, #EFE9CE);
                font-family: Poppins;
                font-size: var(--small, 14px);
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }
    }

    .close {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;

        #close-extended-menu {
            

            svg {
                width: 26px;
                height: 26px;
                aspect-ratio: 1/1;
            }
        }
    }

    @media screen and (max-width: 1024px) {
        .links, .links .col {
            flex-direction: column;
            gap: 20px;
        }

        .links .col .link-group.collapsed .menu {
            display: flex;
            flex-direction: column;
        }

        .extended-contact {
            flex-direction: column;
            align-items: start;
        }
    }
}

header.extended {
    max-height: 95vh;

    nav {
        background-color: var(--coffee);
    }

    .contact {
        border-bottom: unset;
        background: var(--olive, #1C5551);

        .link-button {
            background-color: var(--latte);
            color: var(--text);

            svg {
                fill: black !important;
            }
        }
    }

    .extended-header {
        display: flex;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-gutter: stable; /* Reserves the scrollbar space so content never shifts */
    }
}

/* Transitions */
header {
    nav, .contact, .extended-header {
        transition: background-color 0.3s;
    }
}