/* =====================================================================
   SIMPLY INDIAN — homepage clone
   A near-exact static replica of https://simplyindian.net.au/ homepage.
   Palette : white page · black header/footer · burnt-orange accent
   Fonts   : Samarkan (ornate headings) · system UI sans (body/nav, as on the real site)
   ===================================================================== */

/* ---------- Fonts (all local — fully offline) ---------- */
/* Body copy uses the system UI font (matches the real site exactly);
   only the ornate Samarkan display face needs to be bundled. */

/* Samarkan decorative display font (ornate headings) */
@font-face {
  font-family: "Samarkan";
  src: url("../fonts/samarkan.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --black:      #000000;
  --white:      #ffffff;
  --orange:     #ea580c;   /* Tailwind orange-600, the brand accent */
  --orange-dk:  #c2410c;   /* darker orange for hover */
  --text:       #171717;   /* near-black body text */
  --muted:      #555555;
  --heading-font: "Samarkan", cursive;
  /* Same stack the real site renders with: system UI font (Segoe UI on Windows) */
  --body-font:    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --section-pad:  80px;    /* every section breathes with 80px top/bottom */
  --nav-h:        91px;    /* header height: 75px logo + 8px top/bottom padding */
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body-font);
  color: var(--text);
  /* Cream paper texture across the whole page, exactly like the original */
  background: #f4ecdc url("../images/bg.jpg") repeat;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { font-family: var(--heading-font); font-weight: 700; }

/* ---------- Reusable button ---------- */
.btn {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.btn:hover { background: var(--orange-dk); transform: translateY(-2px); }
.btn--sm { padding: 8px 16px; border-radius: 4px; }

/* Small centered "eyebrow" label above big titles */
.eyebrow {
  font-family: var(--heading-font);
  font-size: 26px;
  color: var(--text);
  letter-spacing: 1px;
}

/* Section wrapper */
.container { width: min(1200px, 92%); margin: 0 auto; }
.section   { padding: var(--section-pad) 0; position: relative; overflow: hidden; }
.section--center { text-align: center; }

/* =====================================================================
   HEADER / NAVBAR  (fixed, black)
   ===================================================================== */
/* Full-bleed black bar — spans edge to edge */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: var(--black);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  z-index: 50;
}
/* Inner row: logo | nav | (cart + hamburger).
   Matches the real site: max-w 1280px, centred, 16px side padding. */
.header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 80rem;        /* 1280px — Tailwind max-w-7xl */
  margin: 0 auto;          /* mx-auto: centres the content, logo hugs the left */
  height: var(--nav-h);    /* fixed height so the drawer always meets the header */
  padding: 0 16px;         /* px-4 */
}
.logo { flex-shrink: 0; }
.logo img { height: 75px; width: auto; }

/* Nav fills the space between logo and the right side.
   margin:0 auto on the links block centres it (like the original's justify-between). */
.nav {
  flex: 1;
  display: flex;
  align-items: center;
}
.nav__links { display: flex; align-items: center; gap: 30px; margin: 0 auto; }
.nav__cta   { display: flex; align-items: center; gap: 12px; }

.nav__links a, .nav__links button {
  color: var(--white);
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .2s ease;
  background: none; border: none; cursor: pointer; padding: 0;
}
.nav__links a:hover, .nav__links button:hover { color: var(--orange); }

/* Outline variant for the Register button */
.btn--outline {
  background: transparent;
  border: 2px solid var(--orange);
  color: var(--white);
  padding: 6px 16px;               /* 2px less to offset the border */
}
.btn--outline:hover { background: var(--orange); color: var(--white); }

/* ---------- Header right side: hamburger (tablet/mobile only) ---------- */
.header__right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }

/* Hamburger — hidden on desktop, shown on tablet/mobile */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 4px;
}
.hamburger span { width: 26px; height: 3px; background: var(--white); border-radius: 2px; transition: .3s; }

/* =====================================================================
   HERO  (horizontal slide carousel, like the original's Swiper)
   ===================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
/* The track holds all slides in a row and slides sideways via translateX.
   Its own width stays 100% (one slide), so translateX(-100%) = one slide. */
.hero__track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.hero__slide {
  position: relative;
  flex: 0 0 100%;          /* each slide = full hero width, never shrinks */
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero__slide img,
.hero__slide video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__slide::before {              /* dark overlay so white text reads */
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1;
}
.hero__caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  padding: 0 40px;         /* px-10, like the original */
}
.hero__caption h1 {
  max-width: 1265px;       /* wide enough that one-line headings don't wrap */
  font-size: 60px;
  line-height: 1.15;
  text-shadow: 0 3px 14px rgba(0,0,0,.5);
}

