/* CSS Document */
/* --- 1. CSS Reset --- */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
body {
	font-size: 16px;
	line-height: 1.5;
	font-family: Roboto, sans-serif;
}
ul, ol {
	list-style: none;
}
a {
	text-decoration: none;
	color: inherit;
}

/* --- 2. MAIN  --- */

body {
	width: 100%;
	max-width: 1024px;
	background-color: #71645b;
	margin: 10px auto 20px;
	padding: 0px;
	scrollbar-base-color: #666666;
	scrollbar-arrow-color: #ffffff;
}

header {
	margin: 0;
	padding: 0;
}
.banner {
	margin: 0; 
	padding: 0;
	width:100%; 
	max-width:1024px; 
	height:auto; 
}
/* The Image: Forces a 2048px file to squeeze into the container */
.banner img {
    display: block;
    width: 100%;
    height: auto;
}

.logo {
	background-color: #900;
	float: left;
	margin: 0;
	padding: 0;
}

.logo p {
	color: #fff;
	font-family: Lora, sans-serif;
	font-size: 19px;
	margin: 0;
	padding: 0 12px 0 17px;
}

p {
	color: #000000;
	margin: 0;
	padding: .5em 0;
}

h1 {
	color: #825700;
	/* font-family: system-ui, serif;*/
	font-family: Lora, serif;
/*	font-size: 20px;*/
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.5em;
}

h2 {
	color: #825700;
	font-family: Lora, serif;
/*	font-size: 18px;*/
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.5em;

}
.page-resources h2 {
	color: #825700;
	font-family: Roboto, sans-serif; 
	font-size: 15px;
	font-weight:400; 
	line-height:1.5em;
/*	padding: 6px 0 2px 0; */
	display:inline-block;
	padding: .25em 0; 
	margin: 10px 0 0 0;  
}

h3 {
	/*color: #825700; */
	font-family: Roboto, sans-serif; 
	font-size: 15px;
	font-weight:400; 
	line-height:1.5em;
	padding: 6px 0 2px 0; 
	text-transform:uppercase; 
}

a:link {
	color: #903;

}
a:visited {
	color: #903;

}
a:hover {
	color: #C00;

}
a:active {
	color: #C00;
}

/* --- 3. LAYOUT --- */
.wrapall {
		background-color: #F4F1DB;
	/*	box-shadow: 3px 3px 4px #333;*/
	padding: 1em 3em 3em 3em;
}
.wrapall-resources {
		background-color: #F4F1DB;
		padding: 1em 4em 3em 4em;
}
.wrapall-ceqa {
		background-color: #F4F1DB;
		padding: 2em 6em 6em 6em;
}

.grid2col {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 40px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #F4F1DB;
	padding: 1em 2em 3em 2em;
}

.grid-50-50 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 95px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #F4F1DB;
}
.grid-50-50-resources {
	background-color: #F4F1DB;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	margin: 0 auto;
	overflow: hidden;
}

.wrap2col {
	background-color: #F4F1DB;
	padding: 0;
	margin: 0 0 12px;
}

.signup {
	background-color: #D0BBA6;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 12px 6px 8px 12px;
	border: 1px solid #9F8D8E;
}

.resource-link-groups {
	margin-top:1em; 
	background-color: #EEEBD9; 
	padding: .5em 1em; 
	border-radius:1em;
}


/* ----------  HM RIGHT COL --------------  */

.mailblk {
	border: 1px solid #9F8D8E;
	padding: 10px 14px 14px 14px;
	margin-bottom:24px; 
}

.mailblk a {
	font-size: 14px;
	line-height:1.5em;
	padding: .5em;
	border: 1px solid #9F8D8E;
	color:#714c4c;
}
.mailblk a:visited {
	color: #714c4c;
}
.mailblk a:hover {
	border: 1px solid #CC0000;
	color: #CC0000;
}
.mailblk a:active {
	color: #714c4c;
}
.projects-caption-mobile {
		display: none; 
}
/* --- SIDEBAR PROJECT PHOTOS --- */

.project-photos {
    display: flex;
    flex-direction: column;
    gap: 10px; /* between the stacked images */
    margin-bottom: 0;
}

.project-photos img {
    width: 100%;
    max-width: 240px;
    height: auto;
    display: block;
}


/* --- IMAGE ALIGNMENT UTILITIES --- */
.align-left {
    float: left;
    width: 50%; /* Keeps it at half the container width on desktop */
    max-width: 400px; /* Optional: prevents it from getting too huge on wide screens */
    margin: 6px 24px 16px 0; /* Pushes the text away from the right and bottom edges */
    height: auto;
}
.align-right {
    float: right;
    width: 50%; /* Keeps it at half the container width on desktop */
    max-width: 400px; /* Optional: prevents it from getting too huge on wide screens */
    margin: 6px 0 16px 24px; /* Pushes the text away from the right and bottom edges */
    height: auto;
}

