/*
Theme Name: Vani's Kitchen
Theme URI: https://vaniskitchen.co.nz
Author: Vani's Kitchen
Author URI: https://vaniskitchen.co.nz
Description: Custom theme for Vani's Kitchen -- authentic Hyderabadi restaurant, Auckland. All text, images and menu/catering content are editable from the WordPress admin (Pages + Site Settings; ACF plugin required).
Version: 1.0
Requires PHP: 7.4
Text Domain: vaniskitchen
*/

@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,300,500,700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Exact Qitchen color tokens */
  --bg:           #0a0b0a;
  --surface:      #1e1e1e;
  --border:       #333330;
  --border-semi:  rgba(24,24,24,0.5);
  --cream:        #efe7d2;
  --cream-muted:  rgba(245,242,234,0.7);
  --gold:         #cfbe91;
  --off-white:    #f6f6f6;

  /* Typography */
  --font-heading: 'Forum', serif;
  --font-body:    'Satoshi', system-ui, sans-serif;

  /* Layout */
  --page-pad:     16px;
  --tile-gap:     16px;
  --tile-radius:  16px;
  --wrap-radius:  32px;
  --nav-radius:   12px;

  /* Easing */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

img  { display: block; width: 100%; object-fit: cover; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── Page transition ──
   The entrance fade normally gets removed by theme.js on DOMContentLoaded.
   If JS is delayed or blocked (e.g. by an aggressive cache/optimization
   plugin deferring scripts), this overlay must never stay opaque forever --
   it would hide the entire page behind a solid block. The animation below
   is a pure-CSS safety net: it fades the overlay out on its own a fraction
   of a second after paint, so the page is guaranteed to become visible
   even if JS never runs. JS still removes the class immediately when it
   does run, which is faster than waiting for the animation. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
body.page-exit::before { opacity: 1; pointer-events: all; }
body.page-enter::before {
  opacity: 1;
  animation: vk-page-enter-fallback 0.6s ease forwards;
  animation-delay: 0.15s;
}
@keyframes vk-page-enter-fallback {
  to { opacity: 0; }
}

/* ── Shared button ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 100px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
  cursor: pointer;
}
.btn--primary { background: var(--cream); color: var(--bg); }
.btn--primary:hover { background: var(--gold); }
.btn--ghost {
  background: rgba(255,255,255,0.08);
  color: var(--cream);
  border: 1px solid rgba(255,255,255,0.12);
}
.btn--ghost:hover { background: rgba(255,255,255,0.14); }

/* ── Inner page header ── */
.page-header {
  position: relative;
  height: 480px;
  border-radius: var(--tile-radius);
  overflow: hidden;
  margin: var(--page-pad);
}
.page-header__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.45);
}
.page-header__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 56px;
  gap: 12px;
}
.page-header__label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-muted);
}
.page-header__title {
  font-family: var(--font-heading);
  font-size: clamp(60px, 10vw, 120px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
}

/* ── Inner page nav ── */
.inner-nav {
  display: flex;
  align-items: center;
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--nav-radius);
  padding: 8px 8px 8px 16px;
  gap: 12px;
  white-space: nowrap;
}
/* Logo is now managed entirely from wp-admin -> Customize -> Site
   Identity -> Logo (WordPress's own upload + crop UI), not a hardcoded
   file -- this just sizes whatever's uploaded to fit the pill. */
.inner-nav__logo {
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.inner-nav__logo img {
  height: 28px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}
.inner-nav__logo-text {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 500;
}
.inner-nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.inner-nav__links a {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-muted);
  transition: color 0.2s;
}
.inner-nav__links a:hover,
.inner-nav__links a.active { color: var(--cream); }
.inner-nav__item { display: flex; align-items: center; }

/* ── Nav dropdown (Menu -> Food Menu / Drinks Menu) -- shared by both the
   home page's <ul>-based pill-nav and the inner pages' <div>-based
   inner-nav, since both wrap their trigger link + this dropdown in a
   `.has-dropdown` ancestor. */
.has-dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 6px 6px;
  margin: 0;
  min-width: 150px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
  z-index: 250;
}
.dropdown-menu::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 14px;
}
.dropdown-menu::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  z-index: -1;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.dropdown-menu li { list-style: none; }
.dropdown-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-muted);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.dropdown-menu a:hover {
  background: rgba(255,255,255,0.08);
  color: var(--cream);
}
.inner-nav__cta {
  background: var(--cream);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  transition: background 0.2s;
}
.inner-nav__cta:hover { background: var(--gold); }

.inner-nav__order-btn {
  display: block;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}
.inner-nav__order:hover .inner-nav__order-btn { border-color: rgba(255,255,255,0.3); }

/* Burger + slide-out overlay, same treatment as the Home page's pill-nav,
   for the links/CTA to collapse into on narrow screens. Hidden on desktop;
   the 768px query below reveals it and hides the inline links/CTA. */
.inner-nav__burger {
  display: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.inner-nav__burger span {
  display: block;
  width: 12px; height: 1.5px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.inner-nav__burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.inner-nav__burger.open span:nth-child(2) { opacity: 0; }
.inner-nav__burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── Mobile menu overlay (shared by Home's pill-nav and every inner page's
   inner-nav) ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 100px 32px 48px;
  gap: 0;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu__link {
  font-family: var(--font-heading);
  font-size: clamp(20px, 4vw, 30px);
  text-transform: uppercase;
  color: var(--cream);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0.85;
  transition: opacity 0.2s;
}
.mobile-menu__link:hover { opacity: 1; }
.mobile-menu__footer {
  margin-top: auto;
  display: flex;
  gap: 12px;
}
.mobile-menu__social {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-muted);
  font-size: 15px;
  transition: color 0.2s, border-color 0.2s;
}
.mobile-menu__social:hover { color: var(--cream); border-color: var(--cream); }

/* ── Footer ── */
.site-footer {
  margin: var(--page-pad);
  margin-top: 0;
  padding: 48px 40px 32px;
  background: var(--surface);
  border-radius: var(--wrap-radius);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand {
  font-family: var(--font-heading);
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--cream);
  margin-bottom: 12px;
}
.footer-tagline {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--cream-muted);
  transition: border-color 0.2s, color 0.2s;
}
.footer-social a:hover { border-color: var(--cream); color: var(--cream); }
.footer-col-title {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-bottom: 16px;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream-muted);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--cream); }
.footer-bottom {
  margin: 0 var(--page-pad) var(--page-pad);
  padding: 16px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-copy {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--cream-muted);
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .inner-nav { padding: 6px 6px 6px 12px; gap: 8px; }
  .inner-nav__links { display: none; }
  .inner-nav__burger { display: flex; }
  /* Order Online and Reserve Table can't both fit as full-text pills
     alongside the logo and burger on a phone screen. Order Online is the
     primary conversion action, so it stays as the one visible pill;
     Reserve Table moves into the burger's slide-out menu instead (it's
     already listed there). */
  .inner-nav__cta { display: none; }
}

@media (max-width: 768px) {
  .site-footer { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

.dropdown-menu__pending {
  display: block;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream-muted);
  opacity: 0.6;
  cursor: default;
}