/*
 * Header + footer spacing for new-design pages (body.iitd-design-v2).
 * Aligns with Figma Design Working File tokens (same scale as home-figma.css):
 * page inset 80 / 40 / 20, gap 24 / 12 / 8 / 4, footer py 80, padding/medium-large 20 on mega panels, etc.
 *
 * Mega / nav dropdown ("header-menu"): https://www.figma.com/design/WKmMos0BVKrPV95jSEUBaJ/Design-Working-File?node-id=432-4699&m=dev
 *
 * Loaded only when $iitd_exclude_bootstrap_css — pairs with iitd-no-bootstrap-shell.css.
 */

body.iitd-design-v2 {
  overflow-x: clip;
  --iitd-pad-page: 80px;
  --iitd-prebar-pad-y: 4px;
  --iitd-gap-xl: 24px;
  --iitd-gap-lg: 24px;
  --iitd-gap-md: 12px;
  --iitd-gap-sm: 8px;
  --iitd-gap-xs: 4px;
  --iitd-footer-pad-y: 80px;
  --iitd-mobile-nav-scroll-pad-y: 32px;
  --iitd-mobile-nav-scroll-pad-x: 20px;
  --iitd-logo-pad-y: 26px;
  --iitd-logo-pad-x: 20px;
}

@media (max-width: 1199.98px) {
  body.iitd-design-v2 {
    --iitd-pad-page: 40px;
  }
}

