/* ============================================================
   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('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

:root {
	--sks-maroon: #7a1233;
	--sks-maroon-dark: #4a0a1f;
	--sks-navy: #241b4d;
	--sks-gold: #f0b429;
}

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));
}

/* ---------- 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: #5c2d91; }
.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: #f5eef1 !important;
	color: var(--sks-maroon);
	padding: 2px 10px;
	border-radius: 12px;
}

.sks-card {
	border-radius: 16px !important;
	border-left: 4px solid var(--sks-gold) !important;
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
	position: relative;
}
.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 #e6dfe2 !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 #e6dfe2 !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: #b23a48; }

/* ---------- list groups (mtech.php, course info rows) ---------- */
.list-group-item {
	border-radius: 10px !important;
	margin-bottom: 8px;
	border: 1px solid #eee2e7 !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 #e6dfe2;
}
.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(74,10,31,.85), rgba(122,18,51,.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(122,18,51,.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;
	}
}