/* ============================================================
   AKSULAR — menu.css  (editorial luxury redesign)
   ============================================================ */

/* ── Reset / base ── */
.menu-page-body {
  background: #0B1628;
  color: #FAF3E0;
  font-family: 'Montserrat', sans-serif;
}

/* ── Logo image ── */
.nav-logo__img  { height: 48px; width: auto; display: block; }
.footer-logo__img { height: 72px; width: auto; display: block; margin-bottom: 0.4rem; }
.menu-footer__est {
  font-size: 0.62rem;
  letter-spacing: 3px;
  color: #8A6E30;
  text-transform: uppercase;
  display: block;
}

/* Extra drop-shadow when scrolled, layered on top of .navbar--solid */
.navbar--scrolled-menu { box-shadow: 0 4px 24px rgba(0,0,0,0.4); }

/* ============================================================
   HERO
   ============================================================ */
.menu-hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 0 8vw;
}

.menu-hero__bg {
  position: absolute;
  inset: -5%;
  background:
    url('https://aksular-restaurant.co.uk/wp-content/uploads/2026/03/AKSULAR-99-scaled.jpg')
    center / cover no-repeat;
  animation: heroZoom 14s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroZoom {
  from { transform: scale(1);    }
  to   { transform: scale(1.06); }
}

.menu-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(11,22,40,0.92) 0%, rgba(11,22,40,0.55) 55%, rgba(11,22,40,0.30) 100%),
    linear-gradient(to top,   rgba(11,22,40,0.7)  0%, transparent 50%);
}

.menu-hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.menu-hero__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #C9A84C;
  margin-bottom: 1.4rem;
  opacity: 0;
  animation: fadeSlideUp 0.9s 0.3s forwards;
}

.menu-hero__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 600;
  color: #E8C96D;
  line-height: 1;
  margin-bottom: 1.4rem;
  overflow: hidden;
  opacity: 0;
  animation: fadeSlideUp 1s 0.5s forwards;
}

.menu-hero__title em {
  font-style: italic;
  color: #C9A84C;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15em;
}

.menu-hero__sub {
  font-size: 0.95rem;
  color: rgba(250,243,224,0.6);
  letter-spacing: 0.03em;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeSlideUp 0.9s 0.7s forwards;
}

.menu-hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.6);
  opacity: 0;
  animation: fadeSlideUp 0.8s 1s forwards;
}

.menu-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, #C9A84C, transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(0.6) translateY(0); }
  50%       { opacity: 1;   transform: scaleY(1)   translateY(4px); }
}

/* Floating category chips */
.menu-hero__chips {
  position: absolute;
  bottom: 3rem;
  right: 5vw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  opacity: 0;
  animation: fadeSlideUp 0.8s 1.1s forwards;
}

.menu-hero__chip {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgba(201,168,76,0.35);
  color: rgba(250,243,224,0.65);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(11,22,40,0.5);
  backdrop-filter: blur(6px);
  transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.3s;
}

.menu-hero__chip:hover {
  border-color: #C9A84C;
  color: #E8C96D;
  background: rgba(201,168,76,0.1);
  transform: translateX(-4px);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.menu-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 3rem 6rem;
  gap: 0;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.menu-sidebar {
  position: sticky;
  top: 90px;
  align-self: start;
  padding: 3.5rem 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.menu-sidebar__track {
  position: absolute;
  left: 0; top: 3.5rem; bottom: 3rem;
  width: 1px;
  background: rgba(201,168,76,0.15);
}

.menu-sidebar__progress {
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 0%;
  background: #C9A84C;
  transition: height 0.5s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 8px rgba(201,168,76,0.6);
}

.menu-cat-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 20px;
}

.menu-cat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 0;
  text-decoration: none;
  transition: transform 0.25s;
}

.menu-cat-link__num {
  font-family: 'Playfair Display', serif;
  font-size: 0.7rem;
  color: rgba(201,168,76,0.4);
  letter-spacing: 0.1em;
  transition: color 0.3s;
  min-width: 22px;
}

