/* ===== FINAL, SINGLE SOURCE OF TRUTH (put at END of styles.css) ===== */

/* — Desktop: two rows (logo row + green nav bar) — */
header {
  display: flex !important;
  flex-direction: column !important;  /* row 1 = logo, row 2 = nav */
  align-items: stretch !important;
  gap: 0 !important;
  background: #fff !important;
  border-bottom: 2px solid #e3f2e9 !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* Logo sizing & centering so it isn't cropped */
.logo-wrapper { padding: 12px 20px !important; }
.logo-wrapper img,
.logo-responsive {
  height: 90px !important;   /* adjust if you want smaller/larger */
  width: auto !important;
  display: block !important;
  margin: 0 auto !important; /* centers the logo in the white strip */
}

/* Desktop nav: centered links on a green bar */
@media (min-width: 900px) {
  .nav-toggle { display: none !important; }

  header > nav {
    display: block !important;
    background: #1e4634 !important;   /* green bar */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
  }

  header > nav ul {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 12px 24px !important;
    list-style: none !important;
    display: flex !important;
    justify-content: center !important; /* <-- centered */
    align-items: center !important;
    gap: 2.5rem !important;
  }

  header > nav a {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
    border-bottom: 2px solid transparent !important;
    padding: 6px 4px !important;
    transition: color .25s, border-bottom-color .25s !important;
  }

  header > nav a:hover,
  header > nav a:focus {
    color: #d99200 !important;
    border-bottom-color: #d99200 !important;
  }
}

/* — Mobile: logo left, burger right, dropdown menu below — */
@media (max-width: 899.98px) {
  header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 16px !important;
  }

  .nav-toggle {
    display: block !important;
    background: #1e4634 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: .6rem .8rem !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    cursor: pointer;
  }

  header > nav {
    display: none !important;            /* closed by default */
    position: static !important;
    width: 100% !important;
    background: #fff !important;
    border-top: 1px solid #e3f2e9 !important;
    margin-top: .5rem !important;
  }
  header > nav.open { display: block !important; }

  header > nav ul {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: .5rem 0 !important;
  }

  header > nav a {
    display: block !important;
    color: #1e4634 !important;
    padding: .9rem 1rem !important;
    border-bottom: 1px solid #eee !important;
    text-decoration: none !important;
  }

  header > nav a:hover {
    background: #f9fdfb !important;
    color: #2ba84a !important;
  }
}

/* — Make ALL hero text white (no green over the image) — */
.hero-small .hero-content h1,
.hero-small .hero-content p,
.hero-small .hero-content #season-caption {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.6) !important;
}

/* ===== FINAL OVERRIDES (scoped) ===== */

/* Desktop: two rows (logo then green nav bar) */
#site-header{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background:#fff;
  border-bottom:2px solid #e3f2e9;
  position:relative;
  z-index:1000;
}

/* Logo sizing/centering */
#site-header .logo-wrapper{ padding:12px 20px; }
#site-header .logo-wrapper img,
#site-header .logo-responsive{
  height:90px;      /* tweak to taste */
  width:auto;
  display:block;
  margin:0 auto;    /* center the logo in the white row */
}

/* Desktop nav: centered links on green bar */
#site-header > nav{
  display:block;
  background:#1e4634;
  width:100%;
}
#site-header > nav ul{
  list-style:none;
  margin:0 auto;
  padding:12px 24px;
  max-width:1200px;
  display:flex;
  justify-content:center;   /* centered */
  align-items:center;
  gap:2.5rem;
}
#site-header > nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.5px;
  border-bottom:2px solid transparent;
  padding:6px 4px;
  transition:color .25s, border-bottom-color .25s;
}
#site-header > nav a:hover,
#site-header > nav a:focus{
  color:#d99200;
  border-bottom-color:#d99200;
}

/* Mobile: burger + dropdown below */
#site-header .nav-toggle{
  display:none;
  border:0;
  background:#1e4634;
  color:#fff;
  padding:.6rem .8rem;
  font-size:1.25rem;
  border-radius:6px;
  cursor:pointer;
}

