/* ═══════════════════════════════════════════════════════════════
   ORDERHERECLASSIC CAFÉ — cinematic espresso presentation layer
   Loaded last on both pages.

   Palette is brief-exact and defined in common.css:
     ground #120D08 / #1A1009 · card rgba(35,24,16,.75)
     text #F5EBDD / #C8B9A5 · gold #D6A84F · café green #234D36

   Technique constraints learned the hard way:
   - No repeating-linear-gradient: hard stops band visibly on large fills.
   - No inset white hairlines: they read as stray white lines on edges.
   - No neon glow. Gold is used at low alpha and thin widths only.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Glass surfaces — brief-exact card value and neighbours */
  --glass-card: rgba(35, 24, 16, 0.75);
  --glass-raised: rgba(44, 30, 20, 0.72);
  --glass-nav: rgba(15, 10, 7, 0.88);

  /* Gold hairlines: thin and low-alpha so they never read as "yellow" */
  --gold-hair: rgba(214, 168, 79, 0.22);
  --gold-hair-soft: rgba(214, 168, 79, 0.12);
  --gold-hair-strong: rgba(214, 168, 79, 0.42);

  /* Very subtle warm light, no texture stacked on top */
  --warm-veil: linear-gradient(158deg,
    rgba(120, 82, 40, 0.07) 0%,
    rgba(60, 40, 22, 0.03) 48%,
    rgba(20, 14, 9, 0.07) 100%);
}

/* ═══════════════════════════════════════════
   GROUND + GRAIN
   ═══════════════════════════════════════════ */

body {
  background-color: var(--cream);
  background-image: var(--warm-veil);
  background-attachment: fixed;
  color: var(--ivory);
}

/* Fine grain via layered tiny SVG noise. Keeps large espresso fields
   from looking like flat digital fill without adding visible pattern. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════
   NAVBAR — dark glass, gold hairline, green pill
   ═══════════════════════════════════════════ */

.header {
  padding: 0;
  background: var(--glass-nav);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid rgba(214, 168, 79, 0.35);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.45);
}

/* Brief: navbar height approximately 72-80px */
.header-inner {
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 76px;
  max-height: 80px;
}

.logo-img {
  width: 38px;
  height: 38px;
}

.logo-text h1 {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-size: 1.28rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ivory);
}

.tagline {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.66rem;
  line-height: 1.25;
  letter-spacing: 0.13em;
  color: var(--gold-muted);
}

.nav {
  gap: 10px;
}

.nav-btn {
  color: var(--text-light);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 17px;
  font-size: 0.85rem;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.nav-btn:hover {
  color: var(--ivory);
  border-color: var(--gold-hair-soft);
}

/* Active: dark forest green, thin champagne-gold border, small gold underline */
.nav-btn {
  position: relative;
}

.nav-btn.active {
  color: var(--ivory);
  background: #214C35;
  border-color: rgba(214, 168, 79, 0.5);
  font-weight: 600;
}

.nav-btn.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--gold);
}

.lang-toggle-btn,
.dark-mode-toggle,
.cart-toggle {
  background: rgba(35, 24, 16, 0.6);
  border: 1px solid var(--gold-hair-soft);
  color: var(--text-medium);
  transition: border-color 0.28s ease, color 0.28s ease;
}

.lang-toggle-btn:hover,
.dark-mode-toggle:hover,
.cart-toggle:hover {
  color: var(--ivory);
  border-color: var(--gold-hair);
}

/* ═══════════════════════════════════════════
   HERO — cinematic café
   ═══════════════════════════════════════════ */

