/* ==========================================================================
   Khan Baba Halal Street Food — site styles

   Colours come straight from the Brand Guidelines PDF:
     WHITE  #FFFFFF   CREAM  #F5E5C9   ORANGE #F16B22   BLACK  #000000

   Contrast note: orange on cream measures 2.5:1, which fails accessibility
   at any text size. So on cream backgrounds orange is used as a FILL or a
   RULE, never as text. On black, orange text measures 6.8:1 and is used
   freely. Black on orange is 6.8:1; white on orange would be 3.1:1, so
   buttons use black text.
   ========================================================================== */

:root {
  --white:  #FFFFFF;
  --cream:  #F5E5C9;
  --orange: #F16B22;
  --black:  #000000;

  /* Derived from the four brand colours only — no new hues introduced. */
  --cream-dim:  rgba(245, 229, 201, 0.74);
  --raised:     rgba(245, 229, 201, 0.06);
  --line:       rgba(245, 229, 201, 0.18);
  --black-dim:  rgba(0, 0, 0, 0.72);
  --line-cream: rgba(0, 0, 0, 0.14);
  --focus:      #F16B22;

  /* Type — see README "Fonts". Figtree stands in for Canva Sans, which is
     licensed only inside Canva and cannot be served from a website. */
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 68rem;
  --gutter: 1.25rem;
  --radius: 12px;
  --radius-lg: 20px;
  --bar-h: 4.25rem;
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 8.25rem;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

h1, h2, h3 {
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 8vw, 3.75rem); }
h2 { font-size: clamp(1.7rem, 5.2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 3.4vw, 1.5rem); letter-spacing: -0.01em; }

p { margin: 0 0 1rem; max-width: 62ch; }

a { color: var(--orange); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -10rem;
  z-index: 1000;
  background: var(--cream);
  color: var(--black);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: var(--black); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- layout -- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(3rem, 9vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 6vw, 3.25rem); }

.section--cream { background: var(--cream); color: var(--black); }
.section--cream h2, .section--cream h3 { color: var(--black); }
.section--cream a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.section--cream a:hover { text-decoration-thickness: 2px; }

.lede { font-size: clamp(1.0625rem, 2.4vw, 1.2rem); color: var(--cream-dim); }
.section--cream .lede { color: var(--black-dim); }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary { background: var(--orange); color: var(--black); border-color: var(--orange); }
.btn--primary:hover { background: var(--cream); border-color: var(--cream); color: var(--black); }
.section--cream .btn--primary:hover { background: var(--black); border-color: var(--black); color: var(--cream); }

.btn--ghost { background: transparent; color: var(--cream); border-color: var(--line); }
.btn--ghost:hover { background: var(--raised); color: var(--cream); border-color: var(--cream); }

.section--cream .btn { text-decoration: none; }
.section--cream .btn--ghost { color: var(--black); border-color: var(--line-cream); }
.section--cream .btn--ghost:hover { background: rgba(0,0,0,0.05); color: var(--black); border-color: var(--black); }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.btn-row .btn { flex: 1 1 14rem; }

/* -------------------------------------------------------------- header -- */

.site-header { position: sticky; top: 0; z-index: 60; background: var(--black); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; min-height: 4.25rem; }

.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand img { width: 146px; height: auto; }
@media (min-width: 40em) { .brand img { width: 172px; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.5rem 0.9rem;
  background: transparent; color: var(--cream);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--cream); }

.nav-toggle__bars { display: block; position: relative; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: 0.85rem 0; color: var(--cream);
  font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--orange); }

.header-cta { display: none; }
.header-cta .btn { min-height: 2.85rem; padding: 0.6rem 1.35rem; }

@media (max-width: 47.999em) {
  .site-nav { display: none; flex-basis: 100%; padding-bottom: 1rem; }
  .site-nav.is-open { display: block; }
  .nav-cta { margin-top: 1rem; }
  .nav-cta .btn { width: 100%; }
}

@media (min-width: 48em) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
  .site-nav ul { display: flex; gap: 1.6rem; align-items: center; }
  .site-nav a { padding: 0.35rem 0; border-bottom: 2px solid transparent; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--orange); }
  .nav-cta { display: none; }
  .header-cta { display: inline-flex; align-items: center; margin-left: 1.25rem; }
}

/* ---------------------------------------------------------------- hero -- */

.hero { position: relative; background: var(--black); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.96) 10%, rgba(0,0,0,0.74) 50%, rgba(0,0,0,0.58) 100%);
}

