/* Dinkes Aceh — Theme v2. Light + dark theme via CSS custom properties. */

/* 1. Design tokens */
:root {
	--primary: #006a9e;
	--primary-dark: #004d73;
	--primary-light: #008fc7;
	--secondary: #a50000;
	--accent: #ff6b35;

	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-tertiary: #e9ecef;
	--bg-elevated: #ffffff;

	--text-primary: #212529;
	--text-secondary: #495057;
	--text-muted: #6c757d;
	--text-inverse: #ffffff;

	--border-color: #dee2e6;
	--border-color-strong: #c8ccd1;

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);

	--font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--transition-base: .3s ease;
	--radius: .5rem;

	/* Bootstrap overrides driven by tokens */
	--bs-body-bg: var(--bg-primary);
	--bs-body-color: var(--text-primary);
	--bs-border-color: var(--border-color);
	--bs-link-color: var(--primary);
	--bs-link-hover-color: var(--primary-dark);
	--bs-primary: var(--primary);
	--bs-primary-rgb: 0, 106, 158;
	--bs-secondary-color: var(--text-muted);
	--bs-emphasis-color: var(--text-primary);
	--bs-secondary-bg: var(--bg-secondary);
	--bs-tertiary-bg: var(--bg-tertiary);
}

[data-theme="dark"] {
	--primary: #4da8da;
	--primary-dark: #2a8fc4;
	--primary-light: #7fc5e6;
	--secondary: #e04040;
	--accent: #ff9f6b;

	--bg-primary: #1a1d21;
	--bg-secondary: #212529;
	--bg-tertiary: #2d3238;
	--bg-elevated: #25292e;

	--text-primary: #f1f3f5;
	--text-secondary: #dee2e6;
	--text-muted: #adb5bd;
	--text-inverse: #1a1d21;

	--border-color: #3d4248;
	--border-color-strong: #4a5057;

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);

	--bs-body-bg: var(--bg-primary);
	--bs-body-color: var(--text-primary);
	--bs-border-color: var(--border-color);
	--bs-link-color: var(--primary);
	--bs-link-hover-color: var(--primary-light);
	--bs-primary: var(--primary);
	--bs-primary-rgb: 77, 168, 218;
	--bs-secondary-color: var(--text-muted);
	--bs-emphasis-color: var(--text-primary);
	--bs-secondary-bg: var(--bg-secondary);
	--bs-tertiary-bg: var(--bg-tertiary);
}

/* 2. Base */
*,
*::before,
*::after {
	transition-property: background-color, border-color, color, fill, stroke;
	transition-duration: var(--transition-base);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

body {
	font-family: var(--font-family);
	background-color: var(--bg-primary);
	color: var(--text-primary);
	/* clip (not hidden): prevents sideways scroll WITHOUT creating a scroll
	   container, so position:sticky on #navsticky keeps working on mobile. */
	overflow-x: clip;
}

a {
	text-decoration: none;
	transition: color var(--transition-base);
}

a:hover {
	color: var(--primary-light);
}

img {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
	font-weight: 700;
}

.text-muted,
.text-secondary {
	color: var(--text-muted) !important;
}

.text-dark {
	color: var(--text-primary) !important;
}

.bg-white {
	background-color: var(--bg-elevated) !important;
}

.bg-light {
	background-color: var(--bg-secondary) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
	border-color: var(--border-color) !important;
}

hr {
	border-color: var(--border-color);
	opacity: 1;
}

::selection {
	background: var(--primary);
	color: #fff;
}

/* 3. Theme toggle button */
.theme-toggle-btn {
	position: fixed;
	right: 1rem;
	bottom: 1.5rem;
	z-index: 1030;
	width: 46px;
	height: 46px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	background: var(--bg-elevated);
	color: var(--text-primary);
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	cursor: pointer;
	transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.theme-toggle-btn:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: var(--shadow-lg);
	color: var(--primary);
}

.theme-toggle-btn:active {
	transform: scale(.94);
}

.theme-toggle-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* 4. Header */
.header-top {
	background: var(--primary-dark);
	color: rgba(255, 255, 255, .85);
	font-size: .8rem;
	padding: .4rem 0;
}

[data-theme="dark"] .header-top {
	background: #101315;
}

.top-social {
	display: flex;
	gap: .35rem;
	justify-content: flex-end;
}

.top-social .social-link {
	color: rgba(255, 255, 255, .8);
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	font-size: .85rem;
}

.top-social .social-link:hover {
	background: var(--primary-light);
	color: #fff;
	transform: translateY(-2px);
}

.header-inner {
	background: var(--bg-elevated);
	padding: 1rem 0;
	border-bottom: 1px solid var(--border-color);
}

.logo img {
	max-height: 80px;
	width: auto;
}

/* Search */
.search-form .form-control-search,
.search-form .form-control {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	border-radius: 2rem;
	padding: .45rem 1rem;
}

.search-form .form-control:focus {
	background: var(--bg-elevated);
	border-color: var(--primary);
	box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
	color: var(--text-primary);
}

/* 5. Navbar */
.top-menu {
	background: var(--bg-elevated) !important;
	border-bottom: 3px solid var(--primary);
	padding: 0;
	z-index: 1020;
}

.top-menu .navbar-nav .nav-link {
	color: var(--text-primary);
	font-weight: 700;
	font-size: .95rem;
	padding: .8rem .95rem;
	position: relative;
}

.top-menu .navbar-nav .nav-link:hover,
.top-menu .navbar-nav .nav-link.active {
	color: var(--primary);
}

.top-menu .navbar-nav .nav-link.active::after {
	content: "";
	position: absolute;
	left: .95rem;
	right: .95rem;
	bottom: .45rem;
	height: 2px;
	background: var(--primary);
	border-radius: 2px;
}

.top-menu .dropdown-menu {
	background: var(--bg-elevated);
	border-color: var(--border-color);
}

.top-menu .dropdown-item {
	color: var(--text-primary);
}

.top-menu .dropdown-item:hover,
.top-menu .dropdown-item:focus {
	background: var(--primary);
	color: #fff;
}

/* 6. Parallax */
.parallax-section {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.parallax-layer {
	position: absolute;
	inset: -10% 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	z-index: -2;
}

.parallax-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, rgba(0, 106, 158, .82) 0%, rgba(0, 77, 115, .92) 100%);
}

