/* (style.css) */

* {
    font-family: 'Roboto', Arial, 'Inter', 'Helvetica Neue', sans-serif !important;
}
/* 1. Base Styles (Mobile First) */
body {
    font-size: 16px;
    font-family: Roboto;
    padding: 28px 10px 10px 10px;
    background-color: #FFFFFF;
    height: 100%;
    margin: 0;
}

/* Main container */
.container {
    width: 100%;
    max-width: 600px;      /* keeps content centered on desktop */
    margin: 0 auto;        /* centers horizontally */
    padding: 0 20px;       /* adds left/right margin on ALL devices */
    text-align: center;
}

/* Error container */
.container-error {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;       /* same margin as container */
    display: none;
    visibility: hidden;
 
}

/* When visible */
.container-error.show {
    display: block;
    visibility: visible;
    height: auto;
    margin-top: 10px;
    padding: 10px 20px;    /* keeps margin consistent */
    border-radius: 6px;
}

/* Mobile styles */
@media (max-width: 600px) {
    .container,
    .container-error,
    .container-error.show {
        max-width: 100%;
        padding: 0 20px;   /* ensures margin on phones */
    }
}

    .container {
        width: 80%; /* Centered narrower layout for large screens */
        max-width: 1200px;
    }
    .container_error {
        display: none;
        visibility: hidden;
    }
}


.logo {
        font-size: 18px; 
        color: #228B22;  /* forest green */
        background-color: #FFFFFF; /* Ivory */
		max-width: 400px;
		/*border:1px solid #000; */
	}

/* Colors
	White			#FFFFFF 
	Cream			#FDFBD4
	Ivory			#FFFFF0
	Light Gray		#D3D3D3
	Beige			#F5F5DC 
	Tan				#FAEBD7
	forest green	#228B22
*/	



/* Base Navbar Styles */ 

.disabled-link {
    pointer-events: none;
    opacity: 0.5;   /* optional: make them look disabled */
}

nav { 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 28px; /* set your desired height */ 
	z-index: 1000; 
	background: #ffffff; 
	border-bottom: 1px solid #000; 
	padding: 0; /* important: remove extra height */ 
} 
/* Inner navbar container */ 
.navbar { 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	overflow: visible; /* important */
	/* height: 100%;  match nav height */ 
	padding: 0 2rem; /* horizontal only */ 
	background: white; 
	color: #228B22; 
} 
/* Link list */ 
.nav-links { 
	display: flex; 
	list-style: none; 
	gap: 20px; 
	margin: 0; 
	padding: 0; 
} 
/* Individual links */ 
.nav-links a { 
	color: #228B22; 
	text-decoration: none; 
	line-height: 16px; /* vertically center links */ 
	display: inline-block; 
	padding: 4px 8px; /* gives the border room to show */ 
	border: 2px solid transparent; 
	border-radius: 4px; /* optional, looks nicer */ 
	transition: all 0.2s ease; 
} 

.nav-links a:hover { 
	background-color: #F5F5DC; /* beige highlight */ 
	border-color: #228B22; /* forest green border */ 
	color: #228B22; /* optional: darken text on hover */ 
}


.bullet {
  padding-right: 6px;   /* adjust this value as needed */
  vertical-align: middle;
}



/* Hamburger */ 
.menu-toggle { 
	display: none; 
	flex-direction: column; 
	cursor: pointer; 
	background: none; 
	border: none; 
	gap: 5px; 

	
} 
.bar { 
	width: 25px; 
	height: 3px; 
	background-color: #676767; 
}


@media (max-width: 768px) {
  .menu-toggle {
    display: flex; /* Show hamburger on mobile */
	top: 10px;
	width: 40px; height: 40px; position: relative; z-index: 2000;
  }

  .nav-links {
    display: none; /* Hide horizontal links */
    flex-direction: column; /* Stack them vertically when opened */
    position: absolute;
    top: 41px;
    left: 0;
    width: 100%;
    background: #fff;  /*#ccff00; */
	border:1px solid #000; 
/*   padding: 1rem; */
  }

  /* JavaScript will toggle this class to show the menu */
  .nav-links.active {
    display: flex;
  }
}