.hero__body { position: relative; padding-block: clamp(2.5rem, 9vw, 5rem) clamp(2.5rem, 8vw, 4.5rem); }
.hero__mark { width: 76px; height: auto; margin-bottom: 1.25rem; }
.hero h1 { max-width: 15ch; }
.hero p { color: var(--cream); max-width: 44ch; font-size: 1.125rem; }

@media (min-width: 48em) {
  .hero__body { min-height: 33rem; display: flex; flex-direction: column; justify-content: center; }
  .hero__mark { width: 92px; }
}

/* --------------------------------------------------------- open status -- */

.status {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.95rem; font-weight: 700; color: var(--cream);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.status__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--cream-dim); flex: none; }
.status[data-state="open"] .status__dot { background: var(--orange); }

.section--cream .status { background: var(--white); border-color: var(--line-cream); color: var(--black); }
.section--cream .status[data-state="closed"] .status__dot { background: var(--black-dim); }

/* ------------------------------------------------------------ features -- */

.feature + .feature { margin-top: clamp(2.5rem, 7vw, 4rem); }
.feature__figure { margin: 0 0 1.5rem; }
.feature__figure img { border-radius: var(--radius-lg); }
.feature__figure figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--cream-dim); }
.section--cream .feature__figure figcaption { color: var(--black-dim); }

.feature__price { display: inline-block; margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 900; }

.tag {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 800; vertical-align: 0.18em; white-space: nowrap;
  background: var(--orange); color: var(--black);
}

@media (min-width: 48em) {
  .feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
  .feature__figure { margin-bottom: 0; }
  .feature--flip .feature__figure { order: 2; }
}

/* --------------------------------------------------------- photo strip -- */

.strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.strip figure { margin: 0; }
.strip img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; }
.strip figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--cream-dim); line-height: 1.35; }
.section--cream .strip figcaption { color: var(--black-dim); }

@media (min-width: 48em) { .strip { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

/* ------------------------------------------------------------- reviews -- */

.quote {
  margin: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--raised);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.quote p { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.75rem; }
.quote footer { font-size: 0.9rem; color: var(--cream-dim); }
.section--cream .quote { background: var(--white); }
.section--cream .quote footer { color: var(--black-dim); }

/* ---------------------------------------------------------------- menu -- */

.menu-jump { position: sticky; top: 4.25rem; z-index: 40; background: var(--black); border-bottom: 1px solid var(--line); padding-block: 0.7rem; }
.menu-jump ul { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0 var(--gutter); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.menu-jump a {
  display: block; white-space: nowrap; padding: 0.45rem 0.95rem;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--cream); font-size: 0.9rem; font-weight: 700; text-decoration: none;
}
.menu-jump a:hover { border-color: var(--orange); color: var(--orange); }

.menu-note { display: block; padding: 0.9rem 1.1rem; background: var(--orange); color: var(--black); border-radius: var(--radius); font-weight: 800; }

.menu-group { padding-block: clamp(2rem, 6vw, 3rem); border-top: 1px solid var(--line); }
.menu-group:first-of-type { border-top: 0; }
.menu-group h2 { margin-bottom: 0.25rem; }
.menu-group__note { color: var(--cream-dim); font-size: 0.95rem; margin-bottom: 1.5rem; }

.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.menu-item:last-child { border-bottom: 0; }
.menu-item__name { font-weight: 800; font-size: 1.0625rem; margin: 0; }
.menu-item__price { grid-column: 2; grid-row: 1; font-weight: 900; color: var(--orange); white-space: nowrap; }
.menu-item__desc { grid-column: 1 / -1; margin: 0; max-width: 56ch; font-size: 0.95rem; color: var(--cream-dim); }

.menu-figure { margin: 1.5rem 0 0; }
.menu-figure img { border-radius: var(--radius); }
.menu-figure figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--cream-dim); }

@media (min-width: 48em) {
  .menu-group { display: grid; grid-template-columns: 1fr 20rem; gap: 2.5rem; align-items: start; }
  .menu-group__head { grid-column: 1 / -1; }
  .menu-figure { margin-top: 0; position: sticky; top: 9.5rem; }
}

/* --------------------------------------------------------------- hours -- */

.hours { width: 100%; border-collapse: collapse; max-width: 30rem; }
.hours th, .hours td { text-align: left; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.hours th { font-weight: 700; }
.hours td { text-align: right; }
.hours tr[data-today="true"] th, .hours tr[data-today="true"] td { color: var(--orange); font-weight: 800; }
.section--cream .hours th, .section--cream .hours td { border-color: var(--line-cream); }
.section--cream .hours tr[data-today="true"] th,
.section--cream .hours tr[data-today="true"] td { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- cards -- */

.panel { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 4vw, 2rem); }
.section--cream .panel { background: var(--white); border-color: var(--line-cream); }
.panel h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.grid-2 { display: grid; gap: 1rem; }
@media (min-width: 48em) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding-block: 0.6rem; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 0; }
.section--cream .contact-list li { border-color: var(--line-cream); }
.contact-list a { font-weight: 700; }

