/* ============================================================
   Style: Vivid
   Slowly shifting gradients, a soft colour wash behind the page, glassy
   cards with colour-tinted shadows, pill shapes. Injected at the end of
   <head> by lib/theme.php; colours come only from the --sks-* variables
   so it works with any palette. "html" prefixes win ties against the
   pages' own rules. All motion stops under prefers-reduced-motion.
   ============================================================ */

/* ---------- soft colour wash behind everything ---------- */
html body {
	background: #faf9fb;
}
html body::before {
	content: "";
	position: fixed;
	z-index: -1;
	top: 0; right: 0; bottom: 0; left: 0;
	pointer-events: none;
	background:
		radial-gradient(40% 45% at 0% 0%, var(--sks-gold), transparent 70%),
		radial-gradient(45% 50% at 100% 25%, var(--sks-maroon), transparent 70%),
		radial-gradient(50% 50% at 25% 100%, var(--sks-navy), transparent 70%);
	opacity: .09;
}
html .banner_area .banner_inner {
	background: transparent;
}

@keyframes sksVividShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ---------- inner-page banner: moving gradient, bigger glows ---------- */
html .banner_area .banner_inner .banner_content {
	border-radius: 28px;
	background: linear-gradient(120deg, var(--sks-maroon-dark), var(--sks-maroon), var(--sks-navy), var(--sks-maroon));
	background-size: 300% 300%;
	animation: sksVividShift 16s ease-in-out infinite;
	box-shadow: 0 26px 50px -18px var(--sks-maroon);
}
html .banner_area .banner_inner .banner_content::before,
html .banner_area .banner_inner .banner_content::after {
	opacity: .55;
}
html .banner_area .banner_inner .banner_content h2 {
	font-weight: 800;
	letter-spacing: .01em;
	text-shadow: 0 2px 14px rgba(0,0,0,.25);
}

/* ---------- homepage hero ---------- */
html body.home-page .welcome_area {
	background: linear-gradient(120deg, var(--sks-maroon-dark), var(--sks-maroon), var(--sks-navy), var(--sks-maroon-dark));
	background-size: 300% 300%;
	animation: sksVividShift 18s ease-in-out infinite;
}
html body.home-page .welcome_area::before,
html body.home-page .welcome_area::after {
	opacity: .55;
}
html body.home-page .welcome_text {
	border-radius: 30px;
	background: rgba(255,255,255,.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
html body.home-page .sks-hl-box {
	border-radius: 26px;
	background: linear-gradient(120deg, var(--sks-maroon-dark), var(--sks-maroon), var(--sks-navy), var(--sks-maroon-dark));
	background-size: 300% 300%;
	animation: sksVividShift 16s ease-in-out infinite;
	box-shadow: 0 22px 44px -18px var(--sks-navy);
}

/* ---------- cards: translucent, rounder, colour-tinted shadow, bigger lift ---------- */
html .sks-card, html .sks-panel, html .team-member,
html body.home-page .sks-stat-card,
html .tk-item, html .tk-tile, html .tk-controls,
html .pubx-item, html .pubx-tile, html .pubx-controls,
html .fpg-item, html .mts-card, html .mts-stat,
html .stu-card, html .mdp-course-card {
	/* no backdrop-filter here: it would make each card a stacking context
	   and trap the filter dropdowns inside .pubx-controls / .tk-controls
	   underneath the cards that follow them */
	border-radius: 22px !important;
	background: rgba(255,255,255,.86);
	box-shadow: 0 16px 34px -18px var(--sks-navy);
	transition: transform .3s cubic-bezier(.2,.8,.3,1.2), box-shadow .3s ease, border-color .2s ease;
}
html .stu-flip > .stu-face, html .stu-flip > .stu-back, html .mts-front, html .mdp-note {
	border-radius: 22px !important;
}
html .team-member:hover, html body.home-page .sks-stat-card:hover,
html .tk-item:hover, html .pubx-item:hover, html .fpg-item:hover,
html .stu-card:hover, html .mdp-course-card:hover, html .sks-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 44px -18px var(--sks-maroon);
}
html .table {
	border-radius: 18px;
	box-shadow: 0 16px 34px -20px var(--sks-navy);
}
html .list-group-item {
	border-radius: 16px !important;
}

/* ---------- pills ---------- */
html .sks-badge, html .sks-section-label,
html .tk-cat, html .pubx-tag, html .pubx-type, html .pubx-kw,
html .mts-chip, html .mts-year-badge, html .badge,
html body.home-page .sks-contact-chip, html body.home-page .sks-readmore-btn {
	border-radius: 999px !important;
}
html .sks-badge, html .sks-section-label, html body.home-page .sks-readmore-btn {
	background: linear-gradient(120deg, var(--sks-maroon), var(--sks-navy), var(--sks-maroon));
	background-size: 200% 200%;
	box-shadow: 0 6px 16px -6px var(--sks-maroon);
	transition: background-position .5s ease, transform .2s ease;
}
html .sks-badge:hover, html .sks-section-label:hover, html body.home-page .sks-readmore-btn:hover {
	background-position: 100% 50%;
	transform: translateY(-1px);
}
html .team-member img.rounded-circle {
	box-shadow: 0 0 0 3px var(--sks-gold), 0 10px 24px -8px var(--sks-maroon);
}

/* ---------- menus ---------- */
html .header_area .navbar .nav .nav-item.submenu ul {
	border-radius: 20px;
}
html .header_area .navbar .nav .nav-item.submenu ul > .nav-item:first-child > .nav-link { border-radius: 20px 20px 0 0; }
html .header_area .navbar .nav .nav-item.submenu ul > .nav-item:last-child > .nav-link { border-radius: 0 0 20px 20px; }
html .header_area .navbar .nav .nav-item.submenu ul > .nav-item:first-child:last-child > .nav-link { border-radius: 20px; }

/* ---------- footer ---------- */
html .footer_area {
	background: linear-gradient(120deg, var(--sks-maroon-dark), var(--sks-navy), var(--sks-maroon));
	background-size: 300% 300%;
	animation: sksVividShift 20s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	html .banner_area .banner_inner .banner_content,
	html body.home-page .welcome_area,
	html body.home-page .sks-hl-box,
	html .footer_area {
		animation: none;
	}
	html .team-member:hover, html body.home-page .sks-stat-card:hover,
	html .tk-item:hover, html .pubx-item:hover, html .fpg-item:hover,
	html .stu-card:hover, html .mdp-course-card:hover, html .sks-card:hover {
		transform: none;
	}
}

/* the homepage stat cards straddle the hero's bottom edge; translucent,
   their top half would pick up the hero colour */
html body.home-page .sks-stat-card {
	background: #fff;
}