.menu-cat-link__label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(250,243,224,0.42);
  text-transform: uppercase;
  transition: color 0.3s;
}

.menu-cat-link:hover { transform: translateX(4px); }

.menu-cat-link:hover .menu-cat-link__num,
.menu-cat-link.active .menu-cat-link__num  { color: #C9A84C; }

.menu-cat-link:hover .menu-cat-link__label,
.menu-cat-link.active .menu-cat-link__label {
  color: #F4E1A8;
}

.menu-sidebar__reserve {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2.5rem;
  margin-left: 20px;
  padding: 10px 14px;
  border: 1px solid rgba(201,168,76,0.3);
  color: rgba(250,243,224,0.55);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.3s;
}

.menu-sidebar__reserve svg { flex-shrink: 0; }

.menu-sidebar__reserve:hover {
  border-color: #C9A84C;
  color: #E8C96D;
  background: rgba(201,168,76,0.07);
  box-shadow: 0 0 14px rgba(201,168,76,0.2);
}

/* ============================================================
   CONTENT
   ============================================================ */
.menu-content {
  padding: 4rem 0 0 4rem;
  border-left: 1px solid rgba(201,168,76,0.1);
}

/* ============================================================
   SECTION
   ============================================================ */
.menu-section {
  --mx: 50%; --my: 50%;
  position: relative;
  padding: 5rem 0 6rem;
  border-bottom: 1px solid rgba(201,168,76,0.08);
  scroll-margin-top: 90px;
  background:
    radial-gradient(circle 700px at var(--mx) var(--my),
      rgba(201,168,76,0.03) 0%, transparent 70%),
    transparent;
  transition: background 0.1s;
}

.menu-section:last-child { border-bottom: none; }

/* ── Section header ── */
.menu-section__header {
  margin-bottom: 3.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 2rem;
}

.menu-section__meta {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.4rem;
}

.menu-section__chapter {
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.5);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 6px;
  opacity: 0;
  transition: opacity 0.6s 0.1s;
}

.menu-section__num {
  font-family: 'Playfair Display', serif;
  font-size: 4.5rem;
  font-weight: 700;
  color: rgba(201,168,76,0.08);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 0.6s;
}

.menu-section__title-wrap {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
}

.menu-section__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 600;
  color: #E8C96D;
  line-height: 1.05;
  margin-bottom: 0.8rem;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1), opacity 0.6s;
}

.menu-section__rule {
  height: 1px;
  width: 0;
  background: linear-gradient(to right, #C9A84C, rgba(201,168,76,0.1));
  margin-bottom: 0;
  transition: width 0.9s 0.3s cubic-bezier(0.22,1,0.36,1);
}

.menu-section__desc {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.88rem;
  color: rgba(250,243,224,0.45);
  line-height: 1.8;
  max-width: 480px;
  margin-top: 1rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s 0.4s, transform 0.7s 0.4s;
}

/* Revealed state */
.js-reveal-header.is-visible .menu-section__chapter { opacity: 1; }
.js-reveal-header.is-visible .menu-section__num     { color: rgba(201,168,76,0.12); }
.js-reveal-header.is-visible .menu-section__title   { transform: translateY(0); opacity: 1; }
.js-reveal-header.is-visible .menu-section__rule    { width: 100%; }
.js-reveal-header.is-visible .menu-section__desc    { opacity: 1; transform: translateY(0); }

/* ============================================================
   MENU LIST
   ============================================================ */
.menu-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(201,168,76,0.07);
}

/* ── Item ── */
.menu-list-item {
  position: relative;
  background: #0B1628;
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.55s calc(var(--i, 0) * 60ms),
    transform 0.55s calc(var(--i, 0) * 60ms) cubic-bezier(0.22,1,0.36,1),
    background 0.3s;
}

