/* ============================================================================
   Jerusalem Restaurant Patong — CANONICAL THEME
   مطعم القدس في باتونج
   ----------------------------------------------------------------------------
   This file is the SINGLE SOURCE OF TRUTH for the site's menu-derived visual
   theme (Requirements 3.1–3.6; design "Theme & Visual Design").

   HOW TO USE (no build step — plain static HTML/CSS/JS):
     Every published page — index (English `/`), th (`/th`), ar (`/ar`),
     ar-eg (`/ar-eg`), menu (`/menu`), review (`/review`), and every developer
     variant (`/developer/`, `/developer/th/`, `/developer/ar/`,
     `/developer/ar-eg/`) — MUST use these exact tokens. Either:
       (a) link this file:   <link rel="stylesheet" href="/theme.css">
       (b) or copy the :root token block below into the page's inline <style>.
     Option (a) is preferred so the palette stays consistent everywhere.

   LIGHT, WARM LEVANTINE PALETTE (replaces the old dark bar theme). This theme
   is CREAM-based. The legacy gold/amber `#f59e0b` and the near-black page
   backgrounds (`#0a0a0f` / `#0e0e16`) are intentionally NOT present anywhere
   in this file (Requirement 3.4).

   ----------------------------------------------------------------------------
   GOOGLE FONTS — non-render-blocking load snippet
   ----------------------------------------------------------------------------
   Each page's <head> should include the following (preload + media="print"
   onload swap so fonts never block first paint), covering Cairo, Tajawal,
   Amiri (headings), and Sarabun (Thai):

     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preload" as="style"
       href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;600;700&family=Sarabun:wght@400;600;700&family=Tajawal:wght@400;500;700&display=swap">
     <link
       href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;600;700&family=Sarabun:wght@400;600;700&family=Tajawal:wght@400;500;700&display=swap"
       rel="stylesheet" media="print" onload="this.media='all'">
     <noscript>
       <link
         href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;600;700&family=Sarabun:wght@400;600;700&family=Tajawal:wght@400;500;700&display=swap"
         rel="stylesheet">
     </noscript>

   CONTRAST NOTES (WCAG — Requirement 3.3):
     --charcoal (#241f1a) on --cream    (#f7f1e3)  ≈ 14.5:1  (body text, passes 4.5:1)
     --charcoal (#241f1a) on --surface  (#fffdf7)  ≈ 15.8:1  (cards, passes 4.5:1)
     --muted    (#6b6154) on --cream    (#f7f1e3)  ≈  4.9:1  (secondary text, passes 4.5:1)
     --cream    (#f7f1e3) on --olive    (#4b5320)  ≈  7.6:1  (text on primary, passes)
     --cream    (#f7f1e3) on --terracotta(#a6432c) ≈  6.0:1  (text on secondary, passes)
     --charcoal (#241f1a) on --gold     (#c8912b)  ≈  6.7:1  (text on accent, passes)
   Large text (≥18pt/24px, or ≥14pt bold) only needs 3:1, so all of the above
   also satisfy the large-text threshold.
   ============================================================================ */

/* ---- CANONICAL THEME TOKENS (copy this :root block into any page that inlines styles) ---- */
:root {
  /* Colour roles — sampled/tuned from the Middle-Eastern menu artwork in images/menu/ */
  --olive:      #4b5320;  /* primary   — Palestinian olive green */
  --terracotta: #a6432c;  /* secondary — deep clay red */
  --gold:       #c8912b;  /* accent    — warm gold */
  --cream:      #f7f1e3;  /* background — warm off-white */
  --surface:    #fffdf7;  /* cards / raised surfaces */
  --charcoal:   #241f1a;  /* primary text on light backgrounds */
  --muted:      #6b6154;  /* secondary / supporting text */

  /* Derived tints & helpers (all built from the roles above; no legacy values) */
  --olive-dark:      #3a4019;  /* hover/darker olive */
  --terracotta-dark: #8a3624;  /* hover/darker terracotta */
  --gold-soft:       #e3c98f;  /* soft gold for subtle fills */
  --line:            #e4dcc7;  /* hairline borders on cream */
  --shadow:          0 6px 24px rgba(36, 31, 26, 0.12);
  --radius:          14px;

  /* Font stacks — multi-script coverage (Latin + Arabic + Thai) */
  --font:    'Cairo', 'Tajawal', 'Sarabun', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* body */
  --display: 'Amiri', 'Cairo', Georgia, 'Times New Roman', serif;                                    /* headings */
}

