/* ============================================================
   WAMEED CATERING — Design System (tokens + base)
   Brand: deep purple + gold · luxury catering · Riyadh, KSA
   Loaded ONCE globally (site-wide). Every section reuses it.
   ============================================================ */

:root{
  /* ---- Brand: Purple ---- */
  --wm-purple-900:#2b0f38;
  --wm-purple-800:#3a1650;
  --wm-purple-700:#4c1e64;   /* PRIMARY */
  --wm-purple-600:#5f2a7c;
  --wm-purple-500:#743a92;
  --wm-purple-300:#a97fc0;

  /* ---- Brand: Gold ---- */
  --wm-gold-700:#b8860b;
  --wm-gold:#d4a537;         /* ACCENT */
  --wm-gold-300:#ecc766;
  --wm-gold-100:#f6e7bd;

  /* ---- Neutrals ---- */
  --wm-cream:#f6f2ea;
  --wm-ink:#1b1220;
  --wm-white:#ffffff;

  /* ---- Gradients ---- */
  --wm-grad-purple:linear-gradient(135deg,var(--wm-purple-800),var(--wm-purple-600));
  --wm-grad-gold:linear-gradient(135deg,var(--wm-gold),var(--wm-gold-300));

  /* ---- Glass (for floating header / cards) ---- */
  --wm-glass-bg:rgba(43,15,56,.28);
  --wm-glass-brd:rgba(255,255,255,.22);
  --wm-glass-blur:16px;

  /* ---- Typography (Thmanyah) ---- */
  --wm-font-head:"El Messiri", "Times New Roman", serif;               /* elegant headings */
  --wm-font-body:"IBM Plex Sans Arabic", system-ui, sans-serif;         /* body / UI */

  /* ---- Radius / shadow / motion ---- */
  --wm-r-sm:12px; --wm-r-md:20px; --wm-r-lg:28px; --wm-r-pill:999px;
  --wm-shadow-1:0 10px 30px rgba(27,10,40,.18);
  --wm-shadow-2:0 24px 60px rgba(27,10,40,.35);
  --wm-ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;overflow-x:clip;}
img,video,iframe,table{max-width:100%;}

/* HFE "skip to content" hides at left:-9999px, which in RTL is the scrollable
   side — it stretches the canvas 9999px and blanks the first paint. Park it on
   the inline-start side (clipped in both directions) instead. */
a.hfe-skip-link{left:auto!important;right:auto!important;inset-inline-start:-9999px!important;}
a.hfe-skip-link:focus{inset-inline-start:8px!important;top:8px!important;z-index:9999;}