.hero-banner {
  position: relative;
  overflow: hidden;
  /* Brief: hero is approximately 650-700px tall */
  height: clamp(650px, 74vh, 700px);
  min-height: 650px;
  display: flex;
  align-items: center;
  background-color: #120D08;
  /* Break out of .container so the photograph runs edge to edge instead of
     sitting in an inset card. Padding puts the copy back on the container's
     own content edge, so type alignment is unchanged. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(20px, calc(50vw - 50%));
  padding-right: max(20px, calc(50vw - 50%));
}

/* ── Corner leaf line-art ──
   Allowed decoration per the brief: subtle leaf line-art in the corners.
   Stroke-only, no fill, no circles, sitting behind the copy. */
.hero-banner::before,
.hero-banner::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 168px;
  height: 168px;
  pointer-events: none;
  opacity: 0.16;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.hero-banner::before {
  top: 16px;
  right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23D6A84F' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M78 14C54 22 36 40 32 66'/%3E%3Cpath d='M62 26c-9 2-17 9-21 19 10 2 20-3 25-11'/%3E%3Cpath d='M52 42c-7 3-12 9-14 17 8 1 16-3 20-9'/%3E%3Cpath d='M44 58c-5 3-8 8-9 14 6 1 12-2 15-7'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-banner::after {
  bottom: 16px;
  left: 18px;
  transform: scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23D6A84F' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M78 14C54 22 36 40 32 66'/%3E%3Cpath d='M62 26c-9 2-17 9-21 19 10 2 20-3 25-11'/%3E%3Cpath d='M52 42c-7 3-12 9-14 17 8 1 16-3 20-9'/%3E%3Cpath d='M44 58c-5 3-8 8-9 14 6 1 12-2 15-7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Hero copy: left 55-60% column, vertically centred ── */
.hero-content {
  position: relative;
  z-index: 3;
  flex: 0 1 58%;
  max-width: 620px;
  padding: 0;
}

.hero-title {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.14;
  font-weight: 500;
  color: var(--ivory);
  margin: 24px 0 20px;
  max-width: none;
  text-wrap: balance;
}

/* Two explicit lines on desktop; collapses to natural flow on narrow */
.hero-title-line {
  display: block;
}

.hero-accent {
  color: var(--gold);
  font-style: italic;
  position: static;
}

.hero-subtitle {
  color: var(--text-medium);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 46ch;
}

/* Badge: thin champagne-gold outline over subtle dark glass */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(18, 13, 8, 0.55);
  border: 1px solid rgba(214, 168, 79, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.hero-badge svg {
  stroke-width: 1.6;
}

/* Benefits: thin-line gold icons, warm ivory text */
.hero-stats {
  display: flex;
  gap: 26px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--ivory);
  font-weight: 500;
}

.hero-stat svg {
  stroke: var(--gold);
  stroke-width: 1.5;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
}

/* CTA: dark forest green + 1px champagne gold, subtle shadow only */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 32px;
  border-radius: 10px;
  background: #214C35;
  border: 1px solid var(--gold);
  color: var(--ivory);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease, background 0.28s ease;
}

.hero-cta:hover {
  background: #26563C;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.hero-cta svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.6;
  animation: heroArrowBounce 1.5s ease-in-out infinite;
}

.hero-cta:hover svg {
  transform: translateY(2px);
}

/* ── Hero photograph: full-bleed background layer ──
   customer.css still typesets this hook as a 200x200 floating cartoon
   (position:relative, fixed height, heroIllustrationFloat). A photograph
   must not bob, so all three are overridden here.

   The source cup sits at ~72% across / ~52% down, so the image is scaled
   1.22x about that origin: the cup grows ~22% (brief asks 20-30%) while
   staying locked inside the right 40% of the hero. */
.hero-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  z-index: 0;
  pointer-events: none;
  animation: none;
  transform: none;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* If no photo was supplied, fall back to the warm espresso ground. */
.hero-photo.is-missing {
  display: none;
}

.hero-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the cup framed on narrow viewports where cover crops the sides */
  object-position: 72% 52%;
  transform: scale(1.22);
  transform-origin: 72% 52%;
  /* Warm the photo toward the café palette and knock back the highlights.
     Kept light on purpose - the brief forbids heavy blurring and the photo
     has to stay realistic. */
  filter: saturate(0.86) contrast(1.05) brightness(0.9) sepia(0.14);
}

/* Left-side readability scrim. Brief: #100B07 at 95% opacity on the left,
   ~65% through the middle, transparent / warm dark brown on the right so
   the photograph stays visible where the cup is. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(16, 11, 7, 0.95) 0%,
      rgba(16, 11, 7, 0.95) 34%,
      rgba(16, 11, 7, 0.65) 52%,
      rgba(16, 11, 7, 0.34) 64%,
      rgba(24, 15, 8, 0.12) 76%,
      rgba(30, 18, 9, 0.04) 100%),
    linear-gradient(180deg,
      rgba(16, 11, 7, 0.5) 0%,
      rgba(16, 11, 7, 0) 22%,
      rgba(16, 11, 7, 0) 74%,
      rgba(16, 11, 7, 0.55) 100%);
}

/* ═══════════════════════════════════════════
   SECTION RHYTHM
   ═══════════════════════════════════════════ */

.section {
  padding: 68px 0;
  position: relative;
}

/* Our Menu heading: ivory + champagne gold, thin gold rule beneath */
.section-header {
  text-align: center;
  margin-bottom: 30px;
}

.section-header h2 {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 500;
  color: var(--ivory);
  margin-bottom: 10px;
}

.section-header p {
  color: var(--gold);
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1rem;
}

/* Decorative divider: thin gold line + tiny bean motif. No circles. */
.section-divider {
  text-align: center;
  margin: 6px 0 22px;
  opacity: 0.75;
}

.section-divider svg {
  width: 100%;
  max-width: 520px;
  height: 20px;
}

/* ── Category pills ──
   Selected: dark forest green + gold border + cream text.
   Unselected: transparent dark brown + subtle gold border. */
.category-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
}