[data-theme="dark"] .parallax-overlay {
	background: linear-gradient(135deg, rgba(10, 14, 18, .88) 0%, rgba(16, 22, 28, .95) 100%);
}

/* CSS-only fallback when JS is unavailable or motion is reduced */
@media (prefers-reduced-motion: reduce) {
	.parallax-layer {
		transform: none !important;
	}
}

/* 7. Hero (headline carousel) */
.hero-parallax {
	min-height: 62vh;
	display: flex;
	align-items: center;
	isolation: isolate;
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}

.hero-bg {
	position: absolute;
	inset: -12% 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	z-index: -2;
}

/* Fallback if the headline image fails to load */
.hero-parallax::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 77, 115, .55) 0%, rgba(0, 77, 115, .88) 100%);
	will-change: transform;
}

.hero-content {
	position: relative;
	z-index: 2;
	padding: 3rem 0;
	width: 100%;
}

.hero-slide-content {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	padding: 1rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.hero-slide-content h1 {
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
}

.hero-slide-content h1 a {
	color: #fff;
}

.hero-slide-content h1 a:hover {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.hero-slide-content .entry-meta {
	color: rgba(255, 255, 255, .85);
}

.hero-slide-content .badge {
	font-size: .75rem;
	padding: .4em .85em;
}

.hero-parallax .carousel-indicators [data-bs-target] {
	background-color: #fff;
	width: 30px;
	height: 4px;
	border: 0;
	border-radius: 2px;
	opacity: .5;
}

.hero-parallax .carousel-indicators .active {
	opacity: 1;
	background-color: var(--accent);
}

@media (max-width: 767.98px) {
	.hero-parallax {
		min-height: 48vh;
	}

	.hero-content {
		padding: 1.5rem 0;
	}

	.hero-slide-content h1 {
		font-size: 1.4rem;
	}

	.hero-slide-content {
		padding: .5rem;
	}
}

/* 8. Marquee (Info Terkini) */
.marquee-container {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.marquee-container .marquee-label {
	background: var(--secondary);
	color: #fff;
	padding: .25rem .8rem;
	border-radius: .25rem;
	vertical-align: middle;
	font-size: .85rem;
}

.marquee-container .amarquee:hover {
	color: var(--accent) !important;
}

/* 9. Cards / boxes */
.left-content,
.sidebar {
	margin-bottom: 2rem;
}

.post-head {
	border-bottom: 2px solid var(--primary);
	padding-bottom: .5rem;
	margin-bottom: 1rem;
}

.post-head h4 {
	margin: 0;
	color: var(--primary);
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	gap: .4rem;
}

.post-inner {
	background: var(--bg-elevated);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 1.25rem;
	box-shadow: var(--shadow-sm);
}

.box-content-1,
.box-content-2,
.box-content-3,
.box-pages,
.box-category,
.box-404 {
	background: var(--bg-elevated);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 1.25rem;
	box-shadow: var(--shadow-sm);
	margin-bottom: 1.5rem;
}

/* Featured post */
.box-left {
	display: block;
}

.box-right {
	display: block;
}

.image-warper {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--bg-tertiary);
	aspect-ratio: 16 / 10;
}

.image-warper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.image-warper:hover img,
.image-warper img.image_fade:hover {
	transform: scale(1.08);
}

.post-info-1 h5,
.post-info-2 h5,
.post-info h5 {
	font-size: 1.02rem;
	line-height: 1.35;
	margin: 0 0 .35rem;
}

.post-info-1 h5 a,
.post-info-2 h5 a,
.post-info h5 a {
	color: var(--text-primary);
}

.post-info-1 h5 a:hover,
.post-info-2 h5 a:hover,
.post-info h5 a:hover {
	color: var(--primary);
}

.box-content p {
	color: var(--text-secondary);
	font-size: .92rem;
	margin-bottom: .5rem;
}

.description {
	color: var(--text-secondary);
	font-size: .9rem;
}

/* Post list item */
.post-lists {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px dashed var(--border-color);
}

.post-lists:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.media {
	display: flex;
	gap: .85rem;
}

.media-body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Meta */
.entry-meta {
	list-style: none;
	padding: 0;
	margin: 0 0 .4rem;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1rem;
	font-size: .8rem;
	color: var(--text-muted);
}

.entry-meta li {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}

.entry-meta a {
	color: var(--text-muted);
}

.entry-meta a:hover {
	color: var(--primary);
}

.entry-meta i {
	color: var(--primary);
}

/* Tags / tagcloud */
.tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.tagcloud a,
.badge {
	display: inline-block;
	padding: .25em .7em;
	font-size: .75rem;
	border-radius: 2rem;
	background: var(--bg-tertiary);
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
	transition: all var(--transition-base);
}

.tagcloud a:hover {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
	transform: translateY(-1px);
}

.tagcloud .bg-red,
.tagcloud a.bg-red {
	background: var(--secondary);
	color: #fff;
	border-color: var(--secondary);
}

/* Read more */
.readmore {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--primary);
	border-bottom: 1px solid transparent;
}

.readmore:hover {
	color: var(--primary-light);
	border-bottom-color: var(--primary-light);
}

.readmore::after {
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

/* 10. Sidebar widgets */
.sidebar-widgets {
	margin-bottom: 1.5rem;
}

.sidebar-widgets .widget-title h4 {
	font-size: 1.05rem;
	color: var(--primary);
	border-bottom: 2px solid var(--primary);
	padding-bottom: .4rem;
	margin: 0 0 .75rem;
	text-transform: capitalize;
}

.widget {
	background: var(--bg-elevated);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 1rem;
	box-shadow: var(--shadow-sm);
}

.widget .nav-pills .nav-link {
	color: var(--text-secondary);
	border-radius: .35rem;
	font-size: .9rem;
	padding: .4rem .75rem;
}

.widget .nav-pills .nav-link:hover {
	background: var(--bg-tertiary);
	color: var(--primary);
}

.widget .nav-pills .nav-link.active {
	background: var(--primary);
	color: #fff;
}

.widget .nav-pills small {
	background: var(--bg-tertiary);
	color: var(--text-muted);
	padding: .1rem .45rem;
	border-radius: 1rem;
	font-size: .7rem;
}

.widget .nav-pills .nav-link.active small {
	background: rgba(255, 255, 255, .25);
	color: #fff;
}

/* Sidebar tabs */
.sidebar-widgets .nav-tabs {
	border-bottom-color: var(--border-color);
}

.sidebar-widgets .nav-tabs .nav-link {
	color: var(--text-muted);
	font-weight: 700;
	font-size: .88rem;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	padding: .5rem .8rem;
}

.sidebar-widgets .nav-tabs .nav-link:hover {
	color: var(--primary);
	border-bottom-color: var(--border-color);
}

.sidebar-widgets .nav-tabs .nav-link.active {
	color: var(--primary);
	background: transparent;
	border-bottom-color: var(--primary);
}

/* GPR Aceh widget */
.widget-gpr-aceh {
	background: var(--bg-elevated);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 1rem;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.widget-gpr-aceh .gpr-head {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-weight: 700;
	color: var(--primary);
	font-size: .95rem;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: .5rem;
	margin-bottom: .75rem;
}

#widget-gpr-aceh {
	min-height: 420px;
}

@media (max-width: 991.98px) {
	#widget-gpr-aceh {
		min-height: 0;
	}
}

/* GPR list fallback styles (injected by the external gpr-aceh.js) */
.gpr_list {
	max-height: 460px;
	overflow-y: auto;
	overflow-x: hidden;
}

.gpr_list::-webkit-scrollbar {
	width: 6px;
}

.gpr_list::-webkit-scrollbar-thumb {
	background: var(--border-color-strong);
	border-radius: 3px;
}

/* Gallery widget images */
.g-item {
	margin-bottom: 1rem;
}

.g-link {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	position: relative;
}

.g-link img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.g-link:hover img {
	transform: scale(1.1);
}

/* 11. Single post */
.breadcrumb {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: .6rem .9rem;
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	list-style: none;
	overflow: hidden;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--text-muted);
	padding: 0 .5rem;
}

