/* ============================================================
   style.css — MAGMA (FULL, CLEAN, RESPONSIVE)
   - Luxury dark + optional light theme
   - Fixed missing CSS vars (--accent/--text)
   - Fixed broken selector
   - Merged duplicate responsive rules (no conflicts)
   - Menu Panels + Fullscreen expand + Inner carousel
   - Better readability on bright images (default overlays)
============================================================ */

/* -----------------------------
   0) ROOT VARIABLES
------------------------------ */
:root{
  --bg-carbon: #0B0B0C;
  --lancaster-cream: #EBE7DE;
  --caramel-amber: #D29B4A;
  --soft-ivory: #F5F5F0;
  --text-muted: #888888;

  --font-heading: "Playfair Display", serif;
  --font-body: "Montserrat", sans-serif;

  /* ✅ used in your CSS but missing before */
  --accent: var(--caramel-amber);
  --text: var(--soft-ivory);
    /* ✅ NAV THEME VARS (ADD THESE) */
  --nav-bg: rgba(0,0,0,0.35);
  --nav-border: rgba(255,255,255,0.10);
  --nav-shadow: 0 10px 30px rgba(0,0,0,0.35);

  --nav-fg: #fff;
  --nav-fg-muted: rgba(255,255,255,0.82);

  --nav-ctrl-border: rgba(255,255,255,0.14);
  --nav-ctrl-bg: rgba(255,255,255,0.06);
}

