/* FONT ----------------------------------------------- */
/* Brandon Grotesque Regular */
@font-face { font-family: 'Brandon Grotesque'; src: url('fonts/HvDTrial_Brandon_Grotesque_regular-BF64a625c9311e1.otf') format('opentype'); font-weight: 400; font-style: normal; }
/* Brandon Grotesque Bold */
@font-face { font-family: 'Brandon Grotesque'; src: url('fonts/HvDTrial_Brandon_Grotesque_bold-BF64a625c9151d5.otf') format('opentype'); font-weight: 700; font-style: normal; }
/* Brandon Grotesque Italic */
@font-face { font-family: 'Brandon Grotesque'; src: url('fonts/HvDTrial_Brandon_Grotesque_medium_italic-BF64a625c928c55.otf') format('opentype'), url('fonts/HvDTrial_Brandon_Grotesque_medium_italic-BF64a625c928c55.otf') format('otf'); font-weight: 400; font-style: italic; }
/* Brandon Grotesque Light – for body copy (assumed weight 300) */ 
@font-face { font-family: 'Brandon Grotesque'; src: url('fonts/HvDTrial_Brandon_Grotesque_light-BF64a625c93e709.otf') format('opentype'); font-weight: 300; font-style: normal; }
/* Brandon Grotesque Black – for headers (weight 900) */ 
@font-face { font-family: 'Brandon Grotesque'; src: url('fonts/HvDTrial_Brandon_Grotesque_black-BF64a625c944b08.otf') format('opentype'); font-weight: 900; font-style: normal; }
/* Brandon Grotesque Medium – for headers (weight 400) */ 
@font-face { font-family: 'Brandon Grotesque'; src: url('fonts/HvDTrial_Brandon_Grotesque_medium_italic-BF64a625c928c55.otf') format('opentype'); font-weight: 400; font-style: italic; }

/* HERO -----------------------------------------------  */
/* Hero Section with Full-Width Background Image */
/* Overlay using a pseudo-element */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
  z-index: 1; /* Places the overlay behind the content */
}
/* Ensure content is above the overlay */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
/* HERO background image and settings */
.hero {
  background: url('/img/Fishing\ Stage\ -\ Stylized.jpeg') no-repeat center center/cover;
  height: 500px; /* Adjust height as needed */
  display: flex;
  align-items: center;
  position: relative;
}
/* HERO Logo Styling */
.hero-logo { flex: 0 0 100%; max-width: 120px; margin-bottom: 20px; }
.hero-logo img { width: 100%; height: auto;}

/* HERO Text Styling */
.hero-text { flex: 1; padding-left: 20px; color: #fff; font-family: 'Brandon Grotesque', sans-serif; font-weight: 300; / Thin for body copy */ }
.hero-text h1 { font-size: 2.5em; margin-bottom: 10px; font-family: 'Brandon Grotesque', sans-serif; font-weight: 900; }
.hero-text p { font-size: 1.2em; font-family: 'Brandon Grotesque', sans-serif; font-weight: 300;  }

/* HERO Responsive Adjustments */
@media screen and (max-width: 768px) {
    .hero {
      height: auto;
      padding: 20px 0;
      flex-direction: column;
    }
    .hero-content {
      flex-wrap: wrap;
      text-align: center;
      justify-content: center;
    }
    /* Make both logo and text span full width on smaller screens */
    .hero-logo,
    .hero-text {
      flex: 0 0 100%;
      padding-left: 0;
    }
    .hero-logo {
      margin-bottom: 20px;
    }
    .hero-text h1 {
      font-size: 2em;
    }
    .hero-text p {
      font-size: 1em;
    }
}
/* HERO - Donate Button - Desktop Styles */
.donate-button {
  font-family: 'Brandon Grotesque', Helvetica, Arial, sans-serif;
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: #466135;
    color: #fff;
    padding: 15px 30px;
    font-size: 1.2em;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    z-index: 3;
    transition: background-color 0.3s, transform 0.3s;
}
  
.donate-button:hover {
    background-color: #466135;
    transform: scale(1.05);
}

/* Responsive adjustments for mobile - Donate Button */
@media screen and (max-width: 768px) {
    .donate-button {
        position: static;
        margin: 20px auto;  /* Center horizontally */
        display: block;
        padding: 10px 20px; /* Smaller padding */
        font-size: 1em;     /* Smaller text size */
    }
}

/* NAVIGATION  ---------------------------------  Base styles for header and navigation */
/* Base styles for header and navigation */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
  
.nav-list {
    display: flex;
    list-style: none;
}
  
.nav-list li {
    margin-left: 20px;
}
  
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}
  
