/* ==========================================================================
   WafiTo — GLOBAL SHELL (nav + footer)
   Loaded by EVERY page, including the hand-built Khutwa product page.
   Uses its own --sh-* tokens (not the page's) so the shell renders identically
   everywhere regardless of what palette a page defines locally.
   Source of truth: design_handoff_wafito_website/
   ========================================================================== */
:root{
  --sh-paper:#F6F0E4;
  --sh-surface:#FCF9F2;
  --sh-border:#DED0B4;
  --sh-hair:#EAE0C8;
  --sh-ink:#362D22;
  --sh-ink-soft:#5C503D;
  --sh-muted:#8C7E64;
  --sh-primary:#B8863A;
  --sh-primary-dark:#A6752E;
  /* CTA fill kept separate from the decorative gold: white text needs 4.5:1,
     which #B8863A (3.23) fails. #966B26 gives 4.74; accents stay bright. */
  --sh-cta:#966B26;
  --sh-nav-bg:rgba(246,240,228,.92);
  --sh-ease:cubic-bezier(.4,0,.2,1);
  --sh-gutter:clamp(16px,5vw,56px);
  --sh-shell:calc(1180px + 2*var(--sh-gutter));
}
html[data-theme="dark"]{
  --sh-paper:#201A12;
  --sh-surface:#2A2216;
  --sh-border:#4A3D28;
  --sh-hair:#3B2F1E;
  --sh-ink:#F1E7D4;
  --sh-ink-soft:#D6C6A6;
  --sh-muted:#998A6B;
  --sh-primary:#E5BE72;
  --sh-primary-dark:#EFD08C;
  /* dark theme: CTA uses dark text on light gold, so the bright gold stays */
  --sh-cta:#E5BE72;
  --sh-nav-bg:rgba(32,26,18,.92);
}

/* ---------- nav ---------- */
.wf-nav{position:sticky; top:0; z-index:50; background:var(--sh-nav-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sh-hair);}
.wf-nav-in{max-width:var(--sh-shell); margin:0 auto; padding:12px var(--sh-gutter);
  display:flex; align-items:center; gap:clamp(8px,2vw,12px);}
.wf-brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none;}
.wf-brand img{width:26px; height:26px; object-fit:contain; transition:transform .2s ease;}
.wf-brand:hover img{transform:scale(1.1);}
.wf-brand span{font-family:'Cairo',sans-serif; font-weight:800; font-size:18px; color:var(--sh-ink);}
.wf-spacer{flex:1;}

.wf-cta{font-family:'Cairo',sans-serif; font-weight:700; font-size:14px; color:#fff;
  background:var(--sh-cta); border-radius:12px; padding:.65em clamp(.72em,2.6vw,1.1em); text-decoration:none;
  min-height:44px; align-items:center; display:inline-flex;
  white-space:nowrap; flex:none;
  transition:background-color .22s var(--sh-ease), transform .22s var(--sh-ease);}
.wf-cta:hover{background:var(--sh-primary-dark); color:#fff;}
.wf-cta:active{transform:scale(.97);}
html[data-theme="dark"] .wf-cta{color:#201A12;}

.wf-burger{width:44px; height:44px; flex:none; border-radius:12px;
  border:1px dashed var(--sh-border); background:transparent; cursor:pointer; position:relative;
  transition:border-color .22s var(--sh-ease);}
.wf-burger:hover{border-color:var(--sh-primary);}
.wf-burger span{position:absolute; top:50%; left:50%; width:18px; height:2px;
  margin-top:-1px; margin-left:-9px; border-radius:2px; background:var(--sh-ink);}
.wf-burger .b1{transition:transform .3s var(--sh-ease); transform:translateY(-6px);}
.wf-burger .b2{transition:opacity .2s ease; opacity:1;}
.wf-burger .b3{transition:transform .3s var(--sh-ease); transform:translateY(6px);}
.wf-burger[aria-expanded="true"] .b1{transform:translateY(0) rotate(45deg);}
.wf-burger[aria-expanded="true"] .b2{opacity:0;}
.wf-burger[aria-expanded="true"] .b3{transform:translateY(0) rotate(-45deg);}

/* grid-rows expand — no layout jump, no max-height hack */
.wf-menu{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--sh-ease);
  background:var(--sh-surface); border-top:1px dashed var(--sh-border);}
.wf-menu.open{grid-template-rows:1fr;}
.wf-menu > div{overflow:hidden;}
.wf-menu-in{max-width:var(--sh-shell); margin:0 auto; padding:6px var(--sh-gutter) 14px;
  display:flex; flex-direction:column;}
.wf-menu a{display:flex; align-items:center; justify-content:space-between;
  font-family:'Cairo',sans-serif; font-weight:600; font-size:16px; color:var(--sh-ink);
  text-decoration:none; padding:14px 2px; border-bottom:1px solid var(--sh-hair);
  transition:color .22s var(--sh-ease);}
.wf-menu a:last-child{border-bottom:none;}
.wf-menu a:hover{color:var(--sh-primary);}
.wf-menu a .dot{width:6px; height:6px; border-radius:999px; background:var(--sh-primary); flex:none;}
.wf-menu[aria-hidden="true"] a{visibility:hidden;}
.wf-menu.open a{visibility:visible;}

/* ---------- footer ---------- */
.wf-foot{border-top:1px solid var(--sh-hair); padding:64px 0 32px; background:transparent;}
.wf-foot-in{max-width:var(--sh-shell); margin:0 auto; padding:0 var(--sh-gutter);}
.wf-foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:40px;}
.wf-foot-brand .row{display:flex; align-items:center; gap:10px;}
.wf-foot-brand img{width:26px; height:26px; object-fit:contain;}
.wf-foot-brand .nm{font-family:'Cairo',sans-serif; font-weight:800; font-size:17px; color:var(--sh-ink);}
.wf-foot-brand p{font-size:14px; color:var(--sh-muted); max-width:32ch; margin:14px 0 0; line-height:1.7;}
.wf-social{display:flex; gap:20px; margin-top:20px; flex-wrap:wrap;}
.wf-social a{font-family:'Space Grotesk',ui-monospace,monospace; font-size:13px;
  color:var(--sh-muted); text-decoration:none; direction:ltr;
  transition:color .22s var(--sh-ease);}
