/* frontend-modern.css - Modern UI Enhancements for LPM Frontend */

/* -----------------------------------------
   GLOBAL VARIABLES & TYPOGRAPHY
----------------------------------------- */
:root {
	--primary-color: #0b2c5c; /* Deep UHAMKA Blue */
	--accent-color: #f39c12; /* Accent Orange/Yellow */
	--bg-color: #f8fafc;
	--text-main: #2d3748;
	--text-muted: #718096;
	--white: #ffffff;
	--glass-bg: rgba(255, 255, 255, 0.85);
	--glass-border: rgba(255, 255, 255, 0.3);
	--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
	--shadow-hover: 0 15px 40px rgba(11, 44, 92, 0.1);
	--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body {
	background-color: var(--bg-color);
	color: var(--text-main);
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.features-title,
.card-title {
	color: var(--primary-color);
	font-weight: 700 !important;
}

p,
.text,
.sub-title {
	color: var(--text-main);
	line-height: 1.7;
}

/* -----------------------------------------
   HEADER & NAVBAR (GLASSMORPHISM)
----------------------------------------- */
#header {
	background: var(--glass-bg) !important;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-bottom: 1px solid var(--glass-border);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	transition: var(--transition);
}

#header.header-scrolled {
	background: rgba(255, 255, 255, 0.95) !important;
	box-shadow: var(--shadow-soft);
}

.nav-menu a {
	color: var(--text-main) !important;
	font-weight: 600 !important;
	transition: var(--transition);
}

.nav-menu a:hover,
.nav-menu .menu-active > a {
	color: var(--primary-color) !important;
}

.nav-menu ul {
	background: var(--white) !important;
	box-shadow: var(--shadow-soft) !important;
	border-radius: 12px;
	border: none;
	padding: 10px 0;
}

/* -----------------------------------------
   MODERN CARDS (News, Agenda, Gallery)
----------------------------------------- */
.card,
.boxlist,
.single-features,
.galeri-body {
	background: var(--white) !important;
	border: none !important;
	border-radius: 16px !important;
	box-shadow: var(--shadow-soft) !important;
	transition: var(--transition) !important;
	overflow: hidden;
	margin-bottom: 24px !important;
	height: auto !important; /* Override style.css 100% height which breaks margins */
}

/* Fix for features card specifically because its icon is absolute */
.single-features {
	overflow: visible !important;
	min-height: 100px !important;
}

#footer .logo a {
	background: var(--white);
	padding: 15px 25px;
	border-radius: 12px;
	box-shadow: var(--shadow-soft);
	display: inline-block;
}

/* Make cover-kanal height match image proportions */
.cover-kanal.card-bg-scale {
	height: auto !important;
	aspect-ratio: 21 / 9;
	max-height: 550px;
	width: 100%;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

@media (max-width: 768px) {
	.cover-kanal.card-bg-scale {
		aspect-ratio: 16 / 9;
		max-height: 300px;
	}
}

.card:hover,
.boxlist:hover,
.single-features:hover,
.galeri-list:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-hover) !important;
}

/* Fix Card Padding and Texts */
.card-body {
	padding: 20px !important;
}

.card-title a {
	color: var(--primary-color) !important;
	text-decoration: none;
	font-weight: 700;
}

.card-title a:hover {
	color: var(--accent-color) !important;
}

.boxlist-content a {
	color: var(--primary-color) !important;
	font-weight: 700;
	font-size: 1.1rem;
}

.boxlist-content .date .s1 {
	color: var(--text-muted) !important;
}

/* -----------------------------------------
   HERO SLIDER
----------------------------------------- */
.slider-image-box img {
	border-radius: 20px;
	box-shadow: var(--shadow-soft);
}

.slider-content {
	background: transparent;
}

.slider_area {
	position: relative;
	z-index: 1;
}

/* -----------------------------------------
   BUTTONS
----------------------------------------- */
.main-btn,
.btn-stroke,
a.btn-stroke.text-dark {
	background: linear-gradient(
		135deg,
		var(--primary-color) 0%,
		#0a1f40 100%
	) !important;
	color: var(--white) !important;
	border: none !important;
	border-radius: 30px !important;
	padding: 12px 30px !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 15px rgba(11, 44, 92, 0.3) !important;
	transition: var(--transition) !important;
	display: inline-block;
	text-align: center;
}

.main-btn:hover,
.btn-stroke:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 25px rgba(11, 44, 92, 0.4) !important;
	background: linear-gradient(
		135deg,
		#0a1f40 0%,
		var(--primary-color) 100%
	) !important;
	color: var(--white) !important;
}

/* -----------------------------------------
   FOOTER
----------------------------------------- */
#footer {
	background: #0b2c5c !important;
	color: #e2e8f0 !important;
	border-top: none;
}

#footer,
.slider_area,
.berita_area,
.galeri_area,
.features-area,
.newsticker_area,
.cover-kanal {
	/* Just a marker for these dark sections */
}

#footer p,
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer div,
#footer span,
#footer strong,
.slider_area p,
.slider_area h1,
.slider_area h2,
.slider_area h3,
.slider_area h4,
.slider_area h5,
.slider_area h6,
.slider_area span,
.slider_area strong,
.slider_area .text,
.slider_area .title,
.cover-kanal p,
.cover-kanal h1,
.cover-kanal h2,
.cover-kanal h3,
.cover-kanal h4,
.cover-kanal h5,
.cover-kanal h6,
.cover-kanal span,
.cover-kanal strong,
.cover-kanal .sub-title,
.cover-kanal .section-title,
.newsticker_area p,
.newsticker_area h1,
.newsticker_area h2,
.newsticker_area h3,
.newsticker_area h4,
.newsticker_area h5,
.newsticker_area h6,
.newsticker_area span,
.newsticker_area strong,
.newsticker_area .sub-title,
.newsticker_area .section-title,
.box-headline p,
.box-headline h1,
.box-headline h2,
.box-headline h3,
.box-headline h4,
.box-headline h5,
.box-headline h6,
.box-headline span,
.box-headline strong,
.box-headline .sub-title,
.box-headline .section-title,
#galeri-slider p,
#galeri-slider h1,
#galeri-slider h2,
#galeri-slider h3,
#galeri-slider h4,
#galeri-slider h5,
#galeri-slider h6,
#galeri-slider span,
#galeri-slider strong,
#galeri-slider .sub-title,
#galeri-slider .section-title,
.berita_area > .container > .row > div > .section-header > .section-title,
.berita_area > .container > .row > div > .section-header > .sub-title,
.galeri_area > .container > .row > div > .section-header > .section-title,
.galeri_area > .container > .row > div > .section-header > .sub-title {
	color: var(--white) !important;
}

#footer a {
	color: #cbd5e0 !important;
}

#footer a:hover {
	color: var(--accent-color) !important;
}

#footer .copyright {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #a0aec0 !important;
}

/* -----------------------------------------
   BADGES & LABELS
----------------------------------------- */
.badge-light {
	background: var(--primary-color) !important;
	color: var(--white) !important;
	padding: 8px 15px;
	border-radius: 20px;
	font-weight: 600;
}