.menu-list-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.menu-list-item:hover { background: #0f1f38; }

/* Sliding bottom glow line */
.mli__hover-line {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(to right, #C9A84C, transparent);
  transition: width 0.4s cubic-bezier(0.22,1,0.36,1);
}

.menu-list-item:hover .mli__hover-line { width: 100%; }

/* Left border reveal */
.menu-list-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2px;
  height: 0;
  background: #C9A84C;
  transition: height 0.35s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 8px rgba(201,168,76,0.5);
}

.menu-list-item:hover::before { height: 100%; }

.mli__inner {
  padding: 1.4rem 1.6rem 1.4rem 1.8rem;
}

.mli__top {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.mli__name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #F4E1A8;
  line-height: 1.3;
  flex-shrink: 0;
  transition: color 0.3s;
}

.menu-list-item:hover .mli__name { color: #E8C96D; }

/* Dot leader */
.mli__leader {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(201,168,76,0.25) 0, rgba(201,168,76,0.25) 3px,
    transparent 3px, transparent 8px
  );
  margin: 0 4px;
  min-width: 16px;
  align-self: center;
  transition: background 0.3s;
}

.menu-list-item:hover .mli__leader {
  background: repeating-linear-gradient(
    to right,
    rgba(201,168,76,0.55) 0, rgba(201,168,76,0.55) 3px,
    transparent 3px, transparent 8px
  );
}

.mli__price {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: #C9A84C;
  font-weight: 500;
  flex-shrink: 0;
  transition: color 0.3s, text-shadow 0.3s;
}

.menu-list-item:hover .mli__price {
  color: #E8C96D;
  text-shadow: 0 0 12px rgba(201,168,76,0.5);
}

.mli__desc {
  font-size: 0.78rem;
  color: rgba(250,243,224,0.42);
  line-height: 1.7;
  transition: color 0.3s;
}

.menu-list-item:hover .mli__desc { color: rgba(250,243,224,0.62); }

/* ============================================================
   FOOTER
   ============================================================ */
.menu-footer {
  background: #080f1c;
  border-top: 1px solid rgba(201,168,76,0.15);
  padding: 3.5rem 3rem;
}

.menu-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 2rem;
}

.menu-footer__brand .logo-text {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  letter-spacing: 5px;
  color: #C9A84C;
}

.menu-footer__brand .logo-tagline {
  font-size: 0.62rem;
  letter-spacing: 3px;
  color: #8A6E30;
  text-transform: uppercase;
}

.menu-footer__info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: rgba(250,243,224,0.4);
  text-align: center;
}