@media (max-width: 899.98px){
  #site-header{
    flex-direction:column;
    align-items:stretch;
    padding:.5rem 1rem;
  }
  #site-header .nav-toggle{ display:block; align-self:flex-end; }
  #site-header > nav{ display:none; background:#fff; border-top:1px solid #e3f2e9; }
  #site-header > nav.open{ display:block; }

  #site-header > nav ul{
    max-width:none;
    padding:.5rem 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  #site-header > nav a{
    color:#1e4634;
    border-bottom:1px solid #eee;
    padding:.9rem 1rem;
  }
  #site-header > nav a:hover{ background:#f9fdfb; color:#2ba84a; }
}

/* Make ALL hero text white over the image */
.hero-small .hero-content,
.hero-small .hero-content *{
  color:#fff !important;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}

/* ===== FINAL OVERRIDES (scoped; keep at very end of styles.css) ===== */

/* Desktop: two rows (logo row + green nav bar) */
#site-header{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  background:#fff !important;
  border-bottom:2px solid #e3f2e9 !important;
  position:relative !important;
  z-index:1000 !important;
}

/* Logo sizing/centering */
#site-header .logo-wrapper{ padding:12px 20px !important; }
#site-header .logo-wrapper img,
#site-header .logo-responsive{
  height:90px !important;
  width:auto !important;
  display:block !important;
  margin:0 auto !important;
}

/* GREEN NAV BAR (this is the missing piece) */
#site-header > nav{
  display:block !important;
  background:#1e4634 !important; /* green bar */
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
#site-header > nav ul{
  list-style:none !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:12px 24px !important;
  display:flex !important;
  justify-content:center !important; /* centered links */
  align-items:center !important;
  gap:2.5rem !important;
}
#site-header > nav a{
  color:#fff !important;
  text-decoration:none !important;
  font-weight:600 !important;
  letter-spacing:.5px !important;
  border-bottom:2px solid transparent !important;
  padding:6px 4px !important;
  transition:color .25s, border-bottom-color .25s !important;
}
#site-header > nav a:hover,
#site-header > nav a:focus{
  color:#d99200 !important;
  border-bottom-color:#d99200 !important;
}

/* Mobile: burger + dropdown */
#site-header .nav-toggle{
  display:none !important;
  border:0 !important;
  background:#1e4634 !important;
  color:#fff !important;
  padding:.6rem .8rem !important;
  font-size:1.25rem !important;
  border-radius:6px !important;
  cursor:pointer;
}
@media (max-width: 899.98px){
  #site-header{ padding:.5rem 1rem !important; }
  #site-header .nav-toggle{ display:block !important; align-self:flex-end !important; }
  #site-header > nav{ display:none !important; background:#fff !important; border-top:1px solid #e3f2e9 !important; }
  #site-header > nav.open{ display:block !important; }
  #site-header > nav ul{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:.5rem 0 !important;
  }
  #site-header > nav a{
    color:#1e4634 !important;
    border-bottom:1px solid #eee !important;
    padding:.9rem 1rem !important;
  }
}

/* Hero text: force white (no green on image) */
.hero-small .hero-content,
.hero-small .hero-content *{
  color:#fff !important;
  text-shadow:0 2px 6px rgba(0,0,0,.6) !important;
}

/* ===============================
   FINAL HEADER & NAV FIX
   =============================== */

/* Layout: two rows (logo row, then green nav bar) */
#site-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  border-bottom: 2px solid #e3f2e9;
  position: relative;
  z-index: 1000;
}

/* Logo sizing + centering */
#site-header .logo-wrapper {
  padding: 12px 20px;
}
#site-header .logo-wrapper img,
#site-header .logo-responsive {
  height: 90px;
  width: auto;
  display: block;
  margin: 0 auto; /* center logo */
}

