/* =========================================================
   CV Landing Page – FINAL PROFESSIONAL CSS (Light Academic)
   ========================================================= */

/* ================= RESET ================= */
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  width:100%;
  height:100%;
}

html{scroll-behavior:smooth}

/* ================= ROOT ================= */
:root{
  --bg:#f6faf7;
  --card:#ffffff;
  --card2:#f1f5f3;
  --text:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,.08);

  --accent:#16a34a;
  --accent2:#22c55e;
  --accent-dark:#15803d;

  --shadow:0 12px 30px rgba(2,6,23,.08);
  --r:18px;
  --pad:18px;
}

/* ================= BASE ================= */
body{
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}

/* ================= SCROLLBAR ================= */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#eef2ef}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  border-radius:10px;
}

/* ================= WRAPPER ================= */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:12px;
}

/* ================= TOPBAR ================= */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.topbar .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
}

/* ================= BRAND ================= */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
}
.brand .dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 6px rgba(22,163,74,.15);
}
.brand .t1{
  font-weight:900;
  font-size:15px;
}
.brand .t2{
  font-size:12px;
  color:var(--muted);
  margin-top:-2px;
}

/* ================= NAV ================= */
.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.nav a{
  font-size:13px;
  padding:7px 12px;
  border-radius:999px;
  color:var(--muted);
  border:1px solid transparent;
  transition:.2s ease;
}
.nav a:hover{
  background:rgba(22,163,74,.08);
  border-color:rgba(22,163,74,.25);
  color:var(--accent-dark);
}
.nav a.active{
  background:rgba(22,163,74,.12);
  border-color:rgba(22,163,74,.35);
  color:var(--accent-dark);
}

/* ================= LAYOUT ================= */
.grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:18px;
  padding:12px 0 40px;
}
@media (max-width:980px){
  .grid{grid-template-columns:1fr}
}

/* ================= CARD ================= */
.card{
  background:linear-gradient(180deg,#fff,#f7faf8);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ================= HERO ================= */
.hero{
  position:sticky;
  top:90px;
}
@media (max-width:980px){
  .hero{position:relative;top:auto}
}

/* ================= AVATAR ================= */
.avatar{
  display:grid;
  place-items:center;
  padding:18px 18px 6px;
}
.avatar img{
  width:130px;
  height:130px;
  border-radius:50%;
  border:4px solid rgba(22,163,74,.25);
  object-fit:cover;
  background:#fff;
}

/* ================= NAME ================= */
.name{
  text-align:center;
  padding:0 18px 14px;
}
.name h1{
  font-size:20px;
  font-weight:900;
  margin:6px 0;
}
.name .sub{
  font-size:13px;
  color:var(--muted);
  margin:2px 0;
}
.quote{
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(22,163,74,.08);
  border:1px solid rgba(22,163,74,.2);
  font-weight:700;
  font-size:13px;
  line-height:1.85;
}

/* ================= CONTACTS ================= */
.contacts{
  display:grid;
  gap:10px;
  padding:12px 18px 18px;
}
.rowline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card2);
}
.rowline .left{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rowline .label{
  font-size:12px;
  color:var(--muted);
}
.rowline .value{
  font-size:13px;
  font-weight:800;
}
.rowline .icons{
  display:flex;
  gap:8px;
}
.iconbtn{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(22,163,74,.3);
  background:rgba(22,163,74,.08);
  color:var(--accent-dark);
  transition:.2s ease;
}
.iconbtn:hover{
  background:var(--accent);
  color:#fff;
}

/* ================= WEBSITES ================= */
.websites{
  display:grid;
  gap:8px;
  padding:0 18px 18px;
}
.webitem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}
.webitem .domain{
  font-weight:900;
  font-size:13px;
  direction:ltr;
}

/* ================= ADDRESS ================= */
.address{
  padding:0 18px 18px;
  font-size:13px;
  color:var(--muted);
  line-height:1.85;
  text-align:center;
}

/* ================= CONTENT ================= */
.content{
  display:grid;
  gap:18px;
}
section.sec{
  scroll-margin-top:100px;
}

/* ================= SECTION HEADER ================= */
.secHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  background:linear-gradient(90deg,rgba(22,163,74,.1),#fff);
  border-bottom:1px solid var(--line);
}
.secHeader .title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}
.secHeader .title i{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(22,163,74,.15);
  border:1px solid rgba(22,163,74,.3);
  color:var(--accent);
}

/* ================= SECTION TOOLS ================= */
.secTools{
  display:flex;
  gap:8px;
}
.tool{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(22,163,74,.3);
  background:rgba(22,163,74,.08);
  color:var(--accent-dark);
  cursor:pointer;
}
.tool:hover{
  background:var(--accent);
  color:#fff;
}

/* ================= SECTION BODY ================= */
.secBody{
  padding:14px 16px;
}

/* ================= TEXT ================= */
.p{margin:0 0 10px}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(22,163,74,.08);
  border:1px solid rgba(22,163,74,.25);
  font-size:12px;
  font-weight:800;
  color:var(--accent-dark);
  margin-bottom:12px;
}

/* ================= LISTS ================= */
.list{
  display:grid;
  gap:10px;
  padding:0;
  margin:0;
}
.list li{
  list-style:none;
  position:relative;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
}
.list li::before{
  content:"";
  position:absolute;
  right:-10px;
  top:18px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 6px rgba(22,163,74,.12);
}

