nav {
  background: #a21c1c;
  text-align: center;
  padding: 1rem 0;
  position: relative;
}
nav .menu {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
nav .menu-item {
  position: relative;
}
nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  display: block;
}
nav .submenu {
  display: none;
  position: absolute;
  background: #7f1d1d;
  top: 100%;
  left: 0;
  min-width: 200px;
  text-align: left;
  z-index: 10;
}
nav .submenu a {
  padding: 0.5rem 1rem;
  white-space: nowrap;
}
nav .menu-item:hover .submenu {
  display: block;
}
nav a:hover {
  opacity: 0.85;
}
footer {
  background: #4d7c0f;
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #f5f5f5;
  margin-top: 2rem;
}

footer a {
  color: #000;              /* white text (or choose another) */
  text-decoration: none;    /* remove underline */
  font-weight: 600;         /* make it stand out */
}

footer a:hover {
  color: #ffe08a;           /* change color on hover */
  text-decoration: underline; /* optional underline on hover */
}

img {
  border: 1px solid #000;
  border-radius: 4px;
}
/* Remove borders and rounded corners for only the logo */
.site-logo {
  border: none;
  border-radius: 0;
}

/* --- Field Trip Section Styles --- */
.ft-section{
  background:#fff8f0; /* cream from your palette */
  padding:2rem 1rem 2.5rem;
  color:#2e2e2e;
}
.ft-header{
  text-align:center;
  max-width:900px;
  margin:0 auto 1.25rem;
}
.ft-header h2{
  font-size:clamp(1.75rem, 2.5vw, 2.25rem);
  margin:0 0 .25rem;
  color:#020000; /* apple red */
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:700;
}
.ft-sub{
  margin:0;
  color:#4d7c0f; /* orchard green */
  font-weight:600;
}

.ft-callouts{
  display:grid;
  gap:.75rem;
  max-width:1000px;
  margin:0 auto 1.25rem;
}
.ft-callout{
  background:#b9d6b9; /* soft green accent */
  border-left:6px solid #4d7c0f;
  padding:.75rem 1rem;
  border-radius:8px;
  font-weight:600;
}

.ft-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:1rem 1.25rem;
  max-width:1000px;
  margin:0 auto 1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.ft-card h3{
  margin:.25rem 0 .6rem;
  font-size:1.3rem;
  color:#4d7c0f;
}

.ft-list{
  margin:.25rem 0 0;
  padding-left:1.1rem;
  line-height:1.7;
}
.ft-list li{ margin:.35rem 0; }

.ft-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0;
  padding:0;
  list-style:none;
}
.ft-chips li{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:.4rem .7rem;
  font-weight:600;
  white-space:nowrap;
}

.ft-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(12, 1fr);
  max-width:1000px;
  margin:0 auto 1rem;
}
.ft-grid .ft-card{ margin:0; }
.ft-grid .ft-card:nth-child(1){ grid-column:span 6; }
.ft-grid .ft-card:nth-child(2){ grid-column:span 6; }
@media (max-width: 900px){
  .ft-grid .ft-card:nth-child(1),
  .ft-grid .ft-card:nth-child(2){ grid-column:span 12; }
}

.ft-note p{ margin:.5rem 0; }

.ft-alert{
  max-width:1000px;
  margin:0 auto 1rem;
  background:#fff3cd;          /* soft warning background */
  color:#5c4700;
  border:1px solid #ffe08a;
  border-radius:8px;
  padding:.9rem 1rem;
  font-weight:600;
}
.ft-alert a{ color:#a21c1c; text-decoration:none; }
.ft-alert a:hover{ text-decoration:underline; }

.ft-smallprint{
  max-width:1000px;
  margin:.25rem auto 0;
  color:#6b7280;
  font-size:.95rem;
  text-align:center;
}

/* =========================
   Shopping Section (shop-*)
   ========================= */
:root{
  --shop-red:#a21c1c;     /* apple red */
  --shop-red-dark:#7f1d1d;
  --shop-green:#4d7c0f;   /* orchard green */
  --shop-cream:#fff8f0;   /* soft background */
  --shop-ink:#2b2b2b;     /* primary text */
  --shop-muted:#6b7280;   /* secondary text */
  --shop-card:#ffffff;    /* card background */
  --shop-ring:#e5e7eb;    /* subtle border */
  --shop-accent:#b9d6b9;  /* soft green accent */
}

/* wrapper respects your page padding */
.shop-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 0 32px;
}

/* hero / header block */
.shop-hero{
  background: var(--shop-card);
  border: 1px solid var(--shop-ring);
  border-radius: 16px;
  padding: clamp(16px, 4vw, 32px);
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
}

.shop-title{
  margin: 0 0 .25rem 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--shop-red);
  line-height: 1.15;
}