/* Prev / next arrows */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 52px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
  padding: 6px 14px;
  transition: opacity .2s ease;
  user-select: none;
}
.hero__arrow:hover { opacity: 1; }
.hero__arrow--prev { left: 18px; }
.hero__arrow--next { right: 18px; }

/* Carousel dots */
.hero__dots {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 12px;
  z-index: 3;
}
.hero__dots button {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease;
}
.hero__dots button.is-active { background: var(--white); }

/* =====================================================================
   Spinning mandala decorations
   ===================================================================== */
.mandala {
  position: absolute;
  width: 600px;
  max-width: 60vw;
  opacity: .9;
  pointer-events: none;
  animation: spinner 30s linear infinite;
  z-index: 0;
}
@keyframes spinner { 100% { transform: rotate(1turn); } }
.mandala--tl { top: -200px; left: -200px; }
.mandala--br { bottom: -200px; right: -200px; }
.mandala--bl { bottom: -200px; left: -200px; }

/* =====================================================================
   WELCOME section (two columns: text left, 360 viewer right)
   ===================================================================== */
.welcome .container { position: relative; z-index: 1; }
.welcome__row { display: flex; align-items: center; gap: 20px; }
.welcome__col { width: 50%; padding: 20px; }          /* md:w-1/2 p-5 */
.welcome__text { text-align: center; }                /* text-center, like the original */
.welcome h2.title { font-size: 60px; color: var(--orange); margin: 6px 0 22px; }
.welcome p { color: var(--muted); font-size: 17px; margin-bottom: 28px; }

