/* ==========================================================
   Juuko Header (RTL) – Sticky + Mega + Mobile Flyout (SCOPED)
   FIXED: Topbar forced DARK (no override)
   ========================================================== */

/* -------------------- Tokens -------------------- */
body.ju-body{
  --ju-dark:#1a1a1a;
  --ju-accent:#ffb524;

  --ju-topbar-bg:#1a1a1a;
  --ju-topbar-text:#ffffff;
  --ju-topbar-ico-bg:rgba(255,255,255,.08);
  --ju-topbar-ico-border:rgba(255,255,255,.12);

  --ju-header-bg:#ffffff;
  --ju-header-text:#1a1a1a;

  --ju-mega-bg:#ffffff;
  --ju-mega-text:#1a1a1a;
  --ju-mega-muted:#666;
  --ju-mega-card:#f7f7f8;

  --ju-white:#ffffff;

  --ju-border:rgba(0,0,0,.08);
  --ju-shadow-sm:0 2px 10px rgba(0,0,0,.10);
  --ju-shadow-lg:0 14px 34px rgba(0,0,0,.18);

  --ju-radius-10:10px;
  --ju-radius-12:12px;

  --ju-z-header:2147483646;
  --ju-z-mega:10010;
  --ju-z-search:10015;
  --ju-z-overlay:10020;
  --ju-z-flyout:10030;
  --ju-z-flyout-top:10040;
}

/* -------------------- Base -------------------- */
body.ju-body{
  margin:0;
  background:var(--ju-white);
  color:#111;
  direction:rtl;
  font-family:Shabnam, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body.ju-body .ju-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* Full-width header/topbar wrappers */
body.ju-body .ju-header .ju-wrap,
body.ju-body .ju-topbar .ju-wrap{
  max-width:none;
  width:100%;
  padding:0 12px;
}

/* ==========================================================
   ✅ Topbar (FORCED DARK)  — hard override
   ========================================================== */
body.ju-body .ju-topbar{
  /* force background + text even if theme overrides */
  background-color: var(--ju-topbar-bg) !important;
  color: var(--ju-topbar-text) !important;

  /* kill any transparency/filter from theme */
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;

  position: relative; /* safer than static with weird themes */
  z-index: calc(var(--ju-z-header) + 1); /* always above header shadow */
  font-size:13.5px;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

body.ju-body .ju-topbar .ju-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
}

body.ju-body .ju-topbar-right{ flex:1; opacity:.95; }

body.ju-body .ju-topbar-left{
  display:flex;
  align-items:center;
  gap:14px;
}

body.ju-body .ju-topbar a{
  color:var(--ju-topbar-text) !important;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  opacity:.92;
}
body.ju-body .ju-topbar a:hover{ opacity:1; }

body.ju-body .ju-ic{
  display:inline-flex;
  width:28px;height:28px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--ju-topbar-ico-bg) !important;
  border:1px solid var(--ju-topbar-ico-border) !important;
}
body.ju-body .ju-ic svg{
  width:16px;height:16px;
  fill:var(--ju-accent);
  display:block;
}

/* -------------------- Header (White, Sticky) -------------------- */
body.ju-body .ju-header{
  position:sticky;
  top:0;
  z-index:var(--ju-z-header);
  background:var(--ju-header-bg);
  color:var(--ju-header-text);
  border-bottom:1px solid var(--ju-border);
  box-shadow:var(--ju-shadow-sm);
}

body.ju-body .ju-header.is-fixed{
  position:fixed;
  left:0; right:0;
  width:100%;
  top:0;
}

/* Admin bar offset */
body.admin-bar.ju-body .ju-header{ top:32px; }
body.admin-bar.ju-body .ju-header.is-fixed{ top:32px; }
@media (max-width:782px){
  body.admin-bar.ju-body .ju-header{ top:46px; }
  body.admin-bar.ju-body .ju-header.is-fixed{ top:46px; }
}

/* ✅ Taller header */
body.ju-body .ju-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 10px;
  min-height:76px;
}

body.ju-body .ju-logo img{
  display:block;
  height:auto;
  max-width:140px;
}

/* -------------------- Desktop nav -------------------- */
body.ju-body .ju-nav{
  flex:1;
  display:flex;
  justify-content:center;
  position:relative;
  z-index:10005;
}

body.ju-body .ju-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:18px;
}

body.ju-body .ju-menu>li{ position:relative; }

