/* Shared site styles — extracted from the per-page <style> blocks.
   Font urls are relative to this file (assets/css/), so they resolve
   identically from every page regardless of folder depth.
   Load order matters: this file, then any page-specific <style>,
   then tailwind.css last (see DEPLOY.md). */

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

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

:root{
    --c-primary-50:#F4F6F5; --c-primary-100:#E4E7E5; --c-primary-200:#C6D2CA; --c-primary-300:#A4B6AA;
    --c-primary-400:#7FA18B; --c-primary-500:#64826E; --c-primary-600:#567460; --c-primary-700:#476351;
    --c-primary-800:#364C3D; --c-primary-900:#243028;
    --c-neutral-50:#FAF9F5; --c-neutral-100:#F4F3EE; --c-neutral-150:#ECEBE4; --c-neutral-200:#E4E1D8;
    --c-neutral-300:#D1CDBD; --c-neutral-600:#797153; --c-neutral-700:#5C5640; --c-neutral-800:#3E3A2B; --c-neutral-900:#29261C;
    --c-gold:#E8C158; --c-gold-deep:#D9B94A;
  }

*{ -webkit-font-smoothing:antialiased; }

body{ background:var(--c-neutral-50); color:var(--c-neutral-800); font-family:'Saudi',sans-serif; font-weight:400; font-size:1.125rem; }

.font-display{ font-family:'Saudi',sans-serif; }

body .font-mono{ font-family:'Saudi',sans-serif; }

.tracking-eyebrow{ letter-spacing:.05em; }

.tracking-tight-h{ letter-spacing:0; }

.leading-body{ line-height:1.9; }

/* buttons, inline links and nav. Saudi ships 400/700 only, so 500 would render as 400.
     letter-spacing dropped: it breaks Arabic's cursive joins. */

body .btn{ font-size:0.9375rem; font-weight:700; }

body .link-underline{ font-size:0.9375rem; font-weight:700; }

/* Arabic renders ~7% shorter than Latin at the same px and its labels are far
     narrower (51px vs 140px), so the nav needs a larger size to read as equally
     prominent. Unlike English it has the room: 211px of items in a ~559px box. */

body nav.font-mono{ font-weight:700; letter-spacing:normal; font-size:1.375rem; }

.shadow-brand-sm{ box-shadow: 0 1px 2px rgba(36,48,40,.06), 0 4px 10px -2px rgba(36,48,40,.08); }

.shadow-brand-md{ box-shadow: 0 2px 6px rgba(36,48,40,.08), 0 12px 28px -8px rgba(36,48,40,.16); }

.shadow-brand-lg{ box-shadow: 0 8px 24px rgba(36,48,40,.14), 0 24px 60px -12px rgba(36,48,40,.28); }

.btn{ transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; }

.btn:hover{ transform: translateY(-2px); }

.btn:active{ transform: translateY(0); }

.btn:focus-visible{ outline:2px solid var(--c-gold-deep); outline-offset:3px; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--c-gold-deep); outline-offset:3px; border-radius:2px; }

.link-underline{ background-image:linear-gradient(var(--c-primary-700),var(--c-primary-700)); background-size:0% 1px; background-position:100% 100%; background-repeat:no-repeat; transition: background-size .3s cubic-bezier(.22,1,.36,1); }

.link-underline:hover{ background-size:100% 1px; }

.pill{ transition: background-color .3s cubic-bezier(.22,1,.36,1), color .3s ease, border-color .3s ease, box-shadow .3s ease; }

.img-treat{ position:relative; }

.img-treat::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(36,48,40,.55), rgba(36,48,40,.08) 45%, rgba(36,48,40,.02)); }

.img-tint::before{ content:''; position:absolute; inset:0; background:var(--c-primary-700); mix-blend-mode:multiply; opacity:.16; z-index:1; }

.text-on-photo{ text-shadow: 0 1px 3px rgba(0,0,0,.35), 0 2px 16px rgba(0,0,0,.3); }

.texture{ position:absolute; inset:0; opacity:.05; pointer-events:none; mix-blend-mode:overlay; }

.nav-link{ position:relative; }

.nav-link::after{ content:''; position:absolute; right:0; left:0; bottom:-6px; height:2px; background:var(--c-primary-700); transform:scaleX(0); transform-origin:right; transition:transform .3s cubic-bezier(.22,1,.36,1); }

.nav-link:hover::after{ transform:scaleX(1); }

#mobile-panel{ transform:translateX(-100%); transition:transform .45s cubic-bezier(.22,1,.36,1); }

#mobile-panel.open{ transform:translateX(0); }

#mobile-backdrop{ opacity:0; pointer-events:none; transition:opacity .35s ease; }

#mobile-backdrop.open{ opacity:1; pointer-events:auto; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

/* Base state = visible. If JS never runs, nothing is ever hidden. */

.fade-up{ animation:fadeUp .8s cubic-bezier(.22,1,.36,1) both; }

/* JS present: hold below-the-fold content until it scrolls into view, then play. */

.js-reveal .fade-up{ animation:none; opacity:0; }

.js-reveal .fade-up.is-visible{ animation:fadeUp .9s cubic-bezier(.22,1,.36,1) both; }

@media (prefers-reduced-motion: reduce){
    .fade-up,
    .js-reveal .fade-up,
    .js-reveal .fade-up.is-visible{ animation:none; opacity:1; transform:none; }
  }

#site-header{ background:transparent; border-bottom-color:transparent; transition:background-color .4s ease, border-color .4s ease; }

#site-header .nav-item, #site-header .lang-btn{ color:var(--c-neutral-50); transition:color .4s ease; }

#site-header .menu-icon{ color:var(--c-neutral-50); transition:color .4s ease; }

#site-header.header-solid{ background:var(--c-neutral-50); border-bottom-color:var(--c-neutral-200); box-shadow:0 1px 2px rgba(36,48,40,.05); }

#site-header.header-solid .nav-item{ color:var(--c-neutral-800); }

#site-header.header-solid .lang-btn{ color:var(--c-neutral-700); border-color:var(--c-neutral-300); }

#site-header.header-solid .menu-icon{ color:var(--c-primary-900); }

.social-icon{ opacity:.75; transition:opacity .25s ease, filter .4s ease; }

.social-icon:hover{ opacity:1; }

#site-header.header-solid .social-icon{ filter:brightness(0); }

.rtl-flip{ transform:scaleX(-1); }

/* Footer contact block: the three values that are actually links carry an
   underline so it reads as clickable. Working Hours is plain text and gets
   none - underlining it would promise a link that is not there. */

.contact-link{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
    text-decoration-color:rgba(250,249,245,.45);
    transition:color .25s ease, text-decoration-color .25s ease; }

.contact-link:hover{ text-decoration-color:var(--c-neutral-50); }