/* =====================================================================
   Delhi Kannada School – Header
   Palette sampled from the reference screenshot (IS Solutions)
   ===================================================================== */
:root{
  /* header gradient (left -> right) */
  --hdr-start:#053259;
  --hdr-end:#094b7e;
  --hdr-logo-bg:#042d53;

  /* accents */
  --accent-blue:#296c91;   /* active/hover underline under nav item */
  --gold:#eeb600;          /* thin gold divider lines */

  /* dropdown */
  --drop-bg:#ffffff;
  --drop-hover:#f0f4e6;    /* sage tint on first/hover item */
  --drop-divider:#eeeeee;
  --drop-text:#101a20;

  /* panel / supporting navy shades */
  --navy-700:#043158;
  --navy-800:#032a4f;
  --navy-900:#001d3b;

  /* button / hero tones */
  --cta-text:#004e66;
  --hero-1:#243c46;
  --hero-2:#182c34;
  --hero-3:#0c1d2a;

  --white:#ffffff;
  --h:88px;                /* header height (desktop) */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Scoped Reset for Header/Footer/Home ---------- */
#header *, #header *::before, #header *::after,
#siteFooter *, #siteFooter *::before, #siteFooter *::after,
#main *, #main *::before, #main *::after {
  box-sizing: border-box;
}

#header, #siteFooter, #main {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

#header a, #siteFooter a, #main a {
  text-decoration: none;
}

#header ul, #siteFooter ul, #main ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: #fff;
  color: var(--hdr-start);
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 2000;
  text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* ---------- Header shell ---------- */
#header{
  position:sticky;top:0;z-index:1000;width:100%;
  background:linear-gradient(90deg,var(--hdr-start) 0%,var(--hdr-end) 100%);
  color:var(--white);
  transition:box-shadow .3s var(--ease);
}

/* ---------- Top Bar (Contact Info) ---------- */
.top-bar {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--navy-900);
  padding: 5px clamp(16px,3vw,48px);
  font-size: 13px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
}
.top-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: min(100%, 440px);
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
}
.top-bar a {
  position: relative;
  z-index: 1;
  color: var(--navy-900);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.2s;
}
.top-bar a:hover { opacity: 0.8; }

#header.is-scrolled{--h:66px;box-shadow:0 6px 24px rgba(0,29,59,.35)}
.header-inner{
  width:100%;max-width:none;              /* requirement A: full width */
  height:var(--h);padding:0 clamp(16px,3vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:height .3s var(--ease);
}

/* ---------- Logo ---------- */
.logo{margin:0;font-size:inherit;flex:0 0 auto}
.logo a{display:flex;align-items:center;gap:12px}
.logo-img{
  display:block;flex:0 0 auto;
  width:64px;height:64px;
  object-fit:contain;
  border-radius:6px;
  transition:width .3s var(--ease),height .3s var(--ease);
}
#header.is-scrolled .logo-img{width:50px;height:50px}
.logo-text{display:flex;flex-direction:column;flex:0 1 auto;font-weight:800;font-size:19px;line-height:1.1;letter-spacing:.2px}
.logo-text span{display:block}

/* ---------- Desktop nav ---------- */
#nav{margin-left:auto; display:flex; align-items:center;}
#nav > ul{display:flex;align-items:center;height:var(--h);gap:4px;transition:height .3s var(--ease)}
#nav > ul > li{position:relative;height:100%;display:flex;align-items:center}
#nav > ul > li > a{
  position:relative;display:flex;align-items:center;gap:8px;height:100%;
  padding:0 clamp(10px,1.1vw,18px);font-size:16.5px;color:var(--white);
  font-weight:inherit;white-space:nowrap;
}
/* animated underline (screenshot: light-blue line under active parent) */
#nav > ul > li > a::after{
  content:"";position:absolute;left:clamp(10px,1.1vw,18px);right:clamp(10px,1.1vw,18px);
  bottom:calc(50% - 20px);height:2px;background:var(--accent-blue);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
#nav > ul > li:hover > a::after,
#nav > ul > li:focus-within > a::after,
#nav > ul > li.open > a::after,
#nav > ul > li.is-current > a::after{transform:scaleX(1)}

/* chevron (replaces "arrow rt.png") */
.chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
      transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);display:inline-block}
.has-sub:hover > a .chev,.has-sub:focus-within > a .chev,.has-sub.open > a .chev{transform:rotate(225deg) translate(-1px,-1px)}