/* Hamburger icon styling */
.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    margin: 5px 0;
    transition: 0.3s;
}
  
/* Mobile styles */
@media screen and (max-width: 768px) {
    /* Hide the nav list by default */
    .nav-list {
      position: absolute;
      top: 70px; /* Adjust based on header height */
      left: 0;
      right: 0;
      background: #fff;
      flex-direction: column;
      align-items: center;
      display: none;
      padding: 10px 0;
    }
    .nav-list li {
      margin: 10px 0;
    }
    /* Show the toggle button */
    .nav-toggle {
      display: block;
    }
    /* When active, display the nav list */
    .nav-list.active {
      display: flex;
      margin: -28px;
    }
}


/* SUBSCRIBE Section  ---------------------------------   */
#subscribe {
    padding: 60px 0;
    background-color: #466135; /* Change to your preferred background color */
}
.subscribe-container {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
  
/* Example: style the heading within the form */
#mc_embed_signup h2 {
    font-size: 2em;
    margin-bottom: 0px;
}
  
/* Responsive tweaks if needed */
@media screen and (max-width: 768px) {
    #mc_embed_signup {
      padding: 0 20px;
    }
}

/* FOOTER Section  ---------------------------------   */
/* Branding: Logo next to the heading */  
footer {
    background-color: #466135;
    color: #466135;
    padding: 0px 0;
    /* padding: 20px 0; */
    font-family: 'Brandon Grotesque', sans-serif;
    text-align: center;
}
  
.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-bottom: 15px; */
    margin-bottom: 0px;

}
  
.footer-brand .footer-logo {
    width: 60px;  /* Adjust size as needed */
    height: auto;
    margin-right: 10px;
    margin-bottom: 0px
    padding: 0px;
}
  
.footer-brand h1 {
    font-size: 1.8em;
    margin: 0;
}
   
.footer-social a {
    color: #ddddcc;
    margin: 0 20px;
    font-size: 1.5em;
    text-decoration: none;
}
  
/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .footer-brand {
      flex-direction: column;
      margin-bottom: 0px;
      padding-bottom: 0px;
    }
    .footer-brand .footer-logo {
      margin-right: 0;
      margin-bottom: 0px;
      padding-bottom: 0px;
    }
}
  
/* INF0   ---------------------------------   */ 
.info-section {
  /* padding: 60px 0; */
  padding: 0px 0;

}

.info-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Text Styling */
.info-text {
  flex: 1;
  padding-right: 20px;
  font-family: 'Brandon Grotesque', sans-serif;
  color: #466135;
}

.info-text h2 {
  font-size: 2em;
  margin-bottom: 10px;
  font-family: 'Brandon Grotesque', sans-serif;
  color: #466135;
}

.info-text p {
  font-size: 1.2em;
  font-family: 'Brandon Grotesque', sans-serif;
  color: #466135;
}

/* Image Styling */
.info-image {
  flex: 0 0 400px; /* Adjust width as needed */
}

.info-image img {
  width: 100%;
  height: auto;
}

/* Info Section Styles */
.info-section {
  padding: 0px 0;

  /* padding: 20px 0; */
background-color: #d1d8cc; /* Replace with your desired color */
}

/* Remove white space between info-section and four-image-grid */
.info-section, 
.four-image-grid {
  margin: 0;
  padding: 0;
}

.info-section .info-content,
.four-image-grid .container {
  margin-bottom: 0;
  margin-top: 0;
}

/* Specifically remove margin from the headings within these sections */
.info-section h2,
.four-image-grid h2 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 20px; /* Adjust as desired */
  padding-bottom: 20px;
}

/* Remove any unintended spacing caused by default HTML margin/padding */
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #466135;
}


/* Remove spacing between mc_embed_shell and footer-container */
#mc_embed_shell,
footer,
.footer-container {
    padding: 5vh;
    margin: 0;
    background-color:#749659;
}

