/* Footer — يطبق اللون الزيتي من الـ globals عبر --brand-olive */

/* ملاحظة: نتوقع أن --brand-olive معرّف كقيمة HSL ثلاثية مثل: 146 8% 38%  */
/* مثال في globals.css:
:root{
  --brand-copper: 22 77% 49%;
  --brand-olive: 146 8% 38%;  // #596960
}
*/

.site-footer{
  /* ألوان الأساس للفوتر */
  --ft-bg:       152 10% 12%;
  --ft-bg-2:     147  8% 18%;
  --ft-fg:        44 12% 94%;
  --ft-fg-muted:  44 12% 78%;
  --ft-border:   152 10% 24%;
  --ft-accent:   var(--brand-copper);            /* للنحاسي */
  --ft-olive:    var(--brand-olive, 146 8% 38%); /* Alias للزيتي من globals مع fallback */
  --ft-card:     150  7% 10%;
  --ft-card-2:   150  7% 12%;
  --ft-shadow:   0 12px 32px rgba(0,0,0,.28);

  position: relative;
  color: hsl(var(--ft-fg));
  background:
    radial-gradient(900px 360px at 10% -20%,  hsl(var(--ft-olive) / .12), transparent 60%),
    radial-gradient(900px 360px at 110% 120%, hsl(var(--ft-accent) / .10), transparent 60%),
    linear-gradient(180deg, hsl(var(--ft-bg)), hsl(var(--ft-bg-2)));
  border-top: 1px solid hsl(var(--ft-border));
  overflow: clip;
}

/* زخارف أوربس — نحافظ على النحاسي ونجعل الطرف الآخر زيتي من التوكن العام */
.ft-orb{
  position: absolute; pointer-events:none; z-index:0; opacity:.18; filter: blur(26px);
  width: 220px; height: 220px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, hsl(var(--ft-olive) / .45),  transparent 60%),
    radial-gradient(circle at 70% 70%, hsl(var(--ft-accent) / .35), transparent 60%);
}
.ft-orb--l{ inset-inline-start: -80px; top: -60px; }
.ft-orb--r{ inset-inline-end: -80px; bottom: -60px; }