@media (max-width: 991.98px) {
  body.iitd-design-v2 {
    --iitd-pad-page: 20px;
    --iitd-footer-pad-y: 48px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body.iitd-design-v2 {
    --iitd-pad-page: 40px;
  }
}

@media (max-width: 767.98px) {
  body.iitd-design-v2 {
    --iitd-pad-page: 24px;
  }
}

@media (min-width: 1200px) {
  body.iitd-design-v2 {
    --iitd-logo-pad-y: 28px;
    --iitd-logo-pad-x: 22px;
  }
}

/* Share Figma page inset with sticky header (--iitd-header-pad-* from header.php). */
body.iitd-design-v2 header.sticky-header {
  --iitd-header-pad-inline: var(--iitd-pad-page);
  --iitd-header-content-max: 1440px;
}

/* ---- Header shell: page gutters (shell zeros generic .container; header.php sets padding with !important) ---- */

/* Pre-bar: Figma px page inset matches header grid via --iitd-header-pad-inline → --iitd-pad-page */
body.iitd-design-v2 .header-prebar-inner {
  padding: var(--iitd-prebar-pad-y) var(--iitd-header-pad-inline);
  gap: var(--iitd-gap-xl);
}

body.iitd-design-v2 .header-prebar-left,
body.iitd-design-v2 .header-prebar-right {
  gap: var(--iitd-gap-xl);
}

body.iitd-design-v2 .header-prebar-link {
  gap: var(--iitd-gap-xs);
}

/* Logo tab padding (inherits Figma 24×16 in base header; reinforce token) */
body.iitd-design-v2 .header-logo {
  padding: var(--iitd-logo-pad-y) var(--iitd-logo-pad-x);
}

@media (min-width: 992px) {
  body.iitd-design-v2 header.sticky-header .container.header-grid {
    column-gap: clamp(32px, 3.25vw, 52px);
  }

  body.iitd-design-v2 header.sticky-header .header-nav .navbar-nav {
    gap: var(--iitd-gap-xl);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  body.iitd-design-v2 header.sticky-header .header-nav .navbar-nav {
    gap: 10px;
  }
}

/*
 * Desktop mega menu (lg+ only in markup: .navbar-nav.d-none.d-lg-flex).
 * Figma header-menu node 432:5144 — #7b1818 panel, 32px padding, left-aligned text.
 */
@media (min-width: 992px) {

  /*
   * Panel surface + tokens. iitd-no-bootstrap-shell.css zeroes .py-3 with !important,
   * so padding-top/bottom on .container.py-3 need !important here to restore inner spacing.
   */
  body.iitd-design-v2 .header-nav .dropdown-menu.mega-menu {
    --mega-pad-x: 32px;
    --mega-pad-y: 32px;
    --mega-bg: #7b1818;
    --mega-desc: rgba(255, 255, 255, 0.72);
    --mega-hover-row: rgba(255, 255, 255, 0.12);
    --mega-col-divider: rgba(255, 255, 255, 0.14);
    --numbers-gap-medium: 12px;
    --numbers-gap-small: 8px;
    --numbers-font-size-small: 0.875rem;
    --text-white: #ffffff;
    --text-transparent-white: rgba(255, 255, 255, 0.7);

    top: 100%;
    /* Push menu to header visual bottom (prebar 26px + main bar 76px = 102px).
       navbar-nav (positioning parent) sits ~13px above header bottom. */
    margin-top: 13px;
    z-index: 1080;

    border: none;
    border-radius: 0;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
    background-color: var(--mega-bg);
  }

  /* !important needed: iitd-no-bootstrap-shell.css zeros .py-3 top/bottom with !important */
  body.iitd-design-v2 .header-nav .dropdown-menu.mega-menu .container.py-3 {
    padding-top: var(--mega-pad-y) !important;
    padding-bottom: var(--mega-pad-y) !important;
    padding-left: var(--mega-pad-x) !important;
    padding-right: var(--mega-pad-x) !important;
  }
}

@media (max-width: 991.98px) {

  /* Match header.php: full-width mobile mega stays flush if ever shown */
  body.iitd-design-v2 .header-nav .dropdown-menu.mega-menu {
    border-radius: 0;
  }

  /* Expand #mainNav to full header width (same band as sticky header behind it) — cancels header-grid gutters */
  body.iitd-design-v2 header.sticky-header .header-grid.container > .header-nav #mainNav.navbar-collapse {
    margin-left: calc(-1 * var(--iitd-pad-page));
    margin-right: calc(-1 * var(--iitd-pad-page));
    width: calc(100% + 2 * var(--iitd-pad-page));
    max-width: none;
    box-sizing: border-box;
  }
}

/* Mobile header row (~92px content band ≈ desktop logo tab; excludes pre-bar). Hidden ≥lg via markup. */
body.iitd-design-v2 header.sticky-header .header-nav nav > .iitd-mobile-header-bar {
  box-sizing: border-box;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 991.98px) {
  body.iitd-design-v2 header.sticky-header {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
  }

  body.iitd-design-v2 header.sticky-header .container.header-grid {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0;
  }

  body.iitd-design-v2 header.sticky-header .header-nav {
    min-width: 0;
    max-width: 100%;
  }

  body.iitd-design-v2 {
    --iitd-mobile-header-band: 92px;
    --iitd-mobile-header-pad-top: 40px;
    --iitd-mobile-header-content-h: 52px;
    --iitd-mobile-brand-h: 48px;
    --iitd-mobile-logo-img-offset-y: 8px;
    --iitd-mobile-tab-w: 212px;
    --iitd-mobile-tab-h: 58px;
    --iitd-mobile-tab-offset-x: -12px;
    --iitd-mobile-tab-offset-y: 5.5px;
  }

  /*
    Figma node 583:16764 (header, 375×92):
      - bg #A70E13, padding-top 40, padding-x 20 (= --iitd-pad-page on mobile)
      - content row 52 tall (justify-between), inner items items-center
  */
  body.iitd-design-v2 header.sticky-header .header-nav nav > .iitd-mobile-header-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(12px, 4vw, 20px);
    min-height: calc(var(--iitd-mobile-header-band) + env(safe-area-inset-top, 0px));
    padding-top: calc(var(--iitd-mobile-header-pad-top) + env(safe-area-inset-top, 0px));
    padding-bottom: 0;
    /* Allow Union tab (logo bg) to extend below the header band */
    overflow: visible;
  }

  body.iitd-design-v2 header.sticky-header .header-nav nav > .iitd-mobile-header-bar .iitd-mobile-nav-toggle {
    justify-self: end;
  }

  /*
    Figma extended-logo (583:16766): 137×52 frame holding the white logo (197×48).
    The `<a>` matches the 52px Figma container so the logo image (48px) sits at y=8 inside,
    allowing the Union tab (583:16767) to anchor relative to the same origin.
  */
  body.iitd-design-v2 .iitd-mobile-logo-tab {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    justify-self: start;
    box-sizing: border-box;
    margin: 0;
    padding: var(--iitd-mobile-logo-img-offset-y) 0 0 0;
    height: var(--iitd-mobile-header-content-h);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    text-decoration: none;
    line-height: 0;
    overflow: visible;
  }

  /*
    Figma 583:16767 "Union": 212×58 red tab anchored at x=-12, y=5.5 within extended-logo.
    Same red as header bg — visually a curved tab extending 11.5px below the header band.
    z-index: 0 keeps it above the header background but behind the logo image (z-index: 1).
  */
  body.iitd-design-v2 .iitd-mobile-logo-tab::before {
    content: "";
    position: absolute;
    left: var(--iitd-mobile-tab-offset-x);
    top: var(--iitd-mobile-tab-offset-y);
    width: var(--iitd-mobile-tab-w);
    height: var(--iitd-mobile-tab-h);
    max-width: calc(100vw - 2 * var(--iitd-pad-page) + 12px);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 212 58' preserveAspectRatio='none'><path d='M209.594 51.1113C207.614 55.3163 203.385 57.9999 198.737 58H13.2627C8.61508 57.9999 4.38578 55.3163 2.40625 51.1113L0 46V0H212V46L209.594 51.1113Z' fill='%23A70E13'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    pointer-events: none;
  }

  body.iitd-design-v2 .iitd-mobile-logo-tab:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
  }

  body.iitd-design-v2 header.sticky-header .mobile-brand {
    position: relative;
    z-index: 1;
    height: var(--iitd-mobile-brand-h) !important;
    max-width: none !important;
    width: auto !important;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
  }
}