.breadcrumb .breadcrumb-item {
	display: inline;
	color: var(--text-muted);
	font-size: .85rem;
}

.breadcrumb .breadcrumb-item a {
	color: var(--primary);
}

.breadcrumb .breadcrumb-item.active {
	color: var(--text-secondary);
	display: block;
	flex: 1 1 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.entry-title h2 {
	font-size: 1.7rem;
	line-height: 1.3;
	color: var(--text-primary);
}

.entry-image {
	margin-bottom: 1rem;
	border-radius: var(--radius);
	overflow: hidden;
}

.entry-image img {
	width: 100%;
	display: block;
}

.image-description {
	font-size: .82rem;
	color: var(--text-muted);
	font-style: italic;
	padding: .5rem .75rem;
	background: var(--bg-secondary);
	border-left: 3px solid var(--primary);
	margin-top: .5rem;
}

.detail-content {
	color: var(--text-secondary);
	font-size: .96rem;
	line-height: 1.75;
}

.detail-content h2,
.detail-content h3,
.detail-content h4 {
	color: var(--text-primary);
	margin-top: 1.25rem;
}

.detail-content a {
	color: var(--primary);
	text-decoration: underline;
}

.detail-content img {
	border-radius: var(--radius);
	margin: .5rem 0;
}

.detail-content ul,
.detail-content ol {
	padding-left: 1.25rem;
}

.detail-content table {
	width: 100%;
	margin-bottom: 1rem;
	border-collapse: collapse;
}

.detail-content table th,
.detail-content table td {
	border: 1px solid var(--border-color);
	padding: .5rem;
}

/* Share buttons */
.shareit {
	display: flex;
	gap: .4rem;
	margin: 1rem 0;
}

.shareit .btn {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	color: #fff;
}

.shareit .facebook {
	background: #1877f2;
	border-color: #1877f2;
}

.shareit .twitter {
	background: #1da1f2;
	border-color: #1da1f2;
}

.shareit .whatsapp {
	background: #25d366;
	border-color: #25d366;
}

/* File attachment (pdf/doc/ppt) */
.file-image {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem 1rem;
	background: var(--bg-secondary);
	border: 1px dashed var(--border-color-strong);
	border-radius: var(--radius);
}

.file-image img {
	width: 50px;
	height: auto;
}

.file-image a {
	color: var(--secondary);
	font-weight: 700;
	word-break: break-all;
}

.file-image span {
	font-size: .78rem;
	color: var(--text-muted);
}

/* Comments */
.comment-name {
	font-size: .95rem;
	font-weight: 700;
	color: var(--text-primary);
}

.comment-body p {
	color: var(--text-secondary);
	font-size: .9rem;
	margin-bottom: .25rem;
}

.reply_comment {
	font-size: .8rem;
	color: var(--primary);
	font-weight: 700;
}

/* Related posts */
.related-posts ul {
	list-style: none;
	padding: 0;
	margin: 0;
	columns: 2;
	column-gap: 1.5rem;
}

.related-posts li {
	break-inside: avoid;
	padding: .3rem 0;
	font-size: .9rem;
	position: relative;
	padding-left: 1.1rem;
}

.related-posts li::before {
	content: "\f111";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--primary);
	font-size: .55rem;
	position: absolute;
	left: 0;
	top: .6rem;
}