/* -----------------------------
   1) BASE RESET
------------------------------ */
*{ margin: 0; padding: 0; box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
  background: radial-gradient(circle at center, #1a1a1b 0%, #0b0b0c 100%);
  color: var(--soft-ivory);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}

/* -----------------------------
   2) THEMES
------------------------------ */
body.theme-dark{
  --text: var(--soft-ivory);
}

body.theme-light{
  background: var(--lancaster-cream);
  color: var(--bg-carbon);
  --text: var(--bg-carbon);
    --nav-bg: rgba(235, 231, 222, 0.92);
  --nav-border: rgba(0,0,0,0.10);
  --nav-shadow: 0 10px 28px rgba(0,0,0,0.12);

  --nav-fg: var(--bg-carbon);
  --nav-fg-muted: rgba(11,11,12,0.78);

  --nav-ctrl-border: rgba(0,0,0,0.14);
  --nav-ctrl-bg: rgba(0,0,0,0.04);
}

/* Light theme: subtle text */
body.theme-light .hero p,
body.theme-light .about-section p{
  color: #6b6b6b;
}

/* NAV light */
body.theme-light nav{
  background: rgba(235, 231, 222, 0.88);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
body.theme-light .logo,
body.theme-light .nav-links a:not(.btn){
  color: var(--bg-carbon);
}

/* Buttons in light */
body.theme-light .btn.btn-white{
  border-color: var(--bg-carbon);
  color: var(--bg-carbon);
}
body.theme-light .btn.btn-white:hover{
  background: var(--bg-carbon);
  color: #fff;
}

/* HERO headline gradient in light */
body.theme-light .hero h1{
  background: linear-gradient(135deg, #111 30%, var(--caramel-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer in light (keeps luxury dark footer) */
body.theme-light .footer{
  background: #111;
  color: #fff;
}
nav{
  padding: 1.5rem 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* ✅ synced background via CSS variable */
  background: var(--nav-bg);
  backdrop-filter: blur(15px);

  position: fixed;   /* ✅ stays fixed on desktop too */
  width: 100%;
  top: 0;
  z-index: 1000;

  border-bottom: 1px solid var(--nav-border);
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Optional: subtle elevation after scroll */
nav.scrolled{
  box-shadow: var(--nav-shadow);
}

/* ✅ Keep logo as-is */
.logo{
  font-family: var(--font-heading);
  letter-spacing: 8px;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  font-size: 1.2rem;
}

/* Desktop links */
.nav-links{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Link styling */
.nav-links a:not(.btn){
  color: white;
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity 0.25s ease;
  position: relative;
  padding: 6px 2px;
}
.nav-links a:not(.btn):hover{ opacity: 1; }

/* ✅ Smooth underline (active + hover) */
.nav-links a:not(.btn)::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -10px;
  width: 0;
  height: 2px;
  background: var(--caramel-amber);
  border-radius: 999px;
  transform: translateX(-50%);
  transition: width 0.35s ease;
  opacity: .95;
}
.nav-links a:not(.btn):hover::after,
.nav-links a.is-active:not(.btn)::after{
  width: 100%;
}
.nav-links a.is-active:not(.btn){ opacity: 1; }

/* -----------------------------
   Burger (hidden on desktop)
------------------------------ */
.nav-burger{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  transition: background 0.25s ease, transform 0.2s ease;
}
.nav-burger:hover{
  background: rgba(255,255,255,0.10);
  transform: translateY(-1px);
}
.nav-burger span{
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  transition: transform 0.28s ease, opacity 0.22s ease, width 0.28s ease;
}

/* ✅ Burger → X animation */
nav.nav-open .nav-burger span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
  width: 20px;
}
nav.nav-open .nav-burger span:nth-child(2){
  opacity: 0;
}
nav.nav-open .nav-burger span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
  width: 20px;
}

/* -----------------------------
   Mobile overlay
------------------------------ */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  z-index: 999; /* under nav (1000), over page */
  opacity: 0;
  transition: opacity 0.28s ease;
}
nav.nav-open ~ .nav-overlay{
  opacity: 1;
}

/* -----------------------------
   Mobile layout
------------------------------ */
@media (max-width: 900px){
  nav{
    padding: 1rem 6%;
  }

  .nav-burger{
    display: inline-flex;
  }

  /* ✅ Turn links into a slide-down panel */
  .nav-links{
    position: fixed;
    left: 0;
    right: 0;
    top: 72px;              /* below nav */
    padding: 18px 6%;
    display: grid;
    gap: 14px;

    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;

    transition: transform 0.28s ease, opacity 0.28s ease, background 0.35s ease;

  }

  nav.nav-open .nav-links{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    
  }

  /* Bigger touch targets */
  .nav-links a:not(.btn){
    font-size: 0.75rem;
    letter-spacing: 2px;
    padding: 10px 6px;
    
  }

  /* Hide underline on mobile (optional cleaner look) */
  .nav-links a:not(.btn)::after{
    bottom: -6px;

  }

  /* Make theme toggle align nicely */
  .theme-toggle{
    justify-self: start;
  }
}
/* -----------------------------
   4) HERO
------------------------------ */
.hero{
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
  overflow: hidden;
height: 100vh;
}


.hero p{
  font-weight: 300;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 40px;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.hero h1{
  font-family: var(--font-heading);
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #fff 30%, var(--caramel-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 i{
  font-weight: 400;
  font-style: italic;
}

.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* -----------------------------
   5) BUTTONS
------------------------------ */
.btn{
  padding: 18px 45px;
  border: 1px solid var(--caramel-amber);
  color: var(--caramel-amber);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 0.7rem;
  text-decoration: none;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.btn:hover{
  background: var(--caramel-amber);
  color: #000;
  box-shadow: 0 0 30px rgba(210, 155, 74, 0.3);
}
.btn.btn-white{ border-color: white; color: white; }
.btn.btn-white:hover{
  background: white;
  color: #000;
  box-shadow: 0 0 30px rgba(255,255,255,0.12);
}
.btn.btn-dark{
  background: var(--bg-carbon);
  color: white;
  border-color: var(--bg-carbon);
}
.btn.btn-dark:hover{ background: #000; color: white; }

/* Optional: your home button (removes inline styles) */
.btn.btn-home{
  padding: 10px 20px;
  font-size: 0.6rem;
  letter-spacing: 3px;
}

/* -----------------------------
   6) THEME TOGGLE BUTTON
------------------------------ */
.theme-toggle{
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: .25s ease;
}
.theme-toggle:hover{
  border-color: var(--accent);
  color: var(--accent);
}

/* -----------------------------
   7) SHARED SECTION LABEL
------------------------------ */
.section-label{
  text-align: center;
  font-family: var(--font-body);
  letter-spacing: 6px;
  margin-bottom: 70px;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--caramel-amber);
  font-weight: 700;
}
/* -----------------------------
   8) ABOUT (CLEAN + OWNERS)
------------------------------ */
.about-section{
  padding: 140px 10%;
  min-height: 100vh;
  text-align: center;
}

.about-section h2{
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 20px 0 14px;
}
.about-section h2 i{ font-style: italic; font-weight: 400; }

/* About layout (use grid even if 1 column) */
.about-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 28px auto 0;
  justify-items: center;
}

/* About text only */
.about-content p{
  max-width: 700px;
  margin: 0 auto;              /* ✅ center paragraph */
  color: var(--text-muted);
  line-height: 1.75;
}

/* Owner pills */
.owner-sign{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  justify-content: center;      /* ✅ center on desktop */
}
.owner-pill{
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

/* Owners cards */
.owners-wrap{
  margin-top: 18px;
  display: grid;
  gap: 14px;

  /* ✅ centers even if you have only 1 card */
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
}

.owner-card{
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}
.owner-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 55px rgba(0,0,0,0.30);
}

.owner-photo{
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.owner-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%);
}

.owner-info{
  padding: 14px 14px 16px;
  color: var(--text);
}
.owner-name{
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.4px;
}
.owner-role{
  font-family: var(--font-body);
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 3px;
}

/* Light theme polish */
body.theme-light .owner-card{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
body.theme-light .owner-pill{
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--bg-carbon);
}
body.theme-light .owner-info{ color: var(--bg-carbon); }

/* Mobile */
@media (max-width: 900px){
  .about-section{ padding: 110px 8%; }
  .about-section{ text-align: left; }
  .about-grid{ justify-items: start; }
  .owner-sign{ justify-content: flex-start; }
  .owner-photo{ height: 260px; }
}
/* ============================================================
   9) MENU PANELS + INNER CAROUSEL  ✅ FULL WORKING (NO SIDE SCROLL)
   - Desktop: 4 tilted panels, smooth expand
   - Tablet: 2 columns
   - Mobile: stacked panels + height expand
   - Expanded panel scrolls vertically only
   - Carousel swipes horizontally only
============================================================ */

/* Safety: prevent any accidental sideways page scroll (rotation/shadows) */
html, body { overflow-x: hidden; }

/* Menu wrapper */
.menu-panels{
  padding: 100px 10%;
  position: relative;
  background: var(--lancaster-cream);
  color: var(--bg-carbon);
  overflow: hidden; /* ✅ stops rotate() from creating sideways scroll */
  height: 100vh;

}

/* Container (tilted gallery) */
.menu-container{
  position: relative;
  width: 100%;
  height: min(680px, 78vh);
  font-size: 0;
  overflow: hidden;
  border-radius: 22px;
  transform: rotate(-6deg);
  transition: transform 1s, height 1s;
  will-change: transform, height;
}

/* Top shade for readability */
.menu-container::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.35);
  pointer-events:none;
  z-index: 1;
}