.align-left-300 {
    float: left;
    width: 100%; /* Keeps it at half the container width on desktop */
    max-width: 300px; /* Optional: prevents it from getting too huge on wide screens */
    margin: 6px 24px 16px 0; /* Pushes the text away from the right and bottom edges */
    height: auto;
}

.align-left-400 {
    float: left;
    width: 100%; /* Keeps it at half the container width on desktop */
    max-width: 400px; /* Optional: prevents it from getting too huge on wide screens */
    margin: 6px 24px 16px 0; /* Pushes the text away from the right and bottom edges */
    height: auto;
}


.align-right-300 {
    float: right;
    width: 100%; /* Keeps it at half the container width on desktop */
    max-width: 300px; /* Optional: prevents it from getting too huge on wide screens */
    margin: 6px 0 16px 24px; /* Pushes the text away from the right and bottom edges */
    height: auto;
}


/* --- VERTICAL SPACING  --- */
.push-down-xs { margin-top: 0.25em; } /* Extra small nudge */
.push-down-sm { margin-top: 0.5em; }  /* Small nudge (your new favorite!) */
.push-down-md { margin-top: 1em; }    /* Standard paragraph break */
.push-down-lg { margin-top: 2em; }    /* Major section break */

/* Clear float */
.clear {
    clear: both;
}
/* --------------------------------------------------  */

.boxed {
	border: 1px solid #714c4c; 
	color: #714c4c;
	font-size: 15px; 
	padding: 3px 5px 3px 5px; 
}

.bxd {
	border: 1px solid #900;
	border-radius:2px; 
	line-height: 1.5em;
	padding: 6px 9px 5px 7px;
}

.padtop12 {
	padding: 12px 0 0 0;
}
.padtop14 {
	padding: 14px 0 0 0;
}
.padtop24 {
	padding: 24px 0 0 0;
}

.gauche2 {
	float: left;
	margin: 6px 0 0 0; 
	padding-right: 18px;
}

/* --- HEADER & NAV LAYOUT --- */
.site-header {
    background-color: #900;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* for absolute positioning of mobile menu */
}

/* Base Nav Styles */
.main-nav > ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav a {
    display: block;
    padding: 10px 20px;
    color: #FFF;
    font-size: 15px; 
    transition: background-color 0.2s ease;
}

.main-nav a:hover {
/*    background: #333;*/
				background: #900; 
}

/* Dropdown (Desktop) */
.has-dropdown {
    position: relative;
}

.main-nav .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    flex-direction: column;
    min-width: 220px;
    z-index: 1000;
}

.main-nav .has-dropdown:hover .submenu {
    display: flex;
}

.main-nav .submenu a {
    background-color: #FFFDE7; /* lightyellow */
    color: #000;
    border-bottom: 1px solid #000;
}

.main-nav .submenu a:hover {
/*	background-color: #424242;*/
	background-color: #900;    
 color: #FFF;
}
/* Hide off-canvas elements on desktop */
/* The Open Button (Hamburger) - Placed ABOVE the media query */
.mobile-toggle {
    display: none; /* hidden on desktop */
    background: transparent;
    border: none;
    color: #FFF;
    font-size: 32px; /* large */
    cursor: pointer;
    padding: 10px 20px;
    line-height: 1;
}
/* Hide off-canvas and mobile-only elements on desktop */
.close-toggle, .nav-overlay, .mobile-phone {
    display: none;
}

/* =============================================================
   MOBILE & OFF-CANVAS MENU STYLES
   ============================================================= */

/* --- 1. Base Mobile Elements (Hidden on Desktop) --- */

/* The Open Button (Hamburger) */
.mobile-toggle {
    display: none; 
    background: transparent;
    border: none;
    color: #FFF;
    font-size: 28px; /* Nice and large! */
    cursor: pointer;
    padding: 10px 20px;
    line-height: 1;
}

/* Hide off-canvas elements and mobile phone on desktop */
.close-toggle, .nav-overlay, .mobile-phone {
    display: none;
}


/* --- 2. Mobile Media Query (Under 768px) --- */