@media (max-width: 575.98px) {
	.related-posts ul {
		columns: 1;
	}
}

/* Post navigation */
.post-np .btn {
	font-size: .82rem;
}

.post-np-title {
	margin-top: .35rem;
}

/* 12. Forms */
.form-control,
.form-select {
	background: var(--bg-elevated);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
	background: var(--bg-elevated);
	border-color: var(--primary);
	color: var(--text-primary);
	box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

.form-control::placeholder {
	color: var(--text-muted);
}

.form-check-input {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color-strong);
}

.form-check-input:checked {
	background-color: var(--primary);
	border-color: var(--primary);
}

.btn {
	border-radius: .35rem;
	font-weight: 700;
}

.btn-primary {
	--bs-btn-bg: var(--primary);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-bg: var(--primary-dark);
	--bs-btn-hover-border-color: var(--primary-dark);
	--bs-btn-active-bg: var(--primary-dark);
	--bs-btn-active-border-color: var(--primary-dark);
	--bs-btn-disabled-bg: var(--primary);
	--bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
	--bs-btn-color: var(--primary);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-active-bg: var(--primary);
	--bs-btn-active-border-color: var(--primary);
}

.btn-light {
	--bs-btn-bg: var(--bg-tertiary);
	--bs-btn-border-color: var(--border-color);
	--bs-btn-color: var(--text-primary);
	--bs-btn-hover-bg: var(--bg-secondary);
	--bs-btn-hover-border-color: var(--border-color-strong);
	--bs-btn-hover-color: var(--text-primary);
	--bs-btn-active-bg: var(--bg-secondary);
	--bs-btn-active-border-color: var(--border-color-strong);
	--bs-btn-active-color: var(--text-primary);
}

/* 13. Nav tabs & pagination */
.nav-tabs {
	border-bottom-color: var(--border-color);
	gap: .2rem;
}

.nav-tabs .nav-link {
	color: var(--text-muted);
	font-weight: 700;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	padding: .5rem .9rem;
}

.nav-tabs .nav-link:hover {
	color: var(--primary);
	border-bottom-color: var(--border-color);
	background: transparent;
}

.nav-tabs .nav-link.active {
	color: var(--primary);
	background: transparent;
	border-bottom-color: var(--primary);
}

.pagination {
	gap: .25rem;
}

