/*

    Cut down design - comic strip layout

    Fixed header - outside <div root>

    OK fixed header first - here we go

    <div root should scroll up under header>   DONE - scrolls and starts below header and includes footer at the bottom

    @media alternative long header for 800px plus screens DONE - switches between two headers completely swapping layout in header

    BIG ONE - NEXT expanable menu from hamburger on small screens - covers entire screen

        DONE - layout header so text logo icons spaced out properly - looks like flexbox might be the way to go here as done by Apple.com

        DONE -- just need width correcting for small nav bar then can move onto hamburger!!!!!!!!!

        DONE - make hamburger clickable 

        DONE - tidied up logo and nav bar design
        
        DONE - add cross and close menu script

        DONE fullscreen menu on click

        DONE - clear functional menu structure for the site - simple - 5 menu items are: tutition, resources, search, about, shopping-basket

        DONE - make footer collapse to vertical at small screen size

        DONE - add pages according to structure

        DONE - thin lines on dropdown menu to divide it up

        DONE - add page structure to home page - hero images and any links functionality

        BIG ISSUE - improved variables so uses global sizes

        >>>>> Finish live home page design today.

        >>>>> Art work and words

        SEVEN - launch site

        EIGHT - search function

        NINE - contact function

        TEN - payment

        ELEVEN - booking form

*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
    /* global variables to do after initial design live */
    --global-navigation-height: 80px;
    --hero-image-height: 500px;
}

.root {

    top: calc(var(--global-navigation-height)*-1);

    /* need it to start below header which is fixed at 80px */

    /* single column grid at the moment */

    width: 100%;


    /* starts root just beneath header which has fixed height of 80px */
    padding-top: var(--global-navigation-height);
    z-index: 2;
}

/* Ok so this works really well. It makes the main content scrollable and leaves the footer fixed at the bottom of the page */

/* implies I want to add footer as content to main - removing fixed height for root (100%) means footer follows main at bottom which is good NOOO breaks the fixed header !! */

/* NOT sure it I want footer like this */

.big-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 90;
    background-color: blueviolet;
    margin: 0;
}

.header {
    /* container for horizontal nav bar */
    position: relative;
    margin: 0 auto;             /* responsive margin */
    max-width: 800px;
    padding: 0 22px;            /* left right padding - weird stuff max(22px, env(safe-area-inset-left)) etc from Apple.com */
    z-index: 90;
    padding-left: max(22px, env(safe-area-inset-left));
}

.nav-bar {
    position: relative;
    height: 80px;
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 -8px;
    z-index: 90;
    color: white;
}

.nav-menu {
    display: none;
}

.nav-frame {
    position: relative;
    display: none;
    z-index: 90;
}

.nav-dropdown {
    display: none;
    height: 100%;
    padding-top: 80px;
    z-index: 90;
}

.footer {
    /* acts as last page in main */
    height:min-content;
}

.logo {
    height: 100%;
}

.nav-cross {
    display: none;
}

@media screen and (max-width: 800px) {
    /* Great now just need to show totally new layout !! */
    /* switches from header to nav-menu */

    .header {
        display: none;
    }

    .big-header {
        display: none;
    }

    .nav-menu {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        position: fixed;
        width: 100%;
        justify-content: space-around;
        align-items: center;
        margin: auto;
        height: var(--global-navigation-height);
        z-index: 90;
    }

    .nav_frame {
        top: 0;
        left: 0;
        width: 100%;
        z-index: 90;
        background-color: rgb(12, 11, 14);
        margin: auto;
    }

    .hamburger {
        justify-self: center;
    }

    .magnifying-glass {
        justify-self: center;
    }

    .nav-cross {
        justify-self: center;
    }

    .hamburger:hover {
        cursor:grab;
    }

    .root .footer > ul {
        flex-direction: column;
    }

    .page_info {
        z-index: 4;
    }

    .hero-image-wrapper {
        z-index: 1;
    }
}