/* ---- 360° viewer (static image + overlaid feature controls) ---- */
.viewer360 {
  position: relative;
  width: 100%;
  border-radius: 12px;                 /* rounded-lg */
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.viewer360 > img {
  width: 100%;
  height: 500px;                       /* matches the original iframe height */
  object-fit: cover;
  display: block;
}
/* Circular/rounded control buttons, momento360 style */
.viewer360__ctrl {
  position: absolute;
  width: 40px; height: 40px;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.viewer360__ctrl:hover { background: rgba(0,0,0,.7); }
.viewer360__ctrl svg { width: 22px; height: 22px; }
.viewer360__fullscreen { top: 14px;    right: 14px; }
.viewer360__vr         { top: 64px;    right: 14px; }
.viewer360__gyro       { bottom: 14px; right: 14px; }
.viewer360__badge {
  position: absolute;
  bottom: 14px; left: 14px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 6px 11px;
  border-radius: 6px;
}
.viewer360__badge svg { width: 16px; height: 16px; }

/* =====================================================================
   PARALLAX band
   ===================================================================== */
.parallax {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url("../images/parallax-bg.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.parallax::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
}
.parallax__inner { position: relative; z-index: 2; color: var(--white); }
.parallax .eyebrow { color: var(--white); }
.parallax h2 { font-size: 52px; margin-top: 8px; color: var(--white); }

/* =====================================================================
   SERVICES section (white)
   ===================================================================== */
.services .container { position: relative; z-index: 1; }
.services h2.title { font-size: 60px; color: var(--orange); margin-bottom: 16px; }
.services > .container > p.lead {
  max-width: 760px; margin: 0 auto 55px;
  color: var(--muted); font-size: 17px;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.service {
  text-align: center;
  padding-top: 20px;
}
.service img { width: 140px; height: 140px; object-fit: contain; margin: 0 auto 18px; }
.service h3 { font-size: 30px; color: var(--text); margin-bottom: 18px; }

/* =====================================================================
   FOOTER (black gradient over image)
   ===================================================================== */
.footer {
  position: relative;
  padding: var(--section-pad) 0 40px;
  color: var(--white);
  text-align: center;
  background-image:
    linear-gradient(rgba(0,0,0,1) 30%, rgba(0,0,0,.85) 100%),
    url("../images/parallax-bg.jpg");
  background-size: cover;
  background-position: center;
}
.footer__logo { height: 200px; width: auto; margin: 0 auto 30px; }
.footer__branches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
/* Flex column so the map can be pinned to the bottom → all 3 maps align,
   even when one branch's address wraps to an extra line. */
.branch { display: flex; flex-direction: column; }
.branch h3 { font-size: 30px; color: var(--white); margin-bottom: 14px; }
.branch a, .branch p { display: block; color: #ddd; font-size: 15px; margin: 4px 0; }
.branch p { margin-bottom: 20px; }   /* gap before the map (even in the tallest column) */
.branch a:hover { color: var(--orange); }

/* Google Maps embed under each branch */
.branch__map {
  margin-top: auto;                 /* push to the bottom of the column so all 3 align */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.branch__map iframe { display: block; width: 100%; height: 250px; border: 0; }

/* Powered-by / privacy watermark bar */
.footer__powered {
  margin-top: 55px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  color: #9a9a9a;
}
.footer__powered a { color: var(--orange); font-weight: 600; }
.footer__powered a:hover { text-decoration: underline; }
.footer__sep { margin: 0 10px; color: #666; }

/* =====================================================================
   LOCATION MODALS (Order Food / Book a Table)
   ===================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;              /* hidden until .is-open */
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.is-open { display: flex; }
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
}
.modal__panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  width: min(1000px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 42px 40px 48px;
  box-shadow: 0 25px 60px rgba(0,0,0,.45);
  animation: modalPop .25s ease;
}
@keyframes modalPop {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal__close {
  position: absolute;
  top: 14px; right: 20px;
  background: none; border: none;
  font-size: 30px; line-height: 1;
  color: #666; cursor: pointer;
}
.modal__close:hover { color: var(--orange); }
.modal__title {
  font-size: 44px;
  color: var(--orange);
  text-align: center;
  margin-bottom: 34px;
}
.modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.loc-card { text-align: center; }
.loc-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 14px;
}
.loc-card h3 {
  font-size: 26px;
  color: var(--orange);
  margin-bottom: 16px;
}
.loc-card .btn { padding: 10px 24px; }

/* =====================================================================
   INNER PAGES
   ===================================================================== */
.nav__links a.active { color: var(--orange); }

/* Shared orange page banner + breadcrumb */
.page-banner {
  margin-top: var(--nav-h);          /* clear the fixed header */
  height: 200px;
  background: var(--orange);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; padding: 0 16px;
}
.breadcrumb {
  display: flex; gap: 8px; list-style: none;
  color: #fff; font-size: 15px;
  background: transparent; padding: 0; margin: 0; border-radius: 0;   /* reset Bootstrap's .breadcrumb */
}
.breadcrumb a { color: #fff; }
.breadcrumb a:hover { text-decoration: underline; }
.page-banner h1 { color: #fff; font-size: 36px; padding: 10px; }

/* ---- Our Story ---- */
.story { display: flex; align-items: stretch; position: relative; overflow: hidden; }
.story__media { width: 50%; position: relative; z-index: 1; }
.story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story__text { width: 50%; padding: 60px; font-style: italic; position: relative; z-index: 1; }
.story__text p { color: var(--text); font-size: 17px; line-height: 1.75; margin-bottom: 18px; }
.story__lead { font-size: 22px; font-weight: 600; color: var(--orange); font-style: normal; }
/* Signature pushed to the right (ml-auto), like the original */
.story__sig { display: block; width: 200px; max-width: 60%; margin: 8px 0 0 auto; }

/* ---- Our Menu ---- */
/* Full-container width like the original (menu images span ~1265px). */
.menu-page__inner { max-width: 1280px; width: min(1280px, 98%); margin: 0 auto; }
.menu-page__title { font-size: 42px; color: var(--orange); text-align: center; margin-bottom: 26px; }
.menu-page p { color: var(--muted); font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
.menu-page__images { display: flex; flex-direction: column; gap: 24px; margin: 40px 0; }
.menu-page__images img { width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.menu-page__disclaimer { font-size: 14px; color: #888; font-style: italic; }

/* ---- Gallery ---- */
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery__item {
  position: relative; height: 380px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.15);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px;
  color: #fff;
  font-family: var(--heading-font); font-size: 24px; font-weight: 700;
  text-align: center;
  background: var(--orange);        /* solid orange bar, like the original */
}

/* ---- Catering & Events ---- */
.catering__prose { max-width: 1000px; }
.catering__title { font-size: 42px; color: var(--orange); text-align: center; margin-bottom: 24px; }
.catering__prose h3 { font-size: 26px; color: var(--orange); margin: 32px 0 12px; }
.catering__prose p { color: var(--muted); font-size: 17px; line-height: 1.7; margin-bottom: 16px; }
.catering__list { margin: 0 0 18px 22px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.catering__list li { margin-bottom: 8px; }

/* Two-column row: catering content (left) + enquiry form (right), like the original */
.catering__row { display: flex; align-items: flex-start; gap: 24px; margin: 10px auto 44px; }
.catering__col { width: 50%; padding: 20px; }              /* md:w-1/2 p-5 */
.catering__col.catering__prose { max-width: none; }        /* fill the 50% column */

/* Full-container width, images stacked one below another (like the original) */
.catering__wide { max-width: 1280px; width: min(1280px, 98%); margin: 0 auto; }
.catering__gallery {
  display: flex; flex-direction: column; gap: 20px;
  margin: 30px 0 10px;
}
.catering__gallery img {
  width: 100%;
  height: auto;             /* keep each image's natural aspect ratio */
  border-radius: 8px;
  display: block;
}

/* ---- Enquiry form (static, right column) ---- */
.enquiry__heading { font-family: var(--body-font); font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.enquiry__sub { text-align: left; color: var(--muted); margin-bottom: 26px; }
.enquiry__form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; }
.field > label { font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.field > label span { color: var(--orange); }
.field input, .field textarea {
  border: 1px solid #dcd4c2; border-radius: 6px; padding: 12px 14px;
  background: #f3eee2;
  font-family: var(--body-font); font-size: 15px; color: var(--text);
  width: 100%;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: #fff; }
.field__checks { display: flex; flex-direction: column; gap: 10px; }
.check { display: flex; flex-direction: row; align-items: center; gap: 8px;
         font-weight: 500; margin-bottom: 0; }
.check input { width: auto; }
.enquiry__recaptcha { font-size: 12px; color: #999; margin-top: 12px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* ---- Tablet & mobile: collapse nav into a slide-in menu ----
   Cart icon stays on the header (right before the hamburger). */
@media (max-width: 1024px) {
  .hamburger { display: flex; }

  /* Push cart + hamburger to the right (nav is now off-canvas, so nothing
     else stretches to fill the row) */
  .header__right { margin-left: auto; }

  .nav {
    position: fixed;
    top: var(--nav-h); right: 0;
    width: min(330px, 82vw);
    height: calc(100vh - var(--nav-h));
    background: var(--black);
    border-left: 1px solid #1c1c1c;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 24px 28px;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }

  /* Links stack vertically with dividers */
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav__links a,
  .nav__links button {
    padding: 15px 2px;
    font-size: 17px;
    text-align: left;
    border-bottom: 1px solid #1a1a1a;
  }

  /* Login / Register shown as plain nav links (not buttons), like the rest */
  .nav__cta {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0;
  }
  .nav__cta .btn,
  .nav__cta .btn--outline {
    background: none;
    border: none;
    border-bottom: 1px solid #1a1a1a;
    border-radius: 0;
    color: var(--white);
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    padding: 15px 2px;
  }
  .nav__cta .btn:hover { background: none; color: var(--orange); }
}

@media (max-width: 900px) {
  .hero__caption h1 { font-size: 40px; }
  .welcome h2.title, .services h2.title { font-size: 44px; }
  .parallax h2 { font-size: 38px; }
  .services__grid { grid-template-columns: 1fr; gap: 50px; }
  .footer__branches { grid-template-columns: 1fr; gap: 45px; }

  /* Welcome: stack text over the 360 viewer */
  .welcome__row { flex-direction: column; }
  .welcome__col { width: 100%; }
  .viewer360 > img { height: 340px; }

  /* Location modals: stack the 3 branch cards */
  .modal__grid { grid-template-columns: 1fr; gap: 22px; }
  .modal__panel { padding: 36px 22px 40px; }
  .loc-card img { height: 190px; }

  /* Inner pages */
  .page-banner h1 { font-size: 30px; }
  .story { flex-direction: column; }
  .story__media, .story__text { width: 100%; }
  .story__media img { height: 340px; }
  .story__text { padding: 40px 24px; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .catering__title, .menu-page__title { font-size: 34px; }
  /* Catering: stack content over the form */
  .catering__row { flex-direction: column; gap: 0; }
  .catering__col { width: 100%; }
}

@media (max-width: 480px) {
  /* Smaller header on phones — keep --nav-h in step so the drawer still
     lines up flush with the header (no gap). */
  :root { --nav-h: 72px; }
  .hero__caption h1 { font-size: 30px; }
  .mandala { max-width: 80vw; }
  .gallery__grid { grid-template-columns: 1fr; }
  .story__text { padding: 30px 18px; }
  .logo img { height: 48px; }
  .header__inner { gap: 12px; }
  .header__right { gap: 12px; }
}