/* القسم العلوي */
.ft-top{
  position: relative; z-index: 1;
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  padding-block: clamp(18px, 2vw + 10px, 32px);
}
@media (min-width: 640px){
  .ft-top{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .ft-top{ grid-template-columns: repeat(4, 1fr); }
}

/* بطاقات داخل الفوتر */
.ft-card{
  background: linear-gradient(180deg, hsl(var(--ft-card) / .86), hsl(var(--ft-card-2) / .86));
  border: 1px solid hsl(var(--ft-border));
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, var(--ft-shadow);
  backdrop-filter: blur(6px) saturate(1.05);
}
.ft-head{
  font-weight: 900;
  font-size: 1rem;
  margin: 0 0 8px;
}
.ft-text{ color: hsl(var(--ft-fg-muted)); margin: 0 0 10px; }

/* Socials */
.ft-social{
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ft-social__link{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; border-radius: 12px; padding: 10px 12px;
  border: 1px solid hsl(var(--ft-border));
  background: hsl(var(--ft-bg-2) / .45);
  color: hsl(var(--ft-fg));
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  will-change: transform;
}
.ft-social__link:hover{
  transform: translateY(-1px);
  background: hsl(var(--ft-bg-2) / .65);
  border-color: hsl(var(--ft-olive) / .35);  /* ← الزيتي من globals */
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.ft-social__icon{
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  background: hsl(var(--ft-bg));
}
.ft-social__label{ font-weight: 800; letter-spacing: .01em; }

/* تلوين خفيف حسب المنصّة عند hover */
.ft-social__link[data-brand="facebook"]:hover   { color: #fff; border-color: #1877F2; }
.ft-social__link[data-brand="facebook"] .ft-social__icon { background: #1877F2; }
.ft-social__link[data-brand="instagram"]:hover { color: #fff; border-color: #E1306C; }
.ft-social__link[data-brand="instagram"] .ft-social__icon { background: #E1306C; }
.ft-social__link[data-brand="youtube"]:hover   { color: #fff; border-color: #FF0000; }
.ft-social__link[data-brand="youtube"] .ft-social__icon { background: #FF0000; }
.ft-social__link[data-brand="linkedin"]:hover  { color: #fff; border-color: #0A66C2; }
.ft-social__link[data-brand="linkedin"] .ft-social__icon { background: #0A66C2; }
.ft-social__link[data-brand="x"]:hover         { color: #fff; border-color: #333; }
.ft-social__link[data-brand="x"] .ft-social__icon { background: #333; }

/* قوائم الروابط */
.ft-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ft-link{
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  color: hsl(var(--ft-fg));
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  transition: background-color .15s ease, transform .12s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

[dir="rtl"] .ft-link::before{ content: '‹'; }
.ft-link:hover{
  background: hsl(var(--ft-bg-2) / .6);
  border-color: hsl(var(--ft-border));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

/* الشريط السفلي */
.ft-bottom{
  position: relative; z-index: 1;
  border-top: 1px solid hsl(var(--ft-border));
  background: linear-gradient(180deg, hsl(var(--ft-bg-2) / .82), hsl(var(--ft-bg-2) / .92));
  margin-top: 8px;
}
.ft-bottom__inner{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-block: 12px;
  flex-wrap: wrap;
}
.ft-copy{ color: hsl(var(--ft-fg-muted)); font-size: .95rem; }
.ft-contact{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ft-mini-link{
  color: hsl(var(--ft-fg-muted));
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease, opacity .15s ease;
}
.ft-mini-link:hover{ color: hsl(var(--ft-fg)); }

/* زر العودة للأعلى — الآن بالزيتي من globals */
.ft-to-top{ position: relative; z-index: 1; display: grid; place-items: center; padding-block: 8px 16px; }
.ft-top-btn{
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: hsl(var(--ft-olive));         /* ← الزيتي */
  color: #fff; font-weight: 900; text-decoration: none;
  border: 1px solid hsl(var(--ft-border));
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.ft-top-btn:hover{ transform: translateY(-2px); filter: brightness(.98); }

/* وصولية وفوكس */
.site-footer a, .site-footer button{ -webkit-tap-highlight-color: transparent; }
.site-footer :focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--ring) / .35);
  border-radius: 10px;
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .ft-social__link, .ft-link, .ft-top-btn { transition: none !important; }
}


/* تحسينات RTL */
[dir="rtl"] .ft-social__label{ letter-spacing: .01em; }

/* Header — dark-on-light, mobile-first, RTL-aware */

:root{
  --hdr-h: 64px;
  --hdr-z: 70;
  --shadow-softer: 0 2px 10px rgba(0,0,0,.12);
  --shadow: 0 6px 24px rgba(0,0,0,.18);
}

/* =========
   Header palette (scoped)
   ========= */
.site-header{
  /* لوح ألوان الهيدر */
  --hdr-bg:         147  8% 38%;
  --hdr-bg-2:       152 10% 18%;
  --hdr-fg:         44 12% 96%;
  --hdr-fg-muted:   44 12% 78%;
  --hdr-border:     152 10% 26%;
  --hdr-hover-bg:   152 10% 22%;
  --hdr-panel:      147  8% 38%;
  --hdr-panel-2:    147  8% 50%;
  --hdr-ring:       var(--ring);

  position: sticky; top: 0; inset-inline: 0; z-index: var(--hdr-z);
  background:
    linear-gradient(180deg,
      hsl(var(--hdr-bg) / .98),
      hsl(var(--hdr-bg) / .96)
    );
  border-bottom: 1px solid hsl(var(--hdr-border));
  box-shadow: var(--shadow-softer);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: hsl(var(--hdr-fg));
}
.site-header.is-scrolled{
  background: hsl(var(--hdr-bg) / .98);
  box-shadow:
    0 1px 0 hsl(var(--hdr-panel-2) / .35) inset,
    var(--shadow);
  border-bottom-color: hsl(var(--hdr-panel-2) / .65);
}

/* Bar */
.nav-bar{
  min-height: var(--hdr-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:8px;
}
.brand-and-toggle{ display:flex; align-items:center; gap:10px; }

/* Logo/Brand */
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; min-width: 0; }
.brand-logo{
  border-radius:12px;
  border:1px solid hsl(var(--hdr-border));
  background: hsl(var(--hdr-hover-bg) / .55);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 16px rgba(0,0,0,.22);
}
.brand-text{
  font-weight:900; letter-spacing:.01em;
  color: #ffffff;
  transition: color .15s ease, opacity .15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw;
}
.brand:hover .brand-text{ color:hsl(var(--brand-copper)); }

/* Desktop nav */
.main-nav{ align-items:center; gap:6px; margin-inline-start:4px; }
.nav-group{ position:relative; }
.nav-btn{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none; background:transparent; border:0; cursor:pointer;
  color:hsl(var(--hdr-fg)); font-weight:800;
  padding:8px 12px; border-radius:10px; position:relative;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
  font-size: clamp(.9rem,.86rem + .2vw,1rem); line-height:1; white-space:nowrap; min-height:40px;
}
.nav-btn:hover{ background:hsl(var(--hdr-hover-bg) / .75); transform: translateY(-1px); }
.nav-btn.is-active{ color:hsl(var(--brand-copper)); }
.nav-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px hsl(var(--hdr-ring)/.45); }

.nav-btn.highlight{
  background:hsl(var(--brand-copper));
  color:hsl(var(--primary-fg));
  border:1px solid transparent;
  box-shadow: var(--shadow-softer);
}
.nav-btn.highlight:hover{ transform:translateY(-1px); background: hsl(var(--success)); color:#fff; }

/* Underline animation */
.nav-underline{
  position:absolute; inset-inline:10px; bottom:6px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, hsl(var(--brand-copper)), hsl(var(--brand-sand)));
  transform:scaleX(0); transform-origin: var(--_o, center); transition: transform .18s ease;
}
.nav-btn:hover .nav-underline, .nav-btn.is-active .nav-underline{ transform:scaleX(1); }
[dir="rtl"] .nav-underline{ --_o:right; }
[dir="ltr"] .nav-underline{ --_o:left; }

/* Dropdown — dark panel */
.menu-panel{
  position:absolute; top:calc(100% + 10px);
  min-width:220px; max-width:320px; padding:10px; border-radius:14px;
  background:
    linear-gradient(180deg,
      hsl(var(--hdr-panel) / .98),
      hsl(var(--hdr-panel-2) / .98)
    );
  border:1px solid hsl(var(--hdr-border));
  box-shadow: var(--shadow);
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .15s, transform .15s;
  z-index: calc(var(--hdr-z) + 10);
  inset-inline-start:auto; inset-inline-end:0;
  color: hsl(var(--hdr-fg));
}
.menu-panel.start-0{ inset-inline-start:0; inset-inline-end:auto; }
.menu-panel.end-0{ inset-inline-end:0; inset-inline-start:auto; }
.menu-panel.open{ opacity:1; transform:translateY(0); pointer-events:auto; }

.menu-list{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.menu-item{
  display:block; text-decoration:none; padding:8px 10px; border-radius:10px; font-weight:800;
  color:hsl(var(--hdr-fg)); background:transparent; border:1px solid transparent;
  transition: background-color .15s ease, color .15s ease, transform .12s ease, border-color .15s ease;
  white-space:nowrap;
}
.menu-item:hover{ background:hsl(var(--hdr-hover-bg) / .7); transform: translateY(-1px); }
.menu-item.active{ color:hsl(var(--brand-copper)); border-color:hsl(var(--hdr-border)); }
.menu-item.sub{ font-weight:700; color:hsl(var(--hdr-fg-muted)); }

/* Actions (يمين) */
.actions{ align-items:center; gap:8px; }

/* Mobile menu button */
.menu-toggle{
  width:44px; height:44px; display:grid; place-items:center;
  background:hsl(var(--hdr-hover-bg) / .55); color:hsl(var(--hdr-fg));
  border:1px solid hsl(var(--hdr-border)); border-radius:12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  transition: background-color .15s ease, transform .12s ease, border-color .15s ease;
}
.menu-toggle:hover{ background:hsl(var(--hdr-hover-bg)); transform: translateY(-1px); }
.menu-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px hsl(var(--hdr-ring)/.45); }

/* Mobile panel — dark as well */
.mobile-panel{
  position:fixed; inset-inline:0; top:var(--hdr-h);
  max-height: calc(100dvh - var(--hdr-h));
  background:
    linear-gradient(180deg,
      hsl(var(--hdr-panel) / .98),
      hsl(var(--hdr-panel-2) / .98)
    );
  border-top:1px solid hsl(var(--hdr-border)); box-shadow: var(--shadow);
  transform: translateY(-12px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  z-index: calc(var(--hdr-z) + 5);
  color: hsl(var(--hdr-fg));
  overscroll-behavior: contain;
}
.mobile-panel.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mob-inner{ padding-block:12px 16px; display:grid; gap:8px; }

/* Mobile accordion */
.mob-acc{
  border:1px solid hsl(var(--hdr-border)); border-radius:12px;
  background:hsl(var(--hdr-hover-bg) / .55);
  box-shadow: 0 2px 10px rgba(0,0,0,.12); overflow:hidden;
}
.mob-acc + .mob-acc{ margin-top:8px; }

.mob-acc-btn{
  width:100%; text-align:start; padding:12px; background:transparent; border:0; cursor:pointer;
  color:hsl(var(--hdr-fg)); font-weight:900; display:flex; align-items:center; justify-content:space-between; gap:8px;
  transition: background-color .15s ease, color .15s ease; font-size:1rem; line-height:1;
}
.mob-acc-btn:hover{ background:hsl(var(--hdr-hover-bg) / .75); }
.chev{ transition: transform .18s ease; }
.chev.rot{ transform: rotate(180deg); }

.mob-acc-body{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  background:hsl(var(--hdr-panel)); border-top:1px dashed hsl(var(--hdr-border));
}
.mob-acc-body.open{ max-height:400px; }

.mob-acc-body ul{ list-style:none; margin:0; padding:8px; display:grid; gap:6px; }
.mob-link{
  display:block; text-decoration:none; padding:8px 10px; border-radius:10px; font-weight:800;
  color:hsl(var(--hdr-fg)); border:1px solid transparent;
  transition: background-color .15s ease, color .15s ease, transform .12s ease, border-color .15s ease;
}
.mob-link:hover{ background:hsl(var(--hdr-hover-bg) / .7); transform: translateY(-1px); }
.mob-link.sub{ font-weight:700; color:hsl(var(--hdr-fg-muted)); }

.mob-quick{ margin-top:10px; display:grid; gap:8px; }
.mob-btn{
  text-decoration:none; text-align:center; padding:10px 12px; border-radius:10px; font-weight:800;
  border:1px dashed hsl(var(--hdr-border));
  background:hsl(var(--hdr-hover-bg) / .45); color:hsl(var(--hdr-fg));
  transition: background-color .15s ease, transform .12s ease, color .15s ease, border-color .15s ease;
}
.mob-btn:hover{ transform: translateY(-1px); background:hsl(var(--hdr-hover-bg) / .65); }

/* A11y / Motion */
.site-header a, .site-header button{ -webkit-tap-highlight-color: transparent; }
.site-header :focus-visible{ outline:none; box-shadow:0 0 0 3px hsl(var(--hdr-ring)/.45); border-radius:8px; }
@media (prefers-reduced-motion: reduce){
  .menu-panel, .menu-toggle, .mob-acc-body, .mobile-panel,
  .nav-btn, .nav-underline, .mob-btn, .menu-item { transition:none !important; }
}

/* Responsive tweaks */
@media (min-width:768px){
  :root{ --hdr-h: 72px; }
  .nav-bar{ padding-block:10px; }
  .main-nav{ gap:8px; }
  .nav-btn{ padding:10px 12px; }
  .actions{ gap:10px; }
}
@media (min-width: 768px) {
  .menu-toggle { display: none !important; }
}

/* ===== تكييف خاص مع رأس المنصة الداكن للـ LanguageSwitcher ===== */
.site-header .lang-select{
  background: hsl(var(--ink) / .08);
  color: #ffffff;
  border-color: hsl(var(--border));
  backdrop-filter: saturate(1.1) blur(6px);
}
.site-header .lang-select:hover{ background: hsl(var(--ink) / .12); }
.site-header .lang-select:focus-visible{
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--ring) / .35);
}

/* Language Switcher — خفيف، متوافق مع ألوان/توكِنات المنصّة */

.lang-switch{ position: relative; display: inline-block; }

/* الزر */
.lang-btn{
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 10px 12px;
  background: hsl(var(--surface)); color: hsl(var(--fg));
  border: 1px solid hsl(var(--border)); border-radius: 999px;
  font-weight: 800; letter-spacing: .01em;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.lang-btn:hover{ background: hsl(var(--muted-bg)); transform: translateY(-1px); }
.lang-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px hsl(var(--ring)/.35); }

/* الأيقونات */
.lang-flag{ 
  
  width: 28px;
  height: 30px;

}
.chev{ transition: transform .18s ease; opacity: .9; }
.chev.rot{ transform: rotate(180deg); }

/* القائمة المنسدلة */
.lang-pop{
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  min-width: 200px; padding: 8px;
  background: linear-gradient(180deg, hsl(var(--surface)), hsl(var(--surface-2)));
  border: 1px solid hsl(var(--border)); border-radius: 12px;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 60;
}
.lang-pop.open{ opacity: 1; transform: translateY(0); pointer-events: auto; }

/* عنصر الخيار */
.lang-opt{
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: transparent; border: 0; color: hsl(var(--fg));
  text-align: start; cursor: pointer; font-weight: 800;
  transition: background-color .15s ease, color .15s ease, transform .12s ease, border-color .15s ease;
}
.lang-opt:hover{ background: hsl(var(--muted-bg)); }
.lang-opt.is-active{ background: hsl(var(--brand-copper) / .10); }
.lang-country{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-check{ margin-inline-start: auto; color: hsl(var(--brand-copper)); font-weight: 900; }

/* RTL/LTR حواف منطقية */
[dir="rtl"] .lang-pop{ inset-inline-end: 0; }
[dir="ltr"] .lang-pop{ inset-inline-start: 0; }