/* entrance states */
.menu-container.ready .menu-panel{ transform: translate3d(0,0,0); }
.menu-container.phase-2 .panel-word{ opacity: 1; }
.menu-container.phase-2 .menu-panel:hover::after{ background-color: rgba(0,0,0,0.10); }

/* Active container (flat) */
.menu-container.active{ transform: rotate(0deg); }

/* Each panel */
.menu-panel{
  position: relative;
  display: inline-block;
  width: 25%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  transition: transform 1s, width 1s;
  will-change: transform, width;
}

/* slide in */
.menu-panel:nth-child(even){ transform: translate3d(0,100%,0); }
.menu-panel:nth-child(odd){  transform: translate3d(0,-100%,0); }

/* default overlay (readability) */
.menu-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background-color: rgba(0,0,0,0.35);
  transition: background-color .5s;
  will-change: background-color;
  z-index: 3;
}

/* background image */
.panel-bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  opacity: .95;
  z-index: 2;
  transition: opacity .35s ease;
}
.panel-bg.is-fading{ opacity: 0; }

/* center word */
.panel-word{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity .5s;
  z-index: 5;
  white-space: nowrap;
}
.panel-letter{
  display:inline-block;
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-family: var(--font-heading);
  color: var(--soft-ivory);
  letter-spacing: .08em;
  transform: rotate(8deg);
  transition: color .5s, transform .5s;
}
.menu-container.phase-2 .menu-panel:hover .panel-letter{ color: var(--caramel-amber); }