.pagination .page-link {
	color: var(--primary);
	background: var(--bg-elevated);
	border-color: var(--border-color);
	border-radius: .3rem !important;
}

.pagination .page-link:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.pagination .active .page-link {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.pagination .disabled .page-link {
	background: var(--bg-secondary);
	color: var(--text-muted);
}

/* 14. Carousel */
.carousel-item img {
	width: 100%;
	display: block;
}

.carousel-control-prev,
.carousel-control-next {
	width: 8%;
	opacity: .8;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
	opacity: 1;
}

/* 15. 404 */
.box-404 {
	text-align: center;
	padding: 3rem 1.5rem;
}

.box-404 h2 {
	font-size: 5rem;
	color: var(--primary);
	margin: 0;
	line-height: 1;
	font-weight: 800;
}

.box-404 p {
	color: var(--text-secondary);
	margin: 1rem 0;
}

/* 16. Calendar (CI calendar lib) */
.kalender table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-elevated);
	border-radius: var(--radius);
	overflow: hidden;
}

.kalender th {
	background: var(--primary);
	color: #fff;
	padding: .6rem;
	font-weight: 700;
}

.kalender td {
	border: 1px solid var(--border-color);
	padding: .5rem;
	text-align: center;
	font-size: .85rem;
	color: var(--text-primary);
}

.kalender td:hover {
	background: var(--bg-tertiary);
}

.kalender td a {
	color: var(--text-primary);
}

.kalender .cal_current_day,
.kalender td.today {
	background: var(--accent);
	color: #fff;
	font-weight: 700;
}

/* 17. Footer */
#footer {
	background: #14181c;
	position: relative;
}

#footer h5 {
	color: #fff;
	font-size: 1.05rem;
}

#footer a {
	color: rgba(255, 255, 255, .7);
}

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

#footer .footer-links,
#footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#footer .footer-links li,
#footer ul li {
	padding: .2rem 0;
	font-size: .9rem;
}

#footer ol,
#footer ul {
	padding-left: 1.1rem;
}

#map {
	background: #22262b;
}

.ol-attribution a,
.ol-control button {
	color: var(--text-primary);
}

/* 18. Utilities */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

.tx-capitalize {
	text-transform: capitalize;
}

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }

.w-100 { width: 100% !important; }

.gbrSide {
	display: block;
}

.gbrSide img {
	width: 100%;
	height: auto;
}

/* 19. Responsive */
@media (max-width: 991.98px) {
	.header-inner {
		text-align: center;
	}

	.logo {
		margin: 0 auto 1rem;
	}

	.entry-title h2 {
		font-size: 1.4rem;
	}
}

@media (max-width: 767.98px) {
	.top-social {
		justify-content: center;
	}

	.header-inner {
		padding: .75rem 0;
	}

	.logo img {
		max-height: 55px;
	}

	.top-menu .navbar-nav .nav-link.active::after {
		display: none;
	}

	.media {
		flex-direction: column;
	}

	.post-lists .col-md-4,
	.post-lists .col-md-8,
	.post-lists .col-md-2,
	.post-lists .col-md-10 {
		width: 100%;
	}

	.marquee-container .marquee-label {
		display: block;
		text-align: center;
		margin-bottom: .25rem !important;
	}
}
/* ================================================================
   REDESIGN LAYER — full-bleed parallax frontpage + sticky header
   Appended last so these rules win over the legacy component styles
   without having to rewrite the pre-existing theme CSS.
   ================================================================ */

:root {
	--gov-blue: #0a5c8a;
	--gov-blue-dark: #063d5c;
	--gov-gold: #d4a017;
	--section-pad: clamp(3rem, 6vw, 5.5rem);
}

/* ---------- Sticky main navigation (all pages) ---------- */
#navsticky {
	position: sticky;
	top: 0;
	z-index: 1030;
}

.top-menu {
	background: var(--bs-body-bg, #fff);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
	transition: box-shadow .25s ease, background-color .25s ease;
}

/* Surface treatment on scroll. The bar never leaves the viewport. */
#navsticky.is-scrolled .top-menu {
	box-shadow: 0 6px 18px rgba(6, 61, 92, .18);
}

#navsticky .navbar-brand {
	font-weight: 700;
	color: var(--gov-blue-dark);
	text-decoration: none;
}

/* ---------- Fullscreen hero ---------- */
.hero-parallax {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	isolation: isolate;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
}

/* Reserve room so the hero is never hidden behind the pinned nav. */
@media (min-width: 992px) {
	.hero-parallax {
		min-height: 100vh;
	}
}

.hero-parallax .hero-bg {
	inset: 0;
	z-index: -2;
}

.hero-parallax .hero-overlay {
	z-index: -1;
}

.hero-content {
	position: relative;
	z-index: 1;
	width: 100%;
}

.hero-slide-content {
	max-width: 860px;
	padding-top: 4rem;
	padding-bottom: 4rem;
	margin-inline: auto;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.hero-title {
	font-size: clamp(1.75rem, 4.2vw, 3.25rem);
	line-height: 1.18;
}

/* Scroll cue */
.hero-scroll-cue {
	position: absolute;
	bottom: 1.75rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	text-decoration: none;
	animation: heroCue 2.2s ease-in-out infinite;
}

.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
	background: rgba(255, 255, 255, .26);
	color: #fff;
}

