/* ==========================================================================
   Nasi Lemak Sambal KL — Kubang Kerian, Kota Bharu, Kelantan
   Sistem visual diambil terus daripada logo rasmi perniagaan:
   kuning papan tanda (#FFCB04), merah cincin (#E81217), hitam, kertas putih.
   Fon sistem sahaja — sifar permintaan fon, sifar JavaScript untuk kandungan.
   ========================================================================== */

/* ---------- Token ---------- */
:root {
  --kuning:      #ffcb04;   /* kuning logo — warna tanda tangan */
  --kuning-muda: #fff3cc;
  --kuning-tua:  #d9a800;

  --merah-btg:   #b00f15;   /* merah tindakan; #e81217 logo hanya 4.64:1 dengan putih */
  --merah-gelap: #8e0c11;

  --hitam:       #16110a;
  --kelabu:      #5a5142;   /* teks kedua — 7.68:1 atas kertas */

  --kertas:      #fffdf8;
  --kertas-2:    #f7f1e4;
  --garis:       #e3d9c4;


  --fokus: var(--merah-btg);   /* warna cincin fokus, ditimpa mengikut permukaan */

  --ukur: 68rem;
  --ukur-teks: 36rem;
  --r: 8px;
  --r-lg: 16px;
  --r-bulat: 999px;

  --s1: .375rem; --s2: .75rem; --s3: 1.125rem;
  --s4: 1.75rem; --s5: 2.75rem; --s6: 4rem; --s7: 6rem;

  --fon: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
         "Noto Sans", Arial, sans-serif;

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--fon);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--hitam);
  background: var(--kertas);
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48em) { body { font-size: 1.125rem; } }

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

/* Lalai pelayar mengitalikkan <address>; alamat pos patut tegak. */
address { font-style: normal; }

h1, h2, h3, h4 {
  margin: 0 0 var(--s2);
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 8vw, 3.9rem); letter-spacing: -.035em; line-height: 1.03; }
h2 { font-size: clamp(1.5rem, 4.8vw, 2.25rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.08rem, 3vw, 1.3rem); letter-spacing: -.016em; }

p { margin: 0 0 var(--s3); max-width: var(--ukur-teks); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--s3); padding-left: 1.15rem; max-width: var(--ukur-teks); }
li { margin-bottom: var(--s1); }

a { color: var(--merah-btg); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--merah-gelap); }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 3px; }
.atas-kuning { --fokus: var(--hitam); }
.atas-hitam, .tajuk, .kaki, .bar-mudah { --fokus: var(--kuning); }
/* Pautan langkau diletak mutlak di atas latar kertas, jadi cincin fokusnya (offset 3px,
   dilukis DI LUAR kotak hitam pautan) mesti kontras dengan kertas — bukan dengan hitam.
   Merah lalai memberi 7.06:1 di atas kertas; kuning hanya 1.5:1. */
.lompat:focus-visible { outline-color: var(--merah-btg); }

/* ---------- Susun atur ---------- */
.bekas { width: 100%; max-width: var(--ukur); margin-inline: auto; padding-inline: var(--s3); }
@media (min-width: 48em) { .bekas { padding-inline: var(--s4); } }

.bahagian { padding-block: var(--s6); }
@media (min-width: 48em) { .bahagian { padding-block: var(--s7); } }
.bahagian--rapat { padding-block: var(--s5); }

.atas-kuning { background: var(--kuning); color: var(--hitam); }
.atas-kuning a:not(.btg) { color: var(--hitam); }
.atas-hitam { background: var(--hitam); color: var(--kertas); }
.atas-hitam h1, .atas-hitam h2, .atas-hitam h3 { color: var(--kertas); }
.atas-hitam a:not(.btg) { color: var(--kuning); }
.atas-hitam a:not(.btg):hover { color: #fff; }
.atas-kertas2 { background: var(--kertas-2); }

/* ---------- Lompat ---------- */
.lompat {
  position: absolute; left: var(--s3); top: -100vh; z-index: 200;
  background: var(--hitam); color: var(--kuning);
  padding: .7rem 1.1rem; border-radius: var(--r);
  font-weight: 700; text-decoration: none;
}
.lompat:focus { top: var(--s2); color: var(--kuning); }

/* ---------- Kepala ---------- */
.tajuk { background: var(--hitam); color: var(--kertas); }
.tajuk__atas {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); padding-block: .6rem;
}
.jenama {
  display: flex; align-items: center; gap: .6rem;
  color: var(--kertas); text-decoration: none; min-width: 0;
}
.jenama img { width: 42px; height: 42px; flex: 0 0 auto; }
.jenama__teks { min-width: 0; }
.jenama__nama {
  display: block; font-weight: 800; letter-spacing: -.03em;
  font-size: 1.02rem; line-height: 1.1; color: var(--kertas);
}
.jenama__tempat {
  display: block; font-weight: 600; font-size: .72rem;
  letter-spacing: .02em; color: var(--kuning); line-height: 1.3;
}
@media (min-width: 30em) {
  .jenama img { width: 48px; height: 48px; }
  .jenama__nama { font-size: 1.15rem; }
  .jenama__tempat { font-size: .78rem; }
}

