/* =====================================================================
   Arab Digital Nomads، Design Tokens & Base  (v2.2)
   Source of truth: Brand/arab-digital-nomads-design-system.md
   Arabic-first (RTL), bilingual. Drop into the custom theme and enqueue first.
   Guardrails baked in: gold buttons = black text; no letter-spacing on Arabic.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root{
  /* ---- Core brand ---- */
  --color-blue:#004CC7; --color-gold:#EAAE06;
  --color-blue-deep:#003995; --color-sky:#6CA4FF; --color-pale-blue:#B2CFFF;
  --color-navy:#1A455E; --color-cream:#F5F1E1;
  --color-ink:#0B0F1A; --color-white:#FFFFFF;
  /* ---- Earth accents (sparingly) ---- */
  --color-terracotta:#B15F40; --color-camel:#C79550; --color-olive:#74713D;
  /* ---- Neutrals / support ---- */
  --color-line:#E6DFC8; --color-muted:#6B7280; --color-slate:#475569;
  /* ---- Semantic ---- */
  --color-success:#42DD51; --color-danger:#E63946; --color-danger-strong:#C92B38;
  /* ---- Gradients ---- */
  --grad-blue:linear-gradient(135deg,#004CC7,#003995);
  --grad-golden:linear-gradient(135deg,#EAAE06,#B15F40);
  --grad-night:linear-gradient(160deg,#003995,#1A455E);

  /* ---- Semantic aliases (from design handoff) ---- */
  --bg-page:var(--color-cream); --bg-surface:var(--color-white); --bg-dark:var(--color-blue-deep);
  --text-heading:var(--color-ink); --text-body:var(--color-ink); --text-muted:var(--color-muted);
  --text-on-dark:#DCE6FA; --border-default:var(--color-line);
  --accent-primary:var(--color-blue); --accent-cta:var(--color-gold);
  --tracking-overline:0.14em;

  /* ---- Type families ---- */
  --font-display:'Alexandria',system-ui,sans-serif;
  --font-body:'IBM Plex Sans Arabic',system-ui,sans-serif;

  /* ---- Fluid type scale (1.25 ratio) ---- */
  --fs-display:clamp(3.5rem,2.9rem + 2.6vw,4.5rem);   /* 56→72 */
  --fs-h1:clamp(2.5rem,2.15rem + 1.5vw,3rem);          /* 40→48 */
  --fs-h2:clamp(1.875rem,1.68rem + .8vw,2.125rem);     /* 30→34 */
  --fs-h3:clamp(1.375rem,1.31rem + .28vw,1.5rem);      /* 22→24 */
  --fs-body-lg:clamp(1.125rem,1.05rem + .3vw,1.25rem); /* 18→20 */
  --fs-body:1rem;    /* 16 */
  --fs-small:.875rem;/* 14 */
  --fs-overline:.75rem;/* 12 */
  /* Line-heights (Arabic breathes higher) */
  --lh-display:1.1; --lh-h1:1.15; --lh-h2:1.2; --lh-h3:1.3;
  --lh-body:1.75; --lh-body-ar:1.85; --lh-small:1.6;

  /* ---- Spacing (4px base) ---- */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;

  /* ---- Radius ---- */
  --radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-pill:999px;

  /* ---- Elevation (blue-tinted) ---- */
  --shadow-sm:0 1px 2px rgba(11,15,26,.06);
  --shadow-md:0 8px 24px rgba(0,76,199,.10);
  --shadow-lg:0 20px 48px rgba(0,57,149,.18);

  /* ---- Layout ---- */
  --container:1200px; --gutter:24px;
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;
}

/* =====================================================================
   Base، RTL-first, logical properties so one sheet serves AR + EN
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--color-cream); color:var(--color-ink);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body-ar);
  font-weight:400; text-align:start;
}
:lang(en),[dir="ltr"]{line-height:var(--lh-body)}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--color-blue);text-decoration:none}
a:hover{color:var(--color-blue-deep)}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--color-ink);margin:0 0 var(--space-4);font-weight:800}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:700}
p{margin:0 0 var(--space-4)}
/* Arabic must NOT be letter-spaced (breaks joining) */
:lang(ar),[dir="rtl"]{letter-spacing:normal}

.display{font-family:var(--font-display);font-weight:800;font-size:var(--fs-display);line-height:var(--lh-display)}
.body-lg{font-size:var(--fs-body-lg);line-height:var(--lh-body-ar)}
.small{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-muted)}
.overline{font-size:var(--fs-overline);font-weight:600;line-height:1.4;text-transform:uppercase;color:var(--color-blue)}
.overline--gold{color:var(--color-gold)}
[dir="rtl"] .overline{text-transform:none} /* Arabic labels: no uppercase */

/* =====================================================================
   Layout utilities
   ===================================================================== */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(40px,6vw,96px)}