.shop-sub{
  margin: 0;
  color: var(--shop-muted);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}

/* badges */
.shop-badges{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 12px;
}
.shop-badge{
  background: var(--shop-red);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* lead paragraph */
.shop-lead{
  margin-top: 12px;
  font-size: 1.05rem;
  color: var(--shop-ink);
}

/* responsive grid */
.shop-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.shop-col-12{ grid-column: span 12; }
.shop-col-6 { grid-column: span 6; }
@media (max-width: 900px){
  .shop-col-6, .shop-col-12 { grid-column: span 12; }
}

/* cards */
.shop-card{
  background: var(--shop-card);
  border: 1px solid var(--shop-ring);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.shop-h2{
  margin: 0 0 .6rem 0;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  color: var(--shop-green);
  font-weight: 800;
  letter-spacing: .3px;
}

/* simple lists */
.shop-list{
  margin: .25rem 0 0 0;
  padding-left: 1.2rem;
  line-height: 1.7;
}

/* checked list style */
.shop-checks{
  list-style: none;
  margin: .25rem 0 0 0;
  padding: 0;
}
.shop-checks li{
  position: relative;
  padding-left: 1.6rem;
  margin: .3rem 0;
  font-weight: 700;
  color: var(--shop-ink);
}
.shop-checks li::before{
  content: "\2713";
  color: var(--shop-red);
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.2;
}

/* note banner */
.shop-note{
  background: var(--shop-accent);
  border-left: 6px solid var(--shop-green);
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
  margin-top: .75rem;
  color: var(--shop-ink);
}

/* =========================
   Pancake/Hamburger & Mobile Nav (no Unicode glyphs)
   ========================= */

/* Base: shared structure */
nav { position: relative; }
.menu { gap: 0.5rem; align-items: center; }
.menu .menu-item { position: relative; }
.menu .submenu a { white-space: nowrap; text-decoration: none; }

/* 1) DESKTOP (≥901px): show full menu inline, hover to open submenus */
@media (min-width: 901px) {
  nav .menu {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  /* desktop hover submenu */
  .menu .submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #7f1d1d;
    padding: 0.25rem 0;
    border-radius: 8px;
    min-width: 220px;
    z-index: 20;
  }
  .menu .menu-item:hover .submenu { display: block; }

  /* desktop: hide hamburger & caret buttons */
  .hamburger, .submenu-toggle { display: none; }
}

/* 2) MOBILE (≤900px): collapsed menu; CSS-drawn hamburger & caret */
@media (max-width: 900px) {
  /* Hide the menu by default; open when .open is added */
  nav .menu {
    display: none !important;          /* ensure collapse wins */
    flex-direction: column;
    background: #a21c1c;               /* apple red */
    padding: 0.5rem 0.75rem 1rem;
    gap: 0.25rem;
    width: 100%;
  }
  nav .menu.open { display: flex !important; }

  .menu .menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .menu .menu-item > a {
    flex: 1 1 auto;
    padding: 0.7rem 0.6rem;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
  }

  /* Disable desktop hover-open on touch */
  .menu .menu-item:hover .submenu { display: none; }

  /* Submenu (mobile) opens only when parent .open is present */
  .menu .submenu {
    position: static;
    display: none;
    background: #7f1616;
    border-radius: 6px;
    margin: 0.25rem 0 0.5rem 0;
    padding: 0.25rem 0;
  }
  .menu .menu-item.open .submenu { display: block; }

  /* HAMBURGER: CSS-drawn icon (no Unicode) */
  .hamburger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #a21c1c;
    color: #fff;
    border: 0;
    padding: 0.6rem 0.9rem 0.6rem 44px; /* space for icon on the left */
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    margin: 0.5rem 1rem;
  }
  /* If your HTML has span.bar elements, hide them to avoid layout issues */
  .hamburger .bar { display: none !important; }
  /* Draw 3 bars with a pseudo-element + box-shadow */
  .hamburger::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 22px;
    height: 2px;
    background: #fff;                 /* middle bar */
    border-radius: 2px;
    transform: translateY(-50%);
    box-shadow:
      0 -7px 0 0 #fff,                /* top bar */
      0  7px 0 0 #fff;                /* bottom bar */
  }

  /* Submenu caret button (CSS-drawn) */
  .submenu-toggle {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    position: relative;
    cursor: pointer;
  }
  .submenu-toggle::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    border-right: 2px solid #fff;     /* caret color */
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -70%) rotate(45deg); /* down arrow */
  }
  /* Rotate caret when submenu open */
  .menu .menu-item.open .submenu-toggle::after {
    transform: translate(-50%, -30%) rotate(-135deg); /* up arrow */
  }
}