/* ============================================================================
   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; }
}

/* ============================================================================
   VISUAL FLAIR LAYER  (added — pure CSS, no image requests, no repeated PNGs)
   ----------------------------------------------------------------------------
   Everything below is built from CSS gradients + the existing arabesque mask
   token (--motif-arabesque). It is scoped with high-specificity selectors
   (#hero, section ids, shared classes) so it enhances every page — English,
   Thai, both Arabic variants, menu & review — from this single file, without
   editing any page body or its translated text.
   ============================================================================ */

/* ── Hero restaurant name — warm gold "gilded" flair ──
   #hero specificity (1,1,1) beats each page's inline `h1.display` (0,1,1),
   so the gradient wins everywhere with no per-page edits. */
#hero h1.display {
  background: linear-gradient(135deg,
      #fbe9bd 0%,
      #eec463 34%,
      var(--gold) 55%,
      #f3d489 74%,
      #dca23a 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Extra line-height + bottom padding + visible overflow stop -webkit-background-clip:text
     from cropping the descenders of low-sitting Arabic glyphs (e.g. ج ح ع م). */
  line-height: 1.3;
  padding-bottom: 0.18em;
  overflow: visible;
  /* Dark outline glow keeps the gilded text legible over the food photo. */
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, .55))
    drop-shadow(0 3px 14px rgba(0, 0, 0, .45));
  animation: heroSheen 7s ease-in-out infinite;
}

@keyframes heroSheen {
  0%,
  100% { background-position: 0% center; }
  50%  { background-position: 100% center; }
}

/* Little arabesque flourish sitting between the name and the tagline. */
#hero h1.display + .hero-sub::before {
  content: "";
  display: block;
  width: 58px;
  height: 22px;
  margin: .55rem auto .7rem;
  background-color: var(--gold-soft);
  -webkit-mask: var(--motif-arabesque) center / contain no-repeat;
          mask: var(--motif-arabesque) center / contain no-repeat;
  opacity: .95;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}

/* ── Section accent bars get a centred arabesque "bead" ──
   `position` and the ::before pseudo are not declared in any page's inline
   styles, so these merge in cleanly without overriding existing rules. Gold
   bars only appear on the light cream/surface sections, so the soft ring
   reads correctly on every one of them. */
.gold-bar {
  position: relative;
  overflow: visible;
}
.gold-bar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--gold-soft);
}

/* ── Gold geometric lattice on the olive bands ──
   Echoes the patterned header on the menu page, on the feature strip and the
   Ramadan/Eid note. Purely decorative overlay; content is lifted above it. */
.strip { position: relative; }
.strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(200, 145, 43, .16) 0, rgba(200, 145, 43, .16) 2px,
      transparent 2px, transparent 13px),
    repeating-linear-gradient(-45deg,
      rgba(200, 145, 43, .16) 0, rgba(200, 145, 43, .16) 2px,
      transparent 2px, transparent 13px);
}
.strip-inner { position: relative; z-index: 1; }

#seasonal { position: relative; overflow: hidden; }
#seasonal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(200, 145, 43, .12) 0, rgba(200, 145, 43, .12) 2px,
      transparent 2px, transparent 15px),
    repeating-linear-gradient(-45deg,
      rgba(200, 145, 43, .12) 0, rgba(200, 145, 43, .12) 2px,
      transparent 2px, transparent 15px);
  -webkit-mask: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
          mask: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
}
#seasonal > .container { position: relative; z-index: 1; }

/* ── Whisper-subtle diagonal lattice behind the light content sections ──
   olive at ~3.5% alpha — adds Middle-Eastern texture with zero impact on text
   contrast. Content wrappers are raised above the overlay. */
#vibes,
#cuisine,
#gallery,
#reviews,
#faq { position: relative; }

#vibes::before,
#cuisine::before,
#gallery::before,
#reviews::before,
#faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(75, 83, 32, .038) 0, rgba(75, 83, 32, .038) 1px,
      transparent 1px, transparent 26px),
    repeating-linear-gradient(-45deg,
      rgba(75, 83, 32, .038) 0, rgba(75, 83, 32, .038) 1px,
      transparent 1px, transparent 26px);
}

#vibes > .container,
#cuisine > .container,
#gallery > .container,
#reviews > .container,
#faq > .container { position: relative; z-index: 1; }