.category-filter.sticky {
  top: 78px;
  background: rgba(16, 11, 7, 0.86);
  border-bottom: 1px solid var(--gold-hair-soft);
}

.filter-btn {
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(35, 24, 16, 0.5);
  color: var(--text-medium);
  border: 1px solid rgba(214, 168, 79, 0.28);
  transition: all 0.24s ease;
}

.filter-btn:hover {
  background: rgba(45, 30, 20, 0.7);
  color: var(--ivory);
  border-color: var(--gold-hair);
}

.filter-btn.active {
  background: #214C35;
  color: var(--ivory);
  border-color: var(--gold);
}

/* ── Menu cards: 3 across, espresso glass, thin gold border ──
   Brief wants 3 columns on desktop; the cards stay compact by tightening
   image height, type scale and padding rather than by adding a column. */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 1fr resolves to minmax(auto, 1fr), so a wide child can push the grid past
   its container. Cards are text-heavy, so opt them out of min-content. */
.menu-grid > * {
  min-width: 0;
}

.menu-card {
  background: rgba(35, 24, 16, 0.75);
  border: 1px solid rgba(214, 168, 79, 0.26);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.28s ease, box-shadow 0.28s ease;
  display: flex;
  flex-direction: column;
}

.menu-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-hair);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.menu-card-img {
  width: 100%;
  height: 142px;
  object-fit: cover;
  background: rgba(35, 24, 16, 0.9);
  flex-shrink: 0;
}

.menu-card-body {
  padding: 12px 14px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.menu-card-category {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 5px;
}

.combo-cat {
  color: var(--gold);
}

/* Card name - warm ivory (#F5EBDD on rgba(35,24,16,.75)) ~12.8:1 */
.menu-card-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ivory);
  margin-bottom: 5px;
  line-height: 1.25;
}

/* Description - muted cream (~8.0:1) */
.menu-card-body .desc {
  font-size: 0.76rem;
  color: var(--text-medium);
  line-height: 1.5;
  margin-bottom: 11px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

/* Price - champagne gold (#EBD9A8 on espresso) ~11.8:1 */
.menu-card-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #EBD9A8;
}