body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__scroll {
  padding-top: var(--iitd-mobile-nav-scroll-pad-y);
  padding-bottom: var(--iitd-mobile-nav-scroll-pad-y);
  padding-inline: var(--iitd-mobile-nav-scroll-pad-x);
}

body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__sections {
  gap: 20px;
}

body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__expand-btn,
body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__link-row {
  gap: 10px;
}

body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__row-heading {
  gap: 10px;
}

body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__collapse .iitd-mobile-menu__panel {
  padding: 16px 0 0;
}

body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__subblock + .iitd-mobile-menu__subblock .iitd-mobile-menu__subhead {
  margin-top: 16px;
}

body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__sublink + .iitd-mobile-menu__sublink {
  margin-top: 8px;
}

body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__footer {
  padding: var(--iitd-mobile-nav-scroll-pad-y) var(--iitd-mobile-nav-scroll-pad-x);
}

body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__footer-actions {
  gap: 16px;
}

body.iitd-design-v2 header.sticky-header .header-nav .iitd-mobile-menu__footer-act {
  gap: 4px;
}

/* ---- Footer (tokens mirror Figma footer + home page gutters) ---- */
body.iitd-design-v2 .site-footer {
  padding-top: var(--iitd-footer-pad-y);
  padding-bottom: var(--iitd-footer-pad-y);
  margin-top: 0;
}

body.iitd-design-v2 .site-footer .container {
  padding-left: var(--iitd-pad-page);
  padding-right: var(--iitd-pad-page);
}

body.iitd-design-v2 .site-footer-grid {
  gap: var(--iitd-gap-xl) var(--iitd-gap-lg);
}

body.iitd-design-v2 .site-footer-courses,
body.iitd-design-v2 .site-footer-info {
  gap: var(--iitd-gap-lg);
}

body.iitd-design-v2 .site-footer-info-stack {
  gap: var(--iitd-gap-xl);
}

body.iitd-design-v2 .site-footer-aside {
  gap: var(--iitd-gap-xl);
  width: 305px;
  flex-shrink: 0;
}

body.iitd-design-v2 .site-footer-aside-body {
  gap: var(--iitd-gap-md);
}

body.iitd-design-v2 .site-footer-aside > a {
  width: 305px;
  height: 74px;
  flex-shrink: 0;
}

body.iitd-design-v2 .site-footer-logo {
  width: 305px;
  height: 74px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

body.iitd-design-v2 .site-footer-contact {
  gap: var(--iitd-gap-md);
}

body.iitd-design-v2 .site-footer-social {
  gap: var(--iitd-gap-md);
}

body.iitd-design-v2 .site-footer-contact-item {
  align-items: center;
  gap: var(--iitd-gap-sm);
}

body.iitd-design-v2 .site-footer-bottom {
  gap: var(--iitd-gap-md);
  margin-top: var(--iitd-gap-xl);
  padding-top: 1.5rem;
}

body.iitd-design-v2 .site-footer-title {
  margin-bottom: var(--iitd-gap-sm);
}

body.iitd-design-v2 .site-footer-list li + li {
  margin-top: var(--iitd-gap-sm);
}

@media (max-width: 1199.98px) {
  body.iitd-design-v2 .site-footer-grid {
    gap: var(--iitd-gap-xl) var(--iitd-gap-lg);
  }

  body.iitd-design-v2 .site-footer-aside {
    width: 100%;
    max-width: 305px;
  }
}

@media (max-width: 991.98px) {
  body.iitd-design-v2 .site-footer-grid {
    gap: 28px;
  }
}

@media (max-width: 767.98px) {
  body.iitd-design-v2 .site-footer {
    margin-top: 0;
  }

  body.iitd-design-v2 .site-footer-col {
    padding-bottom: var(--iitd-gap-md);
  }

  body.iitd-design-v2 .site-footer-aside {
    width: 100%;
    max-width: 305px;
    padding-top: var(--iitd-gap-md);
    border-bottom: 0;
    padding-bottom: 0;
  }
}