/* ----------------------------------------------------------------- map -- */

.map-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--raised); line-height: 0; }
.map-frame iframe { width: 100%; height: 22rem; border: 0; display: block; }

/* -------------------------------------------------------------- footer -- */

.site-footer { background: var(--black); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 7vw, 3.5rem) 2rem; }
.site-footer h2 { font-size: 1.2rem; }
.site-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; } }

.site-footer__mark { width: 92px; margin-bottom: 1rem; }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding-block: 0.4rem; }
.footer-links a { color: var(--cream); font-weight: 700; text-decoration: none; }
.footer-links a:hover { color: var(--orange); text-decoration: underline; }

.social-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.85rem; padding: 0.5rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--cream); font-weight: 700; font-size: 0.95rem; text-decoration: none;
}
.social-row a:hover { border-color: var(--orange); color: var(--orange); }
.social-row svg { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: none; }

.colophon { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--cream-dim); }
.colophon p { max-width: none; margin-bottom: 0.35rem; }

/* ---------------------------------------------------- sticky order bar -- */

.order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem var(--gutter);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.96);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.order-bar__call {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; flex: none;
  border: 1px solid var(--line); border-radius: 999px; color: var(--cream);
}
.order-bar__call:hover { border-color: var(--cream); color: var(--cream); }
.order-bar__call svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.order-bar .btn { flex: 1; }

body.has-order-bar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 48em) {
  .order-bar { display: none; }
  body.has-order-bar { padding-bottom: 0; }
}

/* ---------------------------------------------------------- order page -- */

.handoff { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 5vw, 2.5rem); }
.handoff .btn--primary { min-height: 3.75rem; font-size: 1.125rem; }

.steps { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1rem 2.5rem; max-width: 58ch; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.1rem;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--orange); color: var(--black);
  font-size: 0.875rem; font-weight: 800;
}

.notice { margin-top: 1.5rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--cream-dim); font-size: 0.95rem; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--cream); }

/* ------------------------------------------------------------ 404 page -- */

.error-page { text-align: center; padding-block: clamp(4rem, 14vw, 8rem); }
.error-page p { margin-inline: auto; }
.error-page .btn-row { justify-content: center; }
.error-page .btn { flex: 0 1 16rem; }

/* -------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: no-preference) {
  .hero__body > * { animation: rise 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) backwards; }
  .hero__body > *:nth-child(2) { animation-delay: 0.06s; }
  .hero__body > *:nth-child(3) { animation-delay: 0.12s; }
  .hero__body > *:nth-child(4) { animation-delay: 0.18s; }
  .hero__body > *:nth-child(5) { animation-delay: 0.24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------- print -- */

@media print {
  .site-header, .order-bar, .menu-jump, .btn, .map-frame { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .section, .section--cream { background: #fff; color: #000; }
}

/* Emoji menu markers (🔥 popular, 🌶️ spicy) — keep them from inheriting
   the heavy weight and tight tracking of the surrounding heading text. */
.icon { font-weight: 400; letter-spacing: 0; font-style: normal; }


/* ==========================================================================
   ONLINE ORDERING STATES

   Controlled entirely by assets/js/ordering.js, which sets
   data-ordering="on" on the <html> element when online ordering is enabled.

   Default (no attribute)  -> "Call to order" buttons are shown.
   data-ordering="on"      -> "Order pickup" buttons are shown instead.

   Both versions are in the HTML, so the correct one is painted immediately
   and nothing flashes on screen. Do not edit these rules to change the
   ordering setting — edit assets/js/ordering.js.
   ========================================================================== */

.btn[data-ordering-state="on"] { display: none; }
html[data-ordering="on"] .btn[data-ordering-state="on"] { display: inline-flex; }
html[data-ordering="on"] .btn[data-ordering-state="off"] { display: none; }

[data-ordering-state="on"]:not(.btn) { display: none; }
html[data-ordering="on"] [data-ordering-state="on"]:not(.btn) { display: block; }
html[data-ordering="on"] [data-ordering-state="off"]:not(.btn) { display: none; }

/* While ordering is off the whole sticky bar is already a call button, so
   the separate phone circle beside it would just be a duplicate. */
html:not([data-ordering="on"]) .order-bar__call { display: none; }