footer {
  display: flex;
  justify-content: center;
    line-height: 1; /* Removes any line-height that may create extra vertical space */
}

.footer-brand,
.footer-contact,
.footer-social,
.footer-copy {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px; /* Adjust this padding if you want some spacing */
    padding-bottom: 10px;
}

/* Ensures no extra space around h1 in footer */
.footer-brand h1 {
    margin: 0;
}


/* Responsive Adjustments */
@media screen and (max-width: 768px) {
  .info-content {
    flex-direction: column;
    text-align: center;
  }
  .info-text {
    padding-right: 0;
    margin-bottom: 10px;
  }
  .info-image {
    flex: 0 0 auto;
  }
}

/* Entire Attraction section styling */
.four-image-grid {
    background-color: #FEF9E2; /* Full-width background from brand palette */
    width: 100%;
    padding: 0px 0;
    font-family: 'Brandon Grotesque', sans-serif;
    color: #476135; /* Brand green for all text in this section */
}
  
/* Section heading styling */
.four-image-grid .section-heading {
    text-align: center;
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 2em;
}
  
/* Container uses CSS Grid for 4 columns */
.four-image-grid .container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
    padding: 0 0px;
}
  
/* Image and text styling inside each column */
.four-image-grid .column img {
    width: 100%;
    height: auto;
    max-width: 300px;
    margin: 0 auto 10px;
    object-fit: cover;
    display: block;
}
  
/* Responsive adjustments: 2 columns on medium screens */
@media screen and (max-width: 1024px) {
    .four-image-grid .container {
      grid-template-columns: repeat(2, 1fr);
    }
}
  
/* 1 column on small screens */
@media screen and (max-width: 480px) {
    .four-image-grid .container {
      grid-template-columns: 1fr;
    }
}
  
/* BOARD Members  ---------------------------------   */ 
.board-members { padding: 20px 0; background-color: #d1d8cc; font-family: 'Brandon Grotesque', sans-serif;color: #476135;}
.board-members .container {width: 90%;max-width: 1200px;margin: 0 auto;text-align: center;}  
.board-members h2 {font-size: 2em; margin-bottom: 10px;} 
.members-list {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
.member {padding: 15px;border: 1px solid #476135;border-radius: 5px;}
.member-name {font-weight: bold;font-size: 1.2em;margin-bottom: 5px;} 
.member-title {font-style: italic; font-size: 1em;}
  
/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .members-list {
      grid-template-columns: 1fr;
    }
}
  
.board-members .board-image {
    text-align: center;
    margin-top: 0;
}
  
.board-members .board-image img {
    width: 100%;
    max-width: 80%;
    height: auto;
    display: inline-block;
}
  
/* Header container styling */
header {
    background-color: #476135;
    width: 100%;
}
  
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px;

}
  
/* Branding text styling */
.header-container h1 {
    font-family: 'Brandon Grotesque', sans-serif;
    color: #FEF9E2;
    font-size: 1.8em;
    margin: 0;
}
  
/* Navigation styling */
.nav-list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
  
.nav-list li {
    margin-left: 20px;
}
  
.nav-list a {
    font-family: 'Brandon Grotesque', sans-serif;
    color: #FEF9E2;
    text-decoration: none;
    font-size: 1em;
}
  
/* Hamburger toggle button (hidden on large screens) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}
  
/* Hamburger bars */
.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background: #FEF9E2;
    margin: 5px 0;
    transition: 0.3s;
}
  
/* Mobile styles */
@media screen and (max-width: 768px) {
    .nav-toggle {
      display: block;
      background: none;
      border: none;
      cursor: pointer;
    }
    .nav-list {
      display: none;
      flex-direction: column;
      background-color: #476135;
      position: absolute;
      top: 60px;
      left: 0;
      right: 0;
      padding: 10px 0;
      z-index: 1000;
    }
    .nav-list.active {
      display: flex;
    }
    .nav-list li {
      margin: 10px 0;
      text-align: center;
    }
    .nav-list a {
      font-family: 'Brandon Grotesque', sans-serif;
      color: #FEF9E2;
      text-decoration: none;
      font-size: 1em;
    }
}
  