/* ---------- CTA Button ---------- */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: var(--navy-900) !important;
  padding: 8px 20px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 20px;
  transition: background-color 0.2s;
  white-space: nowrap;
}
.header-cta:hover { background-color: #f0f4f7; }

/* ---------- Dropdown panel ---------- */
#nav .has-sub > ul{
  position:absolute;top:calc(100% - 16px);left:0;min-width:240px;
  background:var(--drop-bg);color:var(--drop-text);
  box-shadow:0 18px 40px rgba(0,29,59,.28);border-radius:0 0 8px 8px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
  max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;
}
#nav .sub-wide > ul{min-width:380px;max-width:min(440px,90vw)}
#nav .has-sub:last-child > ul,
#nav .sub-wide > ul{left:auto;right:0}
#nav .has-sub.open > ul{opacity:1;visibility:visible;transform:none;transition-delay:0s}
#nav .has-sub > ul li{border-bottom:1px solid var(--drop-divider)}
#nav .has-sub > ul li:last-child{border-bottom:0}
#nav .has-sub > ul a{
  display:block;padding:15px 25px;font-size:16.5px;font-weight:inherit;color:var(--drop-text);
  transition:background .2s,padding-left .25s var(--ease);
}
#nav .has-sub > ul li:first-child a{background:var(--drop-hover)}     /* as in screenshot */
#nav .has-sub > ul a:hover,#nav .has-sub > ul a:focus-visible{background:var(--drop-hover);padding-left:31px;outline:0}
#nav .has-sub > ul::-webkit-scrollbar{width:8px}
#nav .has-sub > ul::-webkit-scrollbar-thumb{background:#9f9f9f;border-radius:8px}
#nav .has-sub > ul > li{position:relative}
#nav .has-sub > ul > li.has-sub > a{display:flex;align-items:center;justify-content:space-between;gap:12px}
#nav .has-sub > ul > li.has-sub > a .chev{flex:0 0 8px;margin-left:auto}
#nav .has-sub > ul > li.has-sub > a .chev,
#nav .has-sub > ul > li.has-sub.open > a .chev,
#nav .has-sub > ul > li.has-sub:hover > a .chev,
#nav .has-sub > ul > li.has-sub:focus-within > a .chev{transform:rotate(-45deg)!important}
#nav .has-sub > ul > li.has-sub > ul.nested-submenu{
  position:fixed;top:0;left:0;right:auto;z-index:1110;
  width:240px;min-width:200px;max-width:min(360px,90vw);
  max-height:min(70vh,560px);overflow-y:auto;overflow-x:hidden;
  border-radius:8px;
}

#nav a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:4px}

/* ---------- Hamburger ---------- */
.nav-toggle{display:none;width:46px;height:46px;border:0;border-radius:10px;background:rgba(255,255,255,.08);
  cursor:pointer;position:relative;flex:0 0 auto}
.nav-toggle span{position:absolute;left:12px;right:12px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s,top .3s var(--ease)}
.nav-toggle span:nth-child(1){top:16px}.nav-toggle span:nth-child(2){top:22px}.nav-toggle span:nth-child(3){top:28px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,29,59,.55);opacity:0;visibility:hidden;
  transition:opacity .3s,visibility 0s linear .3s;z-index:900}
.nav-backdrop.show{opacity:1;visibility:visible;transition-delay:0s}

