/* ==========================================================================
   Z CAFE — menu page
   Layout cloned from lalalandcafe.com/pages/menu, rebranded for Z Society.
   Palette + logo + tagline sourced from the Z Cafe concept deck.
   ========================================================================== */

:root {
  /* Brand palette (sampled from the concept deck) */
  --pale:       #eaf4fa;   /* page background — soft pale blue */
  --pale-2:     #f2fafc;   /* lighter wash */
  --paper:      #ffffff;   /* cards */
  --sky:        #4698ca;   /* primary brand blue (the logo circle) */
  --sky-deep:   #2e7bae;   /* hover / pressed */
  --sky-soft:   #d7ebf6;   /* tints, image beds */
  --navy:       #12233f;   /* headings / primary text */
  --ink:        #33465f;   /* body text */
  --ink-soft:   #6b7a8e;   /* muted / descriptions */
  --burgundy:   #7a0723;   /* small accents (from the logo's red shadow) */
  --line:       rgba(18, 35, 63, 0.12);
  --line-soft:  rgba(18, 35, 63, 0.07);

  /* Type */
  --serif: "Fraunces", "Georgia", serif;
  --sans:  "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale */
  --wrap: 1220px;
  --gap: clamp(1rem, 2.4vw, 2rem);
  --section-y: clamp(3.5rem, 6vw, 6.5rem);

  /* Figures: one radius for every photo on the page; the arch is the cup frame. */
  --radius: 8px;
  --arch: 999px 999px var(--radius) var(--radius);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 320ms;

  --shadow-lg: 0 30px 70px -30px rgba(18, 35, 63, 0.45);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* The off-canvas nav drawer parks itself past the right edge; clip (not
     hidden) keeps it from adding a horizontal scrollbar without turning body
     into a scroll container, which would break the sticky header. */
  overflow-x: clip;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--pale);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Shared photo frame. Flat bed, no shadow — the photography carries the edge. */
.fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sky-soft);
}
.fig img { width: 100%; height: 100%; object-fit: cover; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */
.announce {
  background: var(--navy);
  color: #eaf2fb;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.6rem 1rem;
}
.announce b { color: #fff; font-weight: 600; }
.announce .sep { opacity: 0.45; margin: 0 0.55rem; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(234, 244, 250, 0.82);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand img { width: 42px; height: 42px; border-radius: 50%; }
.brand .wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--navy);
  line-height: 1;
}
.brand .wordmark small {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sky-deep);
  margin-top: 3px;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links a { position: relative; color: var(--navy); padding: 0.3rem 0; transition: color var(--dur); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--sky);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--sky-deep); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a.accent { color: var(--burgundy); }

.nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.9rem; }
.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: none; background: transparent; color: var(--navy);
  cursor: pointer; border-radius: 50%;
  transition: background var(--dur), color var(--dur);
}
.icon-btn:hover { background: var(--sky-soft); color: var(--sky-deep); }
.icon-btn svg { width: 20px; height: 20px; }
.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   Hero — full-bleed store video (shot in-house), kept clear.
   The tint is faint and even so the room reads; it only firms up at the top
   and bottom edges, where the nav and the button need something to sit on.
   Copy is centred: greeting, wordmark, one button.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9,20,38,0.30) 0%, rgba(9,20,38,0.10) 32%, rgba(9,20,38,0.10) 66%, rgba(9,20,38,0.38) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
  min-height: clamp(30rem, 86vh, 48rem);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.hero .eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin: 0 0 0.6rem;
  text-shadow: 0 1px 14px rgba(9, 20, 38, 0.5);
}
/* Italianno is a thin script with tall ascenders, so it runs larger than the
   serif would and needs a touch of line-height so the Z's flourish clears. */
