* {
    box-sizing: border-box; 
}

/* Base styles for the body */
body {
    background-color: #40407A; /* Dark purple background for the whole page */
    margin: 0; /* Remove default browser margin */
}

/* Styles for the main content container */
#wrapper {
    background-color: #F5F5F5; /* Light gray background inside the wrapper */
    padding: 2em; /* Spacing inside the wrapper */
}

/* Styles for the main page headers (outside the wrapper) */
header {
    background-color: #40407A; /* Fallback color */
    color: #FFFFFF; /* White text color */
    background-image: url(sunrise.jpg); /* Background image for the header */
    background-size: 100% 100%; 
    margin-top: 50px; 
    font-size: 90%; 
    min-height: 200px;
}

/* Specific styles for the header on the homepage (class="home") */
.home {
    height: 20vh; /* 20% of the viewport height */
    padding-top: 2em; 
    padding-left: 10%; 
}

/* Specific styles for headers on content pages (class="content") */
.content {
    height: 20vh; /* 20% of the viewport height */
    padding-top: 2em;
    padding-left: 10%;
}

/* Styles for the main navigation bar */
nav {
    text-align: right; /* Align links to the right */
    background-color: #FFFFFF; /* White background for the nav bar */
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 1em;
    padding-right: 0;
    position: fixed; /* Keep the nav bar visible at the top when scrolling */
    top: 0;
    left: 0;
    z-index: 9999; /* Ensure the nav is above other content */
    width: 100%;
    height: auto;
}

nav ul {
    list-style-type: none; 
    margin: 0;
    padding-right: 2em;
    font-size: 1.2em;
    padding-left: 0;
}

/* Styles for list items (the links) inside the nav */
nav li {
    display: inline; /* Display items side-by-side */
    padding-left: 4em; /* Spacing between navigation links */
}

/* Link colors for navigation based on state */
nav a:link { color: #3F2860; } /* Normal unvisited link */
nav a:visited { color: #497777; } /* Visited link */
nav a:hover { color: #A26100; } /* Link when hovered over */

/* Link colors for links inside the header */
header a:link, header a:visited {
    text-decoration: none;
    color: #FFFFFF;
}

header a:hover {
    color: #EDF5F5;
}


#mathero {
    height: 300px;
    background-image: url(yogamat.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: none; /* Hide on mobile by default */
}


#loungehero {
    height: 300px;
    background-image: url(yogalounge.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: none; /* Hide on mobile by default */
}

/* Style for H2 headings */
h2 { margin: 0; }

/* Styles for the footer area */
footer { clear: right; }

/* Base styles for section elements */
section {
    padding-left: .5em;
    padding-right: .5em;
}


#flow {
    display: block; /* Default display for mobile */
}



form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

/* 2. Configure input, datalist, and textarea element selectors with .5em bottom margin */
input, datalist, textarea {
    margin-bottom: .5em;
}



@media screen and (min-width: 600px) {

    
    nav ul {
        display: flex;
        flex-direction: row; 
        flex-wrap: nowrap;
        justify-content: flex-end; /* Push links to the right end */
    }

    
    section {
        padding-left: 2em;
        padding-right: 2em;
        flex: 1; /* Allow sections to take up equal available space */
    }

    
    #mathero, #loungehero {
        display: block;
        margin-bottom: 1em;
    }
    
    
    #flow {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
    }

    /* Configure the table element */
    table {
        border: 1px solid #40407A; /* 1px purple border */
        margin-bottom: 1em;        /* 1em bottom margin */
        border-collapse: collapse; /* No cellspacing */
    }

    
    td, th {
        padding: 0.5em;          
        border: 1px solid #40407A; 
    }

   
    tr:nth-of-type(even) {
        background-color: #D7E8E9;
    }

    
    caption {
        margin: 1em;      /* 1em margin around the caption */
        font-weight: bold; /* Bold text */
        font-size: 120%;   /* 120% font size */
    }
    
    /* Center the body content on the screen and define width boundaries */
    body {
        max-width: 1600px;
        min-width: 900px;
    }

    /* Center the wrapper horizontally using auto margins */
    #wrapper {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Ensure footer clears floated elements (if any older layout methods are used) */
    footer {
        clear: left; 
    }

    /* --- Form Styles for Wide Viewports (Grid Layout) --- */

    /* 1. Configure form element selector: grid display, 1em gap, 2 columns */
    form {
        width: 60%;
        max-width: 40em;
        display: grid;
        grid-gap: 1em; /* Space between grid items */
        /* Define two columns: first is 9em wide (for labels), second takes remaining space (1fr) */
        grid-template-columns: 9em 1fr;
    }
    
    /* Reset the bottom margin applied in the mobile styles, grid handles spacing now */
    input, datalist, textarea {
        margin-bottom: 0;
    }

    /* 2. Configure attribute selector for the submit button to place it in the second column */
    input[type="submit"] {
        grid-column: 2 / 3; /* Start at line 2, end at line 3 (places button in the second column) */
        width: 9em;
        margin-bottom: .5em;
    }
}

@media screen and (min-width: 1024px) {
    
    
    header {
        font-size: 120%;
    }

    /* Adjust homepage header height and padding for large displays */
    .home {
        height: 50vh;
        padding-top: 5em;
        padding-left: 8em;
    }
    
    /* Adjust content page header height and padding for large displays */
    .content {
        height: 30vh;
        padding-top: 2em;
        padding-left: 8em;
    }

    /* Center the wrapper horizontally on large screens */
    #wrapper {
        width: 80%;
        margin: auto;
    }
}