/* ==========================================================
   Jatav History — Header & Subheader Design
   File: css/nav-style.css
   Link this AFTER header.css / components.css in header.php
   ========================================================== */

:root{
  --navy:#0F2A5C;
  --navy-deep:#0A1D42;
  --blue:#1D5FE0;
  --blue-bright:#3B82F6;
  --blue-pale:#EDF3FE;
  --blue-line:#DCE6F9;
  --ink:#111827;
  --muted:#5B6472;
  --white:#FFFFFF;
  --header-h:76px;
}

*{ box-sizing:border-box; }

/* ---------- MAIN HEADER ---------- */
header{
  position:sticky; top:0; z-index:1000;
  background:var(--white);
  border-bottom:1px solid var(--blue-line);
  box-shadow:0 2px 12px rgba(15,42,92,0.06);
}
header::before{
  content:'';
  display:block; height:3px; width:100%;
  background:linear-gradient(90deg,var(--navy-deep),var(--blue),var(--blue-bright),var(--blue),var(--navy-deep));
  background-size:200% 100%;
  animation:navShimmer 7s linear infinite;
}
@keyframes navShimmer{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}

.header-container{
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
  gap:20px;
}

.logo img{
  height:52px; width:auto; display:block;
  transition:transform .25s ease;
}
.logo a:hover img{ transform:scale(1.03); }

.navbar{ display:flex; align-items:center; gap:18px; }

.nav-list{
  list-style:none; display:flex; align-items:center; gap:4px;
  margin:0; padding:0;
}

.nav-list > li{ position:relative; }

.nav-list > li > a{
  display:flex; align-items:center; gap:6px;
  text-decoration:none;
  color:#2A3450;
  font-family:'Open Sans',sans-serif;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.3px;
  padding:10px 14px;
  border-radius:8px;
  position:relative;
  transition:color .22s ease, background .22s ease;
  white-space:nowrap;
}
.nav-list > li > a::after{
  content:'';
  position:absolute; left:14px; right:14px; bottom:6px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--navy),var(--blue-bright));
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav-list > li > a:hover{
  color:var(--blue);
  background:var(--blue-pale);
}
.nav-list > li > a:hover::after{ transform:scaleX(1); }

.nav-list > li:first-child > a{
  padding:10px 12px;
  font-size:15px;
}
.nav-list > li:first-child > a::after{ display:none; }

/* Language dropdown */
.language-dropdown{ margin-left:6px; }
.dropbtn{
  cursor:pointer; border:none;
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  font-family:'Open Sans',sans-serif; font-weight:700; font-size:13px;
  padding:10px 16px; border-radius:999px;
  box-shadow:0 4px 12px rgba(15,42,92,0.22);
  transition:transform .2s ease, box-shadow .2s ease;
}
.dropbtn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,42,92,0.32); }

.language-dropdown{ position:relative; }
.dropdown-content{
  position:absolute; top:calc(100% + 10px); right:0;
  background:#fff; min-width:150px;
  border-radius:12px; border:1px solid var(--blue-line);
  box-shadow:0 16px 40px rgba(15,42,92,0.18);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:50;
}
.language-dropdown:hover .dropdown-content,
.language-dropdown.open .dropdown-content{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-content a{
  display:block; padding:9px 12px; border-radius:8px;
  color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:600;
  transition:background .18s ease, color .18s ease;
}
.dropdown-content a:hover{ background:var(--blue-pale); color:var(--blue); }

/* Hamburger */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; cursor:pointer;
}
.menu-toggle .bar{
  width:100%; height:2.5px; border-radius:2px;
  background:var(--navy);
  transition:transform .3s ease, opacity .3s ease;
}
.menu-toggle.active .bar:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.menu-toggle.active .bar:nth-child(2){ opacity:0; }
.menu-toggle.active .bar:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------- SUBHEADERS (shared: subheader.php + subheaderdalit.php) ---------- */
.sub-header{
  position:sticky; top:var(--header-h); z-index:900;
  background:#fff;
  border-bottom:1px solid var(--blue-line);
  box-shadow:0 4px 12px rgba(15,42,92,0.04);
}
.sub-header-inner{
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; gap:10px;
  padding:10px 20px;
  position:relative;
}
.scroll-btn{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--navy),var(--blue-bright));
  color:#fff; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(29,95,224,0.28);
  transition:transform .18s ease;
}
.scroll-btn:hover{ transform:scale(1.08); }
.scroll-btn:active{ transform:scale(.94); }

.sub-nav{
  display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth;
  flex:1; padding:2px 2px;
  scrollbar-width:none;
}
.sub-nav::-webkit-scrollbar{ display:none; }

.sub-nav a{
  display:flex; align-items:center; gap:7px; flex-shrink:0;
  padding:8px 15px; border-radius:999px;
  background:var(--blue-pale); color:#33405C;
  text-decoration:none; font-weight:600; font-size:13px;
  border:1px solid transparent;
  font-family:'Open Sans',sans-serif;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.sub-nav a i, .sub-nav a svg{
  font-size:12px; color:var(--blue);
  transition:transform .2s ease, color .2s ease;
}
.sub-nav a:hover{
  background:#fff; border-color:var(--blue);
  color:var(--navy); transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(29,95,224,0.16);
}
.sub-nav a:hover i{ transform:scale(1.15) rotate(-6deg); }
.sub-nav a.active{
  background:linear-gradient(135deg,var(--navy),var(--blue-bright));
  color:#fff; box-shadow:0 6px 16px rgba(29,95,224,0.28);
}
.sub-nav a.active i{ color:#fff; }

/* subheaderdalit's Home link keeps just an icon, no padding waste */
.sub-nav a[href="./index"]{ padding:8px 13px; }

/* ---------- MOBILE ---------- */
@media (max-width:960px){
  .navbar{ position:relative; }
  .nav-list{
    position:fixed; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; padding:14px 18px 22px;
    box-shadow:0 16px 30px rgba(15,42,92,0.14);
    border-top:1px solid var(--blue-line);
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:transform .25s ease, opacity .25s ease, visibility .25s;
  }
  .nav-list.open{
    transform:translateY(0); opacity:1; visibility:visible;
  }
  .nav-list > li{ width:100%; }
  .nav-list > li > a{
    width:100%; padding:13px 10px; border-radius:8px;
    justify-content:flex-start;
  }
  .nav-list > li > a::after{ display:none; }
  .language-dropdown{ margin-left:0; margin-top:6px; }
  .dropbtn{ width:100%; justify-content:center; }
  .dropdown-content{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; margin-top:6px; padding:0; display:none;
  }
  .language-dropdown.open .dropdown-content{ display:block; }

  .menu-toggle{ display:flex; }

  .logo img{ height:42px; }
  .header-container{ padding:10px 16px; }
  .sub-header-inner{ padding:8px 12px; }
}