/* Shared content-page nav + footer + per-page styles.
 * Loaded after styles.css so it reuses the same tokens/components. */

/* ============ content-page nav (Our Story / Book Now / Flavors) ============ */
.site-nav { background: var(--color-paper-2); position: relative; }
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}
.site-nav__logo { margin-right: auto; }   /* sit the logo right next to the hamburger; push IG/phone to the far edge */
.site-nav__logo img { height: 2.75rem; width: auto; display: block; }
/* links live in a dropdown panel behind the hamburger at ALL widths (matches the homepage) */
.site-nav__links {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--color-paper-2);
  box-shadow: 0 14px 28px rgba(60, 20, 10, 0.12);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-md);
}
.site-nav.is-open .site-nav__links { display: flex; }
.site-nav__links a {
  color: var(--color-accent);
  text-decoration: none;
  padding: var(--space-md) clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid color-mix(in oklab, var(--color-accent) 16%, transparent);
  white-space: nowrap;
}
.site-nav__links a:first-child { border-top: 0; }
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.site-nav__right { display: flex; align-items: center; gap: var(--space-lg); }
.site-nav__ig { color: var(--color-accent); display: inline-flex; }
.site-nav__ig:hover { color: var(--color-accent-deep); }
.nav-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-xs) var(--space-xl);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  font-size: var(--text-md);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out);
}
.nav-phone:hover { background: var(--color-ink); }

/* ============ full footer (Bernie's Los Angeles + IG + services + photo) ============ */
.site-footer {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding-block: var(--space-3xl) var(--space-2xl);
}
.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.site-footer__brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-md);
  margin: 0;
}
.site-footer__ig { color: var(--color-accent-ink); display: inline-flex; }
.site-footer__links {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-weight: 500;
  font-size: var(--text-md);
}
.site-footer__links a { color: var(--color-accent-ink); text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__photo { margin: 0; }
.site-footer__photo img { width: 100%; border-radius: var(--radius-card); display: block; }
.site-footer__legal { margin: var(--space-lg) 0 0; font-size: var(--text-sm); opacity: 0.9; }
.site-footer__legal a { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============ generic cream page ============ */
.page { background: var(--color-paper-2); }

/* ============ legal pages (privacy / terms) ============ */
.legal { padding-block: clamp(var(--space-2xl), 5vw, var(--space-4xl)); }
.legal .wrap { max-width: 52rem; }
.legal__title { font-size: var(--text-display-s); color: var(--color-ink); margin-bottom: var(--space-xs); }
.legal__updated { color: var(--color-ink); opacity: 0.7; font-size: var(--text-sm); margin: 0 0 var(--space-2xl); }
.legal h2 { font-size: var(--text-xl); color: var(--color-accent); margin: var(--space-2xl) 0 var(--space-sm); }
.legal p, .legal li { color: var(--color-ink); font-size: var(--text-md); line-height: 1.6; }
.legal p { margin: 0 0 var(--space-md); }
.legal ul { margin: 0 0 var(--space-md); padding-left: 1.2em; }
.legal li { margin-bottom: var(--space-2xs); }
.legal a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ============ flavors page ============ */
.flavorpg { padding-block: var(--space-3xl) var(--space-4xl); text-align: center; }
.flavorpg__title {
  font-size: var(--text-display-s);
  color: var(--color-ink);
  margin-bottom: var(--space-3xl);
}
.flavorpg__berry { width: 3.5rem; height: auto; margin: 0 auto var(--space-md); display: block; }
.flavorpg__list {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-ink);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
}
.flavorpg__note { color: var(--color-ink); max-width: 48ch; margin-inline: auto; font-size: var(--text-md); }

/* ============ book-now page — form is the focus, above the fold ============ */
.booknow { padding-block: var(--space-xl) var(--space-4xl); }
.booknow__head { text-align: center; margin-bottom: var(--space-lg); }
.booknow__title { font-size: var(--text-display-s); color: var(--color-ink); margin-bottom: var(--space-sm); }
.booknow__sub { color: var(--color-ink); font-size: var(--text-md); max-width: 46ch; margin-inline: auto; }
.booknow .ghl-form { max-width: 46rem; margin-inline: auto; }
.booknow__form { max-width: 52rem; margin-inline: auto; }
.booknow .field input,
.booknow .field select,
.booknow .field textarea { background: var(--color-paper); }
.booknow .form__submit { justify-self: center; }
.field-group__label {
  display: block;
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-md);
  margin-bottom: var(--space-sm);
}

/* ============ our-story page — alternating two-column sections ============ */
.story-sec { padding-block: clamp(var(--space-2xl), 5vw, var(--space-4xl)); }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
  align-items: center;
}
.story-text { min-width: 0; }
.story-title {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
  line-height: 1.03;
}
.story-title--tight { margin-bottom: var(--space-2xs); }
.story-figure { margin: 0; min-width: 0; }
.story-figure img {
  width: 100%;
  height: auto;
  max-height: 32rem;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}