.section--night{background:var(--grad-night);color:var(--color-white)}
.section--night h1,.section--night h2,.section--night h3{color:var(--color-white)}
.section--cream{background:var(--color-cream)}
.stack>*+*{margin-block-start:var(--space-4)}

/* =====================================================================
   Buttons، gold CTA takes BLACK text, always
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:48px;padding:14px 28px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-body);
  border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn .icon{order:2} /* trailing side; flips automatically in RTL via flow */

.btn--cta{background:var(--color-gold);color:var(--color-ink)}      /* signature، one per view */
.btn--cta:hover{background:#d69e05;box-shadow:var(--shadow-md);color:var(--color-ink)}
.btn--primary{background:var(--color-blue);color:var(--color-white)}
.btn--primary:hover{background:var(--color-blue-deep);color:var(--color-white);box-shadow:var(--shadow-md)}
.btn--secondary{background:transparent;color:var(--color-blue);border:1.5px solid var(--color-blue)}
.btn--secondary:hover{background:var(--color-pale-blue);color:var(--color-blue-deep)}
.section--night .btn--outline{background:transparent;color:var(--color-white);border:1.5px solid rgba(255,255,255,.7)}
.section--night .btn--outline:hover{background:rgba(255,255,255,.12)}

/* =====================================================================
   Chips / badges
   ===================================================================== */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);
  padding:6px 12px;font-size:var(--fs-small);font-weight:600;line-height:1}
.chip--feature{background:var(--color-pale-blue);color:var(--color-blue-deep)}
.chip--count{background:var(--color-gold);color:var(--color-ink)}
.chip--date{background:var(--color-cream);color:var(--color-ink);border:1px solid var(--color-camel)}

/* =====================================================================
   Cards
   ===================================================================== */
.card{background:var(--color-white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
.card--lg{border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.card__media{aspect-ratio:16/9;object-fit:cover;width:100%}
.card__body{padding:var(--space-5)}
.card:hover{box-shadow:var(--shadow-lg)}
/* City card price emphasis */
.price{font-weight:700;color:var(--color-blue)}
.price .unit{color:var(--color-muted);font-weight:400;font-size:var(--fs-small)}
/* Testimonial */
.testimonial{border-inline-start:3px solid var(--color-gold);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background:var(--color-white);padding:var(--space-5)}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}

/* =====================================================================
   Navigation base (sticky, cream, gold CTA on trailing edge)
   ===================================================================== */
.nav{position:sticky;top:0;z-index:50;background:var(--color-cream);display:flex;align-items:center;gap:var(--space-6);padding:var(--space-3) var(--gutter)}
.nav.is-stuck{box-shadow:var(--shadow-sm)}
.nav a{color:var(--color-ink);font-weight:500}
.nav .brand{margin-inline-end:auto} /* logo leads; CTA trails */

/* Directional icons mirror in RTL; logos/photos/numerals do NOT */
[dir="rtl"] .icon-chevron,[dir="rtl"] .icon-back,[dir="rtl"] .icon-arrow{transform:scaleX(-1)}