.hero-scroll-cue-inner {
	display: grid;
	place-items: center;
	font-size: .9rem;
}

@keyframes heroCue {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(6px);
	}
}

/* ---------- Info Terkini ticker ---------- */
.marquee-strip {
	background: var(--gov-blue);
	border-bottom: 3px solid var(--gov-gold);
}

.marquee-strip .marquee-container {
	background: transparent;
}

.marquee-strip .marquee-label {
	color: var(--gov-gold);
}

/* ---------- Page sections ---------- */
.dinkes-section {
	position: relative;
	padding-block: var(--section-pad);
}

.section-head {
	margin-bottom: 2.5rem;
}

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gov-blue);
	margin-bottom: .5rem;
}

[data-theme="dark"] .section-eyebrow {
	color: var(--gov-gold);
}

.section-title {
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.section-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: .75rem;
	background: var(--gov-gold);
	border-radius: 2px;
}

.section-lead {
	color: var(--bs-secondary-color, #5a6570);
	max-width: 60ch;
}

/* ---------- Quick access band ---------- */
.quick-band {
	padding-block: 2.25rem;
}

.quick-link {
	transition: transform .25s ease, color .25s ease;
}

.quick-link i {
	color: var(--gov-gold);
	transition: transform .25s ease;
}

.quick-link:hover,
.quick-link:focus-visible {
	transform: translateY(-4px);
}

.quick-link:hover i,
.quick-link:focus-visible i {
	transform: scale(1.12);
}

/* ---------- News cards ---------- */
.news-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(6, 61, 92, .1);
	border-radius: var(--radius, 10px);
	overflow: hidden;
	background: var(--bs-body-bg, #fff);
	box-shadow: 0 2px 10px rgba(6, 61, 92, .06);
	transition: transform .3s ease, box-shadow .3s ease;
}

.news-card:hover,
.news-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgba(6, 61, 92, .16);
}

.news-card .image-warper {
	/* Anchor is inline by default; without block, aspect-ratio and
	   overflow clipping do not apply and the image blows up huge. */
	display: block;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.news-card .image-warper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform .45s ease;
}

.news-card:hover .image-warper img {
	transform: scale(1.09);
}

.news-card-body {
	padding: 1.15rem 1.25rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	flex-grow: 1;
}

.news-card-title {
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.news-card-title a {
	color: inherit;
	text-decoration: none;
}

.news-card-title a:hover {
	color: var(--gov-blue);
}

[data-theme="dark"] .news-card-title a:hover {
	color: var(--gov-gold);
}

.news-card-excerpt {
	font-size: .92rem;
	color: var(--bs-secondary-color, #5a6570);
	margin: 0;
}

/* Title-only list */
.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: news-item;
}

.news-list-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: .95rem 0;
	border-bottom: 1px dashed rgba(6, 61, 92, .18);
}

.news-list-item:last-child {
	border-bottom: 0;
}

.news-list-num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(10, 92, 138, .1);
	color: var(--gov-blue);
	font-weight: 700;
	font-size: .85rem;
	counter-increment: news-item;
}

.news-list-num::before {
	content: counter(news-item);
}

[data-theme="dark"] .news-list-num {
	background: rgba(212, 160, 23, .16);
	color: var(--gov-gold);
}

.news-list-title {
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.45;
	margin: 0 0 .2rem;
}

/* ---------- Poster / Infografis tabs ---------- */
.media-tabs {
	border: 0;
	gap: .5rem;
	margin-bottom: 1.5rem;
}

.media-tabs .nav-link {
	border: 1px solid rgba(6, 61, 92, .18);
	border-radius: 999px;
	padding: .5rem 1.4rem;
	color: var(--gov-blue-dark);
	font-weight: 600;
}

[data-theme="dark"] .media-tabs .nav-link {
	color: var(--bs-body-color, #eee);
}

.media-tabs .nav-link.active {
	background: var(--gov-blue);
	border-color: var(--gov-blue);
	color: #fff;
}

.media-frame {
	border-radius: var(--radius, 10px);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(6, 61, 92, .14);
	background: var(--bs-tertiary-bg, #f1f3f5);
}

/* ---------- Sidebar widget section ---------- */
.widget-section {
	background: var(--bs-tertiary-bg, #f4f6f8);
}

[data-theme="dark"] .widget-section {
	background: rgba(255, 255, 255, .04);
}

.widget-panel {
	background: var(--bs-body-bg, #fff);
	border: 1px solid rgba(6, 61, 92, .1);
	border-radius: var(--radius, 10px);
	padding: 1.5rem;
	box-shadow: 0 2px 10px rgba(6, 61, 92, .05);
}

.widget-panel > .widget-head {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: 1.1rem;
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--gov-gold);
}

/* ---------- Footer (now theme-aware, no hard-coded bg-dark) ---------- */
#footer {
	background: var(--gov-blue-dark);
	color: rgba(255, 255, 255, .85);
}

#footer h5 {
	color: #fff;
}

#footer a {
	color: rgba(255, 255, 255, .8);
}