.story-figure--orange { background: var(--color-accent); border-radius: var(--radius-card); overflow: hidden; }
.story-figure--orange img { border-radius: 0; }
.story-body { color: var(--color-ink); font-size: var(--text-md); line-height: 1.55; }
.story-body p + p { margin-top: var(--space-md); }

/* big italic display moment ("Your childhood just got elevated") */
.story-shout {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  color: var(--color-ink);
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  margin: var(--space-xl) 0 0;
}

.story-q { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); color: var(--color-ink); text-transform: uppercase; line-height: 1.04; margin: 0; }
.story-q em { font-style: italic; display: block; }
.story-sub { color: var(--color-ink); font-size: var(--text-md); margin: var(--space-lg) 0 var(--space-xl); }

/* meet jon — "Aka Bernie!" brand script graphic */
.story-meet__script { display: block; width: clamp(11rem, 26vw, 17rem); height: auto; margin: var(--space-2xs) 0 var(--space-lg); }

/* let's party marquee */
.party {
  overflow: hidden;
  padding-block: var(--space-lg);
  background: var(--color-paper-2);
}
.party__track {
  display: flex;
  width: max-content;
  gap: var(--space-xl);
  animation: marquee 28s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  color: var(--color-ink);
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 1;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .party__track { animation: none; } }

/* press */
.press { background: var(--color-paper); border-radius: var(--radius-card); padding: clamp(var(--space-xl), 4vw, var(--space-3xl)); }
.press__title { text-align: center; font-size: var(--text-2xl); color: var(--color-ink); text-transform: uppercase; margin-bottom: var(--space-xl); font-family: var(--font-display); }
.press__list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 52rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-2xl);
  justify-items: center;
  text-align: center;
}
.press__list a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============ home-meta page (form-first ad landing) ============ */
/* Original uses Bebas Neue for display type (not Anton) — match it on this page. */
.meta-title,
.meta-sub,
.meta-form__prompt,
.meta-gallery__title { font-family: "Bebas Neue", var(--font-display); font-weight: 400; }

/* hero reuses the homepage .hero (cup right) but the meta copy is CENTERED in the left
   column with a larger logo whose "Italian Ice" script reaches up-and-right — matching
   the original placement. */
/* the whole hero lives in ONE wider centered container (not the viewport) so on wide
   screens the logo, copy AND cup stay anchored together with equal margins — the cup
   never floats off to the right edge */
.hero--meta .hero__inner { max-width: 88rem; min-height: 48rem; }
/* cup fills the hero so its base lands exactly on the hero/cream boundary — like the
   original (cup bottom ≈ 99% of the hero height), neither floating nor bleeding over */
.hero--meta .hero__figure { top: 0; bottom: 0; height: auto; }
/* copy fills the hero height so the headline can sit lower (the original starts the
   headline ~40% down the hero, well below the logo — grid-area 14/34) */
.hero--meta .hero__copy { text-align: center; max-width: none; padding-top: var(--space-xl); align-self: stretch; }
.hero--meta .hero__logo {
  width: clamp(23rem, 49vw, 44rem);              /* larger than the homepage logo */
  margin: 0 auto var(--space-md);
  padding-bottom: 0;
}
.hero--meta .hero__logo-script {
  left: 116%;                                    /* extends right so the script crosses OVER the syrup drip… */
  right: auto;
  top: 20%;                                      /* …high, in the pink space above the meringue (like the original) */
  bottom: auto;
  width: 50%;
  z-index: 2;                                    /* green script renders on top of the cream syrup */
}
.meta-title {
  color: var(--color-ink);                       /* green headline */
  font-size: clamp(1.85rem, 1rem + 3vw, 3.5rem); /* larger, to match the original */
  letter-spacing: 0.045em;                       /* wider tracking, like the original */
  line-height: 1.08;
  max-width: min(9em, 100%);                     /* wraps "Bernie's setup for your" onto one line → 3 lines */
  margin: clamp(2rem, 4vw, 3.5rem) auto 0;       /* push the headline down to ~40% of the hero, like the original */
}
.meta-sub {
  margin: var(--space-xl) auto 0;
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1.2rem, 0.8rem + 1.4vw, 1.9rem);
  line-height: 1.25;
  max-width: 30ch;
}

/* form section — cream band with the prompt above the embed */
.meta-form { background: var(--color-paper-2); padding-block: var(--space-2xl) var(--space-3xl); }
.meta-form__prompt { text-align: center; text-transform: uppercase; color: var(--color-accent-deep); letter-spacing: 0.02em; font-size: clamp(1.4rem, 1rem + 1.8vw, 2.2rem); margin-bottom: var(--space-xl); }
.meta-form .ghl-form { max-width: 46rem; margin-inline: auto; }

