/* CUSTOM FONT */
/* Imports font from local folder */
@font-face {
    font-family: "Quiapo";
    src: url('/fonts/Quiapo/QuiapoFree2-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* HEADER AREA STYLING */
header {
    width: 100%;
    height: 80px;

    background-color: rgb(252, 239, 220);
    outline: solid #01407e 2px;
}


/* HEADER CONTENT STYLING */
/* Header logo homepage */
#header-nav-logo {
    height: 100%;

    display: inline-block;
}

#header-nav-logo img {
    height: 100%;
    margin-left: 2vw;
    padding: 8px 0;
}

/* Hides mobile menu when not active */
.side-menu, .menu-icon {
    display: none;
}

/* Header navigation links styling */
#header-nav {
    width: fit-content;

    position: relative;
    float: right;
}

.page-links {
    list-style: none;
}

.page-links li {
    float: left;

    border-left: solid #01407e 2px;
}

.page-links a {
    padding: 21.5px 44px;

    display: block;

    font-family: 'Quiapo', 'Trebuchet MS', Arial, sans-serif;
    font-weight: normal;
    font-size: 1.75rem;
    color: #01407e;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
}

.page-links a:hover {
    background-color: #fddf05;
}


/* ADJUSTMENTS FOR MOBILE HEADER NAVIGATION MENU */
@media (max-width: 800px) {
    #header-nav {
        width: 100%;
        height: 100vh;
        max-height: 0;

        position: fixed;
        overflow: hidden;
        z-index: 1;

        transition: max-height .5s ease-out;

        background-color: rgb(252, 239, 220);
    }

    .page-links li {
        float: none;

        border-bottom: solid #01407e 2px;
    }

    .page-links a {
        display: block;

        text-align: left;
    }

    /* MOBILE MENU BUTTON STYLING */
    .menu-icon {
        padding: 22px 20px;
        
        display: block;
        position: relative;
        float: right;
        cursor: pointer;      
        
        border-left: solid 2px #01407e;

        font-size: 1.7rem;
        text-align: left;
        color: #01407e;
    }

    .menu-icon:hover {
        background-color: #fddf05;
    }

    .menu-icon::before, .menu-icon::after {
        height: 100vh !important;

        display: block;
        position: absolute;
        content: '';

        transition: all .2 ease-out;
    }

    .side-menu {
        display: none;
    }

    /* MOBILE MENU TRANSITION STYLING */
    .side-menu:checked ~ #header-nav {
        max-height: 100vh !important;
    }

    .side-menu:checked ~ .menu-icon > i.fa.fa-bars::before {
        content: "\f00d";
    }

    body:has(.side-menu:checked) {
        overflow: hidden;
    }
}