.hero h1 {
  font-family: "Italianno", var(--serif);
  font-weight: 400;
  color: #fff;
  font-size: clamp(5.2rem, 12vw, 9.6rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  margin: 0 0 1.4rem;
  text-shadow: 0 2px 34px rgba(9, 20, 38, 0.6);
}
.hero h1 em { font-style: normal; color: #fff; }
.hero-cta { display: flex; justify-content: center; }
.hero .btn-hero {
  background: #fff;
  color: var(--navy);
  padding: 0.95rem 2.4rem;
  letter-spacing: 0.2em;
}
.hero .btn-hero:hover { background: var(--navy); color: #fff; }


/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
  border: 1.5px solid transparent;
}
.btn-primary { background: var(--sky); color: #fff; }
.btn-primary:hover { background: var(--sky-deep); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.section { padding: var(--section-y) 0; }
.section-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head .kicker {
  /* .section-head p below sets max-width:46ch, which would otherwise box the
     kicker into a narrow left-hugging block instead of centring it. */
  max-width: none;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sky-deep);
  font-weight: 600;
  margin: 0 0 0.7rem;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  margin: 0;
}
.section-head p { color: var(--ink-soft); max-width: 46ch; margin: 0.8rem auto 0; }
/* The menu board is a reading section, not a showcase — rag it left so the page
   is not the same centred stack four times over. */
.section-head--left { text-align: left; }
.section-head--left p { margin-inline: 0; max-width: 60ch; }

/* --------------------------------------------------------------------------
   Favorites — 4-up product grid (mirrors "La La's Favorites")
   -------------------------------------------------------------------------- */
.favorites { background: var(--paper); }
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.product { text-align: center; }
/* Arch-topped portrait: the cup's own silhouette, and the arches in the store.
   Topping sits up in the curve; the base gets the room. */
.product-media {
  aspect-ratio: 3 / 4;
  border-radius: var(--arch);
  margin-bottom: 1rem;
}
.product-media img { object-position: 50% 42%; transition: transform 900ms var(--ease); }
.product:hover .product-media img { transform: scale(1.03); }
.product h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}
.product h3 .heart { color: var(--burgundy); font-size: 0.8em; margin-left: 0.3rem; }
.product p { color: var(--ink-soft); font-size: 0.85rem; margin: 0.35rem auto 0; max-width: 28ch; }

/* --------------------------------------------------------------------------
   Menu board — categories (Z Cafe's real menu)
   -------------------------------------------------------------------------- */
#menu { background: var(--paper); }
.menu-board {
  columns: 2;
  column-gap: clamp(2.4rem, 5vw, 4.5rem);
}
.menu-cat {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}
.menu-cat > header {
  display: flex; align-items: baseline; gap: 0.6rem;
  border-bottom: 2px solid var(--sky);
  padding-bottom: 0.5rem;
  margin-bottom: 1.1rem;
}
.menu-cat h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  color: var(--navy);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin: 0;
}
.menu-cat h3 + span {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-deep);
  font-weight: 600;
}
.menu-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--line-soft);
}
.menu-item:last-child { border-bottom: none; }
.menu-item .name {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  display: flex; align-items: center; gap: 0.4rem;
}
.menu-item .name .heart { color: var(--burgundy); font-size: 0.85em; }
.menu-item .desc {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 0.83rem;
  line-height: 1.5;
  max-width: 46ch;
}
/* A footnote, not a banner. */
.menu-note {
  margin-top: 0.9rem;
  border-left: 2px solid var(--sky);
  padding: 0.15rem 0 0.15rem 0.9rem;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.45;
}
.menu-note b { font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }

/* Add-ons: one ruled row under the board */
.addons {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
}
.addons dt {
  color: var(--sky-deep);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}
.addons dd { margin: 0; font-size: 0.83rem; line-height: 1.5; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Z Munchies feature — the short list beside a mosaic of the food shots.
   The mosaic uses an explicit height with equal auto rows so the tall figure
   and the two stacked ones always line up, whatever the source aspect is.
   -------------------------------------------------------------------------- */
.munchies { background: var(--pale); }
.munchies-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: stretch;
}
.munchies-copy {
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.munchies-copy h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  margin: 0 0 0.6rem;
}
.munchies-copy > p { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 1.2rem; }
.munchies-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.munchies-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--line-soft);
}
.munchies-list li:last-child { border-bottom: none; }
.munchies-list .n {
  font-weight: 600; color: var(--navy); font-size: 0.95rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.munchies-list .n .heart { color: var(--burgundy); font-size: 0.85em; }
.munchies-note {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sky-deep); font-weight: 600; margin: 0 0 1.4rem;
}
.munchies-copy .btn { align-self: flex-start; }

.munchies-photos {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  height: clamp(26rem, 44vw, 36rem);
}
/* Caption sits under the photo, so the figure is a photo row plus a text row and
   the image fills whatever height the mosaic cell leaves it. */