/* Desktop styles (if needed) */
@media screen and (min-width: 769px) {
    .nav-toggle {
      display: none;
    }
    .nav-list {
      display: flex;
    }
}

/* trying to fix donate button */
@media screen and (max-width: 768px) { 
  .donate-button { 
    position: center; margin: 20px auto; display: block; padding: 10px 20px; font-size: 1em;}
    /* position: static; margin: 20px auto; display: block; padding: 10px 20px; font-size: 1em;} */
  }


/* Base styles for header and navigation */ .header-container { display: flex; justify-content: space-between; align-items: center; position: relative; }
.nav-list { display: flex; list-style: none; }
.nav-list li { margin-left: 20px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; }

/* Hamburger icon styling */ 
.hamburger { display: block; width: 25px; height: 3px; background: #333; margin: 5px 0; transition: 0.3s; }

/* Mobile styles / @media screen and (max-width: 768px) { .nav-list { position: absolute; top: 70px; / Adjust based on header height */ left: 0; right: 0; background: #fff; flex-direction: column; align-items: center; display: none; padding: 10px 0; } .nav-list li { margin: 10px 0; } .nav-toggle { display: block; } .nav-list.active { display: flex; } }

/* Subscribe Section */ 
#subscribe { padding: 60px 0; background-color: #f9f9f9; margin: 0 }
.subscribe-container { width: 90%; max-width: 800px; margin: 0 auto; text-align: center; }

#mc_embed_signup {
  margin: 0; /* remove extra margin around the embed */
  padding: 0;
}

