/*base page body styling*/
body {
    background-color: midnightblue;
    min-height: auto;
    margin-top: 100px;
    color:lightgray;
}

/*default styling for all elements in div "wrapper"*/
#wrapper {
    margin: 0 auto;
    display: grid;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 250px 60px minmax(800px, auto) minmax(250px, auto);
}

/*default paragraph text color*/

h1 {
    font-size: clamp(1rem, -0.875rem + 5.333333vw, 2rem);
}

h2 {
    font-size: clamp(1rem, -0.875rem + 5.333333vw, 2rem);
}


p {
    color: white;
    font-size: 1vw;
}

/* nav region styling*/
nav {
    grid-area: nav;
    background-color: ThreeDDarkShadow;
    margin: 0px;
    list-style: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* on small screens: adjust nav to fit */
@media screen and (max-width: 768px) {

    nav ul {
        font-family: sans-serif;
        font-weight: normal;
        text-size-adjust: auto;
        display: flex;
        flex-wrap:wrap;
        justify-content: space-evenly;
        align-items: center;
        gap: .5em
    }
}

    /* nav bar styling - create list and formatting*/
    nav ul {
        font-family: sans-serif;
        font-weight: 900;
        text-size-adjust: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }


    /*create sub item within Nav*/
    nav a {
        text-decoration: none;
        display: block;
        padding: 0.5em;
    }

        /*specify action on hover for sub item "nav a"*/
        nav a:hover {
            color: white;
            background: none;
        }

    /* header foundation styling*/
    header {
        grid-area: header;
        grid-template-columns: 3fr 3fr 1fr;
        background-color: none;
        /*header sub grid breakdown*/
        display: grid;
        grid-template-areas: "text logo company";
        margin: 10px;
    }


        /*second styling option for pages where only 2 objects are needed in the header space*/
        header.two-header {
            display: grid;
            grid-template-areas: "text logo";
            grid-template-columns: 1fr 2fr;
            align-items: start;
        }


    /*styling for header main left*/
#hml {
    grid-area: text;
    text-align: left;
    margin: 10px;
    justify-content: center;
    overflow-wrap: break-word; /* allows long words to wrap */
    max-width: 100%;
}

        #hml h1, #hml h2, #hml p {
            margin: 0;
        }

        #hml h1 {
            font-size: clamp(1.5rem, 4vw, 3rem);
        }

        #hml h2 {
            font-size: clamp(0.75rem, 2vw, 2rem);
        }

        #hml p {
            font-size: clamp(0.5rem, 1vw, 1.2rem);
        }


    /*stlying for header main image*/
    header img {
        grid-area: logo;
        width: clamp(100px, 30vw, 200px); /*150px → minimum width 30vw → flexible middle range (30% of the viewport width) 300px → maximum width
        height: auto; /* maintain aspect ratio */
        object-fit: contain; /* avoid cropping */
        margin: 1rem 5rem;
    }

    /*styling for header main right*/
    #mhr {
        grid-area: company;
        text-align: center;
        margin: 10px;
    }

    header article1 p {
        grid-area: company;
        text-align: center;
        font-size: 1em;
    }

#hlogo {
    grid-area: logo;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; /* keeps them side-by-side */
    padding-right: 2em;
}

    #hlogo img {
        width: clamp(80px, 15vw, 180px);
        height: auto;
        object-fit: contain;
    }


    /*main region styling*/
    main {
        grid-area: main;
        /*mainsub grid breakdown*/
        display: grid;
        grid-template-areas: "mml mmc";
        grid-template-columns: minmax(100px, 250px) 1fr; /* mml between 200px–400px, mmc fills remaining */
        grid-template-rows: 1fr;
        gap: 1em; /* space between containers*/
        padding: 1em; /* space between content and container border*/
        margin: 10px; /*space between main sections*/
    }
        /* Override grid layout only for pages that contain #main-single-item */
        main:has(#main-single-item) {
            display: block; /* temporarily disable grid layout for pages using a single main section container. ie future_skills*/
        }

    /*main body left container*/
    #mml {
        grid-area: mml;
        display: flex; /* enable flexbox */
        flex-direction: column; /* stack images vertically */
        align-items: flex-start; /* keep images aligned to the left */
        justify-content: flex-start;
        gap: 20px; /* space between images */
        padding-right: 5em;
    }

        /* make images responsive but left anchored */
        #mml img {
            width: clamp(100px, 30vw, 200px); /*150px → minimum width 30vw → flexible middle range (30% of the viewport width) 300px → maximum width
        height: auto; /* maintain aspect ratio */
            object-fit: contain; /* avoid cropping */
        }

    /*main body right container - this section has been removed for styling, code left should the change need reverting*/
    /*#mrc {
    grid-area: mrc;
    background-image: url("../images/bground.jpg");
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
    background-position: center;
    background-size: contain;
    min-height: 400px; /* to keep visible */

    /* Base layout for mmc */
    #mmc {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        align-items: center;
        padding: 10px;
    }

/* Special styling for 'Who are we?' heading only on home page */
       .home-page #mmc h3 {
           font-weight:900;
           flex-basis:100%;
            font-size: clamp(2rem, 5vw, 6rem);
            font-weight: bold;
            margin-bottom: 0.5em;
            text-align:center;
        }

/* Special styling for 'h3' heading only on why_learn page */
.why_learn #mmc h3 {
    font-weight: 900;
    flex-basis: 100%;
    font-size: clamp(2rem, 5vw, 6rem);
    font-weight: bold;
    margin-bottom: 0.5em;
    text-align: center;
}

/*second styling option for pages where only 1 object are needed in the main space*/
#main-single-item {
    display: flex; /* places images side by side */
    justify-content: left; /* centers the whole row */
    align-items: flex-start; /* keeps top edges aligned */
    gap: 20px; /* 20px space between images */
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    padding: 1em; /* breathing room inside the section */
}

/* Individual logo image behavior */
#main-single-item img {
    flex: 1 1 30%; /* each image takes roughly one-third of the row, but can shrink/grow */
    max-width: 30%; /* keeps them from blowing up too large */
    height: auto; /* maintain aspect ratio */
    object-fit: contain; /* prevent cropping */
    min-width: 200px; /* keeps them readable before they stack */
}


    /* footer region styling*/
    footer {
        grid-area: footer;
        margin: 0px;
        /*footer grid breakdown*/
        display: grid;
        grid-template-areas: "footer-text1 footer-text2 footer-text3";
        grid-template-columns: 2fr 3fr 2fr;
        grid-template-rows: 1fr;
     
     
    }

    /* footer left containter styling*/
#flc {
    grid-area: footer-text1;
    color: white;
    background-color: black;
    
}
    /* footer right containter styling*/
#frc {
    grid-area: footer-text3;
    color: white;
    background-color: black;
    align-content: center;
}

/* footer middle containter styling*/
#fmc {
    grid-area: footer-text2;
    display:flex;
    color: white;
    background-color: black;
    align-content: center;
}