/* ========== GLOBAL STYLES ========== */
 html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', system-ui, sans-serif;
  background-color: #656D4A;
  color: #333;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
} 

/* Content wrapper */
main {
  padding: 0 12px;
}

/*====================================================================*/
/* ======================= NAVBAR (mobile-first) ==================== */
 .navbar{
  display: flex;
  /* width: 50vw; */
  gap: 10px;
  justify-content: center;
  align-items: center;
  /* flex-wrap: wrap;      <--- mobile friendly */
  padding: 10px 12px;
  background: #414833;
  /* border-radius: 12px; */

  /* Size & position (MOBILE DEFAULT) */
  /* width: calc(100% - 24px);   full-width with breathing room */
  /* margin: 12px auto 0;        centers the navbar box */
  /* margin-bottom: 12px ; */
}

/* Links within each nav-item*/
.nav-link{
  color: white;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  display: inline-block;
}

/* Container for each link */
.nav-item{
  color: white;
  position: relative;
}

.nav-item > summary{
  list-style: none;
  cursor: pointer;
}

.nav-item > summary::-webkit-details-marker{
  display: none;
}

/* dropdown panel */
.dropdown{
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: #EDE0D4;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  display: none;
  z-index: 999;
}

/* show dropdown when open */
.nav-item[open] .dropdown{
  display: block;
}

.dropdown-link{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #222;
  border-radius: 10px;
}

.dropdown-link:hover{
  background: rgba(0,0,0,.06);
}

/* Desktop polish: open on hover too (optional) */
@media (min-width: 900px){
  .nav-item:hover .dropdown{
    display: block;
  }

} 



/*====================================================================*/
/* =================== HERO SECTION (Mobile First) ================== */
.hero {
  width: 100vw;
  height: 15vh;
  background-size: cover;
  background-position: top 40%;
  padding-bottom: 50px #7F5539;
  /* margin-top: 8px; */
  /* border-radius: 5px;
  overflow: hidden; */
}

/* ========== Tablet & Desktop ========== */
@media (min-width: 768px) {
  .hero {
    height: 35vh;
    background-position: center 15%;
    /* margin-top: 12px; */
    /* border-radius: 15px; */ 
  }
}

/* ========== Large Desktop (Optional) ========== */
@media (min-width: 1200px) {
  .hero {
    height: 40vh;
    padding-bottom: 50px #7F5539;
    /* max-width: 1200px; */
    /* margin-left: auto;
    margin-right: auto;  */
  }
} 


/*====================================================================*/
/* ========================= MISSION SECTION ========================= */
.mission-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #A68A64;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.mission-container h2 {
  margin-top: 0;
  font-size: 28px;
  color: #ffffff;
}

.mission-container p {
  font-size: 18px;
  line-height: 1.6;
  color: #ffffff;
}

/* ==== MOBILE TWEAKS FOR MISSION CONTAINER ===== */
@media (max-width: 480px) {

  .mission-container {
    margin: 20px auto;
    padding: 18px;
  }

  .mission-container h2 {
    font-size: 22px;
  }

  .mission-container p {
    font-size: 16px;
  }
} 




/*====================================================================*/
/* ========================= PAGE TITLES ========================= */
 /* Page Title Container */
.page-title {
  width: calc(100% - 30px);      /* Mobile-friendly spacing */
  height: 30px;
  margin: 16px auto 0;           /* Centered, near top */
  padding: 4px 8px;

  background-color: #EDE0D4;
  border-radius: 14px;

  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Title text */
.page-title h1 {
  margin: 0;
  font-size: 1.0rem;
  font-weight: 300;
  line-height: 1.2;
  color: #414833;
}

/* Tablet and up */
@media (min-width: 768px) {
  .page-title {
    width: 40%;
    padding: 20px 28px;
  }

  .page-title h1 {
    font-size: 1.9rem;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .page-title {
    width: 45%;
    max-width: 900px;
  }

  .page-title h1 {
    font-size: 2.2rem;
    /* width: 60%; */
  }
} 

/*====================================================================*/
/* ========================= BUTTONS ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Mobile tap target */
  min-height: 44px;

  /* Mobile-first sizing */
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1;

  background: #7b1e1e;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 400;

  /* Helps long text not look cramped */
  white-space: nowrap;
}

.btn:hover {
  background: #5f1515;
}

/* Optional: full-width buttons on small screens */
@media (max-width: 600px) {
  .btn {
    width: 100%;
  }
}

/* Slightly larger / tighter look on bigger screens */
@media (min-width: 900px) {
  .btn {
    padding: 5px 19px;
    font-size: 15px;
  }
}



/*====================================================================*/
/* ========================= FORMS ========================= */
/* Page width wrapper (replaces inline styles) */
.form-page-width {
    max-width: 720px;
    margin: 24px auto;
    padding: 0 16px;
}

/*Page Title class is defined somewhere above*/

/* Subtitle inside container */
.page-subtitle {
    text-align: center;
    margin-bottom: 16px;
    color: #030101;
}

/* FORM CONTAINER */
.form-container {
    background-color: #A68A64;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Improve spacing between form fields */
.form-container form > * + * {
    margin-top: 12px;
} 

 @media (min-width: 768px) {
    .form-container {
        padding: 28px 32px;
    }
}