body.ju-body .ju-menu>li>a{
  color:var(--ju-header-text);
  text-decoration:none;
  position:relative;
  padding:8px 2px;
  line-height:1.2;
  font-weight:900;
  opacity:.92;
}
body.ju-body .ju-menu>li>a:hover{ opacity:1; }

body.ju-body .ju-menu>li>a::after{
  content:"";
  position:absolute;
  right:0; left:0;
  bottom:-7px;
  height:2.5px;
  width:0;
  background:var(--ju-accent);
  transition:width .18s ease;
}
body.ju-body .ju-menu>li>a:hover::after{ width:100%; }

/* -------------------- Header controls -------------------- */
body.ju-body .ju-header-left{
  display:flex;
  align-items:center;
  gap:10px;
}

body.ju-body .ju-ctrl{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:var(--ju-radius-10);
  background:transparent;
  cursor:pointer;
  color:var(--ju-header-text);
  font-size:18px;
}
body.ju-body .ju-ctrl:hover{
  border-color:rgba(255,181,36,.70);
  background:rgba(255,181,36,.10);
  color:#111;
}

/* ✅ Minimal CTA */
body.ju-body .ju-cta.ju-cta-min{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:var(--ju-radius-10);
  background:transparent;
  color:var(--ju-header-text);
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(0,0,0,.12);
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
body.ju-body .ju-cta.ju-cta-min:hover{
  border-color:rgba(255,181,36,.75);
  background:rgba(255,181,36,.10);
}
body.ju-body .ju-cta.ju-cta-min:active{ transform:translateY(1px); }

body.ju-body .ju-cta-ic{
  width:18px;height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
body.ju-body .ju-cta-ic svg{
  width:18px;height:18px;
  fill:var(--ju-header-text);
  display:block;
}

/* mobile only */
body.ju-body .only-mobile{ display:none; }

/* -------------------- Mega (Light) -------------------- */
body.ju-body .ju-has-mega .ju-mega{
  display:none;
  position:fixed;
  left:0; right:0;
  z-index:var(--ju-z-mega);
  background:var(--ju-mega-bg);
  border-top:3px solid var(--ju-accent);
  box-shadow:var(--ju-shadow-lg);
}

body.ju-body .ju-mega-inner{
  max-width:1200px;
  margin:0 auto;
  padding:16px 12px 18px;
}

body.ju-body .ju-mega-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

body.ju-body .ju-mega-title{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ju-mega-text);
}

body.ju-body .ju-dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--ju-accent);
  box-shadow:0 0 0 4px rgba(255,181,36,.20);
}

body.ju-body .ju-mega-sub{
  color:var(--ju-mega-muted);
  font-size:13px;
  font-weight:700;
}

body.ju-body .ju-mega-all{
  color:#111;
  background:var(--ju-accent);
  text-decoration:none;
  font-weight:900;
  padding:10px 12px;
  border-radius:var(--ju-radius-10);
  border:1px solid rgba(0,0,0,.10);
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

body.ju-body .ju-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}

body.ju-body .ju-card{
  display:block;
  text-decoration:none;
  background:var(--ju-mega-card);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--ju-radius-12);
  padding:12px 12px 10px;
  color:var(--ju-mega-text);
  min-height:118px;
  transition:transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
body.ju-body .ju-card:hover{
  transform:translateY(-2px);
  background:#fff;
  border-color:rgba(255,181,36,.55);
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}

body.ju-body .ju-card-title{
  font-weight:950;
  font-size:14px;
  line-height:1.45;
  margin-bottom:6px;
}
body.ju-body .ju-card-meta{
  font-size:12.5px;
  line-height:1.65;
  color:var(--ju-mega-muted);
}
body.ju-body .ju-card-meta b{ color:#111; font-weight:900; }

body.ju-body .ju-card-cta{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:900;
  color:#111;
}
body.ju-body .ju-card-cta::after{
  content:"←";
  font-weight:900;
  opacity:.9;
  color:var(--ju-accent);
}

body.ju-body .ju-mega-foot{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  justify-content:flex-start;
}
body.ju-body .ju-mega-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:var(--ju-radius-10);
  background:rgba(255,181,36,.12);
  color:#111;
  border:1px solid rgba(255,181,36,.45);
  text-decoration:none;
  font-weight:900;
}
body.ju-body .ju-mega-cta:hover{ background:rgba(255,181,36,.16); }

