/* =========================================================
   First Street Burgers — shared stylesheet for the long-form
   Arabic guide pages. Same design tokens as index.html so the
   articles feel like part of the site, not a bolted-on blog.
   ========================================================= */

:root{
  --bg:#ffffff;
  --bg-2:#f9f9f9;
  --yellow:#F0D028;
  --yellow-dark:#F0D028;
  --text-main:#1a1a1a;
  --text-muted:#555555;
  --line:rgba(0,0,0,0.08);
  --shadow:0 20px 60px rgba(0,0,0,0.1);
  --surface:#ffffff;
  --nav-bg:rgba(255,255,255,0.9);
  --nav-bg-mobile:rgba(255,255,255,0.98);
  --chip:rgba(0,0,0,0.04);
  --chip-border:rgba(0,0,0,0.06);
  --chip-soft:rgba(0,0,0,0.02);
}

[data-theme="dark"]{
  --bg:#0e0c0b;
  --bg-2:#15110f;
  --text-main:#f5f1ea;
  --text-muted:#b3aaa0;
  --line:rgba(255,255,255,0.1);
  --shadow:0 20px 60px rgba(0,0,0,0.55);
  --surface:#1b1714;
  --nav-bg:rgba(14,12,11,0.85);
  --nav-bg-mobile:rgba(20,17,15,0.98);
  --chip:rgba(255,255,255,0.06);
  --chip-border:rgba(255,255,255,0.1);
  --chip-soft:rgba(255,255,255,0.03);
}