/* Add button - ivory on café green, 8.15:1 */
.add-to-cart-btn {
  padding: 8px 16px;
  border-radius: 8px;
  background: #234D36;
  color: var(--ivory);
  border: 1px solid rgba(214, 168, 79, 0.45);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.add-to-cart-btn:hover {
  background: #2A5C40;
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.405);
}

.bestseller-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: #234D36;
  border: 1px solid var(--gold);
  color: var(--ivory);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 999px;
}

.combo-menu-card {
  border-color: var(--gold-hair-soft);
}













body.dark-mode .hero-scrim {
  background:
    linear-gradient(90deg,
      rgba(12, 9, 6, 0.96) 0%,
      rgba(12, 9, 6, 0.96) 34%,
      rgba(12, 9, 6, 0.68) 52%,
      rgba(12, 9, 6, 0.38) 64%,
      rgba(18, 12, 7, 0.14) 76%,
      rgba(24, 15, 9, 0.05) 100%),
    linear-gradient(180deg,
      rgba(12, 9, 6, 0.52) 0%,
      rgba(12, 9, 6, 0) 22%,
      rgba(12, 9, 6, 0) 74%,
      rgba(12, 9, 6, 0.58) 100%);
}

body.dark-mode .hero-photo-img {
  filter: saturate(0.82) contrast(1.07) brightness(0.8) sepia(0.16);
}



/* Deeper espresso variant - cards step down, gold holds. */
body.dark-mode .menu-card {
  background: rgba(26, 18, 12, 0.8);
  border-color: rgba(214, 168, 79, 0.22);
}

body.dark-mode .filter-btn.active,
body.dark-mode .add-to-cart-btn {
  background: #1E4530;
}

body.dark-mode .filter-btn {
  background: rgba(26, 18, 12, 0.6);
  border-color: rgba(214, 168, 79, 0.22);
}

body.dark-mode .filter-btn.active,
body.dark-mode .add-to-cart-btn,
body.dark-mode .bestseller-badge {
  background: #1E4530;
}

body.dark-mode .hero-badge {
  background: rgba(12, 9, 6, 0.6);
}

body.dark-mode .section {
  background-color: #0C0906;
}

body.dark-mode .btn-secondary {
  background: transparent;
  color: var(--text-dark);
  border-color: var(--gold-hair);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 900px) {
  .hero-banner {
    min-height: 70vh;
    height: auto;
    /* Full-bleed still applies, but the scrim goes vertical so the copy
       keeps contrast without unmounting the photograph. */
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .hero-content {
    padding: 68px 0 76px;
  }

  /* The photo stays a full-bleed background on every width. The scrim goes
     vertical so the copy keeps its contrast without unmounting the image. */
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(16, 11, 7, 0.62) 0%,
        rgba(16, 11, 7, 0.88) 30%,
        rgba(16, 11, 7, 0.94) 58%,
        rgba(16, 11, 7, 0.97) 100%),
      linear-gradient(90deg,
        rgba(16, 11, 7, 0.5) 0%,
        rgba(16, 11, 7, 0.18) 50%,
        rgba(16, 11, 7, 0.18) 100%);
  }

  .hero-photo-img {
    object-position: 66% 55%;
    transform: scale(1.1);
    transform-origin: 66% 55%;
  }

  .hero-stats {
    gap: 24px;
  }

  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }


}

@media (max-width: 640px) {
  .section {
    padding: 84px 0;
  }

  .section-header {
    margin-bottom: 46px;
  }





  .menu-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .card,
  .menu-card,
  .btn-primary,
  .hero-cta,
  .filter-btn,
  .nav-btn,
  .menu-card-img,
  .card img {
    transition: none;
  }

  .card:hover,
  .menu-card:hover,
  .btn-primary:hover,
  .hero-cta:hover,
  .menu-card:hover .menu-card-img,
  .card:hover img {
    transform: none;
  }
}