/*	Path Light Studio
	Author: Rachel Villarreal
	Date: 3/31/25*/
* {												/* the "*" means that if affects everything on the page */
    box-sizing: border-box; 					/* makes sure when sizing something the border and padding are included */
}

body {
	background-color: #04047A;					/* makes the background dark blue */
	margin: 0;									/* removes ectra space around the page */
	color: #40407A; 							/* default text color dark bule */
	font-family: Verdana, sans-serif;  			/* uses veranda font */
	
	}

#wrapper	{									/* big box that holds everything inside the page */
	color: #3F2860;								/* text color inside is purple */
	background-color: #F5F5F5;					/* light grey background */
	padding: 2em;								/* adds space so text does not touch the edge */
}
	
video { width: 100%;
		height: auto;
		max-width: 250px;
	}
/* Header */
.site-header {
    background-image: url("sunrise.jpg");
    background-position: right;
    background-color: #40407A;
    color: #FFFFFF;
    background-size: 100% 100%;
    margin-top: 50px;
    font-size: 90%;
    min-height: 200px;
    height: 20vh;
    padding-top: 2em;
    padding-left: 10%;
    max-height: 300px;
}


/* hyperlinks inside the header */
header a {										/* affects all links inside the header */
    text-decoration: none; 						/* Remove underline */
}

/* unvisited and visited links inside header */
header a:link,									/* affects links that havent been clicked yet */
header a:visited {								/* affects links that have been clicked on alread */
    color: #FFFFFF; 							/* white text color */
}

/* hover effect for header links */
header a:hover {								/* affcets links when mouse is over them */
    color: #EDF5F5; 							/* light grayish-blue color */
}



nav{
	text-align: right;							/* moves the menu to the right */
	font-weight: bold;							/* makes the text bold */
	position: fixed;							/* stciks the menu to the top so it never scrolls away */
	top: 0;										/* makes sure its pinned to the top left corner */
	left: 0;		
	z-index: 9999;								/* keeps the menu on top of everything else */
	width: 100%;								/* makes the menu as wide as the page */
	height: auto;						
	background-color: #FFFFFF;					/* white background */
	padding-right: 0;
}
/* unordered list inside nav */
nav ul{
	list-style-type: none;						/* removes bullets from the menu list */
	margin: 0;									/* removes extra space */
	padding-right: 2em;							/* moves text a little away from the right side */
	font-size: 1.2em;							/* makes the text bigger */
	display: flex;
	flex-direction: row;						/* aligns items in a horizontal row */
	flex-wrap: nowrap;							/* prevents items from wrapping to the next line */
	justify-content: flex-end;			  		/* aligns the items to the end (right side) */
}

/*list items inside of nav */
nav li{
	display: inline;							/* puts menu items in a row instead of a stack */
	padding-left: 4em;
}

/* unvisited links */
nav a:link {
    color: #3F2860; 							/* dark purple color */
    text-decoration: none; 						/* Removes the underline */
}

/* visited links */
nav a:visited {
    color: #497777;								/* grenish blue color */
}

/* interactive links */
nav a:hover {
    color: #A26100;								/* orange color */
}

#mathero {
	height: 300px;								/* makes a 300px tall section with the yoga mat picture */
	background-image: url(yogamat.jpg);
	background-size: 100% 100%;					/* stretches the picture to fill the space */
	background-repeat: no-repeat; 
	display: block;								/* clear left and right floats, makes sure nothing overlaps */
	margin-bottom: 1em;
}

#loungehero {
		height: 300px;
		background-image: url(yogalounge.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display:block;							/* clear left and right floats */
		margin-bottom: 1em;
}	

#flow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

nav a {
    text-decoration: none;
}

h2 {
	margin: 0
}
/* Float-based two-column layout for schedule sections */
section {										/* <-------- this might be wrong */
	padding-left: 2.0em;
	padding-right: 2.0em;
	flex: 1;
}

section.schedule {
    overflow: hidden; 							/* This clears the float automatically */
	gap: 2em;
	display: flex;
}

.schedule > .one-half {
    float: left;								/* puts the two sections side by side */
    width: 48%; 								/* Each section will take up 48% of the width (almost half of the page */
    padding-left: 2em;		
    padding-right: 2em;
}
footer {
	font-size: small;							/* small and italic text */ 
	text-align: center;							/* centeres everthing */
	font-style: italic;
	padding: 1em;								/* adds space around it */
	clear: right; 								/* clear right float*/ 
}
	
li, dd{
	font-size: 90%;
}

table {
    border: 1px solid #40407A; 
    margin-bottom: 1em; 						/* 1em bottom margin */
    border-spacing: 0; 							/* No cellspacing */
}

td, th {
    padding: 0.5em;								 /* Adds 0.5em padding inside table cells */
    border: 1px solid #40407A; 					/* 1px solid purple border */
}

tr:nth-of-type(even) {
    background-color: #D7E8E9; 					/* Light teal background for even rows */
}

caption {
    margin: 1em;        					  /* Adds space around the caption */
    font-weight: bold;  				 	  /* Makes the text bold */
    font-size: 120%;     					  /* Increases the font size to 120% */
}

form {	
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;	
		width: 100%;						/* Full width for narrower screens */
		padding: 1em;
		background-color: #EAEAEA;
		font-family: Arial, sans-serif;
}

input, textarea, datalist { margin-bottom: 0.5em; 
						  width: 100%;
}
/* styles the "submit" button */
input[type="submit"]	{
		align-self: center;					/* centers the "submit" button */			
		width: 9em;
		margin-bottom: 0.5em;
}	
@media (min-width: 600px) { 				/* Grid layout for a two-col display */
    form {	
        width: 60%;
        max-width: 40em;
        display: grid;
        grid-template-columns: 9em 1fr; 	/* Label width: 9em, Input width: 1fr */
        gap: 1em;
    }

    input[type="submit"] {
        grid-column: 2 / 3;
        width: 9em;
        margin-bottom: 0.5em;
    }
}

@media (min-width: 1024px) {
		nav ul { display: flex; flex-flow: row nowrap; 
					  justify-content: space-around; }		
		nav ul li { border-bottom: none; }				
		
		header   { grid-area: header; 
					font-size: 120%;
					}	
		#wrapper { display: grid;
				 margin: auto;
				 width: 80%;
					}
		.home  { grid-area: nav; 
				 height: 50vh;
				 padding-top: 5em;
				 padding-left: 8em;
		}
		
		.content { grid-area: main; 
				   height: 30vh;
				   padding-top: 2em;
				   padding-left: 8em;
					}
		

}