/* proof gallery — "Don't believe us? Take it from our customers." */
.meta-gallery { background: var(--color-paper-2); padding-block: clamp(var(--space-xl), 4vw, var(--space-3xl)) clamp(var(--space-2xl), 5vw, var(--space-4xl)); }
.meta-gallery__title { text-align: center; color: var(--color-ink); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.04; font-size: clamp(2.2rem, 1.2rem + 3vw, 3.75rem); margin-bottom: clamp(var(--space-xl), 4vw, var(--space-3xl)); }
.meta-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.meta-gallery__item { margin: 0; }
.meta-gallery__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* CTA button back to the form (below the gallery) */
.meta-gallery__cta { text-align: center; margin-top: clamp(var(--space-xl), 4vw, var(--space-2xl)); }

/* closing CTA — animated treat + button (red band, matches the original footer) */
.meta-final { background: var(--color-accent); padding-block: clamp(var(--space-2xl), 6vw, var(--space-4xl)); text-align: center; }
.meta-final__gif { margin: 0 auto clamp(var(--space-xl), 4vw, var(--space-2xl)); max-width: 30rem; }
.meta-final__gif img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; }
.meta-final__cta { background: var(--color-paper-2); color: var(--color-accent); }
.meta-final__cta:hover { background: var(--color-paper); color: var(--color-accent-deep); }
.meta-final__legal { margin: var(--space-xl) 0 0; color: var(--color-accent-ink); font-size: var(--text-sm); opacity: 0.9; }
.meta-final__legal a { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============ thank-you page ============ */
.thanks { background: var(--color-paper-2); padding-block: var(--space-3xl) var(--space-4xl); }
.thanks__card {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  padding: clamp(var(--space-2xl), 8vw, var(--space-4xl)) var(--space-xl);
  text-align: center;
  max-width: 60rem;
  margin-inline: auto;
}
.thanks__title {
  font-family: "Pacifico", cursive;
  color: var(--color-ink);
  font-size: clamp(3rem, 10vw, 5.5rem);
  line-height: 1.1;
  margin: 0 0 var(--space-2xl);
}
.thanks__body { color: var(--color-ink); font-weight: 700; font-size: var(--text-md); max-width: 44ch; margin: 0 auto var(--space-2xl); }
.thanks__berry { width: 4rem; height: auto; margin: 0 auto; display: block; }

/* hamburger toggle — visible at all widths, far left (matches the homepage) */
.site-nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  order: -1;
}
.site-nav__toggle-bar {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.site-nav.is-open .site-nav__toggle-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.site-nav.is-open .site-nav__toggle-bar:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav__toggle-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============ responsive ============ */
@media (max-width: 60rem) {
  /* our-story: stack each section into one centered column, image first */
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .story-grid .story-figure { order: -1; }
  .story-figure img { max-height: 24rem; }
  .press__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* MOBILE hero (matches the original): the cup is a tall layer BEHIND the text, so the
     syrup stream falls from behind the letters; headline left-aligned + larger; cup base
     just touches the cream section below. */
  .hero--meta .hero__inner { position: relative; min-height: 50rem; padding-bottom: 0; }
  .hero--meta .hero__copy { position: relative; z-index: 1; text-align: center; }   /* text in front of the syrup */
  .hero--meta .hero__figure {
    order: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: auto;                       /* reset the desktop top:0 (would stretch the cup full-height) */
    bottom: -2.3rem;                 /* base still clipped by the cream… */
    height: auto;
    width: 103%;                     /* …but a bit larger so more of the cup shows + the syrup starts slightly higher (behind the first line) */
    max-width: 28rem;
    margin: 0;
    z-index: 0;                      /* behind the text */
  }
  .hero--meta .hero__figure img { width: 100%; height: auto; max-width: none; margin: 0; }
  /* headline centered + larger; sub stays centered */
  .meta-title { text-align: center; margin: clamp(1.5rem, 5vw, 2.5rem) auto 0; max-width: 100%; font-size: clamp(2.3rem, 9vw, 3.2rem); }
  .meta-sub { text-align: center; margin: var(--space-lg) auto 0; max-width: 100%; font-size: clamp(1.25rem, 5vw, 1.7rem); }
  /* centered logo with the script BELOW "Bernie's" */
  .hero--meta .hero__logo { width: 84%; max-width: 21rem; padding-bottom: 9%; }
  .hero--meta .hero__logo-script { left: auto; right: -2%; top: auto; bottom: -2%; width: 52%; }
}
@media (max-width: 52rem) {
  .meta-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .site-nav__ig { display: none; }   /* declutter the bar on mobile */
}
@media (max-width: 40rem) {
  .site-nav__inner { gap: var(--space-sm); }
  .site-nav__logo img { height: 2rem; }
  .site-nav__right { gap: var(--space-sm); }
  .nav-phone { padding: var(--space-2xs) var(--space-sm); font-size: 0.74rem; min-height: 38px; }
  .site-footer__top { flex-wrap: wrap; }
  .meta-form .form__row,
  .booknow .form__row { grid-template-columns: minmax(0, 1fr); }
  .press__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}