/* ==========================================================================
   RIT CHENNAI — SHARED HEADER (includes/header.html)

   Everything the shared header needs, and nothing else, so a page can load
   it on its own. styles.css @imports this file, so the "new" pages get it
   for free; template pages (index.html and the other eduspace-based pages,
   which run on bootstrap.min.css + main.css) link it directly instead of
   styles.css, which would otherwise restyle body/a/h1-h4/.container/section
   underneath the template.

   Design tokens live here (rather than in styles.css) because the header
   is the one component shared by both stylesheet families.
   ========================================================================== */
:root{
  --navy-900:#0F4475;
  --navy-800:#0d2757;
  --navy-700:#123667;
  --blue-600:#1b4a84;
  --blue-500:#1e5aa8;
  --orange-600:#e85f10;
  --orange-500:#FF7A47;
  --orange-400:#FF7A47;
  --gold-500:#f5a623;
  --ink-900:#212529;
  --ink-700:#3a3f55;
  --ink-500:#6b7086;
  --paper-0:#ffffff;
  --paper-50:#f7f8fb;
  --paper-100:#eef1f7;
  --line-200:#e3e7f0;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-sm:0 2px 8px rgba(10,27,61,.08);
  --shadow-md:0 12px 32px rgba(10,27,61,.12);
  --shadow-lg:0 24px 60px rgba(10,27,61,.18);
  --maxw:1680px;
  --gap:24px;
  --ff-head:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-body:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ---------- Skip link / a11y ---------- */
.skip-link{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:10px 16px;z-index:999;}
.skip-link:focus{left:12px;top:12px;}

/* ---------- Header / nav ---------- */
header.site-header{
  position:sticky;top:0;z-index:100;background: #0f4475eb;    font-family:var(--ff-body);
}
/* max-width/margin mirror styles.css's .container so the header measures the
   same on template pages, where .container is Bootstrap's (1320px). */
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:24px;max-width:var(--maxw);margin:0 auto;}
.site-header a{text-decoration:none;}
.site-header img{max-width:100%;display:block;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-head);font-weight:700;font-size:20px;color:var(--navy-900);}
.brand-mark{
  width:42px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--navy-800),var(--blue-500));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;
  box-shadow:0 4px 10px rgba(13,39,87,.3);
}
.brand small{display:block;font-family:var(--ff-body);font-weight:500;font-size:10.5px;letter-spacing:.03em;color:var(--ink-500);text-transform:uppercase;}

.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav ul{list-style:none;margin:0;padding:0;}
.main-nav > ul{display:flex;align-items:center;}
.main-nav a.nav-link{
  display:flex;align-items:center;gap:4px;padding:10px 18px;border-radius:8px;
  font-size:16px;font-weight:700;color:#fff;
}
.main-nav a.nav-link:hover{color:var(--navy-900); }
.has-dropdown{position:relative;}
.dropdown{
  position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid var(--line-200);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:all .18s ease;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink-700);}
.dropdown a:hover{background:var(--paper-50);color:var(--navy-900);}

.header-cta{display:flex;align-items:center;gap:12px;}
/* CTA button — same look as styles.css's .btn/.btn-primary, scoped to the
   header so it also wins over Bootstrap's .btn-primary on template pages. */