/* -------------------- Searchbar -------------------- */
body.ju-body .ju-searchbar[hidden]{ display:none; }
body.ju-body .ju-searchbar{
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
  position:relative;
  z-index:var(--ju-z-search);
}
body.ju-body .ju-searchbar form{
  max-width:1100px;
  margin:12px auto;
  padding:10px 12px;
}
body.ju-body #juSearchInput{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:var(--ju-radius-12);
  font:15px Shabnam, sans-serif;
  outline:none;
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}
body.ju-body #juSearchInput:focus{
  border-color:rgba(255,181,36,.75);
  box-shadow:0 0 0 4px rgba(255,181,36,.18);
}

/* -------------------- Overlay & Flyout (Mobile) -------------------- */
body.ju-body #juOverlay[hidden]{ display:none; }
body.ju-body .ju-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:var(--ju-z-overlay);
}

body.ju-body #juFlyout[hidden]{ display:none; }
body.ju-body .ju-flyout{
  position:fixed;
  top:0; left:0;
  height:100vh;
  width:86vw;
  max-width:420px;
  background:var(--ju-dark);
  color:#fff;
  z-index:var(--ju-z-flyout);
  display:flex;
  flex-direction:column;
  overscroll-behavior:contain;
}
@media (max-width:480px){
  body.ju-body .ju-flyout{ width:92vw; max-width:none; }
}

body.ju-body .ju-flyout-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
body.ju-body .ju-flyout-close{
  appearance:none;
  border:1px solid rgba(255,255,255,.20);
  background:transparent;
  color:#fff;
  width:36px;height:36px;
  border-radius:var(--ju-radius-10);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

body.ju-body .ju-flyout-nav{
  padding:6px 0;
  overflow:auto;
  scroll-behavior:smooth;
}
body.ju-body .ju-flyout-nav > a{
  display:block;
  color:#fff;
  text-decoration:none;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.ju-body .ju-flyout-nav > a:hover{ background:rgba(255,255,255,.06); }

/* Accordion */
body.ju-body .ju-acc{ border-top:1px solid rgba(255,255,255,.08); }
body.ju-body .ju-acc-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 16px;
  background:transparent;
  color:#fff;
  border:none;
  cursor:pointer;
  font:inherit;
  text-align:right;
  font-weight:900;
}
body.ju-body .ju-acc-toggle[aria-expanded="true"]{
  background:rgba(255,255,255,.06);
  border-right:3px solid var(--ju-accent);
}
body.ju-body .ju-acc-panel[hidden]{ display:none; }
body.ju-body .ju-acc-panel{
  background:rgba(255,255,255,.04);
  border-right:3px solid rgba(255,255,255,.06);
}
body.ju-body .ju-acc-panel a{
  padding:10px 22px;
  display:block;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.ju-body .ju-acc-panel a:hover{ background:rgba(255,255,255,.06); }

/* hide header when flyout open on mobile */
@media (max-width:992px){
  body.ju-body.ju-flyout-open .ju-header{ visibility:hidden; }
}

/* -------------------- Responsive -------------------- */
@media (max-width:1200px){
  body.ju-body .ju-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:992px){
  body.ju-body .ju-nav{ display:none !important; }
  body.ju-body .only-mobile{ display:inline-flex !important; }
  body.ju-body .ju-searchbar form{ max-width:none; margin:0; padding:10px 12px; }
  body.ju-body #juSearchInput{ border-radius:var(--ju-radius-10); box-shadow:none; }
}
@media (max-width:768px){
  body.ju-body .ju-topbar .ju-wrap{
    flex-direction:column;
    gap:8px;
    padding:10px 12px;
  }
  body.ju-body .ju-topbar-left{ display:none !important; }
  body.ju-body .ju-logo img{ max-width:118px; }
  body.ju-body .ju-header-row{ padding:12px 8px; min-height:70px; }
  body.ju-body .ju-cta.ju-cta-min{ padding:8px 10px; font-size:13px; }
}

/* -------------------- Sticky hardening -------------------- */
body.ju-body .site,
body.ju-body .site-content,
body.ju-body .site-header,
body.ju-body .inside-header,
body.ju-body .header-wrap,
body.ju-body .ju-header-parent,
body.ju-body .ju-header .ju-wrap{
  overflow:visible !important;
  contain:initial !important;
}