/* ── Floating CTA: get out of the way of the footer ──
   animations.js adds `.cta-hidden` while the footer is on screen, so the
   WhatsApp/Call buttons never sit on top of the footer links (e.g. the
   developer credit). They fade back in as soon as you scroll up. */
.float-cta {
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.float-cta.cta-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
}

/* Honour reduced-motion: hold the gilded name still (keeps the gradient). */
@media (prefers-reduced-motion: reduce) {
  #hero h1.display { animation: none; }
}

/* ============================================================================
   MOBILE MENU — Arabic flair (full-screen overlay)
   ----------------------------------------------------------------------------
   Adds a gold geometric lattice, a centred arabesque ornament and animated
   gold underlines on top of the existing olive full-screen sheet. Built from
   pseudo-elements only, so it layers cleanly over each page's inline
   #mobileMenu rules without overriding them. Links/close button are lifted
   above the decorative layer.
   ============================================================================ */
#mobileMenu { overflow: hidden; }

#mobileMenu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(200, 145, 43, .16) 0, rgba(200, 145, 43, .16) 2px,
      transparent 2px, transparent 16px),
    repeating-linear-gradient(-45deg,
      rgba(200, 145, 43, .16) 0, rgba(200, 145, 43, .16) 2px,
      transparent 2px, transparent 16px);
  -webkit-mask: radial-gradient(circle at 50% 42%, #000 28%, transparent 86%);
          mask: radial-gradient(circle at 50% 42%, #000 28%, transparent 86%);
}

/* Gilded arabesque ornament near the top of the sheet. */
#mobileMenu::after {
  content: "";
  position: absolute;
  left: 50%;
  /* Sit below the fixed 64px nav (which stays above the menu) + any notch. */
  top: calc(5.25rem + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  z-index: 0;
  pointer-events: none;
  background-color: var(--gold-soft);
  -webkit-mask: var(--motif-arabesque) center / contain no-repeat;
          mask: var(--motif-arabesque) center / contain no-repeat;
  opacity: .92;
}

#mobileMenu a { position: relative; z-index: 1; }

/* Animated gold underline flourish under each link. */
#mobileMenu a::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  margin: .4rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width .28s ease;
}
#mobileMenu a:hover::after,
#mobileMenu a:focus-visible::after { width: 64%; }

#closeMenu { z-index: 2; }

/* ============================================================================
   HERO SIZING — keep the whole hero within one viewport at every width
   ----------------------------------------------------------------------------
   The hero centres its content in a 100vh box. When the copy grew taller than
   the viewport it overflowed upward (logo tucking under the fixed nav in the
   ~750–1024 band) and downward (buttons + scroll cue pushed off-screen on
   large monitors). These #hero-scoped rules (specificity beats the pages'
   inline .hero-* rules) cap the logo, headline and padding per breakpoint so
   everything fits on screen with the logo clear of the nav.
   ============================================================================ */
#hero .hero-content {
  padding: 1rem 1rem 1.5rem;
  justify-content: center;
}
/* Restaurant name: ONE fluid clamp for the whole width range, so the size
   scales smoothly with the viewport instead of jumping at a breakpoint. Only
   viewport HEIGHT (below) trims it — that keeps width-resizing perfectly
   continuous while still protecting the fold. */
#hero h1.display { font-size: clamp(2.35rem, 7.3vw, 4.9rem); }
#hero .hero-sub  { font-size: clamp(1.15rem, 2.9vw, 1.95rem); margin-bottom: .45rem; }
#hero .hero-tags { margin-bottom: 1rem; line-height: 1.5; }
#hero .hero-halal { margin-bottom: .9rem; }
#hero .hero-logo {
  max-height: 25vh;
  max-width: 76vw;
  margin-bottom: .8rem;
}

@media (min-width: 640px) {
  #hero .hero-content { padding: 1.25rem 1.25rem 1.75rem; }
  #hero .hero-logo { max-height: 30vh; margin-bottom: 1.1rem; }
}

@media (min-width: 768px) {
  #hero .hero-content { padding: 1.5rem 1.25rem 2rem; }
  #hero .hero-logo { max-height: 32vh; max-width: 440px; margin-bottom: 1.2rem; }
}

@media (min-width: 1024px) {
  #hero .hero-content { padding: 2rem 1.25rem 2.25rem; max-width: 900px; }
  #hero .hero-logo { max-height: 37vh; max-width: 430px; margin-bottom: 1.5rem; }
}

/* Height-driven safety (independent of width, so width scrubbing stays smooth):
   trim the name + logo on shorter viewports so everything fits above the fold.
   Placed after the width rules so they win when both match. */