@font-face{
  font-family:'Careem';
  src:url('../fonts/careem-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Careem';
  src:url('../fonts/careem-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  font-family:'Careem','Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text-main);
  line-height:1.95;
  overflow-x:hidden;
  transition:background .35s ease,color .35s ease;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ width:min(1180px,92%); margin:auto; }
.narrow{ width:min(820px,92%); margin:auto; }

/* ---------- navbar ---------- */
.navbar{
  position:fixed; inset:0 0 auto 0; z-index:999;
  background:var(--nav-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
  width:min(1180px,92%); margin:auto;
}
.logo img{ width:78px; height:78px; object-fit:contain; }
.theme-dark-only{ display:none; }
[data-theme="dark"] .theme-light-only{ display:none; }
[data-theme="dark"] .theme-dark-only{ display:block; }

.nav-links{ display:flex; gap:24px; align-items:center; }
.nav-links a{ font-weight:700; font-size:.95rem; transition:color .25s ease; }
.nav-links a:hover{ color:var(--yellow-dark); }

.nav-actions{ display:flex; align-items:center; gap:12px; }
.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  background:var(--chip); border:1px solid var(--chip-border);
  color:var(--text-main); cursor:pointer; font-weight:800; font-size:.85rem;
  transition:.25s ease;
}
.icon-btn:hover{ border-color:rgba(240,208,40,.5); color:var(--yellow-dark); }
.menu-toggle{ display:none; font-size:1.8rem; color:var(--yellow-dark); cursor:pointer; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:999px; font-weight:800;
  border:none; cursor:pointer; transition:.25s ease;
}
.btn-primary{
  background:var(--yellow); color:#111;
  box-shadow:0 12px 30px rgba(240,208,40,.25);
}
.btn-primary:hover{ transform:translateY(-2px) scale(1.02); background:#F4DA4C; }

/* ---------- hero ---------- */
.article-hero{
  padding:150px 0 50px;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.breadcrumb{
  font-size:.85rem; color:var(--text-muted);
  margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap;
}
.breadcrumb a:hover{ color:var(--yellow-dark); }
.breadcrumb span{ opacity:.5; }

.article-hero h1{
  font-size:clamp(1.9rem,4.4vw,3.1rem);
  line-height:1.35;
  font-weight:700;
  margin-bottom:18px;
}
.article-hero .standfirst{
  font-size:1.12rem; color:var(--text-muted);
  max-width:760px;
}
.meta-row{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:24px;
}
.meta-chip{
  background:var(--chip); border:1px solid var(--chip-border);
  border-radius:999px; padding:8px 16px; font-size:.85rem; color:var(--text-muted);
}
.meta-chip b{ color:var(--text-main); }

/* ---------- table of contents ---------- */
.toc{
  background:var(--surface); border:1px solid var(--line);
  border-radius:22px; padding:26px 30px; margin:44px auto 0;
}
.toc h2{ font-size:1.05rem; margin-bottom:14px; }
.toc ol{ padding-inline-start:20px; display:grid; gap:9px; }
.toc a{ color:var(--text-muted); font-size:.97rem; }
.toc a:hover{ color:var(--yellow-dark); text-decoration:underline; }

/* ---------- article body ---------- */
.article-body{ padding:20px 0 80px; }
.article-body h2{
  font-size:clamp(1.45rem,3vw,2rem);
  line-height:1.45; margin:56px 0 18px; font-weight:700;
  scroll-margin-top:100px;
}
.article-body h3{
  font-size:1.18rem; margin:34px 0 12px; font-weight:700;
  color:var(--text-main);
}
.article-body p{ margin-bottom:18px; color:var(--text-muted); }
.article-body strong{ color:var(--text-main); font-weight:700; }
.article-body a{ color:var(--yellow-dark); text-decoration:underline; text-underline-offset:3px; }

.article-body ul,
.article-body ol{ margin:0 0 22px; padding-inline-start:24px; color:var(--text-muted); }
.article-body li{ margin-bottom:11px; }
.article-body li strong{ color:var(--text-main); }

.lede{
  font-size:1.12rem; color:var(--text-main);
  border-inline-start:4px solid var(--yellow);
  padding-inline-start:20px; margin:0 0 30px;
}

.callout{
  background:var(--chip-soft);
  border:1px solid var(--chip-border);
  border-inline-start:4px solid var(--yellow);
  border-radius:16px; padding:22px 26px; margin:30px 0;
}
.callout p:last-child{ margin-bottom:0; }
.callout h3{ margin-top:0; }

figure{ margin:34px 0; }
figure img{ border-radius:22px; border:1px solid var(--line); width:100%; }
figcaption{
  font-size:.87rem; color:var(--text-muted);
  margin-top:10px; text-align:center;
}

.table-wrap{ overflow-x:auto; margin:26px 0; }
table{
  width:100%; border-collapse:collapse; min-width:460px;
  background:var(--surface); border-radius:16px; overflow:hidden;
  border:1px solid var(--line);
}
th,td{ padding:14px 18px; text-align:start; border-bottom:1px solid var(--line); font-size:.96rem; }
th{ background:var(--chip); font-weight:700; color:var(--text-main); }
td{ color:var(--text-muted); }
tr:last-child td{ border-bottom:none; }
td b{ color:var(--text-main); }

/* ---------- FAQ ---------- */
.faq-list{ display:grid; gap:14px; margin-top:24px; }
.faq-item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:20px 24px;
}
.faq-item[open]{ border-color:rgba(240,208,40,.45); }
.faq-item summary{
  font-weight:700; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; color:var(--yellow-dark); font-size:1.5rem; line-height:1; flex:none;
  transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:12px 0 0; color:var(--text-muted); }

/* ---------- closing CTA ---------- */
.cta-band{
  background:var(--bg-2); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:64px 0; margin-top:20px;
}
.cta-band h2{ font-size:clamp(1.5rem,3.2vw,2.2rem); margin-bottom:14px; }
.cta-band p{ color:var(--text-muted); margin-bottom:26px; max-width:620px; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-ghost{
  background:transparent; color:var(--text-main);
  border:1px solid var(--chip-border);
}
.btn-ghost:hover{ border-color:rgba(240,208,40,.6); color:var(--yellow-dark); }

/* ---------- footer ---------- */
footer{ padding:34px 0 50px; background:var(--bg); }
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
}
.socials{ display:flex; gap:12px; flex-wrap:wrap; }
.socials a{
  padding:11px 16px; border-radius:999px;
  background:var(--chip); border:1px solid var(--chip-border);
  font-weight:700; font-size:.92rem; transition:.25s ease;
}
.socials a:hover{ color:var(--yellow-dark); border-color:rgba(240,208,40,.5); }
.footer-note{ color:var(--text-muted); font-size:.88rem; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .nav-links{
    position:absolute; top:78px; inset-inline-start:4%;
    width:250px; background:var(--nav-bg-mobile);
    border:1px solid var(--line); border-radius:20px; padding:20px;
    flex-direction:column; align-items:flex-start;
    display:none; box-shadow:var(--shadow);
  }
  .nav-links.active{ display:flex; }
  .menu-toggle{ display:block; }
  .article-hero{ padding:120px 0 40px; }
  .toc{ padding:22px; }
}