/** **************************************************************************************************************** **/
/*
/* This script will use the correct @Media Device Breakpoints for the HEADER (top_row) and NAVBAR of all PUBLIC screens
/*
/** **************************************************************************************************************** **/

@media only screen {
    /* DEFAULT Setting */

    .top_row {
        display: grid;
        grid-template-columns: 5fr 1fr 7fr 1fr 5fr;
        grid-template-rows: 2rem 8rem;
        grid-template-areas:
                ". logo assoc_name login ."
                ". logo assoc_name member_profile .";
    }

    /* Retain scale of background image */
    .top_row {
        background-size: contain;
        background-position: center center;
    }
    .assoc_name {font-size: 2.2rem;}
    .nav_menu{gap: 5rem; font-size: 1.4rem;}

    /* Screen Drag 2480 -  */
    @media only screen and (max-width: 2480px) {
        .top_row {
            display: grid;
            grid-template-columns: 3fr 1fr 7fr 1fr 3fr;
        }
    }

    /* Screen Drag 1800 -  */
    @media only screen and (max-width: 1800px) {
        .top_row {
            display: grid;
            grid-template-columns: 1fr 1fr 7fr 1fr 1fr;
        }
        .nav_menu{gap: 4rem;}
    }

    /* Screen Drag 1480 -  */
    @media only screen and (max-width: 1480px) {
        .top_row {
            display: grid;
            grid-template-columns: 1fr 1fr 7fr 1fr 1fr;
        }
        .top_row {height: 9rem;}
        img {height: 8rem;}
        .nav_menu{gap: 3rem; font-size: 1.3rem;}
    }

    /* Decrease the size of the Association Name, and decrease the size of the Navbar links and the gaps between them */
    @media(max-width: 1300px)
    {
        .top_row {height: 8rem;}
        img {height: 7rem;}
        .assoc_name {font-size: 1.6rem;}
        .nav_menu{gap: 2rem; font-size: 1.1rem;}
    }


    /* Hide the Navbar links and display the Menu Hamburger */
    @media(max-width: 1024px){
        .navbar{display: flex; justify-content: left;}

        .dropdown{display: none;}   /* Hiding the Down Arrow */

        .hamburger{
            display: flex;
            position: absolute;
            left: 1rem;
            top: 1.6rem;
            gap: 1rem;
            align-items: center;
            color: white;
            margin-left: 1rem;
        }

        /* Animating the 'X' */
        .hamburger.active .bar:nth-child(2){opacity: 0;}
        .hamburger.active .bar:nth-child(1){transform: translateY(8px) rotate(45deg);}
        .hamburger.active .bar:nth-child(3){transform: translateY(-8px) rotate(-45deg);}

        .initial{display: block;}
        .navbar{position: relative;} /* To allow the Hamburger Navbar to be scrolled on smaller devices.

        /* Repositioning the Navbar links to the Dropdown */
        .nav_menu{
            position: relative;
            left: -100%;
            top: 5rem;
            height: fit-content;
            background-image: linear-gradient(rgba(var(--primary_colour), 1), rgba(var(--primary_colour_dark), 1));
            gap: 0;
            flex-direction: column;
            text-align: center;
            transition: all 0.5s ease 0s;
        }

        .top_row {
            height: 6rem;
            display: grid;
            grid-template-columns: 0.5fr 1fr 7fr 1fr 0.5fr;
        }

        .assoc_name {font-size: 1.2rem;}
        .navbar a {padding: 0.5rem 1rem; min-height: 2.5rem }
        .nav_item {margin: 0.3rem 0;}
        .nav_menu.active {left: 0;}
        img {height: 5rem;}
    }

    /* Screen Drag 800 */
    @media only screen and (max-width: 800px) {
        .top_row {
            height: 6rem;
            display: grid;
            grid-template-columns: 0.5fr 1fr 7fr 1fr 0.5fr;
        }
        .assoc_name {padding-top: 1.2rem; font-size: 1rem;}
        img {height: 5rem;}
        .login {font-size: 0.8rem}
    }

    /* Screen Drag 600 */
    @media only screen and (max-width: 600px) {
        .top_row {
            height: 5rem;
            display: grid;
            grid-template-columns: 0.5fr 1fr 7fr 1fr 0.5fr;
        }
        .assoc_name {font-size: 0.8rem;}
        img {height: 4rem;}
        .login {font-size: 0.8rem}
    }

    /* Screen Drag 450 - A sneaky way of not displaying the LOGO, but also to maintain the integrity of the display. */
    @media only screen and (max-width: 450px) {
        .top_row {
            height: 5rem;
            display: grid;
            grid-template-columns: 0.5fr 1fr 7fr 1fr 0.5fr;
        }
        .assoc_name {font-size: 0.8rem;}
        .logo {display: none;}
        .login {font-size: 0.6rem}
    }

    /* Screen Drag 350 - Dinosaur Devices */
    @media only screen and (max-width: 350px) {
        .top_row {
            height: 5rem;
            display: grid;
            grid-template-columns: 0.25fr 1fr 5fr 1fr 0.25fr;
        }
        .assoc_name {
            height: 1rem;
            line-height: 1rem;
            font-size: 0.6rem;
        }
        .logo {display: none;}
        .login {font-size: 0.6rem}
    }
}