/* ============================================================
   VENTURA — Brand Foundation Layer
   ادخل عالم التجربة | Enter the Experience
   Design tokens, typography, reset, RTL/LTR bidirectional base
   ============================================================ */

/* ---------- 1. FONTS -------------------------------------- */
/* Licensed brand fonts load first; if the client has not yet
   installed Gotham / DIN Next Arabic webfonts, the stack falls
   through to the closest-matching open substitutes.
   To activate the licensed fonts, drop the .woff2 files into
   /assets/fonts/ and the @font-face rules below take over.      */

@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/Gotham-Book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/Gotham-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/Gotham-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Next Arabic";
  src: url("../assets/fonts/DINNextLTArabic-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Next Arabic";
  src: url("../assets/fonts/DINNextLTArabic-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 2. DESIGN TOKENS ------------------------------ */
:root {
  /* Brand palette — locked to the VENTURA identity guide */
  --charcoal:      #1C1F21;   /* Expedition Charcoal */
  --sand:          #DBC6A1;   /* Desert Sand         */
  --terracotta:    #C05A2B;   /* Terracotta          */
  --olive:         #556247;   /* Wild Olive          */
  --stone:         #B8B2A6;   /* Stone               */
  --white-sahara:  #F6F3EE;   /* Sahara White        */

  /* Derived tints — never invent new hues, only alpha/mix */
  --charcoal-900:  #101213;
  --charcoal-800:  #16191A;
  --charcoal-700:  #24282A;
  --charcoal-600:  #343A3D;
  --terracotta-dk: #A44921;
  --terracotta-lt: #E08A5E;
  --olive-lt:      #6D7B5C;

  /* ---- سمة داكنة في كل الصفحات -----------------------------
     لوحات الهوية كلها داكنة: البوابة الحجرية، وأعلام الريشة، وكسوة
     المركبة، ولافتة الميدان. فالموقع يكملها ولا يخالفها، ولا يتناوب
     بين فاتح وداكن كما كان.

     والتحويل كلّه في هذه الأدوار الدلالية لا في المكوّنات: كل ملف CSS
     هنا يقرأ --bg و--ink ولا يكتب لوناً بيده، فتغيير سبعة أسطر يقلب
     الموقع. وهذا هو الربح من نظام الرموز.

     و--ink-inverse يبقى فاتحاً كما كان: معناه «نصّ على سطح داكن»،
     وتذكرة الحجز والتذييل والبانر تقرؤه. ولو قُلب لصار النصّ داكناً
     على داكن — نصٌّ يختفي.                                          */
  --sand-soft:     #1C1F21;   /* سطح البطاقة والرقعة · كان رملياً فاتحاً */
  --line:          rgba(219, 198, 161, .14);
  --line-dark:     rgba(219, 198, 161, .16);

  /* Semantic surface roles */
  --bg:            #0E1011;   /* فحمي أعمق من الهوية بدرجة، للعمق */
  --bg-raised:     #16191A;
  --bg-card:       #1C1F21;
  --bg-inverse:    #16191A;
  --ink:           var(--white-sahara);
  --ink-muted:     rgba(246, 243, 238, .66);
  --ink-inverse:   var(--white-sahara);
  --ink-inverse-muted: rgba(246, 243, 238, .68);
  --accent:        var(--terracotta);

  /* Typography */
  --font-latin:  "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "DIN Next Arabic", "Tajawal", "IBM Plex Sans Arabic",
                 "Segoe UI", Tahoma, sans-serif;
  --font-ui: var(--font-latin);

  /* Fluid type scale — 320px → 1440px */
  --fs-eyebrow: clamp(.68rem, .62rem + .28vw, .8rem);
  --fs-body-sm: clamp(.82rem, .78rem + .2vw, .9rem);
  --fs-body:    clamp(.95rem, .9rem + .25vw, 1.05rem);
  --fs-lead:    clamp(1.05rem, .98rem + .4vw, 1.25rem);
  --fs-h4:      clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --fs-h3:      clamp(1.35rem, 1.15rem + .9vw, 1.9rem);
  --fs-h2:      clamp(1.8rem, 1.4rem + 1.9vw, 3.1rem);
  --fs-h1:      clamp(2.5rem, 1.7rem + 3.9vw, 5.2rem);

  --lh-tight: 1.06;
  --lh-head:  1.16;
  --lh-body:  1.72;

  /* Spacing scale (8pt) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 88px;  --s-10: 120px;

  --section-y: clamp(56px, 7vw, 116px);
  --gutter:    clamp(20px, 4vw, 48px);
  --maxw:      1280px;
  --maxw-text: 62ch;

  /* Radii — the brand uses calm, generous corners */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* Elevation — على سطح داكن الظلّ لا يُرى، فالعمق يأتي من الحدّ الرملي
     ومن تدرّج السطح. ويبقى ظلٌّ أسود خفيف تحت البطاقة لتنفصل عن الخلفية. */
  --sh-1: 0 1px 2px rgba(0,0,0,.32);
  --sh-2: 0 2px 8px rgba(0,0,0,.38), 0 12px 28px rgba(0,0,0,.28);
  --sh-3: 0 4px 14px rgba(0,0,0,.44), 0 28px 64px rgba(0,0,0,.36);
  --sh-accent: 0 8px 26px rgba(192, 90, 43, .34);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;  --t: .32s;  --t-slow: .6s;
  /* منحنى الدخول من وثيقة التصميم. حركة واحدة تُبنى عليها كل الحركات،
     فلا يبدو القسم داخلاً بإيقاع والقسم الذي يليه بإيقاع آخر. */
  --ease-enter: cubic-bezier(.16, 1, .3, 1);

  /* ارتفاع الترويسة لا رقمٌ مزاجي: القائمة على الهاتف تبدأ من تحته بـ
     inset-block-start، فإن كان أصغر من الترويسة الفعلية غطّت الترويسةُ أوّل
     عناصر القائمة — وهو ما حدث حين صار الشعار ٤٥ بكسلاً وبقي الرقم ٧٦.
     فالقيمة الآن = الشعار (45) + حشو أعلى وأسفل (2×20) + حدّ. */
  --header-h: 88px;
}

/* Arabic runtime swaps the UI font — everything else is shared */
html[lang="ar"] { --font-ui: var(--font-arabic); }

/* ---------- 3. RESET -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Root direction is driven by the <html dir> attribute set in
   markup and toggled by js/i18n.js. Every layout rule below uses
   CSS *logical* properties so one stylesheet serves both
   directions without mirrored overrides. */
html[dir="rtl"] body { text-align: start; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--terracotta); color: var(--white-sahara); }

/* ---------- 4. TYPOGRAPHY --------------------------------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
html[lang="ar"] h1, html[lang="ar"] h2,
html[lang="ar"] h3, html[lang="ar"] h4 { letter-spacing: 0; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
/* تباعد الحروف يفكّ الكلمة العربية لأن حروفها متصلة، و.06em كان يفكّها
   قليلاً — وقليلٌ في الوصل كثير. والعربية لا كبيرة ولا صغيرة، فـ uppercase
   لا معنى له فيها. */
html[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; }
.eyebrow::before {
  content: "";
  inline-size: 26px;
  block-size: 1px;
  background: currentColor;
  flex: none;
  opacity: .7;
}

.lead { font-size: var(--fs-lead); color: var(--ink-muted); max-inline-size: var(--maxw-text); }
.muted { color: var(--ink-muted); }
.on-dark .lead, .on-dark .muted { color: var(--ink-inverse-muted); }

/* Numerals stay Western and LTR-isolated even inside Arabic
   copy, so ranges like 09:00 – 16:30 never visually reverse. */
.num, time, .price, .qty {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-latin);
}

