/* ============================================================
   SKS site-wide theme layer
   Loaded on every page via layout/meta-info.php. Purely additive:
   it re-skins existing template classes (banner_area, table,
   badges, list-group, head-title, footer_area, team-member) with
   a consistent maroon/navy/gold identity. No markup, JS, or PHP
   version dependency required.
   ============================================================ */

@import url(css/'https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

:root {
	--sks-maroon: #9d174d;
	--sks-maroon-dark: #5f0d2f;
	--sks-navy: #3b0a24;
	--sks-gold: #f6a5c8;
}

body {
	background: #fbfaf9;
}
h2, h3, h4,
.section-title h2 {
	font-family: 'Poppins', 'Heebo', sans-serif;
}

/* ---------- footer, site-wide ---------- */
.footer_area {
	background: linear-gradient(135deg, var(--sks-maroon-dark), var(--sks-navy));
}
/* base .copyright p sets line-height:9px (css/style.css), shorter than the
   text's own font-size, so when the line wraps on narrow screens the two
   lines overlap. Restore normal spacing site-wide. */
.copyright p {
	line-height: 1.5;
}

/* ---------- inner-page banner / breadcrumb hero ---------- */
.banner_area .banner_inner {
	background: #fbfaf9;
	overflow: hidden;
}
.banner_area .banner_inner .banner_content {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: linear-gradient(135deg, var(--sks-maroon-dark) 0%, var(--sks-maroon) 50%, var(--sks-navy) 100%);
	border-radius: 20px;
	padding: 45px 25px;
	margin-bottom: 40px;
	box-shadow: 0 20px 45px rgba(0,0,0,.25);
}
.banner_area .banner_inner .banner_content::before,
.banner_area .banner_inner .banner_content::after {
	content: ""; position: absolute; border-radius: 50%; filter: blur(50px); opacity: .35; pointer-events: none;
}
.banner_area .banner_inner .banner_content::before { width: 260px; height: 260px; top: -110px; right: -60px; background: var(--sks-gold); }
.banner_area .banner_inner .banner_content::after { width: 220px; height: 220px; bottom: -120px; left: -60px; background: #901230; }
.banner_area .banner_inner .banner_content h2 {
	position: relative;
	color: #fff;
	font-family: 'Poppins', 'Heebo', sans-serif;
}
.banner_area .banner_inner .banner_content .page_link {
	position: relative;
}
.banner_area .banner_inner .banner_content .page_link a {
	color: rgba(255,255,255,.8);
}
.banner_area .banner_inner .banner_content .page_link a:hover {
	color: var(--sks-gold);
}

/* ---------- generic accent bits reused across pages ---------- */
.head-title {
	border-bottom: none;
}
.head-title h3 {
	color: var(--sks-maroon);
}
.mark-sty {
	background: #f6f0f3 !important;
	color: var(--sks-maroon);
	padding: 2px 10px;
	border-radius: 12px;
}

.sks-card {
	border-radius: 16px !important;
	border: 4px solid transparent !important;
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
	transition: border-color .2s ease;
	position: relative;
}
.sks-card:hover {
	border-color: var(--sks-gold) !important;
}
.sks-card::before {
	font-family: 'FontAwesome'; content: "\f10d"; position: absolute; top: -14px; left: 20px;
	width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 50%;
	background: var(--sks-maroon); color: #fff; font-size: 14px; box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

.sks-panel {
	background: #fff; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,.06);
	padding: 20px; margin-bottom: 25px;
}
.sks-panel .head-title { border-bottom: none; margin-bottom: 10px; }
.sks-panel .head-title h3 {
	color: var(--sks-maroon); display: inline-block; padding-bottom: 8px; border-bottom: 3px solid var(--sks-gold);
}
.sks-panel .border-top {
	border-top: 1px dashed #e9e2e6 !important; padding: 10px 6px; border-radius: 8px; transition: background .25s ease;
}
.sks-panel .border-top:hover { background: #faf6f3; }
.sks-panel .row.border-top {
	border-top: 1px dashed #e9e2e6 !important; margin: 0; padding: 8px 4px; border-radius: 8px; transition: background .25s ease;
}
.sks-panel .row.border-top:hover { background: #faf6f3; }

.sks-badge {
	display: inline-block; margin: 3px 6px 3px 0; padding: 5px 14px; border-radius: 20px;
	background: linear-gradient(135deg, var(--sks-maroon), var(--sks-navy));
	color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
}
.sks-section-label {
	display: inline-block;
	margin: 10px 0 16px;
	padding: 7px 18px;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--sks-maroon), var(--sks-navy));
	color: #fff !important;
	font-weight: 600;
	letter-spacing: .03em;
}

/* ---------- tables (course-material listings, ecp.php) ---------- */
.table {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(0,0,0,.05);
	margin-top: 10px;
}
.table thead th {
	background: linear-gradient(135deg, var(--sks-maroon), var(--sks-navy));
	color: #fff;
	border: none;
	vertical-align: middle;
}
.table tbody tr:hover {
	background: #faf6f3;
}

/* recolor bootstrap badges used as inline labels, keep three distinct hues */
.badge-primary { background-color: var(--sks-maroon); }
.badge-info { background-color: var(--sks-navy); }
.badge-success { background-color: #2f7d5e; }
.badge-danger { background-color: #c34760; }

/* ---------- list groups (mtech.php, course info rows) ---------- */
.list-group-item {
	border-radius: 10px !important;
	margin-bottom: 8px;
	border: 1px solid #f0e5eb !important;
	transition: transform .2s ease, box-shadow .2s ease;
}
.list-group-item.list-group-item-action:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0,0,0,.08);
	border-color: var(--sks-gold) !important;
}

/* ---------- course-material info rows (iivp.php, coa.php, dco.php, ecp.php, ivr.php, mdp.php, iivp2022.php) ----------
   Each <li> carries an inline `style="padding:2px 0"` that pulls its content
   flush against the card border, and the maroon label pills sit edge-to-edge
   with their text. Give the row interior real padding so nothing touches the
   border, and pad the pills + the section-heading badges so their text isn't
   cramped. Scoped to .banner_area so mtech.php's list-group is left alone;
   !important is needed only to beat the inline <li> padding. */
.banner_area .list-group-item {
	padding: 9px 16px !important;
}
.banner_area .list-group-item .badge {
	display: inline-block;
	padding: 7px 8px;
	margin-right: 12px;
	vertical-align: middle;
	line-height: 1.3;
}
.banner_area .row > .badge {
	padding: 9px 16px;
	line-height: 1.4;
}

/* ---------- publication list ---------- */
.plist > li {
	padding: 10px 0;
	border-bottom: 1px dashed #e9e2e6;
}
.plist > li:last-child { border-bottom: none; }
.plist .pub { line-height: 1.7; }
.plist b { color: var(--sks-maroon); }

/* ---------- student / team cards (students.php, mtech.php) ---------- */
.team-member {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(0,0,0,.06);
	padding: 25px 15px;
	margin-bottom: 25px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.team-member:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 35px rgba(0,0,0,.1);
}
.team-member img.rounded-circle {
	width: 120px; height: 120px; object-fit: cover;
	border: 4px solid #fff;
	box-shadow: 0 0 0 3px var(--sks-gold);
	margin-bottom: 12px;
}
.team-member h4 { color: var(--sks-maroon); font-size: 1.05rem; }

.stud-details ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.stud-details li { padding: 2px 0; }

.section-heading {
	color: var(--sks-maroon);
	font-family: 'Poppins', 'Heebo', sans-serif;
}

/* ---------- main menu dropdown (hover) ---------- */
.header_area .navbar .nav .nav-item.submenu ul {
	background: linear-gradient(135deg, rgba(95,13,47,.85), rgba(157,23,77,.8));
	border-radius: 14px;
	/* was hidden -- kept visible so the nested "Current / Previous Courses"
	   fly-out menus are not clipped. The gradient is still rounded because
	   border-radius always clips the element's own background paint. */
	overflow: visible;
	box-shadow: 0 15px 35px rgba(0,0,0,.3);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item {
	border-bottom: 1px solid rgba(255,255,255,.14);
}
/* Corner rounding is scoped to the DIRECT children (>) of each panel. With a
   plain descendant combinator it leaked into the nested "Current / Previous
   Courses" fly-outs: every fly-out link is also a descendant of the
   :first-child ("Current Courses") or :last-child ("Previous Courses") item,
   so the fly-out's own rows inherited the outer panel's corner radius
   (square top, rounded bottom halfway down the list). The colour/hover rules
   below stay descendant-scoped on purpose -- they must reach every row. */
.header_area .navbar .nav .nav-item.submenu ul > .nav-item:first-child > .nav-link { border-radius: 14px 14px 0 0; }
.header_area .navbar .nav .nav-item.submenu ul .nav-item:last-child { border-bottom: none; }
.header_area .navbar .nav .nav-item.submenu ul > .nav-item:last-child > .nav-link { border-radius: 0 0 14px 14px; }
/* A panel or fly-out holding a single row -- e.g. Course Materials -> Current
   Courses -- has that row matching BOTH :first-child and :last-child, so the
   :last-child rule above would leave its top square. Round all four corners. */
.header_area .navbar .nav .nav-item.submenu ul > .nav-item:only-child > .nav-link,
.header_area .navbar .nav .nav-item.submenu ul > .nav-item:first-child:last-child > .nav-link { border-radius: 14px; }
.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
	color: rgba(255,255,255,.85);
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link {
	background: rgba(157,23,77,.55);
	color: #fff;
}

/* ---------- nested (second level) dropdown: Course Materials -> Current / Previous ---------- */
.header_area .navbar .nav .nav-item.submenu ul .nav-item.dropdown-submenu {
	position: relative;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item.dropdown-submenu > .nav-link::after {
	content: "\f0d9"; /* fa-caret-left (second level flies out to the left) */
	font-family: 'FontAwesome';
	float: left;
	margin-right: 8px;
	opacity: .6;
}
@media (min-width: 992px) {
	.header_area .navbar .nav .nav-item.submenu ul .nav-item.dropdown-submenu > ul {
		position: absolute;
		top: 0;
		/* the main menu is right-aligned (ml-auto), so fly the second level
		   out to the LEFT to stay on screen */
		right: 100%;
		left: auto;
		min-width: 250px;
		margin: 0;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease-in, visibility 200ms ease-in;
		box-shadow: 0 15px 35px rgba(0,0,0,.35);
	}
	/* the ::before arrow that css/style.css puts on every .submenu ul points
	   at the top bar; it makes no sense on a side fly-out, so hide it */
	.header_area .navbar .nav .nav-item.submenu ul .nav-item.dropdown-submenu > ul:before {
		display: none;
	}
	.header_area .navbar .nav .nav-item.submenu ul .nav-item.dropdown-submenu:hover > ul {
		opacity: 1;
		visibility: visible;
	}
	/* keep the parent panel open while the pointer travels to the fly-out */
	.header_area .navbar .nav .nav-item.submenu:hover ul .nav-item.dropdown-submenu > ul {
		top: 0;
	}
}
@media (max-width: 991px) {
	/* everything is stacked inside the hamburger: show the second level
	   indented, with the section header emphasised. */
	.header_area .navbar .nav .nav-item.submenu ul .nav-item.dropdown-submenu > .nav-link {
		font-weight: 700;
		color: #fff;
		text-transform: uppercase;
		font-size: .8rem;
		letter-spacing: .04em;
	}
	.header_area .navbar .nav .nav-item.submenu ul .nav-item.dropdown-submenu > .nav-link::after {
		content: "";
	}
	.header_area .navbar .nav .nav-item.submenu ul .nav-item.dropdown-submenu > ul .nav-item .nav-link {
		padding-left: 32px;
	}
	.header_area .navbar .nav .nav-item.submenu ul .nav-item.dropdown-submenu > ul .nav-link::before {
		content: "\2013\00a0"; /* en-dash */
		opacity: .5;
	}

	/* ---------- mobile hamburger toggle ----------
	   responsive.css paints the toggle bars a leftover template blue
	   (#8490ff) and animates them by nudging each bar with `top`/`bottom`
	   offsets tuned for its own plain block-stacked layout. Re-skin them
	   to the theme maroon and give the button some tactile life (round
	   tap target, springy morph, press feedback) -- but rebuilt on
	   absolute centering instead of patching those offsets, so the two
	   rotated bars always cross through the exact same point regardless
	   of container size (the old offsets, reused as-is, produced a
	   lopsided "<" instead of an "X" once the button became a flex
	   circle). `position`/`top` are re-declared in the [aria-expanded]
	   rules below to beat responsive.css's own same-specificity rules
	   that set `position: relative`. The home page sets its own
	   contrast-driven colour (see index.php) and stays untouched. */
	.navbar-toggler {
		position: relative;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		transition: background .25s ease, transform .15s ease;
	}
	.navbar-toggler[aria-expanded="true"] {
		background: rgba(157, 23, 77, .1);
	}
	.navbar-toggler:active {
		transform: scale(.88);
	}
	.navbar-toggler span,
	.navbar-toggler .icon-bar {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 18px;
		height: 2px;
		margin: 0;
		background: var(--sks-maroon);
		border-radius: 3px;
		transform: translate(-50%, -50%);
		transition: transform .35s cubic-bezier(.5, -.4, .5, 1.4), opacity .2s ease;
	}
	.navbar-toggler span:first-child,
	.navbar-toggler .icon-bar:first-child {
		transform: translate(-50%, calc(-50% - 7px));
	}
	.navbar-toggler span:last-child,
	.navbar-toggler .icon-bar:last-child {
		transform: translate(-50%, calc(-50% + 7px));
	}
	.navbar-toggler[aria-expanded="true"] span:first-child {
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.navbar-toggler[aria-expanded="true"] span:last-child {
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* ---------- mobile nav panel ----------
	   Re-cast the dropdown as a branded card instead of a bare white
	   scroll box: same maroon->navy gradient, blurred accent glow and
	   pill hover language already used for the desktop hover panels
	   (above) and the banner/footer sections site-wide, so opening the
	   burger menu feels like part of the same site rather than a
	   leftover template default. */
	.header_area .navbar {
		background: transparent;
	}
	.header_area .navbar-collapse {
		position: relative;
		margin-top: 8px;
		padding: 6px 6px 10px;
		border-radius: 18px;
		background: linear-gradient(160deg, var(--sks-maroon-dark) 0%, var(--sks-maroon) 55%, var(--sks-navy) 100%);
		box-shadow: 0 20px 45px rgba(95, 13, 47, .35);
		max-height: min(75vh, 520px);
		overflow-x: hidden;
		overflow-y: auto;
	}
	.header_area .navbar-collapse::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: -60px;
		right: -40px;
		width: 150px;
		height: 150px;
		border-radius: 50%;
		background: var(--sks-gold);
		filter: blur(45px);
		opacity: .3;
		pointer-events: none;
	}
	.header_area .navbar .nav .nav-item .nav-link {
		position: relative;
		z-index: 1;
		color: rgba(255, 255, 255, .88);
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		border-radius: 10px;
		padding: 0 14px;
		transition: background .2s ease, color .2s ease, padding-left .2s ease;
	}
	.header_area .navbar .nav > .nav-item:last-child > .nav-link {
		border-bottom: none;
	}
	.header_area .navbar .nav .nav-item .nav-link:hover,
	.header_area .navbar .nav .nav-item .nav-link:focus {
		background: rgba(255, 255, 255, .1);
		color: #fff;
		padding-left: 20px;
	}
	.header_area .navbar .nav > .nav-item.active > .nav-link {
		color: var(--sks-gold);
	}

	/* top-level dropdown triggers ("Students", "Course Materials") had no
	   visible affordance at all -- css/style.css hides every nav-link's
	   ::after by default and only the nested fly-outs re-add one. Give the
	   two top-level toggles a chevron that flips with Bootstrap's own
	   aria-expanded state, no extra JS required. */
	.header_area .navbar .nav > .nav-item.submenu > .nav-link.dropdown-toggle::after {
		content: "\f107";
		font-family: 'FontAwesome';
		display: inline-block;
		float: right;
		border: none;
		width: auto;
		height: auto;
		margin: 0;
		transition: transform .3s ease;
	}
	.header_area .navbar .nav > .nav-item.submenu > .nav-link.dropdown-toggle[aria-expanded="true"]::after {
		transform: rotate(180deg);
	}

	/* cascade the top-level items in as the panel opens, instead of the
	   whole list just appearing at once */
	.header_area .navbar-collapse.show .nav > .nav-item {
		animation: sksMenuItemIn .4s cubic-bezier(.25, .8, .3, 1) both;
	}
	.header_area .navbar-collapse.show .nav > .nav-item:nth-child(1) { animation-delay: .03s; }
	.header_area .navbar-collapse.show .nav > .nav-item:nth-child(2) { animation-delay: .07s; }
	.header_area .navbar-collapse.show .nav > .nav-item:nth-child(3) { animation-delay: .11s; }
	.header_area .navbar-collapse.show .nav > .nav-item:nth-child(4) { animation-delay: .15s; }
	.header_area .navbar-collapse.show .nav > .nav-item:nth-child(5) { animation-delay: .19s; }
	.header_area .navbar-collapse.show .nav > .nav-item:nth-child(6) { animation-delay: .23s; }
	.header_area .navbar-collapse.show .nav > .nav-item:nth-child(7) { animation-delay: .27s; }
	.header_area .navbar-collapse.show .nav > .nav-item:nth-child(8) { animation-delay: .31s; }
	@keyframes sksMenuItemIn {
		from { opacity: 0; transform: translateY(-6px); }
		to { opacity: 1; transform: translateY(0); }
	}
	@media (prefers-reduced-motion: reduce) {
		.header_area .navbar-collapse.show .nav > .nav-item {
			animation: none;
		}
	}
}