/* === Clean layout with fixed header/footer + consistent left-aligned menu (all devices) === */
:root{
  --brand: #0ea5e9;         /* primary */
  --brand-accent: #0284c7;
  --left-tint: #e0f2fe;     /* header split (left) */
  --right-tint: #eef2ff;    /* header split (right) */
  --nav-max: 1200px;        /* header content max width */
  --nav-pad: 16px;          /* equal side gap for header/menu */
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a;background:#f8fafc}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}

/* ===== Fixed header/footer with animated two-color split ===== */
header.site-header, footer.site-footer{position:fixed;left:0;right:0;background:#fff;z-index:1000}
@keyframes splitShift{
  0%{background-position:0% 50%} 50%{background-position:50% 50%} 100%{background-position:100% 50%}
}
header.site-header{
  top:0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.96) 0%,
      var(--left-tint) 35%,
      var(--left-tint) 49%,
      rgba(255,255,255,0.96) 51%,
      var(--right-tint) 65%,
      var(--right-tint) 100%);
  background-size:200% 100%;
  animation:splitShift 16s ease-in-out infinite alternate;
  box-shadow:0 6px 20px rgba(2,6,23,.08);
  border-bottom:1px solid #e2e8f0;
}
footer.site-footer{
  bottom:0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.96) 0%,
      var(--right-tint) 30%,
      var(--right-tint) 48%,
      rgba(255,255,255,0.96) 52%,
      var(--left-tint) 70%,
      var(--left-tint) 100%);
  background-size:220% 100%;
  animation:splitShift 22s ease-in-out infinite alternate;
  box-shadow:0 -4px 16px rgba(2,6,23,.06);
  border-top:1px solid #e2e8f0;
}

/* Main needs extra padding because header/footer are fixed */
.main{padding-top:112px;padding-bottom:84px;min-height:100vh}