.m-fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
  min-height: 0;
}
.m-fig.tall { grid-row: span 2; }
.m-fig .fig { min-height: 0; }
.m-fig img { transition: transform 900ms var(--ease); }
.m-fig:hover img { transform: scale(1.02); }
.m-fig figcaption {
  margin-top: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Promo / lifestyle strip
   -------------------------------------------------------------------------- */
.promo { background: var(--navy); color: #fff; }
.promo .wrap { padding: var(--section-y) 0; }
.promo-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
  grid-template-rows: auto auto;
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
.promo-copy { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; padding-right: 1rem; }
.promo-copy .kicker { color: var(--sky); letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.72rem; font-weight: 600; margin: 0 0 1rem; }
.promo-copy h2 { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.03; margin: 0 0 1rem; color: #fff; }
.promo-copy h2 em { font-style: italic; }
.promo-copy p { color: #b9cbe0; margin: 0 0 1.6rem; max-width: 34ch; }
.promo-copy .btn { align-self: flex-start; }
/* On navy a hairline ring stands in for the edge a shadow used to give. */
.promo-figure::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.promo-figure.tall { grid-row: span 2; }

/* --------------------------------------------------------------------------
   Subscribe band (mirrors La La Land's footer sign-up)
   -------------------------------------------------------------------------- */
.subscribe {
  background:
    radial-gradient(120% 140% at 50% -20%, var(--sky-deep), var(--sky));
  color: #fff;
  text-align: center;
}
.subscribe .wrap { padding: var(--section-y) 0; }
.subscribe h2 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 0.6rem; }
.subscribe p { color: rgba(255,255,255,0.85); margin: 0 auto 1.8rem; max-width: 42ch; }
.subscribe form { display: flex; gap: 0.6rem; max-width: 460px; margin-inline: auto; }
.subscribe input {
  flex: 1;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 999px;
  padding: 0.85rem 1.3rem;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.subscribe input::placeholder { color: rgba(255,255,255,0.7); }
.subscribe input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,0.2); }
.subscribe .btn-primary { background: var(--navy); }
.subscribe .btn-primary:hover { background: #0a1526; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--pale-2); border-top: 1px solid var(--line-soft); }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(3rem, 5vw, 4.5rem) 0 2.5rem;
}
.footer-brand .brand { margin-bottom: 1rem; }
.footer-brand p { color: var(--ink-soft); font-size: 0.86rem; max-width: 30ch; }
.footer-brand .loc { display: flex; align-items: center; gap: 0.5rem; color: var(--navy); font-weight: 500; font-size: 0.86rem; margin-top: 1rem; }
.footer-brand .loc svg { width: 16px; height: 16px; color: var(--sky-deep); flex: none; }
.footer-col h4 {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: var(--ink-soft); font-size: 0.86rem; transition: color var(--dur); }
.footer-col a:hover { color: var(--sky-deep); }
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding: 1.4rem 0 2.2rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.footer-bottom .policies { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.78rem; }
.footer-bottom .policies a { color: var(--ink-soft); }
.footer-bottom .policies a:hover { color: var(--sky-deep); }
.copyright { font-size: 0.78rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
  .menu-board { columns: 1; }
  .munchies-grid { grid-template-columns: 1fr; }
  .munchies-photos { height: clamp(22rem, 56vw, 30rem); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .promo-grid { grid-template-columns: 1fr 1fr; }
  .promo-copy { grid-column: 1 / -1; grid-row: auto; padding-right: 0; }
}
@media (max-width: 820px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto;
    width: min(78vw, 320px);
    flex-direction: column; justify-content: flex-start;
    gap: 0.4rem;
    background: var(--pale-2);
    padding: 5rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-lg);
    font-size: 1rem;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-toggle { display: grid; }
  .hero-inner { min-height: clamp(28rem, 82vh, 40rem); }
  /* Phones get the vertical cut; a touch more weight at the bottom keeps the
     button readable on a bright floor without dimming the room. */
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(9,20,38,0.34) 0%, rgba(9,20,38,0.12) 35%, rgba(9,20,38,0.14) 65%, rgba(9,20,38,0.48) 100%);
  }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .addons { grid-template-columns: 1fr; }
  .munchies-photos { grid-template-columns: 1fr; grid-auto-rows: auto; height: auto; }
  /* Single column: give each photo back the orientation its source was cropped
     to, so the group shots do not get squeezed into a portrait box. */
  .m-fig .fig { aspect-ratio: 5 / 4; }
  .m-fig.tall { grid-row: auto; }
  .m-fig.tall .fig { aspect-ratio: 4 / 5; }
  .promo-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .subscribe form { flex-direction: column; border-radius: 20px; }
  .subscribe input, .subscribe .btn { border-radius: 999px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
  /* Paired with the pause() in index.html — the poster frame stands in for the clip. */
  .hero-video { visibility: hidden; }
  .hero-media { background: url("../images/web/store-poster.jpg") center / cover no-repeat; }
}