/* ============================================================================
   BASE RESETS & DOCUMENT
   ============================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* The restaurant logo is square (512x512). Declaring the intrinsic aspect
   ratio lets the browser reserve space before the image loads, preventing
   layout shift (CLS) wherever the logo is used. */
.nav-logo img,
.hero-logo,
footer img.logo,
.menu-header__brand img,
.review-header .brand img { aspect-ratio: 1 / 1; }

a { color: var(--terracotta); text-decoration: none; }
a:hover { color: var(--terracotta-dark); text-decoration: underline; }

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  color: var(--olive);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }

p { margin: 0 0 1rem; }

.text-muted { color: var(--muted); }

/* ============================================================================
   REUSABLE UTILITY / BASE COMPONENTS
   ============================================================================ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;              /* touch-friendly */
  padding: 0.7em 1.4em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: var(--olive); color: var(--cream); }
.btn-primary:hover { background: var(--olive-dark); color: var(--cream); }

.btn-secondary { background: var(--terracotta); color: var(--cream); }
.btn-secondary:hover { background: var(--terracotta-dark); color: var(--cream); }

.btn-outline { background: transparent; color: var(--olive); border-color: var(--olive); }
.btn-outline:hover { background: var(--olive); color: var(--cream); }

/* Cards / surfaces */
.card {
  background: var(--surface);
  color: var(--charcoal);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

/* ============================================================================
   GOLD / GRADIENT ACCENT BAR  (replaces the legacy --gold-bar)
   A thin warm accent strip usable under the header or between sections.
   ============================================================================ */
.accent-bar {
  height: 4px;
  width: 100%;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    var(--olive) 0%,
    var(--gold) 50%,
    var(--terracotta) 100%);
}

/* ============================================================================
   MIDDLE-EASTERN DECORATIVE MOTIFS
   Geometric / arabesque dividers and a patterned header accent, for use in the
   site header and section separators on every page (Requirement 3.5).
   ============================================================================ */

/* Section divider: a centred arabesque diamond flanked by gold rules. */
.motif-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2.5rem auto;
  width: min(680px, 90%);
  color: var(--gold);
}
.motif-divider::before,
.motif-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* The central geometric ornament (SVG arabesque diamond, inherits currentColor). */
.motif-divider .motif-ornament {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background-color: currentColor;
  -webkit-mask: var(--motif-arabesque) center / contain no-repeat;
          mask: var(--motif-arabesque) center / contain no-repeat;
}

/* Shared arabesque diamond mask (also usable as a standalone bullet/ornament). */
:root {
  --motif-arabesque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 1l4.5 6.3L28 6l-1.3 7.5L32 16l-5.3 2.5L28 26l-7.5-1.3L16 31l-4.5-6.3L4 26l1.3-7.5L0 16l5.3-2.5L4 6l7.5 1.3z'/%3E%3Ccircle cx='16' cy='16' r='4' fill='black'/%3E%3C/svg%3E");
}

/* Patterned header accent: a subtle repeating geometric band for the header
   (and any banner) built purely from CSS gradients — no image request. */
.motif-header-accent {
  background-color: var(--olive);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(200, 145, 43, 0.18) 0, rgba(200, 145, 43, 0.18) 2px,
      transparent 2px, transparent 12px),
    repeating-linear-gradient(-45deg,
      rgba(200, 145, 43, 0.18) 0, rgba(200, 145, 43, 0.18) 2px,
      transparent 2px, transparent 12px);
  background-size: 24px 24px;
}

/* Lightweight geometric texture usable behind sections (very subtle on cream). */
.motif-pattern-bg {
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(75, 83, 32, 0.05) 0 2px, transparent 3px);
  background-size: 28px 28px;
}

/* ============================================================================
   RTL SUPPORT
   Arabic pages set dir="rtl"; the gradient accent bar mirrors so the warm
   colour flow reads correctly right-to-left.
   ============================================================================ */
[dir="rtl"] .accent-bar {
  background: linear-gradient(270deg,
    var(--olive) 0%,
    var(--gold) 50%,
    var(--terracotta) 100%);
}

/* ============================================================================
   MOTION PREFERENCES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