/* ===== Header / Navbar (clean & consistent) ===== */
nav.navbar{
  /* header content centered */
  max-width:var(--nav-max); margin:0 auto;
  padding:18px var(--nav-pad) 20px var(--nav-pad);   /* equal left/right gap */
  display:flex; align-items:flex-start; gap:16px;    /* a little upper alignment */
  justify-content:flex-start;
}
.navbar .brand{display:flex;align-items:center;gap:12px;font-weight:800;flex:0 1 auto}
.logo{height:64px;width:64px;border-radius:9999px;object-fit:cover;object-position:center;overflow:hidden;border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 12px rgba(2,6,23,.15);background:#fff0}
.navbar .brand span{font-size:2rem;line-height:1.05;color:#0f172a;position:relative;white-space:nowrap}
.navbar .brand span::before{
  content:"Since-1986"; display:block; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; margin-bottom:2px;
}
.navbar .brand span::after{
  content:"A socio academic institution with a difference.";
  display:block; font-size:.9rem; font-weight:600; font-style:italic; opacity:.85; margin-top:2px;
}

/* Menu: left-aligned with equal side gaps; desktop single-line + horizontal scroll */
.navbar ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; justify-content:flex-start;
  gap:14px; flex-wrap:nowrap; white-space:nowrap;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent;
}
.navbar ul::-webkit-scrollbar{height:6px}
.navbar ul::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.navbar li{flex:0 0 auto; padding:8px 12px; border-radius:12px; transition:background .2s ease}
.navbar li.active, .navbar li:hover{background:#e6fffa}
.navbar a{display:inline-block}

/* Mobile toggler (if you have one) */
.nav-toggle{
  display:none; border:1px solid #e2e8f0; background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer;
}

/* ===== Mobile / Small screens: dropdown under header, left-anchored, equal side gaps ===== */
@media (max-width:768px){
  .logo{height:52px;width:52px}
  .navbar .brand span{font-size:clamp(1.1rem,5.2vw,1.4rem)}
  .navbar .brand span::after{display:none}   /* keep things compact on phones */
  .nav-toggle{display:inline-block}

  /* anchor just under header; same side gaps using --nav-pad */
  .navbar{position:relative; overflow:visible}
  .navbar > ul{
    position:absolute; left:var(--nav-pad); right:var(--nav-pad); top:100%;
    background:#fff; border:1px solid #e2e8f0; border-top:0;
    border-radius:0 0 12px 12px; box-shadow:0 18px 40px rgba(2,6,23,.20);
    display:flex; flex-direction:column; gap:8px; padding:10px 12px;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none;
    transition:max-height .25s ease, opacity .2s ease, visibility .2s ease;
  }
  /* open states (cover common toggles) */
  body.nav-open .navbar > ul,
  .navbar.open > ul, .navbar.active > ul,
  .navbar > ul.show, .navbar > ul.is-open, .navbar > ul[aria-expanded="true"]{
    max-height:70vh; opacity:1; visibility:visible; pointer-events:auto;
  }
}

/* ===== Edge fades + scroll-hint (desktop only) ===== */
@media (min-width:769px){
  .navbar{position:relative}
  .navbar::before,.navbar::after{
    content:""; position:absolute; top:0; bottom:0; width:34px; pointer-events:none; opacity:0; transition:opacity .2s ease; z-index:2;
  }
  .navbar::before{left:0; background:linear-gradient(to right, rgba(255,255,255,.85), rgba(255,255,255,0))}
  .navbar::after{right:0; background:linear-gradient(to left, rgba(255,255,255,.85), rgba(255,255,255,0))}
  .navbar.is-scrollable.has-left::before{opacity:1}
  .navbar.is-scrollable.has-right::after{opacity:1}
}
.navbar ul{position:relative; cursor:grab}
.navbar ul:active{cursor:grabbing}
.navbar .scroll-hint{
  position:absolute; right:10px; bottom:-18px; background:rgba(15,23,42,.8); color:#fff; border-radius:999px;
  padding:4px 8px; font-size:.75rem; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .25s ease, transform .25s ease;
}
.navbar.is-scrollable .scroll-hint{opacity:1; transform:translateY(0)}
@media (max-width:768px){ .navbar .scroll-hint{display:none} }

/* ===== Cards / Tables / Forms / Buttons (kept as-is) ===== */
.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 6px 22px rgba(2,6,23,.06);padding:16px;margin:12px 0}
h1,h2{margin:.2em 0}
.notice{border-left:4px solid var(--brand);padding-left:12px}
.grid{display:grid;gap:16px}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #e2e8f0;text-align:left}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
input[type=text],input[type=email],input[type=password],textarea,select{
  width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:10px;background:#fff
}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){ form .row{grid-template-columns:1fr} }
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.badge{display:inline-block;background:#e2e8f0;padding:4px 8px;border-radius:999px;font-size:12px}
.alert{padding:10px 12px;border-radius:10px}
.alert.ok{background:#ecfdf5;border:1px solid #10b981;color:#065f46}
.alert.err{background:#fef2f2;border:1px solid #ef4444;color:#991b1b}

/* ===== Homepage / Sections (kept) ===== */
.hero{
  display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(135deg, rgba(219,234,254,.92), rgba(191,219,254,.92));
  border:1px solid #e2e8f0;border-radius:16px;padding:20px 22px;margin:12px 0;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.hero h1{margin:.1em 0 0;font-size:1.6rem}
.hero p{margin:0;opacity:.9}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.hero .actions .btn{border-color:#dbeafe}
.hero.hero-bg{color:#052e2b;text-shadow:0 1px 0 rgba(255,255,255,.35);min-height:180px;background-repeat:no-repeat;border:1px solid rgba(14,165,233,.2)}

.section-title{display:flex;align-items:center;gap:10px;margin:.2em 0 .6em}
.section-title .dot{width:10px;height:10px;border-radius:999px;background:var(--brand)}

.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.link-card{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:12px 16px 12px 44px; border:1px solid #e2e8f0; border-radius:12px;
  background:#fff; color:#0284c7; box-shadow:0 6px 14px rgba(2,6,23,.06);
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
}
.link-card:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(2,6,23,.10) }
.link-card .emoji{ display:none !important }
.link-card::before{
  content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; background:var(--brand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M14.5 5.5l4 4a5 5 0 01-7.1 7.1l-1.4-1.4M9.5 18.5l-4-4a5 5 0 017.1-7.1l1.4 1.4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M14.5 5.5l4 4a5 5 0 01-7.1 7.1l-1.4-1.4M9.5 18.5l-4-4a5 5 0 017.1-7.1l1.4 1.4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  opacity:.95;
}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}

.list-clean{list-style:none;margin:0;padding:0}
.list-clean li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;margin:8px 0;background:#fff}
.list-clean a{word-break:break-word}
.small{font-size:.9rem;opacity:.8}
.badge-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2e8f0;border-radius:999px;padding:6px 10px;background:#fff}

/* Video embed */
.video-embed{position:relative;width:100%;padding-bottom:56.25%;background:#000}
.video-embed iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;border-radius:12px}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gallery-grid .gitem{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.media-box{height:220px;overflow:hidden;background:#000}
.media-box img,.media-box video,.media-box iframe{width:100%;height:100%;display:block;object-fit:cover;border:0}
.media-box img{transition:transform .28s ease}
.gitem:hover .media-box img{transform:scale(1.08)}
.gitem .caption{padding:8px 10px}

/* Lightbox for gallery */
.lightbox{position:fixed; inset:0; background:rgba(2,6,23,.78); display:none; align-items:center; justify-content:center; z-index:4000; padding:24px}
.lightbox.open{display:flex}
.lightbox .box{position:relative; max-width:90vw; max-height:90vh; background:transparent; border-radius:14px}
.lightbox .close{
  position:absolute; top:-8px; right:-8px; border:1px solid #e2e8f0; background:#fff;
  border-radius:999px; width:36px; height:36px; cursor:pointer; font-size:18px; line-height:34px; text-align:center;
  box-shadow:0 6px 14px rgba(0,0,0,.2)
}
.lightbox .content{display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:90vh}
.lightbox .content img,.lightbox .content video,.lightbox .content iframe{
  max-width:90vw; max-height:82vh; border-radius:12px; background:#000
}

/* Stat pills */
.stat-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.pill{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;border:1px solid #dbeafe;background:var(--brand);color:#fff;box-shadow:0 6px 12px rgba(2,6,23,.06)}
.pill-num{font:700 16px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:#fff; letter-spacing:.5px; min-width:52px; text-align:right}
.pill-label{color:#fff;opacity:.95;white-space:nowrap}
@media (max-width:900px){ .stat-pills{justify-content:flex-start} }

/* Home sections alignment */
.hero{margin-bottom:16px}
.home-sections{max-width:1100px;margin:0 auto;padding:0 6px}
.home-sections .card{border-radius:16px}
.home-sections .two-col{margin-top:12px}

/* Footer inner layout */
footer .container{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ann-bar{background:#ecfeff;border:1px dashed #0891b2;padding:8px 12px;border-radius:12px;margin:8px 0}