/* NMIMS CIIS — assets/css/04-sections/header.css — extracted from approved source (Phase 2B) */

:root {
	--nmims-header-mobile-height: 92px;
	--nmims-header-tablet-height: 63px;
	--nmims-mobile-sticky-bar-height: 72px;
}

/* ── STICKY HEADER ── */
#site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.06); transition: box-shadow 0.3s; }
#site-header.scrolled { box-shadow: var(--shadow-soft); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 15px; }
.logo-wrap { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: 44px; height: 44px; background: var(--red); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.logo-mark svg { width: 26px; height: 26px; fill: white; }
.logo-text { line-height: 1.2; }
.logo-text strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--dark); font-weight: 700; display: block; }
.logo-text span { font-size: 0.7rem; color: var(--grey-text); letter-spacing: 0.06em; text-transform: uppercase; }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .btn { padding: 10px 20px; font-size: 0.87rem; }

/* ── LOGO ── */
.nmims-logo-img { height: 100%; width: 100%; object-fit: contain; display: block; }

/* ── FULL NAV ── */
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a { font-size: 0.88rem; font-weight: 500; color: var(--dark); text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: all 0.2s; white-space: nowrap; }
.main-nav a:hover { color: var(--purple); background: rgba(75,44,123,0.06); }
.nav-wa { display: flex !important; align-items: center; gap: 6px; color: #15803d !important; }
.nav-wa-dot { width: 8px; height: 8px; background: #25D366; border-radius: 50%; animation: pulse 2s infinite; flex-shrink: 0; }
.nav-apply { background: var(--red) !important; color: white !important; padding: 10px 20px !important; border-radius: 100px !important; box-shadow: 0 4px 16px rgba(200,16,46,0.30); }
.nav-apply:hover { background: var(--red-dark) !important; transform: translateY(-1px); }
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: all 0.3s; }

/* ── NAV RESPONSIVE ── */
@media (max-width: 1024px) { .main-nav a:not(.nav-wa):not(.nav-apply) { display: none; } .main-nav .nav-wa, .main-nav .nav-apply { display: flex; }
}
@media (max-width: 768px) { .main-nav { display: none; position: absolute; top: var(--nmims-header-mobile-height); left: 0; right: 0; background: white; flex-direction: column; align-items: stretch; padding: 16px; gap: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: 999; border-top: 1px solid var(--grey-light); } .main-nav.open { display: flex; } .main-nav a { display: block !important; padding: 12px 16px; border-radius: 10px; } .nav-apply { text-align: center; justify-content: center; } .nav-burger { display: flex; } .hero-inner { grid-template-columns: 1fr; gap: 0; padding: 32px 0 20px; } .hero-person-wrap { min-height: 300px; order: -1; } .hero-tag { font-size: 0.72rem; padding: 7px 10px; } .hero-tag-3, .hero-tag-4 { display: none; } .spec-grid { grid-template-columns: repeat(2, 1fr); } .spec-card-7 { grid-column: span 2; } .about-card-stack { height: 380px; }
}
@media (max-width: 480px) { .spec-grid { grid-template-columns: 1fr; } .spec-card-7 { grid-column: span 1; }
}

/* ── Phase 15: tablet header alignment (769px–900px) ── */
@media (min-width: 769px) and (max-width: 900px) {
	body {
		padding-top: var(--nmims-header-tablet-height) !important;
	}

	#site-header {
		min-height: var(--nmims-header-tablet-height) !important;
		height: var(--nmims-header-tablet-height) !important;
	}

	.header-inner {
		height: var(--nmims-header-tablet-height) !important;
		min-height: var(--nmims-header-tablet-height) !important;
	}

	.main-nav {
		top: var(--nmims-header-tablet-height) !important;
	}

	.hero {
		padding-top: var(--nmims-header-tablet-height) !important;
	}
}