/* ============ Design tokens ============
   Palette inspired by the Kurukshetra University reference:
   crimson utility bar, navy main navbar, gold accent line, white page.
   --crimson    utility bar (top strip)
   --navy-900   main navbar / footer
   --navy-700   navbar hover
   --gold       accent line, active states, links, CTA
   --gold-dark  hover on gold elements
   --bg         page background
   --text       body text
   --muted      secondary text
*/
:root{
  --crimson:#A61C2C;
  --crimson-dark:#7E141F;
  --navy-900:#152451;
  --navy-800:#1D2F63;
  --navy-700:#2B3E7C;
  --gold:#E8A33D;
  --gold-dark:#C7852A;
  --bg:#FFFFFF;
  --panel:#F5F6FA;
  --card:#FFFFFF;
  --text:#22262B;
  --muted:#5A6472;
  --border:#E2E5EA;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Open Sans', Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:var(--navy-700); text-decoration:none;}
a:hover{color:var(--gold-dark); text-decoration:underline;}
h1,h2,h3{font-weight:600; margin:0;}

/* ---- Utility bar (thin crimson strip) ---- */
.utility-bar{
  background:var(--crimson);
  font-size:13px;
}
.utility-inner{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
  height:36px;
}
.utility-inner .links a{
  color:#fff; margin-right:18px; font-weight:600; opacity:.95;
}
.utility-inner .links a:hover{color:var(--gold); text-decoration:none; opacity:1;}
.utility-inner .links a:last-child{margin-right:0;}

/* ---- Navbar ---- */
.navbar{
  background:var(--navy-900);
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
  border-bottom:3px solid var(--gold);
}
.navbar-inner{
  max-width:1180px; margin:0 auto; padding:8px 20px;
  display:flex; align-items:center; justify-content:space-between;
  min-height:90px;
}
.brand{display:flex; align-items:center; gap:12px; color:#fff; font-weight:700; font-size:20px;}
.brand img{height:100px; width: 100px;}
.nav-links{list-style:none; display:flex; gap:4px; margin:0; padding:0;}
.nav-links a{
  color:rgba(255,255,255,0.85); padding:10px 14px; border-radius:6px;
  font-size:14px; font-weight:600; letter-spacing:.02em;
}
.nav-links a:hover, .nav-links a.active{
  color:#fff; background:var(--navy-700); text-decoration:none;
}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:22px;}

/* ---- Hero ---- */
.hero-wrap{max-width:1180px; margin:24px auto 0; padding:0 20px;}
.hero-img{
  width:100%; max-height:420px; object-fit:cover;
  border-radius:12px; box-shadow:0 8px 24px rgba(21,36,81,0.20);
  display:block;
}

/* ---- Find your service card ---- */
.finder{
  max-width:640px; margin:30px auto 0; position:relative; z-index:2;
  background:var(--navy-900); color:#fff; border-radius:12px;
  padding:22px 26px; box-shadow:0 10px 28px rgba(21,36,81,0.30);
  border-top:3px solid var(--gold);
}
.finder h3{font-size:16px; margin-bottom:12px; color:#fff;}
.finder form{display:flex; gap:8px;}
.finder input[type="search"]{
  flex:1; padding:11px 14px; border-radius:6px; border:1px solid transparent;
  font-size:14px; font-family:inherit;
}
.finder button{
  padding:11px 18px; border-radius:6px; border:none; background:var(--gold);
  color:#20180a; font-weight:700; cursor:pointer; font-size:14px;
}
.finder button:hover{background:var(--gold-dark); color:#fff;}
.finder .small{margin:10px 0 0; font-size:13px; color:rgba(255,255,255,0.75);}
.finder .small a{color:var(--gold); font-weight:600;}

/* ---- Intro / tagline ---- */
.intro{max-width:820px; margin:46px auto 10px; padding:0 20px; text-align:center;}
.intro h1{font-size:30px; color:var(--navy-900); margin-bottom:14px;}
.intro p{color:var(--muted); font-size:15px;}

/* ---- E-Resources section ---- */
.resources{max-width:820px; margin:40px auto 0; padding:0 20px;}
.resources > h2{
  font-size:18px; letter-spacing:.06em; color:var(--navy-900);
  border-bottom:2px solid var(--gold); padding-bottom:10px; margin-bottom:18px;
  text-transform:uppercase;
}
.accordion-item{
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  margin-bottom:12px; overflow:hidden; box-shadow:0 1px 3px rgba(21,36,81,0.06);
}
.accordion-header{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; background:none; border:none; cursor:pointer;
  padding:16px 20px; font-size:15px; font-weight:700; color:var(--navy-900);
  text-align:left;
}
.accordion-header:hover{background:var(--panel);}
.accordion-header i{color:var(--gold-dark); transition:transform .25s ease;}
.accordion-header.open i{transform:rotate(180deg);}
.accordion-panel{
  display:none; padding:6px 20px 18px; border-top:1px solid var(--border);
}
.accordion-panel.open{display:block;}
.reslink{
  display:block; padding:8px 4px; font-size:14px;
  border-bottom:1px dashed var(--border);
}
.reslink:last-child{border-bottom:none;}

/* tooltip on AIP link */
.tooltip-link{position:relative;}
.tooltip-text{
  display:none; position:absolute; left:0; top:100%; z-index:50;
  width:300px; background:#fff; border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; font-size:13px; color:var(--text); box-shadow:0 6px 18px rgba(0,0,0,0.15);
  text-decoration:none;
}
.tooltip-link:hover .tooltip-text{display:block;}

.notice{max-width:820px; margin:24px auto 0; padding:0 20px; font-style:italic; color:var(--muted); font-size:13px;}

/* ---- Footer ---- */
footer{background:var(--navy-900); color:rgba(255,255,255,0.9); margin-top:56px; border-top:3px solid var(--gold);}
.footer-inner{max-width:1180px; margin:0 auto; padding:36px 20px 26px;}
footer h3{color:#fff; font-size:20px; margin-bottom:12px;}
footer hr{border:none; border-top:1px solid rgba(255,255,255,0.2); margin-bottom:24px;}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.footer-cols ul{list-style:none; margin:0; padding:0;}
.footer-cols li{padding:5px 0; font-size:14px; display:flex; align-items:center; gap:8px;}
.footer-cols i{width:16px; color:var(--gold);}
.footer-cols a{color:#fff;}
.footer-cols a:hover{color:var(--gold);}

@media (max-width: 760px){
  .utility-inner{flex-wrap:wrap; height:auto; padding:8px 20px;}
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .footer-cols{grid-template-columns:1fr;}
  .finder{margin:-24px 20px 0;}
  .finder form{flex-direction:column;}
}