.menu-footer__info a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.menu-footer__info a:hover { color: #E8C96D; }

.menu-footer__cta {
  justify-self: end;
  padding: 11px 24px;
  border: 1px solid rgba(201,168,76,0.4);
  color: #F4E1A8;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.menu-footer__cta:hover {
  background: #C9A84C;
  color: #0B1628;
  border-color: #C9A84C;
  box-shadow: 0 0 18px rgba(201,168,76,0.4);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE CATEGORY NAV
   ============================================================ */
.menu-mobile-nav {
  display: none;
  position: sticky;
  top: 60px;
  z-index: 50;
  background: rgba(11,22,40,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201,168,76,0.15);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu-mobile-nav::-webkit-scrollbar { display: none; }

.menu-mobile-nav__inner {
  display: flex;
  padding: 0 0.5rem;
  min-width: min-content;
}

.menu-mobile-nav__link {
  display: block;
  padding: 14px 14px;
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250,243,224,0.42);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s;
  flex-shrink: 0;
}
.menu-mobile-nav__link:hover,
.menu-mobile-nav__link.active {
  color: #E8C96D;
  border-bottom-color: #C9A84C;
}

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

/* ── 1200px ── */
@media (max-width: 1200px) {
  .menu-layout { padding: 0 2.5rem 5rem; }
}

/* ── 1024px (tablet landscape) ── */
@media (max-width: 1024px) {
  .menu-layout {
    grid-template-columns: 180px 1fr;
    padding: 0 2rem 5rem;
  }
  .menu-content { padding-left: 2.5rem; }
  .menu-cat-link__label { font-size: 0.72rem; }
  .menu-section__bg-wrap { width: 38%; }
}

/* ── 860px (tablet portrait / large phone) ── */
@media (max-width: 860px) {
  /* Show mobile nav, hide desktop sidebar */
  .menu-mobile-nav { display: block; }
  .menu-sidebar     { display: none;  }

  .menu-layout {
    grid-template-columns: 1fr;
    padding: 0 1.5rem 4rem;
  }
  .menu-content {
    padding: 2rem 0 0;
    border-left: none;
  }

  /* Items: single column */
  .menu-list { grid-template-columns: 1fr; }

  /* Section header: collapse meta column */
  .menu-section__meta   { display: none; }
  .menu-section__header {
    grid-template-columns: 1fr;
    margin-bottom: 2.5rem;
  }
  .menu-section__title-wrap { grid-column: 1; }
  .menu-section__desc       { grid-column: 1; margin-top: 0.8rem; }
  .menu-section__title      { font-size: clamp(2rem, 6vw, 2.8rem); }
  .menu-section             { padding: 3.5rem 0 4rem; scroll-margin-top: 112px; }

  /* Hero */
  .menu-hero        { min-height: 560px; }
  .menu-hero__title { font-size: clamp(3rem, 10vw, 5rem); }
  .menu-hero__chips { display: none; }

  /* BG image: slightly reduced opacity on tablet */
  .menu-section__header.is-visible ~ .menu-section__bg-wrap { opacity: 0.85; }

  /* Footer */
  .menu-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
  }
  .menu-footer__cta   { justify-self: center; }
  .menu-footer__info  { align-items: center; }
}

/* ── 600px (phone) ── */
@media (max-width: 600px) {
  .menu-hero {
    height: 92svh;
    min-height: 500px;
    padding: 0 6vw;
  }
  .menu-hero__title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .menu-hero__sub   { font-size: 0.85rem; }
  .menu-hero__scroll { display: none; }

  .menu-layout  { padding: 0 1rem 3rem; }
  .menu-section { padding: 2.8rem 0 3.2rem; }
  .menu-section__title { font-size: clamp(1.8rem, 7vw, 2.4rem); }

  /* Wider touch targets */
  .mli__inner { padding: 1.2rem 1rem 1.2rem 1.2rem; }
  .mli__name  { font-size: 0.92rem; }
  .mli__desc  { font-size: 0.74rem; }

  /* Wrap name+price on narrow screens so long names don't overflow */
  .mli__top     { flex-wrap: wrap; gap: 0.2rem 0.4rem; }
  .mli__leader  { display: none; }
  .mli__price   { margin-left: auto; }

  .menu-mobile-nav__link { padding: 14px 11px; }

  .menu-footer { padding: 2.5rem 1.5rem; }

  /* BG image hidden on phones */
  .menu-section__bg-wrap { display: none; }
}

/* ── 400px (very small phone) ── */
@media (max-width: 400px) {
  .menu-hero__title       { font-size: clamp(2.4rem, 14vw, 3rem); }
  .menu-layout            { padding: 0 0.8rem 3rem; }
  .mli__inner             { padding: 1rem 0.8rem 1rem 1rem; }
  .menu-mobile-nav__link  { padding: 13px 9px; font-size: 0.62rem; }
}

/* ── Category background image (slides in from right) ── */
.menu-section__bg-wrap {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%) translateX(80px);
  width: 44%;
  max-width: 500px;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition:
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   1.3s ease 0.15s;
  -webkit-mask-image: radial-gradient(
    ellipse 82% 72% at 58% 50%,
    black 15%, transparent 70%
  );
  mask-image: radial-gradient(
    ellipse 82% 72% at 58% 50%,
    black 15%, transparent 70%
  );
}

/* Trigger when section header reveals */
.menu-section__header.is-visible ~ .menu-section__bg-wrap {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.menu-section__bg-img {
  width: 100%;
  height: auto;
  display: block;
}