/* Desktop nav: centered links on green bar */
#site-header > nav {
  background: #1e4634;
  width: 100%;
}
#site-header > nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 12px 24px;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}
#site-header > nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .5px;
  border-bottom: 2px solid transparent;
  padding: 6px 4px;
  transition: color .25s, border-bottom-color .25s;
}
#site-header > nav a:hover,
#site-header > nav a:focus {
  color: #d99200;
  border-bottom-color: #d99200;
}

/* Mobile: burger + dropdown below */
#site-header .nav-toggle {
  display: none;
  border: 0;
  background: #1e4634;
  color: #fff;
  padding: .6rem .8rem;
  font-size: 1.25rem;
  border-radius: 6px;
  cursor: pointer;
}
@media (max-width: 899.98px) {
  #site-header {
    padding: .5rem 1rem;
  }
  #site-header .nav-toggle {
    display: block;
    align-self: flex-end;
  }
  #site-header > nav {
    display: none;
    background: #fff;
    border-top: 1px solid #e3f2e9;
  }
  #site-header > nav.open {
    display: block;
  }
  #site-header > nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 0;
  }
  #site-header > nav a {
    color: #1e4634;
    border-bottom: 1px solid #eee;
    padding: .9rem 1rem;
  }
  #site-header > nav a:hover {
    background: #f9fdfb;
    color: #2ba84a;
  }
}

/* Hero text forced to white */
.hero-small .hero-content,
.hero-small .hero-content * {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* =====================================
   FINAL HEADER, NAV & HERO STYLES
   ===================================== */

/* Base header layout: two rows (logo row, then nav row) */
#site-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  border-bottom: 2px solid #e3f2e9;
  position: relative;
  z-index: 1000;
}

/* Logo row */
#site-header .logo-wrapper {
  padding: 12px 20px;
}
#site-header .logo-wrapper img,
#site-header .logo-responsive {
  height: 90px;   /* adjust size as needed */
  width: auto;
  display: block;
  margin: 0 auto; /* center the logo in the white strip */
}

/* === Desktop nav === */
@media (min-width: 900px) {
  .nav-toggle { display: none; } /* hide burger */

  #site-header > nav {
    display: block;
    background: #1e4634; /* green bar */
    width: 100%;
  }
  #site-header > nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 12px 24px;
    max-width: 1200px;
    display: flex;
    justify-content: center; /* centered links */
    align-items: center;
    gap: 2.5rem;
  }
  #site-header > nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .5px;
    border-bottom: 2px solid transparent;
    padding: 6px 4px;
    transition: color .25s, border-bottom-color .25s;
  }
  #site-header > nav a:hover,
  #site-header > nav a:focus {
    color: #d99200;
    border-bottom-color: #d99200;
  }
}

/* === Mobile nav === */
@media (max-width: 899.98px) {
  #site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
  }

  .nav-toggle {
    display: block;
    background: #1e4634;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: .6rem .8rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }

  #site-header > nav {
    display: none;              /* closed by default */
    width: 100%;
    background: #fff;
    border-top: 1px solid #e3f2e9;
    margin-top: .5rem;
  }
  #site-header > nav.open { display: block; }

  #site-header > nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: .5rem 0;
  }
  #site-header > nav a {
    display: block;
    color: #1e4634;
    padding: .9rem 1rem;
    border-bottom: 1px solid #eee;
    text-decoration: none;
  }
  #site-header > nav a:hover {
    background: #f9fdfb;
    color: #2ba84a;
  }
}

