/* ============================================================
   Agha KL — premium restaurant site
   Design language: warm cream/black/gold, editorial serif display
   type paired with a clean grotesk body, generous full-bleed
   photography, restrained gold accent lines. Benchmarked against
   high-end restaurant sites (large hero imagery, quiet luxury
   typography, minimal chrome, strong photography-first grids).
   ============================================================ */

:root {
  --cream: #f7f2e9;
  --cream-soft: #efe7d8;
  --black: #171310;
  --charcoal: #262019;
  --gold: #b8863b;
  --gold-light: #d9b978;
  --green: #4b5d3a;
  --white: #ffffff;
  --line: rgba(23, 19, 16, 0.12);

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--black);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5em;
  color: var(--black);
}

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 14px;
  display: inline-block;
}

p { margin: 0 0 1em; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border: 1px solid var(--black);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover { background: var(--black); color: var(--cream); }

.btn-solid {
  background: var(--black);
  color: var(--cream);
}
.btn-solid:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }

.btn-gold {
  border-color: var(--gold);
  color: var(--gold-light);
}
.btn-gold:hover { background: var(--gold); color: var(--black); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  background: linear-gradient(to bottom, rgba(23,19,16,0.55), transparent);
  transition: background 0.3s ease, padding 0.3s ease;
}
.site-header.solid {
  background: var(--cream);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.03em;
  color: var(--white);
}
.site-header.solid .brand { color: var(--black); }
.brand .ar { font-size: 15px; color: var(--gold-light); margin-left: 8px; }

.nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.site-header.solid .nav-links a { color: var(--black); }
.nav-links a:hover, .nav-links a.active { border-color: var(--gold); color: var(--gold); }
/* Reserve link duplicated inside the nav list itself, for the mobile
   hamburger panel only - the desktop .nav-cta button next to it already
   covers wide viewports, so this stays hidden there. */
.nav-cta-mobile { display: none; }

.nav-cta {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--gold-light);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-header.solid .nav-cta { color: var(--black); border-color: var(--gold); }
.nav-cta:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }

.menu-toggle {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 101;
  /* z-index only has an effect on a positioned element - without
     position:relative here it was silently ignored, so this button (meant
     to sit above the mobile nav panel and turn into a close X) painted as
     normal in-flow content instead, underneath the panel's z-index:99
     fixed layer. That's why the close X never appeared once the menu was
     open, even though the .active span rotation styles below were correct
     all along. */
}
.menu-toggle span {
  width: 26px;
  height: 2px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-header.solid .menu-toggle span { background: var(--black); }
.menu-toggle.active span { background: var(--white); }
/* Once the menu is open, the icon always sits on the black mobile panel,
   not the header - so it must stay white even when the header itself has
   picked up .solid (cream) from being scrolled. Same specificity bug
   pattern as everything else on this page: `.site-header.solid
   .menu-toggle span` (0,3,1) otherwise beats the plain `.menu-toggle.active
   span` rule (0,2,1) and the X was painting black-on-black, invisible,
   whenever it was opened after scrolling. */
.site-header.solid .menu-toggle.active span { background: var(--white); }
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-cta { display: none; }
  /* Mobile menu panel. The panel stays `display:flex` at all times and is
     shown/hidden with `transform` + `visibility`, never `display:none <->
     flex`. Toggling display on a `position:fixed` element while the page
     is already scrolled is a known WebKit bug: the panel rendered with its
     active link's border-bottom visible but the link text and the rest of
     the list simply missing, and only once the page had scroll offset,
     which is exactly why it passed every check done from the top of the
     page. The dim-behind backdrop is a real element (see .nav-backdrop
     below), not a box-shadow spread on this transformed panel - that
     combination turned out to have its own rendering glitches. */
  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0;
    width: 78vw;
    max-width: 340px;
    height: 100vh;
    overflow-y: auto;
    background: var(--black);
    padding: 100px 40px 40px;
    gap: 26px;
    z-index: 99;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s linear 0s;
  }
  .nav-links a { color: var(--cream); font-size: 16px; }
  /* The real bug, finally found: .nav-links lives inside .site-header, and
     `.site-header.solid .nav-links a { color: var(--black) }` (further up
     this file, for the desktop light-header state) has higher specificity
     than the plain `.nav-links a` rule above. Once the header picks up
     .solid on scroll, that rule silently wins and paints the mobile panel's
     link text the same black as the panel's own background - invisible
     text, not a paint/compositing bug. Every earlier "WebKit rendering
     glitch" theory in this file was chasing the wrong cause; this is why it
     only ever broke after scrolling. Matching selector + higher position in
     the cascade fixes it for the mobile panel specifically. */
  .site-header.solid .nav-links a { color: var(--cream); }
  .site-header.solid .nav-links a:hover,
  .site-header.solid .nav-links a.active { color: var(--gold); }
  .menu-toggle { display: flex; }

  /* Reserve a Table, shown as a distinct gold button at the bottom of the
     mobile menu panel. Selector specificity here matches the
     .site-header.solid .nav-links a rule above (0,3,1) and comes after it
     in the file, so it always wins regardless of scroll state - same fix
     pattern as the nav-links text-color bug above, applied proactively. */
  .nav-cta-mobile {
    display: block;
    margin-top: 10px;
    padding-top: 26px;
    border-top: 1px solid rgba(247, 242, 233, 0.15);
  }
  .site-header .nav-links .nav-cta-mobile a,
  .site-header.solid .nav-links .nav-cta-mobile a {
    display: inline-block;
    background: var(--gold);
    color: var(--black);
    font-size: 13px;
    font-weight: 600;
    padding: 13px 26px;
    border: 1px solid var(--gold);
    border-radius: 2px;
  }
  .site-header .nav-links .nav-cta-mobile a:hover,
  .site-header.solid .nav-links .nav-cta-mobile a:hover {
    color: var(--black);
    background: var(--gold-light);
  }
}