.nav-touch { background-color: #F5F5DC; /* beige highlight */ border: 2px solid #228B22; /* forest green border */ border-radius: 4px; }




.image-header {
  /* This is the key: the image is now a background */
  background-image: url('images/TreeLine.jpg');
  background-size: cover;      /* Stretches to fill the whole area */
  background-position: center; /* Keeps the middle of the image visible */
  
  /* Give it some padding so the text doesn't touch the edges */
  /* padding: 40px 20px; */
  width: 100vw;
  box-sizing: border-box;
  
  /* Flexbox centers the text inside the background */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 120px; /* Ensures it's at least as tall as your original image */
}

.overlay-header {
  color: #FFFFF0;
  font-weight: 700;
  font-size: 24px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Critical for readability */
}

.sub-text {
  font-size: 18px;
  font-weight: 300;
  display: block; /* Puts it on its own line */
  margin-top: 10px;
}


.section-header {
	font-size: 20px; 
	color: #228B22;  /* forest green */
    font-weight: bold;  /* Makes text bold */
	justify-content: center;
	align-items: center;
	text-align: center;
}
.section-text {
	font-size: 16px; 
	color: #228B22;  /* forest green */
	justify-content: center;
	align-items: center;
	text-align: center;
}

.section-header-left {
	font-size: 20px; 
	color: #228B22;  /* forest green */
    font-weight: bold;  /* Makes text bold */
	justify-content: left;
	align-items: left;
	text-align: left;
}
.section-text-left {
	font-size: 16px; 
	color: #228B22;  /* forest green */
	justify-content: left;
	align-items: left;
	text-align: left;
}

.sub-text-left {
	font-size: 16px;
	font-weight: 300;
	color: #228B22;  /* forest green */
	display: block; /* Puts it on its own line */
	margin-top: 10px;
	text-align: left;
}

.video-container {
  max-width: 600px;      /* or whatever size you want */
  margin: 0 auto;        /* center it */

  display: flex;
  /*justify-content: center; /* Centering horizontally */
  /*align-items: center;     /* Centering vertically */
  /*min-height: 300px;        Optional: ensures enough height to see vertical centering */
  width: 96%;
}

.video-container video {
  width: 100%;           /* scale inside the container */
  height: auto;          /* keep aspect ratio */
  display: block;
  border-radius: 8px;    /* optional, looks nice */
}

.card-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to jump to next line */
    gap: 20px;       /* Modern way to add spacing */
}

.card {
    flex: 1 1 300px; /* Grow, Shrink, and a Basis of 300px */
    /* Items will stay in a row until the screen is narrower than 300px per card */
}



.list-header {
	
	font-size: 18px; 
	color: #228B22;  /* forest green */
    font-weight: bold;  /* Makes text bold */
	justify-content: left;
	align-items: left;
	text-align: left;
	padding: 0px 10px 0px 10px;
}

.list {
  /*list-style-image: url('images/bullet.gif');  Specify the path to your image */
  list-style-type: circle;  /*Ensures the bullet is a solid round dot */
  padding-left: 10px;    /* Provides space for the bullets */
  text-align: left;      /* Standard left alignment */
}

.list-item {
  margin-bottom: 10px;   /* Adds spacing between items */
  line-height: 1.5;      /* Improves readability during word-wrap */
  color: #355E3B;        /* Uses your Hunter Green color */
  text-align: left;      /* Standard left alignment */
}

.list-item::marker {
  color: #355E3B;        /* Uses your Hunter Green color */
  font-size: 1.2em;      /* Makes the bullet slightly more prominent */
}


/* Gallery Layout */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns for desktop */
  gap: 15px;
  padding: 20px;
}

/* Responsive: 3 columns on tablet, 1 on mobile */
@media (max-width: 1024px) { .gallery-container { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gallery-container { grid-template-columns: 1fr; } }

/* Zoom Effect */
.gallery-item {
  overflow: hidden; /* Clips the image so it doesn't overlap others when zooming */
  cursor: pointer;
}

.gallery-img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* Keeps images uniform size */
  transition: transform 0.3s ease; /* Smooth transition */
}

.gallery-item:hover .gallery-img {
  transform: scale(1.1); /* Zooms in 10% on hover */
}

/* Lightbox/Popup Styling */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.9);
  overflow: auto; /* Allows scrolling if image is large */
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
  transition: transform 0.2s; /* Allows user to feel "scroll" or "size" changes */
}

.close {
  position: absolute;
  top: 20px; right: 35px;
  color: #fff; font-size: 40px; cursor: pointer;
}



hr {
  /* Set the thickness */
  height: 6px;
  
  /* Adds rounded ends */
  border-radius: 3px; 

  /* Set the width */
  width: 90%;
  
  /* Set Hunter Green color (#355E3B) */
  background-color: #355E3B;
  
  /* Remove default browser borders to ensure clean edges */
  border: none;
  

  /* Optional: Center the line if it's not full-width */
  margin-left: auto;
  margin-right: auto;
}


/* Call out Section */
/* Outer table */
.call-outs {
  width: 96%;                 /* was 400px */
  margin: 0 auto;             /* centers the table */
  padding: 10px
  border-collapse: collapse;
}