.wf-social a:hover{color:var(--sh-primary);}
.wf-foot-col h2{font-family:'Cairo',sans-serif; font-weight:700; font-size:14px;
  color:var(--sh-ink); margin:0 0 16px;}
.wf-foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.wf-foot-col a{font-size:14px; color:var(--sh-muted); text-decoration:none;
  transition:color .22s var(--sh-ease);}
.wf-foot-col a:hover{color:var(--sh-primary);}
.wf-foot-bottom{margin-top:48px; padding-top:24px; border-top:2px dashed var(--sh-border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.wf-foot-bottom span, .wf-foot-bottom a{font-family:'Space Grotesk',ui-monospace,monospace;
  font-size:12px; color:var(--sh-muted); text-decoration:none;}
.wf-foot-bottom a:hover{color:var(--sh-primary);}

/* ---------- shared a11y ---------- */
.skip{position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--sh-cta); color:#fff; padding:12px 20px; border-radius:0 0 12px 12px;
  font-family:'Cairo',sans-serif; font-weight:800; text-decoration:none;}
/* dark theme CTA is light gold, so the skip link flips to dark text like .wf-cta
   (white on #E5BE72 was only 1.76:1) */
html[data-theme="dark"] .skip{color:#201A12;}
.skip:focus{inset-inline-start:50%; transform:translateX(50%);}
:focus-visible{outline:3px solid var(--sh-primary); outline-offset:3px; border-radius:6px;}

@media (prefers-reduced-motion:reduce){
  .wf-menu, .wf-burger span, .wf-cta, .wf-brand img{transition:none;}
}

/* ---------- theme toggle (lives in the bar on every page) ---------- */
.wf-theme{width:44px; height:44px; flex:none; border-radius:12px; cursor:pointer;
  border:1px dashed var(--sh-border); background:transparent; color:var(--sh-ink);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .22s var(--sh-ease), color .22s var(--sh-ease);}
.wf-theme:hover{border-color:var(--sh-primary); color:var(--sh-primary);}
.wf-theme svg{width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round;}
.wf-theme .moon{display:none;}
html[data-theme="dark"] .wf-theme .sun{display:none;}
html[data-theme="dark"] .wf-theme .moon{display:block;}
@media (prefers-reduced-motion:reduce){ .wf-theme{transition:none;} }

/* ---------- font gate ----------
   Holds text back for the moment the webfonts are in flight so it never paints
   in a fallback face and then reflows (FOUT). The paper background and layout
   paint immediately, so this reads as content fading in on the canvas rather
   than as a blank page. Capped at 900ms in shell.js — text always arrives. */
html.wf-fontgate body{opacity:0;}
body{opacity:1; transition:opacity .22s var(--sh-ease);}
@media (prefers-reduced-motion:reduce){
  html.wf-fontgate body{opacity:1;}
  body{transition:none;}
}

/* ---------- scroll reveal ----------
   Gated on html.js so that with JS disabled nothing is ever hidden — the
   .reveal start state is opacity:0, so an unconditional rule would blank the
   page for anyone whose script fails. Matches the product page's timing. */
html.js .reveal{opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;}
html.js .reveal.in{opacity:1; transform:none;}

/* stagger children of a revealed group so cards cascade instead of snapping */
html.js .reveal.in > *{animation:wf-rise .55s var(--sh-ease) backwards;}
html.js .reveal.in > *:nth-child(2){animation-delay:.06s;}
html.js .reveal.in > *:nth-child(3){animation-delay:.12s;}
html.js .reveal.in > *:nth-child(4){animation-delay:.18s;}
@keyframes wf-rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}

/* ---------- theme cross-fade ----------
   Only active while the toggle is animating, so it never fights the hover
   transitions on buttons and links. */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition:background-color .35s ease, border-color .35s ease,
             color .35s ease, fill .35s ease !important;
}

/* ---------- interactive polish (mirrors the product page) ---------- */
/* padding-block lifts the tap area to the WCAG 2.5.8 24px minimum (was ~21px) */
.wf-foot-col a, .wf-social a{display:inline-block; padding-block:3px;}
.wf-foot-col a:hover, .wf-social a:hover{transform:translateX(-2px);}
.wf-foot-col a, .wf-social a{transition:color .22s var(--sh-ease), transform .22s var(--sh-ease);}

@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1; transform:none; transition:none;}
  html.js .reveal.in > *{animation:none;}
  html.theme-anim, html.theme-anim *{transition:none !important;}
  .wf-foot-col a:hover, .wf-social a:hover{transform:none;}
}

/* ---------- narrow-viewport nav ----------
   Below ~360px the brand + CTA + toggle + burger cannot all fit, and the
   fixed-width CTA pushed the hamburger off-screen (WCAG 1.4.10 Reflow at 320px
   / 400% zoom). Drop the CTA there — the same "احصل على خُطوة" link lives in
   the menu, so nothing is lost. */
@media (max-width:359px){
  .wf-cta{display:none;}
}