:root{
    --header-h:72px;
    --brand-900: #3b3226; /* نسخة أغمق */
    --brand-50: #f3efe8;  /* خلفية فاتحة متوافقة */         /* الأخضر */
    --gold:#b68c2a;           /* الذهبي لزر السهم في الهيرو */
    --txt:#0e0f12;
    --muted:#6b7280;
    --ring:#e5e7eb;
    --speed:.45s;
    --hero-filter:brightness(.85) contrast(1.03);
    --panels-h:72vh;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:Tajawal,system-ui;color:var(--txt);-webkit-font-smoothing:antialiased;background:#fff}

  /* ====== Header شفاف فوق الفيديو ====== */
  .site-header{
    position:fixed; inset-block-start:0; inset-inline:0; z-index:1000;
    height:var(--header-h);
    display:flex; align-items:center; justify-content:space-between;
    padding-inline:clamp(14px,4vw,48px);
    background:transparent; transition:background .35s ease, box-shadow .35s ease;
  }
  .site-header .logo{ color:#fff; font-weight:800 }
  .site-header .nav a{ color:#fff; text-decoration:none; margin-inline:12px; font-weight:700 }
  .site-header.scrolled{ background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(0,0,0,.08) }
  .site-header.scrolled .logo, .site-header.scrolled .nav a{ color:var(--txt) }
.site-header-neo .h-logo .logo-mark{
  background: var(--brand); /* سيستخدم #4E3F2C الآن */
}
.btn-fill { background: var(--brand); border-color: var(--brand); }
.btn-outline { color: var(--brand); border-color: var(--brand); }
.of-head .underline { background: var(--brand); } /* أي عناصر accent */


  /* ====== Hero Video ====== */
  .hero{ position:relative; height:100svh; overflow:hidden }
  .hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:var(--hero-filter) }
  .hero::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(to left, rgba(0,0,0,.15), rgba(0,0,0,.55) 35%, rgba(0,0,0,.65)); pointer-events:none }
  .hero .content{ position:relative; z-index:1; height:100%;
    display:flex; align-items:center; justify-content:flex-end;
    padding-inline:clamp(16px,6vw,90px); color:#fff; text-align:right }
  .hero h1{ margin:0px 0px 0.75rem; line-height:1.15; font-weight:800; font-size:clamp(28px,5vw,64px) }
  .hero p{ margin:0 0 1.25rem; font-size:clamp(16px,1.6vw,22px); opacity:.95 }
  .btn{ display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; text-decoration:none;
    border:0; border-radius:999px; padding:.85rem 1.25rem; font-weight:800 }
  .btn .dot{ width:9px; height:9px; border-radius:50%; background:#b68c2a; }
  .scroll-down{ position:absolute; inset-inline-start:50%; transform:translateX(-50%); inset-block-end:18px; z-index:1;
    width:46px; height:46px; border-radius:10px; background:var(--gold); color:#fff; border:0; cursor:pointer;
    display:grid; place-items:center; font-size:22px; box-shadow:0 10px 24px rgba(0,0,0,.22) }

  /* ===== شريط بعد الهيرو بخلفية بيضاء + 3 أزرار ===== */
  .band {
    background:#fff;
    padding: clamp(32px,6vw,88px) clamp(16px,6vw,72px);
    position:relative;
  }
  .band .lead {
    max-width:1100px;
    margin:0 auto 28px;
    text-align:center;
    font-size:clamp(18px,2.2vw,28px);
    line-height:1.8;
    color:#111;
  }
  .band .cards {
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
  }
  .band .card-btn{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:#B49754; color:#fff; text-decoration:none;
    padding:18px 24px; border-radius:12px; font-weight:800;
    box-shadow:0 10px 24px #efe0bd;
    transition:filter .25s ease, transform .25s ease;
  }
  .band .card-btn:hover{ filter:brightness(.95); transform:translateY(-2px) }
  .band .card-btn .text{ font-size:clamp(15px,1.3vw,18px) }
  .band .card-btn .icon{
    display:inline-grid; place-items:center;
    width:38px; height:38px; border-radius:10px;
    background:rgba(255,255,255,.14);
  }
  @media (max-width: 900px){ .band .cards{ grid-template-columns:1fr } }

  /* ====== SECTION: عن البرنامج (بعد الشريط) ====== */
  .about{ position:relative; padding: clamp(28px,5vw,72px) clamp(16px,6vw,72px) }
  .about .grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:clamp(16px,3vw,48px); align-items:center }
  .about .figure{ position:relative; }
  .about .img-wrap{ position:relative; background:#eee; border-radius:0; overflow:visible; width:100%; aspect-ratio: 4/3 }
  .about img{ position:relative; width:100%; height:100%; object-fit:cover; display:block; box-shadow:0 12px 28px rgba(0,0,0,.1);border-radius: 10px; }
  .about .accent-bar{ position:absolute; inset-inline-start:15%; inset-inline-end:40%; inset-block-end:-14px; height:18px; background:#B49754; }
  .about .badge{ position:absolute; inset-inline-start:24%; inset-block-start: -22px; width:64px; height:64px; background:var(--gold); color:#fff;
    display:grid; place-items:center; border-radius:6px; font-size:22px; box-shadow:0 10px 22px rgba(0,0,0,.18) }
  .about h2{ margin:.25rem 0 1rem; font-size:clamp(22px,2.8vw,34px); color:var(--brand) }
  .about p{ margin:0 0 1rem; line-height:1.9; color:#111 }
  .about p.muted{ color:var(--muted) }
  .about strong{ font-weight:800 }
  .about .actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:1.25rem }
  .btn-primary{ background:var(--brand); color:#fff; padding:.9rem 1.25rem; border-radius:8px }
  .btn-ghost{ background:#c99c46; border:1px solid #cbd5e1; color:#111; padding:.9rem 1.25rem; border-radius:8px }
  .btn-primary:hover{ filter:brightness(.95) }
  .btn-ghost:hover{ background:#c99c46 }

  /* ====== PANELS الممتدة ====== */
  .panels-wrap{ background:#0b0d10 }
  .panels{ display:flex; height:var(--panels-h); gap:1rem; padding:clamp(12px,2vw,16px); max-width:1400px; margin-inline:auto }
  .panel{ position:relative; flex:1; border-radius:18px; overflow:hidden; cursor:pointer;
    transition:flex var(--speed) ease, transform var(--speed) ease, filter var(--speed) ease;
    isolation:isolate; transform-origin:right center }
  .panel::before{ content:""; position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; filter:brightness(.8) contrast(1.05); transform:scale(1.02) }
  .panel::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15)); z-index:-1 }
  .panel .label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; font-weight:700; padding:1rem; font-size:clamp(18px,2.2vw,28px); text-shadow:0 6px 20px rgba(0,0,0,.45) }
  .panels:hover .panel{ flex:1; filter:grayscale(.2) brightness(.85) }
  .panels:hover .panel:hover{ flex:3; filter:none; transform:scaleX(1.03) }
  .panel.p1::before{ background-image:url('../images/cover6.png') }
  .panel.p2::before{ background-image:url('../images/D5D_8828.jpg') }
  .panel.p3::before{ background-image:url('../images/850_9159.jpg') }
  .panel.p4::before{ background-image:url('../images/JAN-1960.JPG') }
  .panel.p5::before{ background-image:url('../images/5.jpg') }
  .panel.p6::before{ background-image:url('../images/6.PNG') }

  /* ===== Footer ===== */
  .footer { background:#fff; border-top:1px solid #e5e7eb; color:#111; font-size:15px; padding:18px clamp(16px,5vw,64px) }
  .footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px }
  .footer-left p { margin:0 }
  .footer-right { display:flex; align-items:center; flex-wrap:wrap; gap:10px }
  .footer-right a { color:#111; text-decoration:none; font-weight:600; transition:color .25s ease }
  .footer-right a:hover { color:#1C4033}
  .divider { color:#d1d5db; font-weight:300 }

  /* ===== Responsive ===== */
  @media (max-width:1100px){
    .about .grid{ grid-template-columns: 1fr; gap:28px }
    .about .badge{ inset-inline-start:18px; inset-block-start:-22px }
    .about .accent-bar{ inset-inline-start:12%; inset-inline-end:48% }
  }
  @media (max-width:900px){
    .panels{ flex-direction:column; height:auto }
    .panel{ height:48vh }
  }
  @media (max-width:700px){
    .footer-inner{ flex-direction:column-reverse; text-align:center; gap:8px }
    .footer-right{ justify-content:center; gap:6px }
  }
  @media (max-width:520px){
    .panel{ height:36vh }
  }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

  /* ===== أهداف المشروع ===== */
.goals{
  background:#fff;
  padding: clamp(36px,6vw,96px) clamp(16px,6vw,72px);
}
.goals .wrap{
  max-width:1200px; margin-inline:auto; text-align:center;
}
.goals h2{
  margin:0 0 clamp(22px,3.5vw,42px);
  font-size:clamp(22px,3.2vw,40px);
  color:#c99c46;   /* الذهبي للعناوين */
  font-weight:800;
}
.goals .grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap: clamp(18px,3vw,36px);
}
.goal{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  color:#111;
}
.goal .icon-ring{
  width:132px; height:132px; border-radius:50%;
  border:4px solid #c99c46; display:grid; place-items:center;
  margin-bottom:18px; background:#fff;
}
.goal .icon-ring svg{ width:58px; height:58px; }
.goal h3{
  margin:0 0 10px;
  font-size:clamp(18px,2.2vw,26px);
  font-weight:800; color:#3b3b3b;
}
.goal p{
  margin:0; line-height:1.9; color:#6b7280;
  font-size:clamp(14px,1.2vw,17px);
  max-width: 32ch;
}

/* hover لطيف */
.goal:hover .icon-ring{ box-shadow:0 10px 26px rgba(201,156,70,.25) }

/* استجابة */
@media (max-width: 900px){
  .goals .grid{ grid-template-columns:1fr; }
  .goal p{ max-width: 44ch; }
}

/* ===== قسم رؤية 2030 ===== */
.vision2030{
  position:relative;
  background:var(--gold);
  color:#fff;
  overflow:hidden;
  text-align:center;
  padding: clamp(44px,7vw,120px) clamp(16px,6vw,72px);
}
.vision2030::before{
  /* زخرفة دائرية خفيفة – يمكنك استبدالها بصورة pattern إن أردت */
  content:"";
  position:absolute; inset:-20%;
  background-image: url('images/Stroke-2-Copy.png');
  pointer-events:none;
  transform:rotate(-6deg);
}
.vision2030 .container{ position:relative; z-index:1; max-width:1200px; margin-inline:auto }
.vision2030 .lead{
  font-size: clamp(18px,2.2vw,28px);
  line-height:1.9; margin:0 auto 28px; max-width:1100px; font-weight:800;
}
.vision2030 .logo{
  margin: clamp(12px,3vw,28px) auto clamp(28px,5vw,52px);
}
.vision2030 .logo img{
  max-width: 220px; width: 40vw; height:auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,.18));
}
.vision2030 .grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(18px,3vw,36px);
  align-items:start;
}
.vision2030 .item{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.vision2030 .icon{
  width:52px; height:52px; display:grid; place-items:center;
  border-radius:12px; background:rgba(255,255,255,.12);
}
.vision2030 .icon svg{ width:28px; height:28px }
.vision2030 p{
  margin:0; line-height:1.9; font-size:clamp(15px,1.3vw,18px); max-width:32ch;
}

/* استجابة */
@media (max-width: 900px){
  .vision2030 .grid{ grid-template-columns:1fr }
  .vision2030 .logo img{ max-width:200px }
}

/* ===== اللجنة الإشرافية العليا للمشروع ===== */
.super-committee{
  background:#fff;
  padding: clamp(36px,6vw,96px) clamp(16px,6vw,72px);
}
.super-committee .wrap{max-width:1200px; margin-inline:auto; text-align:center}

.super-committee h2{
  margin:0 0 18px;
  font-size:clamp(22px,3.2vw,40px);
  color:#c99c46;            /* الذهبي */
  font-weight:800;
}
.super-committee .underline{
  width:min(220px,40%); height:2px; background:#e8cf9b; /* ذهبي فاتح */
  margin:0 auto clamp(28px,3vw,40px);
}

.person, .chair{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#333;
}
.avatar{
  width:88px; height:88px; border-radius:50%;
  border:3px solid #d1d5db; display:grid; place-items:center;
  background:#fff;
}
.avatar svg{ width:44px; height:44px; stroke:#9aa3af }

.person .name, .chair .name{
  margin:4px 0 2px; font-weight:800; color:#3b3b3b;
  font-size:clamp(16px,1.8vw,20px);
}
.person .role, .chair .role{
  margin:0; color:#6b7280; line-height:1.7;
  font-size:clamp(14px,1.2vw,16px);
}

/* رئيس اللجنة (أعلى) */
.chair{ margin-bottom: clamp(28px,4vw,44px) }
.chair .avatar{ width:96px; height:96px }
.chair .name{ font-size:clamp(18px,2vw,22px) }

/* شبكة الأعضاء */
.super-committee .grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: clamp(18px,2.8vw,32px);
}
@media (max-width: 900px){
  .super-committee .grid{ grid-template-columns:1fr }
}

/* ===== القسم الختامي ===== */
.final-banner {
  position: relative;
  background: #f8f5ef; /* خلفية فاتحة منسجمة مع الذهبي */
  background-image: url('assets/pattern-bg.png'); /* نقوش هندسية (اختيارية) */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  padding: clamp(40px,6vw,96px) clamp(16px,5vw,72px);
  color: #2b2b2b;
}

.final-banner .container {
  max-width: 1200px;
  margin-inline: auto;
}

.final-banner .logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(30px,5vw,80px);
  flex-wrap: wrap;
  margin-bottom: clamp(24px,3vw,40px);
}
.final-banner .logos img {
  max-height: 180px;
  width: auto;
}

.final-banner .content {
  max-width: 720px;
  margin-inline: auto;
}

.final-banner .intro {
  font-size: clamp(16px,2vw,20px);
  margin-bottom: 10px;
  color: #444;
}
.final-banner h3 {
  font-size: clamp(22px,2.6vw,32px);
  color: #3b3b3b;
  margin-bottom: 8px;
  font-weight: 800;
}
.final-banner .desc {
  font-size: clamp(16px,2vw,18px);
  color: #666;
  margin-bottom: 26px;
}

/* زر أخضر */
.btn-green {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1C4033;
  color: #fff;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .3s ease;
}
.btn-green:hover {
  background:rgb(186, 207, 190);
}
.btn-green svg {
  width: 20px;
  height: 20px;
}


  :root{
    --brand:#1C4033;     /* الأخضر */
    --ink:#111;
    --muted:#6b7280;
    --card:#fff;
    --ring:#e5e7eb;
  }

  .books-slider{
    background:#fff;
    padding: clamp(28px,5vw,64px) clamp(12px,5vw,48px);
  }
  .bs-head{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    margin-bottom:18px;
  }
  .books-slider h2{
    margin:0; font-weight:900; color:#1f2937;
    font-size:clamp(20px,3.2vw,36px);
  }
  .bs-arrows{ display:flex; gap:10px }
  .bs-arrow{
    width:42px; height:42px; border-radius:50%;
    border:1px solid var(--ring); background:#fff; color:#111;
    cursor:pointer; font-size:22px; line-height:1;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    transition:transform .2s ease, background .2s ease;
  }
  .bs-arrow:hover{ transform:translateY(-2px); background:#f8fafc }

  /* viewport + track */
  .bs-viewport{ overflow:hidden }
  .bs-track{
    display:flex; gap:clamp(12px,2.2vw,22px);
    overflow-x:auto; scroll-behavior:smooth;
    scroll-snap-type:x mandatory; padding-block:6px;
  }
  .bs-track::-webkit-scrollbar{ height:8px }
  .bs-track::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:20px }

  /* book card */
  .book{
    scroll-snap-align:start;
    background:var(--card); border:1px solid var(--ring);
    border-radius:14px; overflow:hidden; width: clamp(220px, 23vw, 280px);
    flex:0 0 auto; box-shadow:0 10px 22px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .book:hover{ transform: translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.12) }

  .book .cover{ display:block; aspect-ratio: 3/4; overflow:hidden; background:#f3f4f6 }
  .book .cover img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease }
  .book:hover .cover img{ transform: scale(1.04) }

  .book .meta{ padding:12px 14px 16px }
  .book .title{ margin:0 0 8px; font-size:clamp(14px,1.3vw,18px); line-height:1.5 }
  .book .title a{ color:var(--ink); text-decoration:none }
  .book .title a:hover{ text-decoration:underline }

  .price-line{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap }
  .price{ font-weight:900; color:#111 }
  .vat{ color:var(--muted); font-size:.9em }

  .btn-more{
    display:inline-flex; justify-content:center; align-items:center;
    width:100%; border-radius:10px; padding:.65rem .9rem;
    background:var(--brand); color:#fff; text-decoration:none; font-weight:800;
    transition: filter .2s ease;
  }
  .btn-more:hover{ filter:brightness(.95) }

  /* استجابة */
  @media (max-width: 640px){
    .book{ width: 72vw }
  }

  /* ألوان عامة */
  :root{
    --brand:#1C4033;      /* الأخضر المستخدم بالموقع */
    --gold:#B49754;       /* الذهبي */
    --ink:#0e0f12;
    --muted:#6b7280;
    --ring:#e5e7eb;
    --card:#fff;
  }

  /* نفس ترويسة قسم اللجنة السابقة */
  .super-committee.modern{ background:#fff; }
  .super-committee.modern .wrap{ max-width:1200px; margin-inline:auto; text-align:center; padding-inline:clamp(16px,6vw,72px) }
  .super-committee.modern h2{
    margin:0 0 18px; font-size:clamp(22px,3.2vw,40px); color:var(--gold); font-weight:800;
  }
  .super-committee.modern .underline{
    width:min(220px,40%); height:2px; background:#e8cf9b; margin:0 auto clamp(22px,3vw,36px);
  }

  /* شبكة البطاقات */
  .members-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:clamp(14px,2.4vw,22px);
  }

  /* البطاقة */
  .member-card{
    position:relative;
    background:var(--card);
    border:1px solid var(--ring);
    border-radius:16px;
    padding:18px 18px 20px;
    box-shadow:0 10px 22px rgba(0,0,0,.06);
    display:flex; flex-direction:column; align-items:center; text-align:center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .member-card:hover{
    transform: translateY(-4px);
    box-shadow:0 16px 32px rgba(0,0,0,.12);
    border-color:#d8dbe2;
  }

  /* صورة/أفاتار مع هالة ذهبية بسيطة */
  .member-card .avatar{
    width:96px; height:96px; border-radius:50%; margin-bottom:12px;
    background:
      radial-gradient(#fff 64%, transparent 65%) padding-box,
      conic-gradient(from 0deg, rgba(201,156,70,.0), rgba(201,156,70,.55), rgba(201,156,70,.0)) border-box;
    border:3px solid transparent;
    color:#9aa3af;           /* لون SVG الافتراضي */
    display:grid; place-items:center;
    overflow:hidden;
  }
  .member-card .avatar img{ width:126%; height:100%; object-fit:cover; display:block }

  /* معلومات */
  .member-card .info{ max-width:36ch }
  .member-card .name{
    margin:.25rem 0 .3rem; font-weight:900; color:#1f2937;
    font-size:clamp(16px,1.8vw,20px);
  }
  .member-card .role{
    margin:0 0 .25rem; color:var(--muted); line-height:1.9;
    font-size:clamp(14px,1.2vw,16px);
  }

  /* شارة الدور */
  .member-card .chip{
    display:inline-block; margin-bottom:.5rem;
    background:rgba(12,143,115,.09); color:var(--brand);
    border:1px solid rgba(12,143,115,.22);
    font-weight:800; font-size:.85rem;
    padding:.25rem .55rem; border-radius:999px;
  }

  /* بطاقة رئيس اللجنة (أكبر قليلاً وتمتد بعرض صف) */
  .member-card.featured{
    padding:22px 22px 24px;
    grid-column: 1 / -1;             /* تمدد على عرض الشبكة */
  }
  .member-card.featured .avatar{ width:110px; height:110px }
  .member-card.featured .name{ font-size:clamp(18px,2.2vw,24px) }
  .member-card.featured .info{ max-width:60ch }

  :root{
    --brand:#1C4033;  /* الأخضر */
    --ink:#0e0f12;
    --muted:#6b7280;
    --ring:#e5e7eb;
  }

  /* ===== Base header ===== */
  .site-header{
    position:fixed; inset-inline:0; inset-block-start:0; z-index:1000;
    height:145px; display:flex; align-items:center; justify-content:space-between;
    padding-inline:clamp(14px,4vw,48px);
    background:transparent; transition:background .3s, box-shadow .3s;
  }
  .site-header.scrolled{
    background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.08);
  }

  @media (max-width: 1100px) {
  /* الهيدر فوق الدرج */
  header.site-header#siteHeader {
    z-index: 1003 !important;
  }

  /* عند فتح الدرج: تحويل الشعار ليكون فوق الدرج */
  header.site-header#siteHeader.drawer-active .logo {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    z-index: 1004 !important;
  }
}

  /* Desktop nav */
  .nav-desktop{ display:flex; align-items:center; gap:18px }
  .nav-desktop a{
    text-decoration:none; color:#fff; font-weight:700; padding:10px 6px;
  }
  .site-header.scrolled .nav-desktop a{ color:var(--ink) }

  .btn-ghost{
    border:1px solid #ffffff55; color:#fff; padding:.45rem .8rem; border-radius:8px; text-decoration:none;
  }
  .site-header.scrolled .btn-ghost{ border-color:var(--ring); color:var(--ink) }
  .sm-hidden{ display:inline-flex }

  /* Burger */
  .burger{
    width:44px; height:44px; border-radius:10px; border:1px solid #ffffff55;
    background:transparent; display:none; align-items:center; justify-content:center; gap:5px;
  }
  .burger .bar{ width:20px; height:2px; background:#fff; display:block; transition:transform .25s, opacity .2s }
  .site-header.scrolled .burger{ border-color:var(--ring) }
  .site-header.scrolled .burger .bar{ background:var(--ink) }

  /* ===== Responsive — إخفاء القائمة وإظهار الهامبرغر ===== */
  @media (max-width: 1100px){
    .nav-desktop{ display:none }
    .burger{ display:flex }
  }

  /* Improve contrast for transparent header over video */
  .site-header:not(.scrolled) .btn-ghost{ border-color:#ffffff55 }

  .contact-section{
   /* الخلفية: الصورة المرفقة */
  background:
    url("contact-bg.png") center/cover no-repeat #fff; /* لون احتياطي أسود مزرق */
  overflow: hidden;
  padding: clamp(36px,6vw,96px) clamp(16px,6vw,72px);
  border-top:1px solid var(--ring);
}
.contact-wrap{ max-width:1100px; margin-inline:auto }

.contact-head{ text-align:center; margin-bottom:26px }
.contact-head h2{
  margin:0 0 8px; font-size:clamp(22px,3.2vw,36px); font-weight:800; color:var(--brand);
}
.contact-head p{ margin:0; color:#61656c }

.contact-form .hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none }

.contact-form .grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap: clamp(12px,2.4vw,20px);
}
.contact-form .field{ display:flex; flex-direction:column; gap:8px }
.contact-form .field-wide{ grid-column:1/-1 }

.contact-form label{ font-weight:800; color:#0e0f12 }
.contact-form .req{ color:#d13; margin-inline-start:2px }

.contact-form input,
.contact-form select,
.contact-form textarea{
  border:1px solid var(--ring); border-radius:10px; outline:0;
  padding:12px 14px; font-family:inherit; font-size:16px;
  background:#fff; color:#0e0f12;
  transition:border-color .2s, box-shadow .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:#c9b07a; /* ذهبي هادئ */
  box-shadow:0 0 0 3px rgba(180,151,84,.18);
}

.contact-form .actions{
  display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap;
}
.btn-send{
  background:var(--gold); color:#fff; border:0; cursor:pointer;
  padding:.9rem 1.25rem; border-radius:10px; font-weight:800;
  transition:filter .2s, transform .1s;
}
.btn-send:hover{ filter:brightness(.95) }
.btn-send:active{ transform:translateY(1px) }

.form-note{ color:#2e7d32; font-weight:700; min-height:1.2em }
.form-note.error{ color:#c62828 }

@media (max-width:900px){
  .contact-form .grid{ grid-template-columns:1fr }
}

/* ===== محاور الملتقى ===== */
.tracks-section{
  padding: clamp(28px,5vw,64px) clamp(16px,6vw,72px);
  background:#fff;
}
.tracks-head h2{
  margin:0 0 16px;
  font-weight:900;
  font-size:clamp(22px,3.2vw,40px);
  color:#0e0f12;
}

/* صندوق كبير ناعم */
.tracks-box{
  background:#fbfbf7;
  border:1px solid var(--ring);
  border-radius:20px;
  padding: clamp(16px,3.2vw,28px);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* عمودان */
.tracks-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(18px,3vw,28px);
}
@media (max-width: 980px){
  .tracks-grid{ grid-template-columns: 1fr; }
}

.track-col{ background:#fff !important; display:flex; flex-direction:column; gap: clamp(16px,2.4vw,22px) }

/* مجموعة داخل العمود */
.track-group{
  background:#fff;
  border:1px solid #ececec;
  border-radius:16px;
  padding: clamp(14px,2.4vw,18px);
}

/* عنوان ووصف */
.track-title{
  margin:0 0 8px;
  font-size: clamp(18px,2.2vw,26px);
  color:#000000;
  font-weight:800;
  line-height:1.5;
}
.track-title span{ color:#B49754 }
.track-sub{
  margin:0 0 10px; color:#000000; line-height:1.8; font-size:clamp(14px,1.2vw,16px)
}

/* قائمة العناصر */
.track-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px }
.track-item{
  display:flex; align-items:center; gap:12px;
  background:#fbfbfb;
  border:1px solid #eee;
  border-radius:14px;
  padding:14px 16px;
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.track-item:hover{
  background:#B49754;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
  transform: translateY(-1px);
}

/* أيقونة على اليمين (لأن الاتجاه RTL) */
.ti-icon{
  width:36px; height:36px; min-width:36px;
  display:grid; place-items:center;
  border-radius:10px;
  color:#1f2937;
  background:#f2efe7;            /* لمسة ذهبية فاتحة */
  border:1px solid #eadfc7;
}
.ti-text{ color:#0e0f12; font-weight:600; line-height:1.7 }

/* تركيز بلوحة المفاتيح */
.track-item:focus-within{
  outline: 3px solid rgba(180,151,84,.35);
  outline-offset: 2px;
}

/* دعم الوضع الداكن الخفيف عند الحاجة */
@media (prefers-color-scheme: dark){
  .tracks-box{ background:#fff; border-color:#1f2430 }
  .track-group{ background:#0c0f14; border-color:#1b2530 }
  .track-item{ background:#0e1319; border-color:#ffffff }
  .ti-text{ color:#e5e7eb }
  .track-title{ color:#000000 }
  .track-sub{ color:#000000}
  .ti-icon{ background:#1b2330; border-color:#1f2a3a; color:#d9c089 }
}
@keyframes float {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
}

/* ===== القيم والمكتسبات (أبيض + إطار ذهبي) ===== */
.values-benefits{
  padding: clamp(32px,5vw,72px) clamp(16px,6vw,72px);
  background:#fff;
}
.values-benefits .vb-head{
  display: flex;
  justify-content: center;  /* يجعل العنوان في المنتصف */
  margin-bottom: clamp(18px,3vw,28px);
  text-align: center;
}

.values-benefits h2{
  margin:0;
  font-weight:900;
  font-size:clamp(22px,3.2vw,40px);
  color:#0e0f12;
}

.values-benefits .vb-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px,2.2vw,24px);
}

/* البطاقة */
.values-benefits .vb-card{
  grid-column: span 4;            /* 3 أعمدة على الديسكتوب */
  background:#fff;
  border:1px solid rgba(180,151,84,.35); /* ذهبي رقيق */
  border-radius:18px;
  padding: clamp(18px,2.6vw,28px);
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
  text-align:center;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.values-benefits .vb-card:hover{
  border-color:#B49754;           /* يقوى الذهبي عند الهوفر */
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.07);
}

/* الأيقونة + العنوان + النص */
.values-benefits .vb-icon{
  width:64px; height:64px;
  margin: 0 auto 12px;
  display:grid; place-items:center;
  border-radius:16px;
  background: #fff;
  border: 1px solid rgba(180,151,84,.35);
}
.values-benefits .vb-icon svg{
  width:34px; height:34px;
}

.values-benefits h3{
  margin:.4rem 0 .35rem;
  font-weight:800;
  font-size:clamp(18px,2vw,22px);
  color:#1b1b1b; /* نص داكن واضح */
}
.values-benefits p{
  margin:0;
  color:#4b5563;
  line-height:1.9;
  font-size:clamp(14px,1.2vw,16px);
}

/* تجاوب */
@media (max-width: 1100px){
  .values-benefits .vb-card{ grid-column: span 6; } /* عمودين */
}
@media (max-width: 640px){
  .values-benefits .vb-card{ grid-column: span 12; } /* عمود واحد */
}

.timeline-sec{
  background:#f9f8f4; /* خلفية خفيفة جدًا */
  padding: clamp(24px,4vw,48px) clamp(16px,5vw,56px);
}

.ts-wrap{ max-width:1200px; margin-inline:auto; }

.ts-head{ margin: 0 0 18px; }
.ts-head h2{
  margin:0;
  color:var(--ink);
  font-weight:900;
  font-size: clamp(22px,3.2vw,38px);
}
.ts-head-underline{
  display:block; width:96px; height:4px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),#9B803F);
  margin-top:10px;
}

/* شبكة العمودين */
.ts-grid{
  display:grid; grid-template-columns: 1fr 1.2fr; gap: clamp(14px,2.5vw,24px);
}

/* بطاقة الدعوة */
.cta-card{
  position:relative; display:grid; grid-template-columns: 1.2fr .9fr; gap:16px;
  background:var(--card); border:1px solid var(--ring);
  border-radius:18px; box-shadow:var(--shadow);
  padding: clamp(16px,2.5vw,24px);
}
.cta-title{ margin:0 0 8px; font-size: clamp(20px,2.6vw,30px); color:var(--ink); font-weight:900 }
.cta-text{ margin:0 0 16px; color:#333; line-height:1.9 }
.cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--gold); color:#fff; text-decoration:none;
  border-radius:999px; padding:.9rem 1.4rem; font-weight:800;
  box-shadow:0 10px 22px rgba(180,151,84,.3);
  transition:filter .2s ease, transform .2s ease;
}
.cta-btn:hover{ filter:brightness(.95); transform:translateY(-2px) }
.cta-brand{ display:grid; place-items:center }
.cta-emblem{ width:min(180px,32vw); height:auto; border-radius:10px; }

/* قائمة الزمن */
.timeline-list{ display:flex; flex-direction:column; gap:14px }
.t-item{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--card); border:1px solid var(--ring);
  border-radius:14px; box-shadow:var(--shadow);
  padding:14px 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.t-item:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 32px rgba(0,0,0,.12);
  border-color:#d9c9a0;
}

.t-icon{
  flex:0 0 40px; width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(145deg, #fff 0%, #fff 40%, rgba(180,151,84,.12) 100%);
  color:var(--gold);
  border:1px solid var(--ring);
}
.t-content{ flex:1 1 auto }
.t-title{ margin:0 0 4px; color:var(--ink); font-weight:800; font-size: clamp(15px,1.8vw,18px) }
.t-sub{ margin:0; color:#4b5563; font-size: clamp(13px,1.6vw,15px) }

/* استجابة */
@media (max-width: 980px){
  .ts-grid{ grid-template-columns: 1fr; }
  .cta-card{ grid-template-columns: 1fr; text-align:center }
  .cta-brand{ order:-1 }
  .cta-emblem{ width:min(220px,50vw) }
}

/* إعدادات عامة */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* قسم الموسوعة */
.encyclopedia-sections {
    width: 100%;
    padding: 60px 20px;
    background-color: #f8f8f8;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* قسم العنوان الرئيسي */
.header-section {
    text-align: center;
    margin-bottom: 60px;
}

.main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #8B7355;
    margin-bottom: 20px;
    line-height: 1.4;
    letter-spacing: 1px;
}

.main-description {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
}

/* شبكة البطاقات */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* بطاقة المعلومات */
.info-card {
    background: #ffffff;
    border: 1px solid #e0d5c7;
    border-radius: 20px;
    padding: 40px 35px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: #C89858;
}

/* أيقونة البطاقة */
.card-icon {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-icon svg {
    filter: drop-shadow(0 2px 4px rgba(200, 152, 88, 0.3));
}

/* عنوان البطاقة */
.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #8B7355;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* وصف البطاقة */
.card-description {
    font-size: 1rem;
    color: #555;
    line-height: 1.9;
    text-align: justify;
}

/* الشريط الزخرفي السفلي */
.decorative-footer {
    width: 100%;
    margin-top: 50px;
    overflow: hidden;
    border-radius: 10px;
}

.pattern-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* تصميم متجاوب للشاشات المتوسطة */
@media (max-width: 1024px) {
    .main-title {
        font-size: 2.2rem;
    }
    
    .main-description {
        font-size: 1rem;
    }
    
    .cards-grid {
        gap: 25px;
    }
    
    .info-card {
        padding: 35px 30px;
    }
    
    .card-title {
        font-size: 1.3rem;
    }
    
    .card-description {
        font-size: 0.95rem;
    }
}

/* تصميم متجاوب للأجهزة اللوحية */
@media (max-width: 768px) {
    .encyclopedia-sections {
        padding: 40px 15px;
    }
    
    .header-section {
        margin-bottom: 40px;
    }
    
    .main-title {
        font-size: 1.8rem;
    }
    
    .main-description {
        font-size: 0.95rem;
    }
    
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .info-card {
        padding: 30px 25px;
    }
    
    .card-icon svg {
        width: 50px;
        height: 50px;
    }
    
    .card-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .card-description {
        font-size: 0.9rem;
        line-height: 1.8;
    }
}

/* تصميم متجاوب للهواتف */
@media (max-width: 480px) {
    .encyclopedia-sections {
        padding: 30px 10px;
    }
    
    .main-title {
        font-size: 1.5rem;
    }
    
    .main-description {
        font-size: 0.9rem;
    }
    
    .info-card {
        padding: 25px 20px;
        border-radius: 15px;
    }
    
    .card-icon svg {
        width: 45px;
        height: 45px;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-description {
        font-size: 0.85rem;
    }
    
    .decorative-footer {
        margin-top: 30px;
    }
}

/* تحسينات إضافية للطباعة */
@media print {
    .encyclopedia-sections {
        padding: 20px;
    }
    
    .info-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}




/* =============================================================
   ✦ قائمة الجوال الاحترافية — Mobile Navigation Drawer
   ✦ الألوان: ذهبي #B49754 | أبيض | شفاف
   ✦ الاتجاه: RTL | الدرج يظهر من اليسار
   ============================================================= */

/* ---- إعادة ضبط الهيدر ليكون Flexbox صحيح ---- */
.site-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ---- قائمة سطح المكتب ---- */
.nav-desktop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.nav-desktop a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 6px;
  transition: color .25s, background .25s;
  white-space: nowrap;
  font-size: clamp(12px, 1vw, 14px);
}

.site-header.scrolled .nav-desktop a {
  color: #0e0f12;
}

.nav-desktop a:hover {
  background: rgba(255, 255, 255, .12);
}

.site-header.scrolled .nav-desktop a:hover {
  background: rgba(0, 0, 0, .06);
}

/* ---- زر الهامبرغر ---- */
.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .25s, background .25s;
  z-index: 1002;
  padding: 0;
}

.burger .bar {
  width: 22px;
  height: 2px;
  background: #fff;
  display: block;
  border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease, width .2s ease;
  transform-origin: center;
}

.site-header.scrolled .burger {
  border-color: #e5e7eb;
}

.site-header.scrolled .burger .bar {
  background: #0e0f12;
}

/* تحويل الهامبرغر إلى X عند الفتح */
.burger.is-open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.is-open .bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.burger.is-open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- الدرج الجانبي (يظهر من اليسار) ---- */
.mobile-drawer {
  inset: unset !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 1001 !important;
  width: min(92vw, 340px) !important;
  background: #B49754 !important;
  color: #fff !important;
  transform: translateX(-110%) !important;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  box-shadow: 6px 0 40px rgba(0, 0, 0, .35) !important;
}

.mobile-drawer[aria-hidden="false"] {
  transform: translateX(0%) !important;
}

/* ---- رأس الدرج ---- */
.drawer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 20px 20px !important;
  background: transparent !important;
  border-bottom: none !important;
  flex-shrink: 0 !important;
}

.drawer-logo {
  height: 48px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* زر الإغلاق */
.close-drawer {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(255, 255, 255, .45) !important;
  background: transparent !important;
  color: #fff !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  transition: background .2s, border-color .2s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

.close-drawer:hover {
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .7) !important;
}

/* ---- روابط التنقل داخل الدرج ---- */
.drawer-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  flex: 1 !important;
  padding: 10px 14px !important;
  overflow-y: auto !important;
}

.drawer-nav a {
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 13px 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 15px !important;
  border-radius: 8px !important;
  transition: background .2s, padding-right .2s !important;
  line-height: 1.4 !important;
}

.drawer-nav a:last-child {
  border-bottom: none !important;
}

.drawer-nav a:hover,
.drawer-nav a:focus-visible {
  background: rgba(255, 255, 255, .14) !important;
  padding-right: 18px !important;
  outline: none !important;
}

/* أيقونة الرابط */
.drawer-nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .18) !important;
  flex-shrink: 0 !important;
  transition: background .2s !important;
}

.drawer-nav a:hover .drawer-nav-icon {
  background: rgba(255, 255, 255, .3) !important;
}

/* ---- أزرار أسفل الدرج ---- */
.drawer-actions {
  margin-top: auto !important;
  display: flex !important;
  gap: 10px !important;
  padding: 16px 14px !important;
  border-top: 1px solid rgba(255, 255, 255, .18) !important;
  flex-shrink: 0 !important;
}

.btn-drawer-primary {
  flex: 1 1 auto;
  background: #fff;
  color: #8B6914;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  padding: .75rem 1rem;
  font-weight: 800;
  font-size: 14px;
  transition: filter .2s, transform .15s;
  border: 2px solid transparent;
}

.btn-drawer-primary:hover {
  filter: brightness(.95);
  transform: translateY(-1px);
}

.btn-drawer-outline {
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .75);
  color: #fff;
  border-radius: 8px;
  padding: .75rem 1.2rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  transition: background .2s, border-color .2s, transform .15s;
  text-align: center;
}

.btn-drawer-outline:hover {
  background: rgba(255, 255, 255, .15);
  border-color: #fff;
  transform: translateY(-1px);
}

/* للتوافق مع الأكواد القديمة */
.btn-white {
  flex: 1 1 auto;
  background: #fff;
  color: #8B6914;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  padding: .75rem 1rem;
  font-weight: 800;
  font-size: 14px;
  transition: filter .2s;
}
.btn-white:hover { filter: brightness(.95); }

.btn-outline {
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .75);
  color: #fff;
  border-radius: 8px;
  padding: .75rem 1rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  transition: background .2s;
}
.btn-outline:hover { background: rgba(255, 255, 255, .15); }

/* ---- الخلفية المعتمة (Scrim) ---- */
.drawer-scrim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: rgba(0, 0, 0, .5) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .32s ease !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.drawer-scrim.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ---- منع تمرير الصفحة عند فتح القائمة ---- */
body.drawer-open {
  overflow: hidden !important;
}

/* ============================================================
   ✦ نقاط الكسر (Responsive Breakpoints)
   ============================================================ */

/* سطح المكتب الكبير: القائمة ظاهرة، الهامبرغر مخفي */
@media (min-width: 1101px) {
  .burger {
    display: none !important;
  }
  .nav-desktop {
    display: flex !important;
  }
}

/* الجوال والتابلت: الهامبرغر ظاهر، القائمة مخفية */
@media (max-width: 1100px) {
  .nav-desktop {
    display: none !important;
  }
  .burger {
    display: flex !important;
  }

  /* إخفاء القائمة القديمة إن وُجدت */
  .site-header .nav:not(.nav-desktop):not(.drawer-nav) {
    display: none !important;
  }

  /* الهيدر: شعار على اليمين + هامبرغر على اليسار */
  .site-header {
    flex-direction: row !important;
    justify-content: space-between !important;
    height: 80px !important;
    padding-inline: clamp(14px, 4vw, 32px) !important;
  }

  /* الشعار على اليمين دائماً على الجوال */
  .site-header .logo {
    display: inline-flex !important;
    order: 2 !important;
    margin-inline-start: auto !important;
    flex-shrink: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }

  /* حجم صورة الشعار على الجوال */
  .site-header .logo-img {
    height: 52px !important;
    width: auto !important;
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* الشعار الأبيض فوق الهيرو، الذهبي بعد التمرير */
  .site-header .logo-light { opacity: 1 !important; }
  .site-header .logo-dark  { opacity: 0 !important; }
  .site-header.scrolled .logo-light { opacity: 0 !important; }
  .site-header.scrolled .logo-dark  { opacity: 1 !important; }

  /* زر الهامبرغر على اليسار */
  .site-header .burger {
    order: 1 !important;
    margin-inline-start: 0 !important;
  }
}

/* الجوال المتوسط */
@media (max-width: 768px) {
  .site-header {
    height: 72px !important;
  }

  .site-header .logo-img {
    height: 52px !important;
  }
}

/* ===== حجم الشعار على سطح المكتب ===== */
@media (min-width: 1101px) {
  .site-header .logo-img {
    height: 90px !important;
    width: auto !important;
    max-width: 180px !important;
  }
}

/* الجوال الصغير: الدرج يمتد للعرض الكامل */
@media (max-width: 480px) {
  .mobile-drawer {
    width: 100vw !important;
  }
}

/* أصغر الجوالات */
@media (max-width: 360px) {
  .drawer-nav a {
    font-size: 14px !important;
    padding: 11px 10px !important;
  }
  .drawer-actions {
    flex-direction: column !important;
  }
}

/* ============================================================
   ✦ الهامبرغر دائماً فوق الدرج للتحكم في الفتح والإغلاق
   ============================================================ */
body.drawer-open #burgerBtn,
body.drawer-open .burger {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 1005 !important;
  position: relative !important;
}

/* ============================================================
   ✦ حجم الشعار على سطح المكتب
   ============================================================ */
.site-header .logo-img {
  height: 95px;
  width: auto;
  max-width: 200px;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .site-header .logo-img {
    height: 52px !important;
    max-width: 140px !important;
  }
}

@media (max-width: 480px) {
  .site-header .logo-img {
    height: 44px !important;
    max-width: 120px !important;
  }
}