#footer a:hover {
	color: var(--gov-gold);
}

#footer hr {
	border-color: rgba(255, 255, 255, .2);
	opacity: 1;
}

#footer small {
	color: rgba(255, 255, 255, .65);
}

#map {
	background: var(--bs-tertiary-bg, #e9ecef);
}

/* ---------- Scroll reveal ---------- */
/* Hidden state is applied by JS (.reveal-init), so if the script never
   runs the content stays visible instead of disappearing forever. */
.reveal-init {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
	transition-delay: calc(var(--reveal-delay, 0) * 1ms);
	will-change: opacity, transform;
}

.reveal-init.is-visible {
	opacity: 1;
	transform: none;
}

/* Staggered cascade for siblings inside a reveal group. */
.reveal-init[data-reveal-index="1"] {
	--reveal-delay: 90;
}

.reveal-init[data-reveal-index="2"] {
	--reveal-delay: 180;
}

.reveal-init[data-reveal-index="3"] {
	--reveal-delay: 270;
}

.reveal-init[data-reveal-index="4"] {
	--reveal-delay: 360;
}

.reveal-init[data-reveal-index="5"] {
	--reveal-delay: 450;
}

.reveal-init[data-reveal-index="6"] {
	--reveal-delay: 540;
}

.reveal-init[data-reveal-index="7"] {
	--reveal-delay: 620;
}

.reveal-init[data-reveal-index="8"] {
	--reveal-delay: 700;
}

@media (prefers-reduced-motion: reduce) {
	.reveal-init {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.hero-scroll-cue {
		animation: none;
	}
}

/* ---------- Inner page image parallax ---------- */
/* Only the main image banner is a parallax frame; all inner page content
   below it scrolls normally. */
.inner-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--radius, 10px);
	min-height: 220px;
	margin-bottom: 1.5rem;
}

.inner-hero .parallax-layer {
	z-index: -2;
}

.inner-hero .parallax-overlay {
	z-index: -1;
}

.inner-hero-caption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 2.5rem 1.5rem 1.25rem;
	background: linear-gradient(to top, rgba(6, 61, 92, .88), transparent);
	color: #fff;
}

.inner-hero-caption h1,
.inner-hero-caption h2 {
	color: #fff;
	margin: 0;
	font-weight: 700;
}

/* ---------- Legacy entry-meta / helper classes ---------- */
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .82rem;
	color: var(--bs-secondary-color, #6c757d);
}

.news-card .entry-meta a {
	color: inherit;
	text-decoration: none;
}

.news-card .entry-meta a:hover {
	color: var(--gov-blue);
	text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
	:root {
		--section-pad: 2.75rem;
	}

	.hero-slide-content {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

	.marquee-strip .marquee-container {
		text-align: center;
	}
}

@media (max-width: 575.98px) {
	.hero-scroll-cue {
		display: none;
	}

	.news-list-item {
		gap: .75rem;
	}

	.news-list-num {
		width: 26px;
		height: 26px;
		font-size: .78rem;
	}
}

/* News scroll (horizontal cards for "5 judul saja") */
.news-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	padding-bottom: .75rem;
}

.news-scroll::-webkit-scrollbar {
	height: 6px;
}

.news-scroll::-webkit-scrollbar-thumb {
	background: rgba(10, 92, 138, .25);
	border-radius: 6px;
}

.news-scroll-track {
	display: flex;
	gap: 1rem;
}

.news-card--mini {
	min-width: 280px;
	flex: 0 0 280px;
	scroll-snap-align: start;
}

.news-card--mini .news-card-body {
	padding: .9rem 1rem;
}

.news-card--mini .news-card-title {
	font-size: .98rem;
}

@media (max-width: 575.98px) {
	.news-card--mini {
		min-width: 84vw;
		flex: 0 0 84vw;
	}
}

/* Split poster + infografis (full width halves) */
.media-half {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: center;
}

.media-half-content {
	width: 100%;
	z-index: 1;
}

.media-half--poster {
	color: #fff;
}

@media (max-width: 991.98px) {
	.media-half {
		min-height: auto;
	}
}

/* Sidebar widgets in a row, wrap on small screens */
.widget-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: flex-start;
	justify-content: center;
}

.widget-row > * {
	flex: 0 1 280px;
	max-width: 320px;
}

.widget-row .widget-title h4 {
	font-size: 1rem;
}

.widget-row .nav-pills .nav-link {
	padding: .4rem .6rem;
	font-size: .9rem;
}

@media (max-width: 575.98px) {
	.widget-row {
		flex-direction: column;
		align-items: stretch;
	}
	.widget-row > * {
		max-width: 100%;
		flex: 1 1 100%;
	}
}

/* ================================================================
   MOBILE HARDENING — smartphone fixes (appended last, wins)
   ================================================================ */