.call-outs td {
  background: #f0f0f0;        /* light grey */
  padding: 10px;
  border: 10px solid #ffffff;  /* white border */
  text-align: center;         /* centers content inside the cell */
  border-radius: 20px;        /* round the corners */
  overflow: hidden;
  color: #228B22;  /* forest green */
}

/* Nested table */
.call-out {
  width: 100%;
  border: none;
  border-collapse: collapse; /* THIS removes internal grid lines */

}
.call-out td { border: none !important; /* ensures no borders appear */ }

.call-out td:first-child {
  width: 20%;
  text-align: left;
  vertical-align: middle;
  border: none;
}

.call-out td:last-child {
  text-align: left;
  vertical-align: top;
  color: #228B22;  /* forest green */
}


/* Call out Error Section */
/* Outer table */
.call-outs-error {
  width: 100%;
  margin: 0 auto;             /* centers the table */
  padding: 10px
  border-collapse: collapse;
}

.call-outs-error td {
  background: #FFC7CE; /* Excel error background */
  padding: 10px;
  border: 5px solid #9C0006;  /* white border */
  text-align: center;         /* centers content inside the cell */
  border-radius: 20px;        /* round the corners */
  overflow: hidden;
  color: #9C0006;        /* Excel error text */


}

/* Nested table */
.call-out-error {
  width: 100%;
  border: none;
  border-collapse: collapse; /* THIS removes internal grid lines */

}
.call-out-error td { border: none !important; /* ensures no borders appear */ }

.call-out-error td:first-child {
  width: 32px;          /* gives icon space */
  text-align: left;
  vertical-align: middle;
  border: none;
}
.call-out-error svg {
    stroke: #9C0006;      /* Excel error text color */
    display: block;       /* prevents collapse */
}

.call-out-error td:last-child {
  text-align: left;
  vertical-align: top;
  color:  #9C0006;      /* Excel error text color */
}

.call-out-error td:first-child {
    vertical-align: top;
}




/* Fun Facts Section */
/* Outer table */
.fun-facts {
  width: 96%;                 /* was 400px */
  margin: 0 auto;             /* centers the table */
  padding: 10px
  border-collapse: collapse;
}

.fun-facts td {
  background: #f0f0f0;        /* light grey */
  padding: 10px;
  border: 10px solid #ffffff;  /* white border */
  text-align: center;         /* centers content inside the cell */
  border-radius: 20px;        /* round the corners */
  overflow: hidden;
  color: #228B22;  /* forest green */
}

/* Nested table */
.fun-fact {
  width: 100%;
  border: none;
  border-collapse: collapse; /* THIS removes internal grid lines */

}
.fun-fact td { border: none !important; /* ensures no borders appear */ }

.fun-fact td:first-child {
  width: 20%;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  border: none;
}

.fun-fact td:last-child {
  text-align: left;
  vertical-align: top;
  color: #228B22;  /* forest green */
}



/* 2. Style the footer */
footer {
  margin-top: auto; /* Pushes the footer to the bottom of the flex container */
  padding: 20px;
  text-align: center; /* Centers the text horizontally */
}

/* 3. Style the specific text */
.footer-text {
  color: #808080;     /* Sets font color to grey */
  font-weight: bold;  /* Makes text bold */
  font-style: italic;
  margin: 0;
}


/* Email Form: Keeps everything left aligned and tidy */

.email {
  color: #808080;     /* Sets font color to grey */
  font-weight: bold;  /* Makes text bold */
  text-align: left;
  margin: 0;
}

.email form {
	max-width: 500px;
	display: flex;
	flex-direction: column;
	gap: 12px;
  }

.email label {
	
	font-size: 16px; 
	color: #228B22;  /* forest green */
	justify-content: left;
	align-items: left;
	text-align: Left;
	font-weight: bold;
	margin-bottom: 1px;
  }

.email input,
.email textarea {
	width: 100%;          /* keeps inputs left aligned and full width */
	padding: 4px;
	font-size: 1rem;
	box-sizing: border-box;
  }

.email textarea {
	min-height: 150px;    /* message box fills the frame */
	resize: vertical;     /* allow user to expand if needed */
  }

 .email button {
	width: fit-content;
	padding: 10px 18px;
	font-size: 1rem;
	border-radius: 6px;
	cursor: pointer;
  }
  
.email button:hover, input[type="submit"]:hover {
	background-color: #1f5fb4;
}

.readonly-field {
  background-color: #f0f0f0;   /* light gray */
  color: #333;                 /* readable text */
  border: 1px solid #ccc;      /* subtle border */
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  pointer-events: none;        /* prevents editing */
}

.readonly-field:focus {
  outline: none;               /* no blue highlight */
}