/* ---------- 5. LAYOUT PRIMITIVES -------------------------- */
.wrap {
  inline-size: 100%;
  max-inline-size: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section--dark {
  background: var(--charcoal);
  color: var(--ink-inverse);
}
.section--sand { background: var(--sand-soft); }

.stack > * + * { margin-block-start: var(--s-4); }
.stack-lg > * + * { margin-block-start: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-block-end: var(--s-7);
  max-inline-size: 66ch;
}
.section-head--center { margin-inline: auto; align-items: center; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ---------- 6. BRAND MOTIFS ------------------------------- */

/* 6a. Topographic contour texture — the signature VENTURA
   background. Applied as a masked overlay so it inherits the
   surface colour rather than fighting it. */
.topo {
  position: relative;
  isolation: isolate;
}
.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../assets/topo-pattern.svg");
  background-size: 620px;
  background-position: center;
  opacity: .05;
  pointer-events: none;
}
.topo--dark::before { opacity: .085; filter: invert(1) sepia(1) saturate(1.4) hue-rotate(5deg); }
.topo--corner::before {
  background-position: 120% -30%;
  background-repeat: no-repeat;
  background-size: 560px;
}
html[dir="rtl"] .topo--corner::before { background-position: -20% -30%; }

/* 6b. Horizon Star — four/eight-point brand mark used as a
   decorative pin, list bullet and button flourish. */
.star {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  color: var(--terracotta);
}

/* 6c. Gateway arch — the silhouette borrowed from the logo,
   used to frame imagery and feature cards. */
.gateway {
  border-start-start-radius: 999px 340px;
  border-start-end-radius: 999px 340px;
  border-end-start-radius: var(--r-lg);
  border-end-end-radius: var(--r-lg);
  overflow: hidden;
}

/* ---------- 7. UTILITIES ---------------------------------- */
/* The [hidden] attribute must always win.
   The browser's default sheet gives [hidden] { display: none } zero
   specificity, so ANY class that sets display — .world { display:flex },
   .pcard, .card — silently beats it. The element is then hidden to
   assistive tech and to the DOM, but still fully visible on screen.
   That is how a paused activity kept appearing on the site.
   One global rule closes it for every component, present and future. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--s-4);
  z-index: 999; background: var(--terracotta); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
  transition: inset-block-start var(--t) var(--ease);
}
.skip-link:focus { inset-block-start: var(--s-4); }

.flow-end { margin-inline-start: auto; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* Language visibility — i18n.js sets data-lang on <html>.
   Content authored inline in both languages stays in the DOM for
   SEO and switches instantly without a round trip. */
html[lang="en"] [data-only="ar"] { display: none !important; }
html[lang="ar"] [data-only="en"] { display: none !important; }

/* ---------- 8. MOTION / A11Y ------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}