/* Long titles / URLs / CMS words wrap instead of blowing out 360px wide viewports */
.news-card-title,
.entry-meta,
.detail-content,
.entry-content,
.widget,
.widget-row,
.sidebar-widgets,
#footer,
.inner-hero-caption h2,
.post-head h4,
.entry-title h2 {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Gold bar follows centered section heads (was stuck left-aligned) */
.section-head.text-center .section-title::after {
	margin-inline: auto;
}

/* Marquee: flex row on desktop, stacks on mobile (no fragile calc width) */
.marquee-strip .marquee-container {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.marquee-strip .marquee-ticker {
	flex: 1 1 auto;
	min-width: 0;
}

/* Flex children must be allowed to shrink, otherwise widgets/GPR overflow */
.widget-row,
.sidebar-widgets,
.widget-gpr-aceh,
#widget-gpr-aceh {
	min-width: 0;
	max-width: 100%;
}

.sidebar-widgets img,
.sidebar-widgets iframe,
.widget-gpr-aceh iframe {
	max-width: 100%;
}

/* Hero tracks dynamic mobile browser chrome */
.hero-parallax {
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
}

@media (max-width: 991.98px) {
	/* Collapsed navbar: search + dropdowns stack full-width, nothing squeezes */
	.top-menu .top-search-link {
		flex: 1 1 100%;
	}

	.top-menu .navbar-brand {
		flex: 1 1 auto;
		min-width: 0;
		font-size: .92rem;
		line-height: 1.3;
	}

	.top-menu .navbar-toggler {
		flex: 0 0 auto;
	}

	.top-menu .dropdown-menu {
		position: static;
		float: none;
		width: 100%;
	}

	.top-menu .navbar-nav .nav-link {
		padding: .7rem .25rem;
	}

	.hero-slide-content {
		padding-top: 2.25rem;
		padding-bottom: 3.25rem;
	}
}

@media (max-width: 767.98px) {
	/* Header: logo takes the full row (the search column is empty on mobile) */
	.header-inner .col-md-9 {
		display: none;
	}

	.header-inner .col-md-3 {
		width: 100%;
	}

	.logo {
		text-align: center;
	}

	.header-top .row {
		row-gap: .35rem;
	}

	.gtranslate_wrapper {
		max-width: 100%;
	}

	.hero-title {
		font-size: clamp(1.4rem, 6vw, 2rem);
	}

	.hero-slide-content .entry-meta {
		justify-content: center;
		flex-wrap: wrap;
	}

	/* Quick band: 2 + 2 + 1 orphan spanning full width, bigger tap targets */
	#layanan .row > div:last-child {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.quick-link {
		padding: .75rem .25rem;
		border-radius: .75rem;
	}

	/* Marquee stacks: label above, ticker full width */
	.marquee-strip .marquee-container {
		flex-direction: column;
		align-items: stretch;
		gap: .35rem;
		text-align: center;
	}

	.marquee-strip .marquee-ticker {
		width: 100%;
	}

	.inner-hero {
		min-height: 180px;
	}

	.inner-hero-caption {
		padding: 2rem 1rem .9rem;
	}

	.inner-hero-caption h2 {
		font-size: 1.15rem;
		line-height: 1.35;
	}

	.detail-content {
		font-size: .92rem;
	}

	.entry-title h2 {
		font-size: 1.3rem;
	}

	.theme-toggle-btn {
		bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
		right: .8rem;
	}

	#map {
		height: 220px;
	}
}

@media (max-width: 575.98px) {
	/* Side arrows overlap titles on narrow screens; indicators + swipe remain */
	.hero-parallax .carousel-control-prev,
	.hero-parallax .carousel-control-next {
		display: none;
	}

	.hero-parallax .carousel-indicators {
		bottom: .8rem;
	}

	.hero-slide-content {
		padding-top: 2rem;
		padding-bottom: 2.75rem;
	}

	/* CMS tables scroll sideways instead of squeezing unreadably narrow */
	.detail-content table,
	.entry-content table,
	#footer table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.kalender th,
	.kalender td {
		padding: .35rem .25rem;
		font-size: .75rem;
	}

	/* Embedded video/maps fill the column instead of overflowing it */
	.detail-content iframe[src*="youtube"],
	.detail-content iframe[src*="youtu.be"],
	.detail-content iframe[src*="vimeo"],
	.detail-content iframe[src*="google.com/maps"],
	.detail-content iframe[src*="maps.google"] {
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
	}

	.news-card-body {
		padding: 1rem;
	}

	.media-frame {
		border-radius: 8px;
	}
}

/* ---------- Flexbox blowout guard ---------- */
/* #wrapper is display:flex; without min-width:0 its flex item (#main) can
   never shrink below its content min-content width, so one wide descendant
   (e.g. the horizontal news track) stretches the ENTIRE page sideways.
   This single rule contains it on every page, mobile and desktop. */
#main {
	min-width: 0;
}

/* Peek of the next card so the horizontal news list reads as scrollable */
@media (max-width: 575.98px) {
	.news-card--mini {
		min-width: 78vw;
		flex-basis: 78vw;
	}
}