.header-cta .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-head);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:10px;border:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  white-space:nowrap;
}
.header-cta .btn:hover{transform:translateY(-2px);}
.header-cta .btn-primary{
  background:linear-gradient(110deg,#ff520f,#ec7f55 50%,#ff520f);color:#fff;
  box-shadow:0 10px 24px rgba(244,113,30,.35);
  padding:8px 15px;border-radius:20px;font-size:13px;
}
.header-cta .btn-primary:hover{background:var(--orange-600);color:#fff;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px;}

/* ---------- Home page variant: transparent header laid over the hero video ----------
   Opt in with <body class="hero-header">. Every other page keeps the white
   sticky bar above. Inside the mobile drawer (white) links go back to dark. */
.hero-header header.site-header{
  position:absolute;top:0;left:0;width:100%;z-index:999;
   border-bottom:0; 
}
.hero-header .nav-wrap{padding:24px;}
.hero-header .main-nav a.nav-link{color:#fff;}
.hero-header .main-nav a.nav-link:hover{color:#EC7F55;background:transparent;}
.hero-header .nav-toggle span{background:#fff;}
@media(max-width:1080px){
  .hero-header .main-nav a.nav-link{color:var(--ink-700);}
  .hero-header .main-nav a.nav-link:hover{color:var(--navy-900); }
}

@media(max-width:1080px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,86vw);height:100vh;background:#fff;
    flex-direction:column;align-items:stretch;padding:88px 20px 24px;box-shadow:var(--shadow-lg);
    transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav>ul{flex-direction:column;align-items:stretch;gap:2px;}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;display:none;padding-left:12px;}
  .has-dropdown.open .dropdown{display:block;}
  .nav-toggle{display:block;}
  .header-cta .btn-primary{padding:10px 16px;font-size:13.5px;}
}
.nav-scrim{position:fixed;inset:0;background:rgba(10,20,45,.5);opacity:0;visibility:hidden;transition:.25s;z-index:90;}
.nav-scrim.open{opacity:1;visibility:visible;}

/* ---------- Mega menu + mobile drawer (driven by assets/js/include.js) ----------
   1. include.js toggles the mobile drawer via classList.add("mobile-open"),
      while the rule above only styles `.main-nav.open`. Mirroring it under
      `.mobile-open` makes the hamburger menu actually open on mobile.
   2. include.js looks up each dropdown panel via `.mega-panel` (for the
      mobile accordion + close-on-click wiring), while the `.dropdown` rules
      give it position/hover/mobile show-hide. Panels carry both classes, so
      `.dropdown.mega-panel` adds sizing on top of the base look — a wider,
      columned layout for the sections that have many links. */
@media(max-width:1080px){
  .main-nav.mobile-open{transform:translateX(0);}
  .nav-scrim.show{opacity:1;visibility:visible;}
}
.mobile-close-btn{
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-200);
  background:#fff; color:var(--navy-900); cursor:pointer; margin-bottom:18px;
}
@media(max-width:1080px){ .mobile-close-btn{ display:flex; } }

.dropdown.mega-panel{
  min-width:560px;
  padding:22px 26px;
}
.mega-panel__grid{display:grid; grid-template-columns:repeat(var(--cols,2),1fr); gap:24px 30px;}
.mega-panel__col-title{
  display:flex; align-items:center; gap:8px;
  font-family:var(--ff-head); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange-600); margin:0 0 10px; padding-bottom:8px; border-bottom:2px solid var(--paper-100);
}
.mega-panel__links{display:flex; flex-direction:column; gap:1px;}
.mega-panel__links a{
  display:block; padding:7px 10px; border-radius:8px; font-size:14px; color:#000; font-family: "Poppins", sans-serif;
}
.mega-panel__links a:hover{background:var(--paper-50); color:var(--navy-900);}
.mega-panel--flat{min-width:640px;}
.mega-panel--flat .mega-panel__links{columns:3; column-gap:26px;}
.mega-panel--flat .mega-panel__links a{break-inside:avoid;}
.mega-panel--narrow{min-width:240px;}


@media(max-width:1366px) {
      .main-nav a.nav-link {
        padding: 10px 16px; 
        font-size: 13px;
  } 
 
  .dropdown.mega-panel {
  min-width: 420px !important;
  padding: 22px 26px;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: -110px;
}
.choose-us-wrapper-5 .choose-us-items-5 .choose-box-3 .content h5 {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}
 .mega-panel__links a {
    display: block;
    padding: 4px 0px;
    border-radius: 8px;
    font-size: 13.5px;
    color: #000;
    font-family: Poppins, sans-serif;
  }
  .choose-us-wrapper .choose-us-counter-box .content p, .top-category-wrapper .top-category-box-items h6 {
      font-size: 14px;
  }

}

@media(max-width:1080px){
  .dropdown.mega-panel,
  .mega-panel--flat,
  .mega-panel--narrow{min-width:0; width:100%; padding:6px 0 6px 8px;}
  .mega-panel__grid{grid-template-columns:1fr; gap:18px;}
  .mega-panel--flat .mega-panel__links{columns:1;}
}

@media (max-width: 767px) {
    .container,
    .row,
    section,
    .main-content {
        max-width: 100%;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    img {
        height: auto;
    }
}

@media(max-width:640px){
.header-cta .btn-primary {
display: none;
}
.main-nav a.nav-link {
    color: var(--navy-900);
}
}

@media(max-width:414px){
  html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.header-cta .btn-primary {
display: none;
}
.main-nav a.nav-link {
    color: var(--navy-900);
}
}