/* 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:'Stack Sans Headline';
    src:url('../fonts/StackSansHeadline-Variable.woff2') format('woff2');
    font-weight:200 700;
    font-style:normal;
    font-display:swap;
  }

@font-face{
    font-family:'Open Sans';
    src:url('../fonts/OpenSans-Variable.woff2') format('woff2');
    font-weight:300 800;
    font-stretch:100%;
    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:'Open Sans',sans-serif; font-weight:500; font-size:1.125rem; }

.font-display{ font-family:'Stack Sans Headline','IBM Plex Sans',sans-serif; }

.font-mono{ font-family:'IBM Plex Mono',monospace; }

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

.tracking-tight-h{ letter-spacing:-0.03em; }

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

/* buttons, inline links and nav - one step up, still below heading weight */

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

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

body nav.font-mono{ font-weight:500; }

/* The nav carries five items since Sep 2026 ("Highlights"). The desktop
     nav starts at lg (1024px) in both languages, so a laptop or TV with
     display scaling never falls back to the slide-in panel in English while
     Arabic shows the full bar. Between lg and xl the English labels are
     set at 13px with tighter tracking and a shorter logo so all five fit
     with clear space either side (measured at 1024px); from xl up the
     header takes its full size, and 2xl adds the wider gap. */
@media (min-width:1024px) and (max-width:1279.98px){
  html[lang="en"] #site-header nav{ gap:1.5rem; font-size:13px; letter-spacing:.14em; }
  html[lang="en"] #site-header .logo-plate img{ height:5rem; }
}

.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; }

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

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

.nav-link{ position:relative; }

.nav-link::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--c-primary-700); transform:scaleX(0); transform-origin:left; 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; }
  }

.img-treat{ position:relative; }

.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); }

#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); }

#ar-toast{ transform:translateY(12px); opacity:0; transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1); pointer-events:none; }

#ar-toast.show{ transform:translateY(0); opacity:1; }

.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); }

/* Arabic face for quoted passages inside English blog posts.
   Declared here so every font url lives in this file; browsers only
   fetch it on pages that actually render Arabic glyphs. */
@font-face{
  font-family:'Noto Sans Arabic';
  src:url('../fonts/NotoSansArabic-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:75% 125%;
  font-style:normal;
  font-display:swap;
}

.font-arabic{ font-family:'Noto Sans Arabic', sans-serif; }

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