/* ---------- Ticker (requirement H) ---------- */
.ticker{display:flex;align-items:center;background:var(--navy-900);color:#fff;font-size:14.5px;overflow:hidden}
.ticker-label{flex:0 0 auto;background:var(--gold);color:var(--navy-900);font-weight:800;text-transform:uppercase;
  letter-spacing:.8px;font-size:12px;padding:10px clamp(14px,3vw,48px) 10px clamp(14px,3vw,48px);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.ticker-viewport{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker-track{display:inline-flex;gap:48px;white-space:nowrap;padding-left:100%;animation:ticker 80s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{position:relative;opacity:.92}
.ticker-track span::before{content:"•";color:var(--gold);margin-right:12px}
@keyframes ticker{to{transform:translateX(-100%)}}

.side-cta {
  position: fixed;
  top: 65%;
  left: 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-50%);
}
.side-cta__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 64px;
  height: 58px;
  padding: 0 10px 0 22px;
  overflow: hidden;
  border-radius: 0 10px 10px 0;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(11, 79, 108, .24);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 20, 35, .18);
  -webkit-backdrop-filter: blur(6px) saturate(125%);
  backdrop-filter: blur(6px) saturate(125%);
  text-decoration: none;
  white-space: nowrap;
  transition: width 300ms ease, box-shadow 300ms ease;
}
.side-cta__item--alumni { --side-cta-expanded-width: 174px; }
.side-cta__item--cbse { --side-cta-expanded-width: 128px; }
.side-cta__item:focus-visible,
.side-cta__item:hover {
  width: var(--side-cta-expanded-width);
  background: rgba(8, 63, 88, .46);
  box-shadow: 0 8px 24px rgba(0, 20, 35, .28);
}
.side-cta__item:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.side-cta__icon {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.side-cta__icon svg { display: block; width: 100%; height: 100%; }
.side-cta__label {
  flex: 0 0 auto;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-6px);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  transition: max-width 300ms ease, opacity 200ms ease, transform 300ms ease;
}
.side-cta__item:hover .side-cta__label,
.side-cta__item:focus-visible .side-cta__label {
  max-width: 120px;
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 767px) {
  .side-cta { gap: 7px; }
  .side-cta__item {
    width: 52px;
    height: 48px;
    gap: 7px;
    padding-left: 17px;
  }
  .side-cta__item--alumni:hover,
  .side-cta__item--alumni:focus-visible { width: 158px; }
  .side-cta__item--cbse:hover,
  .side-cta__item--cbse:focus-visible { width: 110px; }
  .side-cta__icon { flex-basis: 18px; width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .side-cta__item,
  .side-cta__label { transition: none; }
}

.demo-rest{padding:48px clamp(16px,3vw,48px);color:#555}

/* ===================== Tablet & mobile ===================== */
@media (max-width:1200px){
  :root{--h:70px}
  #header.is-scrolled{--h:60px}
  #header .header-inner{height:auto;min-height:var(--h);padding-block:8px;gap:12px}
  .logo{flex:1 1 auto;min-width:0}
  .logo a{min-width:0}
  .logo-text{flex:1 1 auto;min-width:0;white-space:normal}
  .nav-toggle{display:block}
  .logo-img{width:52px;height:52px}

  .top-bar { background: #fff; padding: 4px 16px; font-size: 11px; justify-content: center; }

  #nav{
    position:fixed;top:0;right:0;bottom:0;width:min(86vw,380px);margin:0;z-index:1100;
    background:linear-gradient(180deg,var(--navy-700),var(--navy-900));
    padding:calc(var(--h) + 12px + env(safe-area-inset-top,0)) 0 24px;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);visibility:hidden; flex-direction: column; align-items: stretch;
    transition:transform .38s var(--ease),visibility 0s linear .38s;
    box-shadow:-20px 0 50px rgba(0,0,0,.35);
  }
  #nav.open{transform:none;visibility:visible;transition-delay:0s}
  #header .nav-toggle{position:relative;z-index:1200}

  #nav > ul{display:block;height:auto}
  #nav > ul > li{display:block;height:auto;border-bottom:1px solid rgba(255,255,255,.1)}
  #nav > ul > li > a{height:auto;padding:17px 24px;font-size:17px;justify-content:space-between}
  #nav > ul > li > a::after{display:none}
  #nav > ul > li > a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--gold);background:rgba(255,255,255,.06)}
  #nav > ul > li.is-current > a{box-shadow:inset 4px 0 0 var(--gold);background:rgba(255,255,255,.06)}

  .header-cta {
    margin: 24px 24px 0;
    text-align: center;
    display: block;
    padding: 12px 20px;
  }

  /* accordion submenus */
  #nav .has-sub > ul{
    position:static;min-width:0;max-width:none;width:100%;border-radius:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;
    background:rgba(0,0,0,.22);transition:max-height .4s var(--ease);
  }
  #nav .has-sub.open > ul{max-height:70vh;overflow-y:auto}
  #nav .has-sub > ul > li.has-sub > ul.nested-submenu{
    position:static;top:auto;left:auto;right:auto;z-index:auto;
    width:100%;min-width:0;max-width:none;max-height:0;overflow:hidden;
    border-radius:0;box-shadow:none;transition:max-height .4s var(--ease)
  }
  #nav .has-sub > ul > li.has-sub.open > ul.nested-submenu{max-height:70vh;overflow-y:auto}
  /* disable desktop hover/focus opening on touch layouts */
  #nav .has-sub:hover:not(.open) > ul,#nav .has-sub:focus-within:not(.open) > ul{max-height:0}
  #nav .has-sub > ul li{border-bottom:1px solid rgba(255,255,255,.07)}
  #nav .has-sub > ul a,#nav .has-sub > ul li:first-child a{background:transparent;color:#e8f1f8;padding:14px 24px 14px 40px;font-size:15.5px}
  #nav .has-sub > ul > li.has-sub > a{display:flex;align-items:center;justify-content:space-between}
  #nav .has-sub > ul a:hover,#nav .has-sub > ul a:focus-visible{background:rgba(255,255,255,.08);padding-left:46px}
  #nav .has-sub > ul > li.has-sub > ul a{padding-left:56px}
  #nav .has-sub > ul > li.has-sub > ul > li.has-sub > ul a{padding-left:72px}
  .has-sub:hover > a .chev,.has-sub:focus-within > a .chev{transform:rotate(45deg) translateY(-2px)}
  .has-sub.open > a .chev{transform:rotate(225deg) translate(-1px,-1px)!important}
}
@media (max-width:480px){
  .ticker{font-size:13px}
  .top-bar { font-size: 10px; gap: 8px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion:reduce){
  *:not(.ticker-track),*:not(.ticker-track)::before,*:not(.ticker-track)::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto!important}
}