/* close button */
.panel-close{
  position:absolute;
  top:-.5rem;
  right: 1.1rem;
  opacity: 0;
  z-index: -1;
  transform: rotate(45deg);
  transition: opacity .4s, transform .4s, color .4s, z-index .4s;
  color: #fff;
  background: transparent;
  border: 0;
  font-size: 4.5rem;
  line-height: 1;
  cursor: pointer;
}
.panel-close:hover{
  color: #ff4d4d;
  transform: rotate(225deg);
}

/* collapse other panels when active */
.menu-container.active .menu-panel{
  width: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

/* expanded panel */
.menu-container.active .menu-panel.active{
  width: 100% !important;
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: 50;

  /* ✅ Vertical scrolling only (NO horizontal) */
  max-height: 85vh;
  overflow-y: hidden;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* ✅ touch: allow vertical pan */
  touch-action: pan-y;

  /* ✅ contain side-scroll from children */
  overscroll-behavior: contain;
}

/* hide word when expanded */
.menu-container.active .menu-panel.active .panel-word{ opacity: 0; }

/* show close button when expanded */
.menu-container.active .menu-panel.active .panel-close{
  opacity: 1;
  z-index: 120;
}

/* inner content visible when expanded */
.panel-content{
  position: relative;
  z-index: 10;
  min-height: 100%;
  padding: 40px;

  display: flex;
  align-items: center;

  opacity: 0;
  transition: opacity .5s;

  /* ✅ prevent content from creating horizontal scroll */
  max-width: 100%;
}
.menu-container.active .menu-panel.active .panel-content{
  opacity: 1;
  transition-delay: .45s;
}

/* ============================================================
   INNER CAROUSEL (SWIPE ITEMS)
============================================================ */
.panel-carousel{
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* viewport hides overflow */
.panel-viewport{
  width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;

  /* ✅ touch: allow horizontal pan here */
  touch-action: pan-x;

  /* ✅ stop “rubber-band” scrolling sideways on iOS */
  overscroll-behavior-x: contain;
}

/* track */
.panel-track{
  display: flex;
  transition: transform 420ms ease;
  will-change: transform;
}

/* slide */
.panel-slide{
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* menu item layout (slide content) */
.menu-item-row{
  width: 100%;
  max-width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;

  gap: 80px;

  /* ✅ allow wrapping and prevent overflow */
  overflow: hidden;
}

/* left image */
.item-image-box{
  background-color: var(--lancaster-cream);
  aspect-ratio: 1 / 1.1;
  position: relative;

  /* ✅ big shadow without forcing sideways scroll */
  box-shadow: 30px 30px 70px rgba(0,0,0,0.55);

  transition: transform 0.6s ease;
  overflow: hidden;
  border-radius: 16px;

  max-width: 100%;
}
.item-image-box:hover{ transform: translateY(-10px); }

.img-placeholder{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.92;
}

.item-details{
  padding: 20px;
  max-width: 100%;
}

/* divider */
.divider{
  width: 40px;
  height: 1px;
  background: var(--caramel-amber);
  margin-bottom: 25px;
}

/* text */
.item-details h3{
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 20px;
  color: var(--soft-ivory);
}
.item-details p{
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 20px;
  color: var(--soft-ivory);

  /* ✅ prevent long strings from forcing horizontal scroll */
  overflow-wrap: anywhere;
}
.price{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--caramel-amber);
  letter-spacing: 1px;
}

/* arrows */
.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 99;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.carousel-btn:hover{
  background: rgba(0,0,0,0.55);
  transform: translateY(-50%) scale(1.06);
}
.carousel-btn:disabled{
  opacity: .35;
  cursor: default;
}
.carousel-btn.prev{ left: 12px; }
.carousel-btn.next{ right: 12px; }

/* dots */
.carousel-dots{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 99;
}
.carousel-dots button{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.carousel-dots button:hover{ transform: scale(1.15); }
.carousel-dots button.active{ background: rgba(255,255,255,0.9); }

/* Tap target + touch behavior */
.nav-links a,
.social-links a,
.carousel-btn,
.panel-close{
  touch-action: manipulation;
}

/* ============================================================
   RESPONSIVE
============================================================ */

/* Tablet: 2 columns of panels, tighter spacing */
@media (max-width: 900px){
  .menu-panels{ padding: 80px 6%; }
  .menu-container{ height: min(720px, 78vh); transform: rotate(-4deg); }
  .menu-panel{ width: 50%; }

  .panel-content{ padding: 22px; }
  .menu-item-row{
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .item-details p{ margin: 0 auto 22px; }
  .divider{ margin: 0 auto 22px; }
}

/* Mobile: flatter container and smaller controls */
@media (max-width: 600px){
  .menu-container{ height: min(680px, 82vh); transform: rotate(-2deg); border-radius: 18px; }
  .carousel-btn{ width: 46px; height: 46px; font-size: 1.8rem; }
  .carousel-dots{ bottom: 12px; }
}

/* Small mobile: stacked panels + height expand behavior */
@media (max-width: 520px){
  .menu-panels{ padding: 70px 5%; }

  /* Flatten the container for small screens */
  .menu-container{
    height: auto;
    transform: none;
    border-radius: 12px;
    min-height: 380px;
  }
  .menu-container::after{ content: none; }
  .menu-container.active{ transform: none; }

  /* Panels stack vertically */
  .menu-panel{
    display: block;
    width: 100%;
    height: 120px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    transform: none !important;
    transition: height 0.6s ease-in-out;
    will-change: height;
  }

  /* Expansion uses height on small screens */
  .menu-container.active .menu-panel{
    width: 100% !important;
    height: 120px !important;
    pointer-events: none;
  }
  .menu-container.active .menu-panel.active{
    position: relative;
    inset: auto;
    height: min(85vh, 700px) !important;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Word alignment */
  .panel-word{
    top: 50%;
    left: 10%;
    transform: translate(0, -50%);
    width: 80%;
    text-align: left;
  }
  .panel-letter{
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    transform: none;
    letter-spacing: 0.05em;
  }

  /* Content */
  .panel-content{ padding: 26px 18px; }
  .menu-item-row{
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .item-image-box{
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.5);
  }
  .item-image-box:hover{ transform: none; }

  .item-details{ padding: 0; text-align: center; }
  .item-details h3{ font-size: 1.8rem; margin-bottom: 10px; }
  .item-details p{ font-size: 1rem; margin-bottom: 10px; }
  .divider{ margin: 0 auto 14px; }

  /* Carousel controls */
  .carousel-btn{
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    border: 0;
  }
  .carousel-btn:hover{ transform: translateY(-50%) scale(1); }
  .carousel-dots{ bottom: 10px; }
}


/* -----------------------------
   Tap target + touch behavior
------------------------------ */
.nav-links a,
.social-links a,
.carousel-btn,
.panel-close{
  touch-action: manipulation;
}

/* ============================================================
   10) CONTEST
============================================================ */
.contest-section{ padding: 100px 10%; }

.contest-card{
  background: var(--lancaster-cream);
  color: var(--bg-carbon);
  padding: 80px;
  text-align: center;
  border-radius: 16px;
}

.contest-card .section-label{
  color: var(--bg-carbon);
  margin-bottom: 24px;
}

.contest-card h2{
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin: 20px 0;
}
.contest-card h2 i{ font-style: italic; font-weight: 400; }

.contest-card p{
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.85;
}

/* ============================================================
   11) FOOTER
============================================================ */
.footer{
  background: #000;
  color: #fff;
  padding: 30px 10px;
  text-align: center;
  font-size: 14px;
}
.footer p{
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.footer-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.location a{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ddd;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s ease;
}
.location i{
  font-size: 18px;
  color: #cfa25a;
}
.location a:hover{ color: #cfa25a; }

.social-links{
  display: flex;
  gap: 22px;
}
.social-links a{
  color: #fff;
  font-size: 22px;
  transition: 0.3s ease;
}
.social-links a:hover{
  color: #cfa25a;
  transform: scale(1.15);
}

/* Instagram pulse */
.social-links a.instagram{
  position: relative;
}
.social-links a.instagram::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  border: 2px solid transparent;
  transform: scale(0.9);
  opacity: 0;
  transition: .25s ease;
}
.social-links a.instagram:hover::after{
  border-color: var(--accent);
  opacity: .55;
  transform: scale(1);
  animation: igPulse 1.1s infinite;
}
@keyframes igPulse{
  0%   { transform: scale(1); opacity: .55; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ============================================================
   12) REVEAL ANIMATION
============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.active{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   13) PAGE LOAD ENTER
============================================================ */
body.is-loading *{
  transition: none !important;
}
.page-enter{
  opacity: 0;
  /* transform: translateY(14px); */
}
.page-enter.page-enter--ready{
  opacity: 1;
  /* transform: translateY(0); */
  transition: opacity 700ms ease, transform 700ms ease;
}

/* ============================================================
   14) RESPONSIVE (CLEAN + FULL)
   - No duplicate conflicting blocks
============================================================ */

/* Tablet */
@media (max-width: 900px){
  nav{ padding: 1.2rem 6%; }
  .nav-links{ gap: 12px; }

  .menu-panels{ padding: 80px 6%; }
  .menu-container{ height: min(720px, 78vh); transform: rotate(-4deg); }

  /* show 2 columns of panels */
  .menu-panel{ width: 50%; }

  .panel-content{ padding: 22px; }

  .menu-item-row{
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .item-details p{ margin: 0 auto 25px; }
  .divider{ margin: 0 auto 25px; }

  .contest-card{ padding: 50px 22px; }
}

/* Mobile */
@media (max-width: 600px){
  nav{ backdrop-filter: blur(10px); }
  .hero p{ margin-bottom: 28px; }
  .btn{ padding: 14px 28px; letter-spacing: 4px; }

  .menu-container{ height: min(680px, 82vh); transform: rotate(-2deg); border-radius: 18px; }

  .carousel-btn{
    width: 46px;
    height: 46px;
    font-size: 1.8rem;
  }
  .carousel-dots{ bottom: 12px; }
}

/* Small mobile: stack panels */
@media (max-width: 520px){
  .hero h1{ font-size: clamp(2.5rem, 10vw, 4rem); }

  .menu-panels{ padding: 70px 5%; }
  .menu-container{ height: min(640px, 84vh); }

  /* 1 column panels */
  .menu-panel{ width: 100%; }

  .panel-content{ padding: 18px; }
  .menu-item-row{ gap: 20px; }
}
/* ======================================================================
   SM (Mobile) - max-width: 639px
   ====================================================================== */
@media (max-width: 639px) {
    .menu-panels {
        padding: 50px 5%;
    }

    /* Flatten the container and remove visual complexity */
    .menu-container {
        height: auto;
        transform: none;
        border-radius: 12px;
        min-height: 400px;
    }
    .menu-container::after {
        content: none;
    }
    .menu-container.active {
        transform: none;
        min-height: 100vh;
    }

    /* Panels stack vertically, full width */
    .menu-panel {
        display: block;
        width: 100%;
        height: 120px; /* Fixed height for collapsed state */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transform: none !important; /* Remove initial desktop slide-in */
        transition: height 0.6s ease-in-out, transform 0s;
        will-change: height;
    }
    
    /* Ensure background image remains for touch target */
    .menu-panel::after {
        background-color: rgba(0,0,0,0.5); 
    }
    .menu-container.phase-2 .menu-panel:hover::after{
        background-color: rgba(0,0,0,0.55);
    }
    
    /* Panel word positioning and sizing */
    .panel-word {
        top: 50%;
        left: 10%;
        transform: translate(0%, -50%);
        width: 80%;
        text-align: left;
    }
    .panel-letter {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
        transform: none; 
        letter-spacing: 0.05em;
    }
    .menu-container.phase-2 .menu-panel:hover .panel-letter{ color: var(--soft-ivory); } /* Disable hover accent on mobile */
    
    /* Close button visibility and position */
    .panel-close {
        top: 0;
        right: 0.5rem;
        font-size: 3rem;
    }

    /* Mobile Expansion Logic (using height) */
    .menu-container.active .menu-panel {
        width: 100% !important; 
        height: 120px !important; 
        pointer-events: none;
        overflow: hidden;
    }
    .menu-container.active .menu-panel.active {
        height: min(85vh, 700px) !important; /* Expanded height */
        position: relative;
        overflow-y: auto;
    }

    /* Inner Content stacking */
    .panel-content {
        padding: 30px 20px;
    }
    .menu-item-row {
        flex-direction: column;
        gap: 30px;
        display: flex;
        grid-template-columns: none; /* Override desktop grid */
    }

    .item-image-box {
        width: 90%;
        max-width: 300px;
        margin: 0 auto;
        box-shadow: 10px 10px 30px rgba(0,0,0,0.5);
        aspect-ratio: 1 / 1.1;
    }
    .item-image-box:hover{ transform: none; } 

    .item-details { padding: 0; text-align: center; }

    .item-details h3 { font-size: 1.8rem; margin-bottom: 10px; }
    .item-details p { font-size: 1rem; margin-bottom: 10px; }
    .divider { margin: 0 auto 15px auto; }
    
    /* Carousel button adjustments */
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        border: 0;
    }
    .carousel-btn:hover { transform: translateY(-50%) scale(1); }
    .carousel-dots { bottom: 10px; }
}

/* ======================================================================
   MD (Tablet) - min-width: 640px AND max-width: 1023px
   ====================================================================== */
@media (min-width: 640px) and (max-width: 1023px) {
    .menu-panels {
        padding: 80px 5%;
    }

    /* Container: remove tilt, maintain horizontal flow */
    .menu-container {
        height: min(600px, 70vh);
        transform: none; 
        border-radius: 16px;
    }
    .menu-container.active {
        transform: none;
    }

    /* Panels: remove initial desktop slide-in animation */
    .menu-panel {
        transform: none !important;
    }

    /* Panel word sizing */
    .panel-letter {
        font-size: clamp(2rem, 3.5vw, 3.5rem);
    }

    /* Inner Content: Keep 1fr 1fr grid, but tighten spacing */
    .panel-content {
        padding: 30px;
    }
    .menu-item-row {
        gap: 40px; 
    }

    .item-details h3 {
        font-size: 2.2rem;
    }
    .item-details p {
        font-size: 1.1rem;
    }

    /* Close button sizing */
    .panel-close {
        top: 0.5rem;
        right: 1rem;
        font-size: 4rem;
    }
}

/* فلسطين — subtle animated badge + underline */
.pal-badge{
  width: 44px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  
  /* stripes + moving shine */
  background:
    linear-gradient(to bottom,
      #000 0 33.33%,
      #fff 33.33% 66.66%,
      #007A3D 66.66% 100%
    ),
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,0.38) 45%,
      transparent 70%
    );
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, -160% 0;

  /* pause until reveal */
  animation: palShine 3.2s ease-in-out infinite, palWobble 2.6s ease-in-out infinite;
  animation-play-state: paused;
}

.pal-badge::before{
  content:"";
  position:absolute;
  inset: -2px auto -2px -2px;
  width: 55%;
  background: #CE1126; /* red triangle */
  clip-path: polygon(0 0, 0 100%, 72% 50%);
  transform-origin: left center;
  animation: palTri 2.6s ease-in-out infinite;
  animation-play-state: paused;
}

/* start animation only when the section is revealed */
.reveal.active .pal-badge,
.reveal.active .pal-badge::before{
  animation-play-state: running;
}

@keyframes palShine{
  0%, 55% { background-position: 0 0, -160% 0; }
  85%     { background-position: 0 0, 120% 0; }
  100%    { background-position: 0 0, 220% 0; }
}

@keyframes palWobble{
  0%,100% { transform: translateY(-1px) rotate(0deg); }
  50%     { transform: translateY(-1px) rotate(-1.2deg); }
}

@keyframes palTri{
  0%,100% { transform: translateX(0) skewX(0deg); }
  50%     { transform: translateX(1px) skewX(-5deg); }
}

/* Animated underline for the word */
.pal-founded{
  position: relative;
  display: inline-block;
  font-weight: 700;
}

.pal-founded::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -0.12em;
  height: 0.18em;
  width: 100%;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.95;

  background: linear-gradient(90deg, #000, #fff, #007A3D, #CE1126);
  
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}

/* underline draws when revealed */
.reveal.active .pal-founded::after{
  transform: scaleX(1);
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .pal-badge, .pal-badge::before{ animation: none !important; }
  .pal-founded::after{ transition: none !important; transform: scaleX(1); }
}
.img-placeholder,
.panel-bg{
  background-color: rgba(255,255,255,0.04);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.menu-panels{
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}.panel-track{ will-change: transform; }
.menu-panel.active .panel-bg{ will-change: opacity; }


/* ============================================================
   FIX PATCH overriding issues for MENU PANELS
   - fixes for dark & light mode
============================================================ */

/* 1) NAV cleanup via variables (works in dark & light) */
nav{
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.logo{ color: var(--nav-fg); }
.nav-links a:not(.btn){ color: var(--nav-fg); }
.nav-burger{
  border: 1px solid var(--nav-ctrl-border);
  background: var(--nav-ctrl-bg);
}
.nav-burger span{ background: var(--nav-fg); }
.theme-toggle{
  border-color: var(--nav-ctrl-border);
  color: var(--nav-fg);
}

/* 2) Don't hard-lock the section height (prevents clipping) */
.menu-panels{
  height: auto;
  min-height: 100vh;
}

/* 3) Expanded panel must be able to scroll vertically */
.menu-container.active .menu-panel.active{
  overflow-y: hidden;     /* ✅ was hidden */
  overflow-x: hidden;
}

/* 4) IMPORTANT: Tablet 2x2 grid fix (prevents hidden panels) */
@media (max-width: 900px){
  .menu-panel{
    width: 50%;
    height: 50%;        /* ✅ this is the missing piece */
    vertical-align: top;
  }
}

/* 5) Mobile: single clean stacking rule (overrides conflicts) */
@media (max-width: 639px){
  .menu-container{
    height: auto;
    transform: none;
    border-radius: 12px;
    min-height: 400px;
  }
  .menu-container::after{ content: none; }

  .menu-panel{
    display: block;
    width: 100%;
    height: 120px;
    transform: none !important;
  }

  .menu-container.active .menu-panel{
    width: 100% !important;
    height: 120px !important;
    pointer-events: none;
    overflow: hidden;
  }
  .menu-container.active .menu-panel.active{
    height: min(85vh, 700px) !important;
    pointer-events: auto;
    overflow-y: auto;
  }
}

/* 6) Allow vertical scroll even when touching the carousel area */
.panel-viewport{
  touch-action: pan-y; /* ✅ instead of pan-x */
}