/* ============================================================
   site-core.css — shared, browser-cached across every page.
   Loaded AFTER each page's own stylesheet, so these rules win
   the cascade and give the whole site one consistent, animated
   mobile menu without touching each page's existing layout CSS.
   ============================================================ */

:root {
  --green: #006644;
  --green-light: #00875a;
  --green-dark: #004d33;
  --gold: #c9a227;
  --gold-light: #f0c94d;
  --cream: #fdf6e3;
  --white: #fff;
  --text: #2d2d2d;
  --muted: #666;
  --border: #e0d8c0;
  --shadow: 0 4px 24px rgba(0,100,68,0.10);
  --radius: 14px;
  --header-h: 72px;
}

/* --- Hamburger: animated 3-line -> X morph --- */
.hamburger { position: relative; z-index: 1201; }
.hamburger span {
  display: block; width: 24px; height: 2px; background: #fff;
  border-radius: 2px; margin: 5px 0;
  transition: transform .28s ease, opacity .2s ease;
}
.hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Backdrop behind the open drawer --- */
.mnav-backdrop {
  position: fixed; inset: 0; background: rgba(0,20,12,0.45);
  opacity: 0; visibility: hidden; z-index: 1090;
  transition: opacity .3s ease, visibility 0s linear .3s;
  backdrop-filter: blur(1px);
}
.mnav-backdrop.is-visible {
  opacity: 1; visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

/* --- Mobile nav drawer: smooth slide + fade instead of display:none flip --- */
.mobile-nav {
  display: flex !important;
  flex-direction: column;
  background: var(--green-dark, #004d33);
  padding: 8px 20px 10px;
  position: relative;
  z-index: 1100;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: max-height .38s cubic-bezier(.4,0,.2,1),
              opacity .28s ease,
              transform .32s cubic-bezier(.4,0,.2,1),
              visibility 0s linear .38s,
              padding .38s ease;
}
.mobile-nav.open {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  padding: 12px 20px 16px;
  transition: max-height .38s cubic-bezier(.4,0,.2,1),
              opacity .32s ease .06s,
              transform .38s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 0s,
              padding .38s ease;
}
.mobile-nav a {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s ease, transform .3s ease, color .2s ease, padding-left .2s ease;
}
.mobile-nav.open a {
  opacity: 1;
  transform: translateX(0);
}
/* staggered reveal of each link as the drawer opens */
.mobile-nav.open a:nth-child(1) { transition-delay: .06s; }
.mobile-nav.open a:nth-child(2) { transition-delay: .10s; }
.mobile-nav.open a:nth-child(3) { transition-delay: .14s; }
.mobile-nav.open a:nth-child(4) { transition-delay: .18s; }
.mobile-nav.open a:nth-child(5) { transition-delay: .22s; }
.mobile-nav.open a:nth-child(6) { transition-delay: .26s; }
.mobile-nav.open a:nth-child(7) { transition-delay: .30s; }
.mobile-nav a:hover,
.mobile-nav a:focus-visible { color: var(--gold-light, #f0c94d); padding-left: 10px; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav a, .mnav-backdrop, .hamburger span {
    transition-duration: .01ms !important;
  }
}

/* Prevent background scroll while the drawer is open */
body.mnav-locked { overflow: hidden; }