/* set by app.js while the mobile off-canvas menu is open */
html.wm-noscroll{overflow:hidden;}
body{
  font-family:var(--wm-font-body);
  color:var(--wm-ink);
  background:var(--wm-cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.8;
  letter-spacing:.015em;
}
h1,h2,h3,h4{font-family:var(--wm-font-head);margin:0;line-height:1.45;font-weight:700;letter-spacing:.02em;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* ---- Buttons ---- */
.wm-btn{
  font-family:var(--wm-font-body);font-weight:700;font-size:1rem;line-height:1;
  border:none;cursor:pointer;border-radius:var(--wm-r-pill);
  padding:.95rem 1.9rem;display:inline-flex;align-items:center;gap:.6rem;
  transition:transform .3s var(--wm-ease),box-shadow .3s var(--wm-ease),background .3s;
}
.wm-btn:hover{transform:translateY(-2px);}
.wm-btn--gold{background:var(--wm-grad-gold);color:var(--wm-purple-900);box-shadow:0 12px 26px rgba(212,165,55,.42);}
.wm-btn--glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(8px);}
.wm-btn--glass:hover{background:rgba(255,255,255,.2);}

/* ---- Shared layout helpers (reused by every section) ---- */
.wm-section{position:relative;padding-block:clamp(72px,9vw,128px);overflow:hidden;}
.wm-container{width:min(1200px,100%);margin-inline:auto;padding-inline:clamp(20px,5vw,48px);position:relative;z-index:1;}

/* ---- Signature: square grid texture (evokes الترتيب / precision) ---- */
.wm-section::before,.wm-phero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-size:46px 46px;
  background-image:linear-gradient(rgba(76,30,100,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(76,30,100,.05) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%,#000,transparent 78%);mask-image:radial-gradient(130% 100% at 50% 0%,#000,transparent 78%);}
.wm-services::before,.wm-gallery::before,.wm-phero::before{background-image:linear-gradient(rgba(212,165,55,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(212,165,55,.08) 1px,transparent 1px);}
.wm-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--wm-font-body);font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--wm-gold-700);}
.wm-eyebrow::before{content:"";width:28px;height:2px;background:var(--wm-grad-gold);border-radius:2px;}
.wm-title{font-family:var(--wm-font-head);font-weight:900;font-size:clamp(2rem,4.6vw,3.25rem);color:var(--wm-purple-800);line-height:1.36;margin-top:1rem;}
.wm-lead{font-family:var(--wm-font-body);font-size:clamp(1.02rem,1.7vw,1.18rem);line-height:2.05;color:#5b4d68;margin-top:1.1rem;}

/* ---- Sub-page hero ---- */
.wm-phero{position:relative;padding:clamp(140px,18vh,210px) 0 clamp(48px,7vw,80px);text-align:center;color:#fff;overflow:hidden;background:radial-gradient(75% 130% at 50% -10%,rgba(212,165,55,.18),transparent 60%),linear-gradient(160deg,var(--wm-purple-900),var(--wm-purple-700));}
.wm-phero .crumb{font-family:var(--wm-font-body);font-size:.85rem;letter-spacing:.04em;color:var(--wm-gold-300);margin-bottom:.9rem;}
.wm-phero h1{font-family:var(--wm-font-head);font-weight:900;font-size:clamp(2.2rem,5.2vw,3.6rem);color:#fff;line-height:1.3;}
.wm-phero p{font-family:var(--wm-font-body);color:rgba(255,255,255,.82);max-width:620px;margin:1.1rem auto 0;line-height:2;}

/* ---- Generic grid + card ---- */
.wm-grid{display:grid;gap:1.2rem;margin-top:2.6rem;}
.wm-grid--2{grid-template-columns:repeat(2,1fr);}
.wm-grid--3{grid-template-columns:repeat(3,1fr);}
@media(max-width:820px){.wm-grid--2,.wm-grid--3{grid-template-columns:1fr;}}
.wm-card{background:#fff;border:1px solid rgba(76,30,100,.09);border-radius:var(--wm-r-lg);padding:1.9rem 1.6rem;box-shadow:var(--wm-shadow-1);transition:transform .35s var(--wm-ease),box-shadow .35s,border-color .35s;}
.wm-card:hover{transform:translateY(-4px);box-shadow:var(--wm-shadow-2);border-color:rgba(212,165,55,.4);}
.wm-card h3{font-family:var(--wm-font-head);font-weight:900;font-size:1.35rem;color:var(--wm-purple-800);margin:0 0 .5rem;}
.wm-card p{font-family:var(--wm-font-body);color:#5b4d68;line-height:1.9;margin:0;}
.wm-card .ic{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,rgba(212,165,55,.18),rgba(212,165,55,.05));color:var(--wm-gold-700);margin-bottom:1rem;}
.wm-card .ic svg{width:26px;height:26px;}

/* ---- CTA band ---- */
.wm-cta{background:linear-gradient(135deg,var(--wm-purple-800),var(--wm-purple-600));color:#fff;text-align:center;}
.wm-cta h2{font-family:var(--wm-font-head);font-weight:900;color:#fff;font-size:clamp(1.8rem,3.6vw,2.7rem);}
.wm-cta p{font-family:var(--wm-font-body);color:rgba(255,255,255,.82);max-width:560px;margin:1rem auto 1.8rem;line-height:2;}