@media (max-width: 768px) {
    /* Header constraints */
    .site-header { flex-wrap: nowrap; } 
    .mobile-toggle { display: block; z-index: 2000; }
    
    /* --- OFF-CANVAS MENU DRAWER --- */
    .main-nav {
        display: block; 
        position: fixed;
        top: 0;
        right: -300px; /* Hides it off-screen by default */
        width: 280px;
        height: 100vh;
      /*  background-color: #302721; */
        z-index: 3000;
        transition: right 0.3s ease-in-out;
        overflow-y: auto;
        padding-top: 60px; /* Space for the close button */
								background-color:#5f5252; 
    }
    
    /* When the JS adds the 'is-open' class, slide it in */
    .main-nav.is-open { right: 0; }
    
    .main-nav > ul { flex-direction: column; }
    
    .main-nav > ul > li > a {
        padding: 15px 25px;
        border-bottom: 1px solid #444;
    }

    /* The Close Button inside the drawer */
    .close-toggle {
        display: block;
        position: absolute;
        top: 15px;
        right: 20px;
        background: transparent;
        border: none;
        color: #FFF;
        font-size: 36px; /* Nice big target for mobile */
        cursor: pointer;
        line-height: 1;
    }

    /* The Dark Overlay Background */
    .nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.6);
        z-index: 2500;
    }
    .nav-overlay.is-open { display: block; }
    
    /* --- PERMANENTLY VISIBLE SUBMENU (Mobile) --- */
    /* Transform "PROJECTS" into a static header */
    .main-nav .has-dropdown > a {
        pointer-events: none; /* Disables clicking */
       /* color: #999;  Dims color to distinguish it as a label */
								color: #fff; 
        font-size: 15px; /* Matches the other main nav items */
        padding-bottom: 5px;
        border-bottom: none;
    }

    /* Keep the submenu exposed */
    .main-nav .submenu {
        display: flex; 
        position: static;
        width: 100%;
        background-color: transparent;
    }
    
    /* Style sub-items */
    .main-nav .submenu a { 
        background-color: transparent; /* Overrides the desktop light vanilla */
        border-bottom: 1px solid #444; 
/*        color: #ccc; */
								color:#fff; 
        padding: 12px 25px 12px 40px; /* 40px left padding for indent */
        pointer-events: auto; /* Re-enables clicking for sub-links */
        font-size: 14px; 
        text-transform: none; /* Ensures it uses the initial caps from your HTML */
    }

    /* --- MOBILE PHONE LINK --- */
    .main-nav .mobile-phone {
        display: block; /* Brings the phone number back for mobile */
        margin-top: 10px; 
    }
    
    .main-nav .mobile-phone a {
      /*   color: #D0BBA6; existing signup box color */
     			color:#fff;    
								border-bottom: none; 
/*        font-weight: 600; */
        padding-top: 14px;
    }

    /* --- LAYOUT STYLES --- */
    .grid2col {
        grid-template-columns: 1fr; 
        gap: 10px; 
        padding: 1em; 
    }

    /* Hide the large contact box on mobile */
    .mailblk {
        display: none; 
    }
	/* --- MOBILE PROJECT PHOTOS --- */
    /* Disable the prettyPhoto lightbox click on mobile */
    .project-photos a {
        pointer-events: none; 
        cursor: default;
    }

    /* Let the full-size images fill the mobile column */
    .project-photos img {
        max-width: 100%; 
        width: 100%; /* Ensures the picture element scales properly */
        height: auto;
    }
/* Hide the large contact box, desktop spacer, and desktop caption on mobile */
    .mailblk, .caption2 {
        display: none; 
    }
	.projects-caption-mobile {
			display:block; 
			margin: -24px 0 12px 0; 
	}
	
	/*  --- SERVICES - RESOURCES PG --- */
	
	.wrapall {
		padding: 1em 2em 3em 2em;
	}
.wrapall-resources {
	padding: 1em 2em 3em 2em;
}
.wrapall-ceqa {
	padding: 1em 2em 3em 2em;
}
	.grid-50-50 {
		display: block;
}
		.grid-50-50-resources {
		display: block;
}
	
/* Reset floated images to full width on mobile */
  .align-left {
     float: none;
     width: 100%;
     max-width: 100%;
     margin: 0 0 8px 0; /* Reduce space below the image */

    }
	/* Reset floated images to full width on mobile */
  .align-right {
     float: none;
     width: 100%;
     max-width: 100%;
     margin: 0 0 8px 0; /* Reduce space below the image */

    }
	  .align-left-300 {
     float: none;
     width: 100%;
     max-width: 100%;
     margin: 0 0 8px 0; /* Reduce space below the image */

    }
	/* Reset floated images to full width on mobile */
  .align-right-300 {
     float: none;
     width: 100%;
     max-width: 100%;
     margin: 0 0 8px 0; /* Reduce space below the image */

    }
	  .align-right-400 {
     float: none;
     width: 100%;
     max-width: 100%;
     margin: 0 0 8px 0; /* Reduce space below the image */

    }
	.inline {
				display:inline;	
	}
	
h2 {
		line-height: 1.25em;
  margin-bottom: 12px;
	}
}