@media (max-height: 800px) {
  #hero h1.display { font-size: clamp(2.3rem, 5.6vw, 3.9rem); }
  #hero .hero-logo { max-height: 30vh; max-width: 360px; }
}
@media (max-height: 620px) {
  #hero h1.display { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
  #hero .hero-logo { max-height: 34vh; max-width: 240px; margin-bottom: .75rem; }
  #hero .hero-content { padding-top: 1.15rem; padding-bottom: 1.15rem; }
}

/* ── LTR name sizing (English + Thai only) ──
   The Arabic name is short and looks perfect at the sizes above. "Jerusalem
   Restaurant Patong" and the Thai name are much longer, so at the same size
   they wrap to two lines and make the hero tall enough to push the logo under
   the nav. Scoping to html[dir="ltr"] (en/th) shrinks just those two so they
   sit on one line at tablet/desktop, without touching the RTL Arabic pages.
   dir-scoped selectors keep their higher specificity inside each height query,
   so the fold-safety reductions still apply on short screens. */
html[dir="ltr"] #hero h1.display { font-size: clamp(2.05rem, 6vw, 3.6rem); }

@media (max-height: 800px) {
  html[dir="ltr"] #hero h1.display { font-size: clamp(2rem, 4.7vw, 3.2rem); }
}
@media (max-height: 620px) {
  html[dir="ltr"] #hero h1.display { font-size: clamp(1.9rem, 3.9vw, 2.9rem); }
}

/* English/Thai on phones: a touch smaller name + logo so the long name stops
   riding up under the nav and there's breathing room at the top. Phone-width
   scoped so tablet/desktop are unaffected; LTR-scoped so Arabic is unchanged.
   Placed last so it wins over the height rules on short phones. */
@media (max-width: 767px) {
  html[dir="ltr"] #hero h1.display { font-size: clamp(1.7rem, 5.2vw, 2.6rem); }
  html[dir="ltr"] #hero .hero-logo { max-height: 25vh; max-width: 68vw; }
}

/* ============================================================================
   CAROUSEL DOTS — sliding window for long galleries
   ----------------------------------------------------------------------------
   With 30+ gallery photos the mobile carousel produced ~16 pages, and that many
   dots wrapped onto several messy lines. animations.js now tags the out-of-range
   dots: `.dot-hidden` collapses them, `.dot-edge` renders a small fading hint
   dot at each end of the visible window. Applies to every page + both carousels.
   ============================================================================ */
.carousel-dot.dot-hidden { display: none; }

.carousel-dot.dot-edge::after {
  transform: scale(.55);
  opacity: .5;
}

/* ============================================================================
   FLOATING CTA — proper icons + on-brand colours
   ----------------------------------------------------------------------------
   The WhatsApp/Call buttons now use real SVG glyphs (not emoji) so it's obvious
   what they do, with white icons on high-contrast brand colours: WhatsApp brand
   green and terracotta for Call. Higher-specificity (body ...) so these win over
   each page's inline .float-cta rules.
   ============================================================================ */
.float-cta a svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}
body .float-cta .wa {
  background: #25d366;
  color: #fff;
}
body .float-cta .call {
  background: var(--terracotta);
  color: #fff;
}
@media (max-width: 380px) {
  .float-cta a svg { width: 22px; height: 22px; }
}

/* ============================================================================
   CAROUSEL ARROWS — perfectly centred SVG chevrons
   ----------------------------------------------------------------------------
   The old ‹ › guillemet glyphs sat off-centre inside the round buttons. SVG
   chevrons centre pixel-perfectly via their viewBox. The markup uses left/right
   chevrons (LTR orientation); on RTL pages we mirror them with scaleX(-1) so
   prev/next keep pointing the correct way (matching the previous auto-mirrored
   guillemet behaviour). A soft shadow makes them read as floating controls over
   the photos.
   ============================================================================ */
.carousel-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.carousel-btn { box-shadow: 0 3px 12px rgba(36, 31, 26, .4); }
[dir="rtl"] .carousel-btn svg { transform: scaleX(-1); }

/* Disabled carousel arrow (first page = prev, last page = next). Faded and
   non-interactive so it's clear there's nowhere further to go. pointer-events
   none also suppresses the hover colour/scale. */
.carousel-btn:disabled {
  opacity: .3;
  box-shadow: none;
  pointer-events: none;
}