.nav {
  display: flex; gap: var(--s3); flex-wrap: wrap;
  margin: 0; padding: 0 0 .55rem; list-style: none;
  border-top: 1px solid rgba(255,203,4,.22);
  padding-top: .5rem;
}
.nav a {
  color: var(--kertas); text-decoration: none; font-weight: 650;
  font-size: .95rem; padding: .55rem 0; min-height: 44px;
  display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--kuning); color: #fff; }
.nav a[aria-current="page"] { border-bottom-color: var(--kuning); color: var(--kuning); }

/* ---------- Butang ---------- */
.btg {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem; min-height: 48px; padding: .7rem 1.2rem;
  border-radius: var(--r); font: inherit; font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btg--utama { background: var(--merah-btg); color: #fff; }
.btg--utama:hover { background: var(--merah-gelap); color: #fff; }
.btg--hitam { background: var(--hitam); color: var(--kuning); }
.btg--hitam:hover { background: #000; color: var(--kuning); }
.btg--garis { background: transparent; color: var(--hitam); border-color: var(--hitam); }
.btg--garis:hover { background: var(--hitam); color: var(--kuning); }
.atas-hitam .btg--garis { color: var(--kertas); border-color: rgba(255,253,248,.5); }
.atas-hitam .btg--garis:hover { background: var(--kertas); color: var(--hitam); }
.btg--kecil { min-height: 44px; padding: .45rem .9rem; font-size: .92rem; }
.btg-set { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* CTA kepala disembunyikan pada mudah alih: bar tindakan melekat di bawah sudah
   membawa tindakan yang sama, dan menyembunyikannya memberi ruang kepada nama jenama.
   Diisytihar SELEPAS .btg supaya `display` tidak ditimpa oleh susunan kaskad. */
.tajuk__cta { display: none; }
@media (min-width: 48em) { .tajuk__cta { display: inline-flex; } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s5) var(--s6); position: relative; }
@media (min-width: 48em) { .hero { padding-block: var(--s6) var(--s7); } }
.hero__grid { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 52em) { .hero__grid { grid-template-columns: 1.35fr .65fr; gap: var(--s5); } }
.hero__lencana { justify-self: center; max-width: 220px; width: 100%; }
@media (min-width: 52em) { .hero__lencana { justify-self: end; max-width: 260px; } }
.hero__ayat {
  font-size: clamp(1.05rem, 3.2vw, 1.3rem); line-height: 1.5;
  max-width: 34rem; margin-bottom: var(--s4); color: var(--hitam);
}
.hero__sejak {
  display: inline-block; font-weight: 750; font-size: .82rem;
  letter-spacing: .06em; background: var(--hitam); color: var(--kuning);
  padding: .28rem .7rem; border-radius: var(--r-bulat); margin-bottom: var(--s3);
}

/* ---------- Fakta pantas ---------- */
.fakta {
  list-style: none; padding: 0; margin: var(--s5) 0 0; max-width: none;
  display: grid; gap: 2px; background: var(--hitam);
  border: 2px solid var(--hitam); border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 44em) { .fakta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fakta > li { margin: 0; padding: var(--s3); background: var(--kertas); min-width: 0; overflow-wrap: break-word; }
.fakta__label { font-size: .78rem; font-weight: 750; color: var(--kelabu); margin-bottom: .15rem; }
.fakta__nilai { font-size: 1.02rem; font-weight: 750; line-height: 1.35; }
.fakta__nota { font-size: .84rem; color: var(--kelabu); margin-top: .25rem; line-height: 1.45; }
.fakta a { font-weight: 700; }

/* ---------- Panel ---------- */
.panel { background: var(--kertas); border: 2px solid var(--hitam); border-radius: var(--r-lg); padding: var(--s4); }
.panel > :last-child { margin-bottom: 0; }
.panel--tanda { background: var(--kuning-muda); border-color: var(--kuning-tua); }
.panel--tanda > :last-child { margin-bottom: 0; }

/* ---------- Blok soal-jawab (GEO) ----------
   Garis atas pada setiap blok ialah peranti struktur, bukan hiasan: ia menandakan
   sempadan antara soalan yang berdiri sendiri. Dua lajur pada skrin lebar supaya
   jawapan pendek tidak menghasilkan lajur tunggal yang panjang di tepi kiri. */
.qa-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 56em) { .qa-set { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); } }
.qa-set .qa { border-top: 2px solid var(--garis); padding-top: var(--s3); margin: 0; }
.qa > :last-child { margin-bottom: 0; }
.qa__ringkas { font-size: 1.12rem; line-height: 1.55; font-weight: 550; max-width: var(--ukur-teks); }

/* ---------- Menu ---------- */
.hidangan { list-style: none; padding: 0; margin: 0 0 var(--s4); max-width: none; display: grid; gap: 2px;
  background: var(--hitam); border: 2px solid var(--hitam); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 40em) { .hidangan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hidangan > li { margin: 0; padding: var(--s3); background: var(--kertas); min-width: 0; overflow-wrap: break-word; }
.hidangan h3 { margin-bottom: .3rem; }
.hidangan p { margin-bottom: 0; font-size: .96rem; color: var(--kelabu); }

/* ---------- Jadual ---------- */
.jadual-bungkus { overflow-x: auto; margin-bottom: var(--s3); }
.jadual-bungkus:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.jadual { width: 100%; border-collapse: collapse; }
.jadual caption { text-align: left; font-weight: 700; padding-bottom: .5rem; }
.jadual th, .jadual td { text-align: left; padding: .62rem .55rem; border-bottom: 1px solid var(--garis); font-size: 1rem; }
.jadual thead th { border-bottom: 2px solid var(--hitam); font-weight: 750; }
.jadual tbody th { font-weight: 650; width: 6.5rem; }
.jadual td { font-variant-numeric: tabular-nums; }
.jadual tr:last-child th, .jadual tr:last-child td { border-bottom: 0; }
.jadual .tutup { color: var(--kelabu); }

/* ---------- Remah ---------- */
.remah { font-size: .875rem; padding-top: var(--s3); color: var(--kelabu); }
.remah ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; max-width: none; }
.remah li { margin: 0; }
.remah li + li::before { content: "/"; margin-right: .4rem; color: var(--garis); }
.remah a { color: var(--kelabu); }
.remah [aria-current="page"] { color: var(--hitam); font-weight: 650; }

/* ---------- Grid am ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 44em) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56em) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid--tengah { align-items: center; }

/* ---------- Kaki ---------- */
.kaki { padding-block: var(--s5) var(--s4); margin-top: var(--s6); }
.kaki h2 { font-size: 1rem; letter-spacing: -.01em; margin-bottom: var(--s2); color: var(--kuning); }
.kaki ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.kaki li { margin-bottom: .4rem; }
.kaki a:not(.btg) { color: var(--kertas); text-decoration-color: rgba(255,253,248,.4); }
.kaki a:not(.btg):hover { color: var(--kuning); }
.kaki address { line-height: 1.6; }
.kaki__nota { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(255,253,248,.18);
  font-size: .85rem; color: rgba(255,253,248,.78); max-width: 46rem; line-height: 1.55; }
.kaki .kaki__nota a { color: var(--kuning); }

/* ---------- Bar tindakan mudah alih ---------- */
.bar-mudah {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 100;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--hitam); border-top: 2px solid var(--kuning);
  padding-bottom: env(safe-area-inset-bottom);
}
.bar-mudah a {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .5rem .35rem; min-width: 0; color: var(--kertas);
  text-decoration: none; font-weight: 700; font-size: .88rem; text-align: center; line-height: 1.2;
}
.bar-mudah a + a { border-left: 1px solid rgba(255,253,248,.2); }
.bar-mudah .bar-mudah__utama { background: var(--merah-btg); color: #fff; }
.bar-mudah a:hover { background: rgba(255,203,4,.16); }
.bar-mudah .bar-mudah__utama:hover { background: var(--merah-gelap); }
@media (min-width: 48em) { .bar-mudah { display: none; } }
/* mesti sepadan dengan tinggi .bar-mudah (52px pautan + 2px sempadan) + inset peranti */
@media (max-width: 47.99em) { body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); } }

/* ---------- Bantuan ---------- */
.teks-lebar { max-width: var(--ukur-teks); }
.nota { font-size: .875rem; color: var(--kelabu); line-height: 1.55; }
.atas-hitam .nota { color: rgba(255,253,248,.78); }
.tiada-jidar { margin-bottom: 0; }
.senarai-kosong { list-style: none; padding-left: 0; }

/* Dua utiliti kecil yang menggantikan atribut style sebaris. CSP laman ini ialah
   `style-src 'self'` tanpa 'unsafe-inline', jadi style sebaris disekat pelayar. */
.senarai-kosong li + li { margin-top: .75rem; }
.gbr-logo { max-width: 260px; width: 100%; margin-inline: auto; }

/* Mod kontras tinggi menggugurkan latar belakang, jadi pembahagi sel .fakta dan
   .hidangan (yang dibuat daripada jurang latar hitam) hilang sepenuhnya. */
@media (forced-colors: active) {
  .fakta, .hidangan { border-color: CanvasText; }
  .fakta > li, .hidangan > li { border: 1px solid CanvasText; }
  .panel { border-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}