/* Ahead of the Menu — shared brand layer.
 *
 * Loaded AFTER each page's own stylesheet so it cascades the landing page's
 * emerald + orange identity onto the shared top nav (and exposes the brand
 * tokens for reuse). Keeping it in one file makes the rebrand reversible:
 * remove the <link> and the pages fall back to their original look.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  --aotm-green-900: #112619;
  --aotm-green-800: #163320;
  --aotm-green-700: #1e4d2b;
  --aotm-green-500: #2d7a3e;
  --aotm-cream: #faf8f5;
  --aotm-cream-dim: rgba(250, 248, 245, 0.66);
  --aotm-accent: #ff6b35;
  --aotm-accent-2: #ff8c61;
  --aotm-leaf: #5bb673;
  --aotm-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ---- cascade the brand identity onto the shared page tokens ----
 * The food pages are built on these custom properties, so remapping them
 * here flows the Ahead of the Menu palette + display type through every
 * element (headings, accents, borders) without touching each rule.
 */
:root {
  --serif: var(--aotm-serif);   /* editorial display type → Fraunces */
  --terracotta: var(--aotm-accent);    /* warm accent → brand orange */
  --plum: #b4421f;                     /* secondary accent → burnt orange */

  /* the Ahead of the Menu leaf mark, drawn as an orange outline */
  --aotm-leaf-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ff6b35'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z'/%3E%3Cpath%20d='M2%2021c0-3%201.85-5.36%205.08-6'/%3E%3C/svg%3E");
}

/* ---- shared top nav → emerald bar ---- */
.recipes-nav {
  background: linear-gradient(180deg, var(--aotm-green-800), var(--aotm-green-900));
  border-bottom: 1px solid rgba(255, 107, 53, 0.28);
  color: var(--aotm-cream);
}
.recipes-brand { color: var(--aotm-cream); }
.recipes-brand .brand-link {
  font-family: var(--aotm-serif);
  font-weight: 600;
  color: var(--aotm-cream);
}
.recipes-brand .brand-link .wordmark { font-family: var(--aotm-serif); }
/* replace the old droplet blob with the orange leaf mark, in the nav … */
.recipes-brand .leaf-mark {
  background: var(--aotm-leaf-svg) center / contain no-repeat;
  border: 0;
  border-radius: 0;
  transform: none;
}
/* … and in the recipes / tips hero headline */
.hero h1 .leaf,
.tips-hero h1 .leaf {
  background: var(--aotm-leaf-svg) center / contain no-repeat;
  border-radius: 0;
  transform: translateY(0.08em);
  width: 0.78em;
  height: 0.78em;
}

.recipes-brand .powered-by,
.recipes-page .recipes-brand .powered-by { color: var(--aotm-cream-dim); }
.recipes-brand .powered-by a,
.recipes-page .recipes-brand .powered-by a { color: var(--aotm-cream); }

.recipes-nav-links a {
  color: var(--aotm-cream);
  opacity: 0.72;
}
.recipes-nav-links a:hover { opacity: 1; }
.recipes-nav-links a.active {
  color: #ffffff;
  opacity: 1;
}
.recipes-nav-links a.active::after { background: var(--aotm-accent); }

/* the menu pill (right slot) inherits cream so it reads on the dark bar */
#nav-menu-pill-slot { color: var(--aotm-cream); }

/* keep the brand wordmark + credit each on a single line */
.recipes-brand .brand-link,
.recipes-brand .powered-by { white-space: nowrap; }

/* ---- mobile hamburger nav ---- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 9px;
  background: transparent;
  border: 1px solid rgba(250, 248, 245, 0.25);
  border-radius: 10px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--aotm-cream);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

@media (max-width: 760px) {
  .recipes-nav { position: relative; }
  .recipes-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .nav-burger { display: flex; }
  #nav-menu-pill-slot { display: none; }   /* declutter the mobile bar */

  .recipes-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 6px 0;
    background: var(--aotm-green-900);
    border-top: 1px solid rgba(255, 107, 53, 0.28);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
    z-index: 70;
  }
  .recipes-nav.nav-open .recipes-nav-links { display: flex; }
  .recipes-nav-links a {
    display: block;
    padding: 13px 22px;
    opacity: 0.92;
  }
  .recipes-nav-links a.active::after { display: none; }

  /* burger → X when open */
  .recipes-nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .recipes-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .recipes-nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* deeper, richer accent for the hero headline emphasis (e.g. menus "sample menu") */
.hero h1 em { color: #bf451c; }
/* "unforgettable" uses the brand orange */
.hero h1 em.ufg { color: #ff6b35; }
/* recipes page: only "unforgettable" is colored; fresh + tasty match the body text */
.recipes-page .hero h1 em,
.recipes-page .hero h1 em.fresh-accent { color: inherit; }
.recipes-page .hero h1 em.ufg { color: #ff6b35; }

/* menus: collapse the intro to one small top-right line so the
   generator tool sits almost at the top of the page */
.hero.menus-hero {
  display: block;
  min-height: 0;
  padding: clamp(0.9rem, 2vw, 1.5rem) clamp(1.5rem, 5vw, 3rem) clamp(0.5rem, 1.4vw, 0.9rem);
  border-bottom: 1px solid var(--line-soft);
  text-align: right;
}
.hero.menus-hero > div { width: 100%; }
.hero.menus-hero .eyebrow,
.hero.menus-hero .stats { display: none; }   /* one line only */
.hero.menus-hero h1 {
  margin: 0;
  /* viewport-scaled so it stays on one line, desktop and mobile */
  font-size: clamp(0.8rem, 2.4vw, 1.2rem);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.hero.menus-hero h1 br,
.hero.menus-hero h1 .leaf { display: none; }

/* mobile: the 17 cuisine pills wrap into ~5 rows and dominate the generator.
   Collapse them to a single horizontally-scrollable row instead. */
@media (max-width: 640px) {
  /* let the grid/flex chain shrink below the pills' content width so the
     pill row can scroll inside its track instead of overflowing the page */
  .generator .gen-stack,
  .generator .gen-row { min-width: 0; }
  .generator .pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 2px 4px 6px;
    margin: 0 -4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 22px), transparent 100%);
  }
  .generator .pills::-webkit-scrollbar { display: none; }
  .generator .pill {
    flex: 0 0 auto;
    padding: 7px 12px;
    font-size: 12.5px;
  }
}