/* ================= MORE ================= */
.moreWrap{
  display:flex;
  justify-content:center;
  padding-top:12px;
}
.moreBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(22,163,74,.35);
  background:rgba(22,163,74,.1);
  font-weight:900;
  color:var(--accent-dark);
  cursor:pointer;
}
.moreBtn:hover{
  transform:translateY(-1px);
}

/* ================= MODAL ================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
}
.modal.open{display:flex}
.modalCard{
  width:min(920px,92vw);
  max-height:88vh;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:auto;
}
.modalHead{
  position:sticky;
  top:0;
  padding:12px 14px;
  background:#f7faf8;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.closeBtn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}
.modalBody{
  padding:14px 16px;
}

/* ================= BACK TO TOP ================= */
.fabTop{
  position:fixed;
  right:16px;
  bottom:16px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:none;
}
.fabTop.show{
  display:grid;
  place-items:center;
}

/* ================= PRINT ================= */
@media print{
  .topbar,.nav,.tool,.moreWrap,.fabTop,.modal{display:none!important}
  body{background:#fff;color:#000}
  .card{box-shadow:none}
}
/* =========================================================
   LAYOUT PATCH — FINAL FIX (REPLACE OLD PATCH)
   ========================================================= */

/* ========= 1. FIX HEADER (Never Hide) ========= */
.topbar{
  position:fixed;
  top:0;
  right:0;
  left:0;
}

/* عشان المحتوى ما يدخلش تحت الهيدر */
body{
  padding-top:64px; /* ارتفاع الهيدر الحقيقي */
}

/* توسيط الناف بار */
.topbar .row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}

.topbar .brand{
  justify-self:start;
}

.topbar .nav{
  justify-self:center;
}

/* ========= 2. REMOVE SIDE PADDING / MARGIN ========= */
.wrap{
  max-width:100%;
  padding:0;
  margin:0;
}

.grid{
  padding:0;
  margin:0;
}

/* ========= 3. SIDEBAR FIX ========= */
.hero{
  top:64px; /* تحت الهيدر مباشرة */
  max-height:calc(100vh - 64px);
  overflow-y:auto;
}

/* ========= 4. REMOVE EXTRA SPACE RIGHT / LEFT ========= */
body{
  overflow-x:hidden;
}

/* ========= 5. MOBILE RESET ========= */
@media (max-width:980px){
  body{
    padding-top:64px;
  }

  .hero{
    top:auto;
    max-height:none;
    overflow:visible;
  }
}
/* =========================================================
   HIDE HEADER ON MOBILE (FULLY)
   ========================================================= */
@media (max-width: 980px){

  .topbar{
    display: none !important;
  }

  /* إزالة المسافة اللي كانت محجوزة للهيدر */
  body{
    padding-top: 0 !important;
  }

}
/* ===== SUMMARY CUSTOM TOGGLE ===== */
#summary .summary-hidden{
  display: none;
}

#summary.open .summary-hidden{
  display: block;
}
/* =========================================================
   NESTED ACADEMIC LIST (DESKTOP + MOBILE)
   ========================================================= */

.nested-item{
  padding: 0 !important;
}

/* رأس العنصر */
.nested-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}

/* السهم */
.nested-head i{
  font-size: 14px;
  transition: transform .25s ease;
  color: var(--accent-dark);
}

/* القائمة الداخلية */
.nested-list{
  display: none;
  padding: 0 14px 14px;
}

/* عناصر القائمة الداخلية */
.nested-list li{
  margin-top: 8px;
}

/* حالة الفتح (تشتغل على كل الشاشات) */
.nested-item.open .nested-list{
  display: block;
}

.nested-item.open .nested-head i{
  transform: rotate(180deg);
}
/* ================= GALLERY ================= */
.galleryTabsWrap{
  padding:12px 16px;
  overflow-x:auto;
}
.galleryTabs{
  display:flex;
  gap:8px;
}
.galleryTabs::-webkit-scrollbar{
  height:6px;
}
.galleryTabs::-webkit-scrollbar-thumb{
  background:var(--accent);
  border-radius:10px;
}
.galTab{
  white-space:nowrap;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(22,163,74,.3);
  background:#fff;
  font-weight:800;
  cursor:pointer;
}
.galTab.active{
  background:var(--accent);
  color:#fff;
}

/* Track */
.galleryWrap{
  position:relative;
  padding:12px;
}
.galleryTrack{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-behavior:smooth;
}
.galleryTrack::-webkit-scrollbar{
  height:8px;
}
.galleryTrack::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:10px;
}

/* Item */
.galItem{
  flex:0 0 auto;
  width:180px;
  height:180px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  cursor:pointer;
}
.galItem img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.3s;
}
.galItem:hover img{
  transform:scale(1.05);
}

/* Nav */
.galNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  border:none;
  cursor:pointer;
  z-index:2;
}
.galNav.prev{ right:6px }
.galNav.next{ left:6px }

/* Viewer */
.imgViewer{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:300;
}
.imgViewer.open{
  display:flex;
}
.imgViewer img{
  max-width:90vw;
  max-height:90vh;
  border-radius:14px;
}
.ivClose{
  position:absolute;
  top:16px;
  left:16px;
  background:#fff;
  border:none;
  width:42px;
  height:42px;
  border-radius:50%;
}
.ivNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:none;
  width:44px;
  height:44px;
  border-radius:50%;
}
.ivNav.prev{ right:20px }
.ivNav.next{ left:20px }