/* Backdrop element: created once in the DOM at page load (see main.js) and
   left there permanently, only its "visible" class toggles. Never
   created/destroyed per open/close - that churn was a separate source of
   stuck renders on iOS. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 98;
  pointer-events: none;
}
.nav-backdrop.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
  pointer-events: auto;
}
@media (min-width: 901px) {
  .nav-backdrop { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,19,16,0.85) 0%, rgba(23,19,16,0.25) 55%, rgba(23,19,16,0.35) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 90px;
}
.hero h1 {
  font-size: clamp(46px, 7vw, 92px);
  color: var(--white);
  margin-bottom: 20px;
}
.hero .lede {
  max-width: 520px;
  font-size: 18px;
  color: var(--cream-soft);
  margin-bottom: 34px;
}
.hero-ctas { display: flex; gap: 18px; flex-wrap: wrap; }

.page-hero {
  height: 56vh;
  min-height: 380px;
}
.page-hero .hero-inner { padding-bottom: 60px; }
.page-hero h1 { font-size: clamp(38px, 6vw, 64px); }

/* ---------- Glide-in hero (scroll-linked: standing at the door -> walking inside) ---------- */
.hero-glide {
  position: relative;
  height: 220vh;
  min-height: 1100px;
  color: var(--white);
  /* Deliberately NOT overflow:hidden here - that would break the child's
     position:sticky pin (a well-known CSS gotcha: overflow other than
     visible on a sticky element's ancestor can hijack its scroll
     container). .glide-sticky below already clips the image layers, so
     nothing actually needs clipping at this level. */
}
.hero-glide .glide-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
}
.hero-glide .glide-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform, opacity;
}
.hero-glide .glide-layer.layer-far {
  z-index: 1;
  /* This layer is a <video> (the real drone approach clip), not a
     background-image div - size it to fill and crop the same way. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-glide .glide-layer.layer-near { z-index: 2; opacity: 0; }
/* Darkens sharply as the two layers cross-dissolve, selling the sensation of
   passing under the doorway lintel/into shadow before the room opens up. */
.hero-glide .glide-threshold {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #0b0806;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
/* Moved onto .glide-sticky (not .hero-glide) so it stays pinned to the
   visible viewport for the whole scroll, instead of scrolling away with
   the taller outer wrapper. */
.hero-glide .glide-sticky::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 4;
  background: linear-gradient(to top, rgba(23,19,16,0.88) 0%, rgba(23,19,16,0.2) 50%, rgba(23,19,16,0.35) 100%);
  pointer-events: none;
}
.hero-glide .hero-inner {
  position: absolute;
  z-index: 5;
  left: 0; right: 0; bottom: 0;
  padding-bottom: 90px;
}
.hero-glide .glide-hint {
  position: absolute;
  z-index: 5;
  bottom: 26px; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  opacity: 1;
  transition: opacity 0.4s ease;
}
@media (max-width: 700px) {
  .hero-glide { height: 180vh; min-height: 820px; }
  .hero-glide .glide-sticky { min-height: 560px; }
}

/* ---------- Sections ---------- */
section { padding: 110px 0; }
.section-tight { padding: 70px 0; }
.section-cream { background: var(--cream); }
.section-soft { background: var(--cream-soft); }
.section-dark { background: var(--black); color: var(--cream); }
.section-dark h2, .section-dark h3 { color: var(--cream); }
.section-dark .eyebrow { color: var(--gold-light); }

.section-head {
  max-width: 640px;
  margin: 0 auto 60px;
  text-align: center;
}
.section-head h2 { font-size: clamp(32px, 4vw, 48px); }
.section-head p { font-size: 17px; color: #55483a; }
.section-dark .section-head p { color: #c9c0b3; }

/* ---------- Image grids / full bleed ---------- */
.full-bleed-img {
  width: 100%;
  height: 62vh;
  min-height: 420px;
  background-size: cover;
  background-position: center;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split img, .split .imgblock { border-radius: 2px; width: 100%; height: 520px; object-fit: cover; background-size: cover; background-position: center; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split.reverse { direction: ltr; }
  .split img, .split .imgblock { height: 340px; }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gallery-grid .g-item {
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  aspect-ratio: 1/1;
}
.gallery-grid .g-item.tall { grid-row: span 2; aspect-ratio: auto; }
.gallery-grid .g-item.wide { grid-column: span 2; aspect-ratio: 2/1; }
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .g-item.wide { grid-column: span 2; }
  .gallery-grid .g-item.tall { grid-row: span 1; aspect-ratio: 1/1; }
}

/* ---------- Menu cards ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 960px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .menu-grid { grid-template-columns: 1fr; } }

.menu-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.menu-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23,19,16,0.14); }
.menu-card .thumb { height: 230px; background-size: cover; background-position: center; }
.menu-card .body { padding: 24px 26px 28px; }
.menu-card h3 { font-size: 22px; margin-bottom: 6px; }
.menu-card .price { color: var(--gold); font-family: var(--serif); font-size: 19px; font-weight: 600; }
.menu-card .desc { font-size: 14px; color: #665a49; margin: 10px 0 0; }
.badge-soon {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--cream-soft);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 10px;
}

/* ---------- Reviews / quotes ---------- */
.quote-block {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.quote-block .stars { color: var(--gold); font-size: 20px; letter-spacing: 4px; margin-bottom: 22px; }
.quote-block blockquote {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 30px);
  font-style: italic;
  margin: 0 0 20px;
  line-height: 1.4;
}
.quote-block cite { font-style: normal; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 860px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 32px 28px;
  border-radius: 3px;
}
.review-card .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 14px; }
.review-card p { font-size: 15px; color: #4a3f32; }
.review-card cite { font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Stats strip ---------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stats-strip .stat b { display: block; font-family: var(--serif); font-size: 46px; color: var(--gold-light); }
.stats-strip .stat span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #c9c0b3; }
@media (max-width: 700px) { .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 40px; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--black);
  color: var(--cream-soft);
  padding: 80px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { color: var(--white); font-size: 15px; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--sans); margin-bottom: 18px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; font-size: 14px; }
.footer-grid a:hover { color: var(--gold-light); }
.footer-brand { font-family: var(--serif); font-size: 28px; color: var(--white); margin-bottom: 14px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #8a8074;
}

/* ---------- Reservation form ---------- */
.res-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--white);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(23,19,16,0.12);
}
@media (max-width: 900px) { .res-wrap { grid-template-columns: 1fr; } }
.res-photo { background-size: cover; background-position: center; min-height: 420px; }
.res-form { padding: 56px; }
.res-form h2 { font-size: 30px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #665a49;
  margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 15px;
  background: var(--cream);
  color: var(--black);
}
.field textarea { resize: vertical; min-height: 80px; }
.field { margin-bottom: 18px; }
.phone-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.phone-row input#phoneCode { text-align: center; padding-left: 8px; padding-right: 8px; }

/* Calendar / time-slot picker */
.datepicker {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 16px;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dp-head button { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--gold); padding: 4px 10px; }
.dp-head span { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.dp-grid .dow { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #9c8f7c; padding-bottom: 6px; }
.dp-grid button.day {
  aspect-ratio: 1/1;
  border: 1px solid transparent;
  background: var(--white);
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--black);
}
.dp-grid button.day:hover:not(:disabled) { border-color: var(--gold); }
.dp-grid button.day.selected { background: var(--gold); color: var(--white); }
.dp-grid button.day:disabled { color: #cfc6b6; background: transparent; cursor: not-allowed; }
.dp-grid .blank { visibility: hidden; }

.timeslots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
@media (max-width: 520px) { .timeslots { grid-template-columns: repeat(3, 1fr); } }
.timeslots button {
  padding: 10px 6px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 2px;
  cursor: pointer;
  font-size: 13px;
}
.timeslots button:hover:not(:disabled) { border-color: var(--gold); }
.timeslots button.selected { background: var(--black); color: var(--cream); border-color: var(--black); }
.timeslots button:disabled { color: #cfc6b6; cursor: not-allowed; text-decoration: line-through; }
.timeslots button .slot-busy {
  display: block;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 3px;
}
.timeslots button.selected .slot-busy { color: var(--gold-light, var(--gold)); }
.btn.is-disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn.is-disabled:hover,
.btn:disabled:hover {
  background: inherit;
}

.form-error {
  display: none;
  background: #fbeae7;
  border: 1px solid #d98a7a;
  color: #7a2e1c;
  padding: 12px 16px;
  border-radius: 2px;
  font-size: 14px;
  margin-bottom: 18px;
}
.confirm-box {
  display: none;
  text-align: center;
  padding: 20px 0;
}
.confirm-box .ref {
  display: inline-block;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--gold);
  margin: 14px 0;
}

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-40 { margin-top: 40px; }
.tag-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 20px;
  color: #665a49;
}