/* === Hero text (always white over image) === */
.hero-small .hero-content,
.hero-small .hero-content * {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* Logo orange accent */
:root { --logo-orange: #d99200; }

/* Wellness hero subtitle -> logo orange */
.wf-hero p {
  color: var(--logo-orange) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  font-weight: 600; /* optional: makes it pop a bit more */
}

/* === AWJ design tokens === */
:root{
  --awj-green:#1e4634;
  --awj-green-600:#18402f;
  --awj-cream:#f9fdfb;
  --awj-orange:#d99200;      /* logo orange */
  --awj-text:#2c3e50;
  --awj-muted:#6b7a86;
  --awj-card:#ffffff;
  --awj-shadow:0 10px 25px rgba(0,0,0,.06);
  --awj-radius:16px;
}

/* type helpers */
.awj-eyebrow{ text-transform:uppercase; letter-spacing:.12em; font:700 .8rem 'Raleway',sans-serif; color:var(--awj-orange); }
.awj-kicker{ color:var(--awj-muted); font:500 1.05rem 'Raleway',sans-serif; margin-top:.35rem; }
.awj-lead{ font:400 1.15rem/1.65 'Raleway',sans-serif; color:var(--awj-text); }

/* section shells */
.awj-section{ background:#fff; padding:2.25rem 1rem; max-width:1100px; margin:0 auto; border-radius:0; }
.awj-section.alt{ background:var(--awj-cream); }

/* buttons */
.awj-btn{ display:inline-block; padding:.7rem 1rem; border-radius:999px; text-decoration:none; font:600 .95rem 'Raleway',sans-serif; }
.awj-btn.primary{ background:var(--awj-green); color:#fff; }
.awj-btn.ghost{ border:2px solid var(--awj-green); color:var(--awj-green); background:transparent; }

/* chips (categories/tags) */
.awj-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.awj-chip{ padding:.35rem .7rem; border-radius:999px; background:#eef5f0; color:var(--awj-green); font:600 .85rem 'Raleway',sans-serif; }
.awj-chip.orange{ background:#fff3df; color:var(--awj-orange); }

/* card grid */
.awj-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.awj-card{ background:var(--awj-card); border:1px solid #e8e8e8; border-radius:var(--awj-radius); padding:1rem; box-shadow:var(--awj-shadow); transition:transform .2s ease; }
.awj-card:hover{ transform:translateY(-2px); }

/* callouts */
.awj-callout{ border-left:6px solid var(--awj-orange); background:#fff9ef; padding:1rem 1rem 1rem 1.1rem; border-radius:10px; }
.awj-callout.tip{ border-left-color:#2ba84a; background:#f0fbf3; }
.awj-callout.warn{ border-left-color:#c43c3e; background:#fff3f3; }

/* pretty details/summary (accordion) */
.awj-accordion{ border:1px solid #e8e8e8; border-radius:12px; overflow:hidden; }
.awj-accordion details{ border-top:1px solid #e8e8e8; background:#fff; }
.awj-accordion details:first-child{ border-top:0; }
.awj-accordion summary{ cursor:pointer; list-style:none; padding:12px 16px; font:600 1rem 'Raleway',sans-serif; }
.awj-accordion summary::-webkit-details-marker{ display:none; }
.awj-accordion summary::after{ content:"▸"; float:right; transition:transform .2s; }
.awj-accordion details[open] summary::after{ transform:rotate(90deg); }
.awj-accordion .panel{ padding:0 16px 14px; color:var(--awj-text); }

/* recipe card */
.awj-recipe{ background:#fff; border:1px solid #e8e8e8; border-radius:18px; box-shadow:var(--awj-shadow); overflow:hidden; }
.awj-recipe header{ background:linear-gradient(120deg, var(--awj-green), var(--awj-green-600)); color:#fff; padding:16px 18px; }
.awj-recipe .meta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.35rem; }
.awj-badge{ background:#ffffff22; border:1px solid #ffffff55; color:#fff; padding:.2rem .55rem; border-radius:999px; font:600 .75rem 'Raleway',sans-serif; }
.awj-recipe .body{ padding:16px 18px; }
.awj-ingredients{ columns: 2 280px; column-gap: 20px; padding-left: 1.2rem; }
.awj-ingredients li{ margin:.25rem 0; }

/* hero subtitles in logo orange (you asked for this) */
.hero-small .hero-content p,
.wf-hero p{ color:var(--awj-orange) !important; font-weight:600; text-shadow:0 2px 6px rgba(0,0,0,.35); }

/* Hide any old NASA credits */
#caption1,
#caption2,
.nasa-credit,
.credit.nasa { display:none !important; }