#mc_embed_signup h2 { font-size: 2em; margin-bottom: 0px; font-weight: 900; /* Black for header */ }
/* Responsive tweaks for MailChimp embed */ 
@media screen and (max-width: 768px) { #mc_embed_signup { padding: 0 20px; } }

/* Footer styling */ 
footer { background-color: #466135; color: #ddddcc; padding: 0px 0; font-family: 'Brandon Grotesque', sans-serif; text-align: center; }
.footer-container { width: 90%; max-width: 1200px; margin: 0; background-color: #466135; }
.footer-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 5px; }
.footer-brand .footer-logo { width: 60px; height: auto; margin-right: 10px; margin-bottom: 0px;margin-top: 0vh;}
.footer-brand h1 { font-size: 1.8em; margin: 0; font-family: 'Brandon Grotesque', sans-serif; font-weight: 900;margin-bottom: 0px; margin-top: 0px; }
.footer-contact, .footer-social { margin-bottom: 0px; margin-top: 0px; }
.footer-social a { color: #ddddcc; margin: 0 40px; font-size: 1.5em; text-decoration: none; }
.footer-copy { font-size: 1em; color: #ddddcc; margin-top: 10px; margin-bottom: 0px; }

.footer-contact a {
  font-family: 'Brandon Grotesque', sans-serif;
  font-size: 1.2em;  /* Adjust this value as needed */
  color: #ddddcc;    /* Ensures the same color as the rest of the footer text */
  text-decoration: none;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
}

/* Responsive adjustments for footer */ 
@media screen and (max-width: 768px) { .footer-brand { flex-direction: column; } .footer-brand .footer-logo { margin-right: 0; margin-bottom: 5px; margin-top: 0px; } }



/* Donate Button - Desktop Styles */ 
.donate-button { position: absolute; bottom: 20px; right: 20px; background-color: #466135; color: #fff; padding: 15px 30px; font-size: 1.2em; text-decoration: none; border-radius: 4px; font-weight: bold; z-index: 3; transition: background-color 0.3s, transform 0.3s; }
.donate-button:hover { background-color: #466135; transform: scale(1.05); }

/* Dark overlay for hero */ 
.hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1; }

/* Responsive adjustments for mobile - Donate Button */ 
@media screen and (max-width: 768px) { .donate-button { position: static; margin: 20px auto; display: block; padding: 10px 20px; font-size: 1em; } }

/* Four Image Grid Section */ 
.four-image-grid { background-color: #FEF9E2; width: 100%; padding: 0px 0; font-family: 'Brandon Grotesque', sans-serif; color: #476135; }
.four-image-grid .section-heading { text-align: center; margin-bottom: 0px; font-size: 2em; font-weight: 900; /* Black for header */ }
.four-image-grid .container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; padding: 0 20px; }
.four-image-grid .column img { width: 100%; height: auto; max-width: 300px; margin: 0 auto 10px; object-fit: cover; display: block; }


/* Responsive adjustments for Four Image Grid */ 
@media screen and (max-width: 1024px) { .four-image-grid .container { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 480px) { .four-image-grid .container { grid-template-columns: 1fr; } }

/* Board Members Section Styling */ 
.board-members { padding: 20px 0; background-color: #d1d8cc; font-family: 'Brandon Grotesque', sans-serif; color: #476135; }
.board-members .container { width: 90%; max-width: 1200px; margin: 0 auto; text-align: center; }
.board-members h2 { font-size: 2em; margin-bottom: 10px; font-weight: 900; /* Black for header */ }
.members-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.member { padding: 15px; border: 1px solid #476135; border-radius: 5px; }
.member-name { font-weight: bold; font-size: 1.2em; margin-bottom: 5px; }
.member-title { font-style: italic; font-size: 1em; }

/* Responsive adjustments for Board Members */ @media screen and (max-width: 768px) { .members-list { grid-template-columns: 1fr; } }
.board-members .board-image { text-align: center; margin-top: 0; }
.board-members .board-image img { width: 100%; max-width: 80%; height: auto; display: inline-block; }

/* Header container styling */ header { background-color: #476135; width: 100%; }
.header-container { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; }

/* Branding text styling in header / .header-container h1 { font-family: 'Brandon Grotesque', sans-serif; color: #FEF9E2; font-size: 1.8em; margin: 0; font-weight: 900; / Black for header */ }

/* Navigation styling */ 
.nav-list { list-style: none; display: flex; margin: 0; padding: 0; }
.nav-list li { margin-left: 20px; }
.nav-list a { font-family: 'Brandon Grotesque', sans-serif; color: #FEF9E2; text-decoration: none; font-size: 1em; }

/* Hamburger toggle button */ 
.nav-toggle { display: none; background: none; border: none; cursor: pointer; }

/* Hamburger bars */ 
.hamburger { display: block; width: 25px; height: 3px; background: #FEF9E2; margin: 5px 0; transition: 0.3s; }

/* Mobile Navigation */ 
@media screen and (max-width: 768px) { .nav-toggle { display: block; } .nav-list { display: none; flex-direction: column; background-color: #476135; position: absolute; top: 60px; left: 0; right: 0; padding: 10px 0; z-index: 1000; } .nav-list.active { display: flex; } .nav-list li { margin: 10px 0; text-align: center; } .nav-list a { font-family: 'Brandon Grotesque', sans-serif; color: #FEF9E2; text-decoration: none; font-size: 1em; } }

/* Desktop Navigation */ 
@media screen and (min-width: 769px) { .nav-toggle { display: none; } .nav-list { display: flex; } }

/* Fix for Donate Button on mobile */ 
@media screen and (max-width: 768px) { .donate-button { position: center; margin: 20px auto; display: block; padding: 10px 20px; font-size: 1em; } }





/* Job Posting ----------------------------------------------------------- */
.job-posting {
  background-color: #FEF9E2;           /* cream from brand palette */
  padding: 40px 0;
  text-align: center;
  font-family: 'Brandon Grotesque', sans-serif;
  color: #476135;                      /* brand green */
}

.job-posting .container {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

.job-posting h2 {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 15px;
}

.job-posting p {
  font-size: 1.15em;
  margin-bottom: 20px;
}

.job-posting .button {
  background-color: #749659;           /* lighter green */
  color: #FEF9E2;
  padding: 12px 26px;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: background-color .3s, transform .3s;
}

.job-posting .button:hover {
  background-color: #476135;           /* darker green */
  transform: scale(1.05);
}


.Summer-Hours {
  display: flex;
  flex-direction: row;
  color: #476135; 
  font-family: 'Brandon Grotesque', sans-serif;
  background-color: #FEF9E2; /* Full-width background from brand palette */ 
  padding: 30px;
  justify-content: center;
}

.Summer-Hours-Half {
  width: 50vh;
  padding-left: 30px;
  padding-right: 30px;
}