/*!
 * RHS Theme — mobile-first overrides on top of Bootstrap 5.
 * Keep this file small; it ships on every page.
 */

/* ----------  Brand palette (override Bootstrap)  ---------- */
:root,
[data-bs-theme="light"] {
	/* Raw palette */
	--rhs-50:  #FBE5E4;
	--rhs-100: #F2C4C2;
	--rhs-300: #FF7F7F;
	--rhs-600: #C84141;
	--rhs-900: #5C1818;

	--rhs-600-rgb: 200, 65, 65;
	--rhs-900-rgb: 92, 24, 24;
	--rhs-300-rgb: 255, 127, 127;

	/* Map Bootstrap → brand */
	--bs-primary:               var(--rhs-600);
	--bs-primary-rgb:           var(--rhs-600-rgb);
	--bs-primary-text-emphasis: var(--rhs-900);
	--bs-primary-bg-subtle:     var(--rhs-50);
	--bs-primary-border-subtle: var(--rhs-100);

	--bs-link-color:            var(--rhs-600);
	--bs-link-color-rgb:        var(--rhs-600-rgb);
	--bs-link-hover-color:      var(--rhs-900);
	--bs-link-hover-color-rgb:  var(--rhs-900-rgb);

	/* Theme tokens */
	--rhs-radius: .5rem;
	--rhs-shadow: 0 .25rem 1rem rgba(var(--rhs-900-rgb), .08);
	--rhs-transition: .2s ease-out;
	--rhs-focus-ring: 0 0 0 3px rgba(var(--rhs-600-rgb), .35);
}

/* Make .btn-primary, .badge.text-bg-primary, .bg-primary, .border-primary, .text-primary
   all use the brand red automatically (Bootstrap already reads from --bs-primary). */
.btn-primary {
	--bs-btn-bg: var(--rhs-600);
	--bs-btn-border-color: var(--rhs-600);
	--bs-btn-hover-bg: var(--rhs-900);
	--bs-btn-hover-border-color: var(--rhs-900);
	--bs-btn-active-bg: var(--rhs-900);
	--bs-btn-active-border-color: var(--rhs-900);
	--bs-btn-disabled-bg: var(--rhs-600);
	--bs-btn-disabled-border-color: var(--rhs-600);
}
.btn-outline-primary {
	--bs-btn-color: var(--rhs-600);
	--bs-btn-border-color: var(--rhs-600);
	--bs-btn-hover-bg: var(--rhs-600);
	--bs-btn-hover-border-color: var(--rhs-600);
	--bs-btn-active-bg: var(--rhs-900);
	--bs-btn-active-border-color: var(--rhs-900);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "kern", "liga"; text-rendering: optimizeSpeed; }

/* Respect users that prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Make images fluid + prevent CLS. */
img, svg, video, iframe { max-width: 100%; height: auto; }
img[width][height] { height: auto; }

/* Focus rings — visible & accessible. */
:focus-visible {
	outline: 3px solid var(--rhs-600);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ----------  Header / Navbar  ---------- */
.site-header { border-bottom: 3px solid var(--rhs-600); }
.site-header .navbar-brand { font-size: 1.125rem; color: var(--rhs-900); }
.site-header .navbar { min-height: 56px; }
.site-header .nav-link { color: var(--rhs-900); font-weight: 500; }
.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--rhs-600); }

@media (min-width: 992px) {
	.site-header .navbar-brand { font-size: 1.25rem; }
	.navbar-nav .dropdown-menu { box-shadow: var(--rhs-shadow); border: 0; border-radius: var(--rhs-radius); }
	.navbar-nav .dropdown-item:hover,
	.navbar-nav .dropdown-item:focus { background: var(--rhs-50); color: var(--rhs-900); }
	.navbar-nav .dropdown-item.active { background: var(--rhs-600); color: #fff; }
}

/* Nested dropdowns (handled by navwalker) on desktop. */
@media (min-width: 992px) {
	.dropdown-submenu { position: relative; }
	.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -1px; }
	.dropdown-submenu:hover > .dropdown-menu { display: block; }
}

/* ----------  Hero (front page)  ---------- */
.hero {
	background: linear-gradient(135deg, var(--rhs-900) 0%, var(--rhs-600) 55%, var(--rhs-300) 100%) !important;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .12) 0%, transparent 45%),
		radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .08) 0%, transparent 50%);
	pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero .btn-light {
	color: var(--rhs-900);
	font-weight: 600;
	border: 0;
}
.hero .btn-light:hover { background: var(--rhs-50); color: var(--rhs-900); }

/* ----------  Breadcrumbs  ---------- */
.breadcrumbs { background: var(--rhs-50) !important; border-bottom-color: var(--rhs-100) !important; }
.breadcrumbs .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--rhs-600); }
.breadcrumbs .breadcrumb-item a { color: var(--rhs-900); }
.breadcrumbs .breadcrumb-item.active { color: var(--rhs-600); }

/* ----------  Featured Stories (home)  ---------- */
.featured-stories {
	position: relative;
	background: linear-gradient(180deg, var(--rhs-50) 0%, transparent 100%) !important;
}
.featured-stories .letter-spaced { letter-spacing: .12em; color: var(--rhs-600) !important; }
.featured-stories h2 { color: var(--rhs-900); }

.featured-stories__controls .btn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.featured-stories__controls .btn:hover {
	background: var(--bs-primary);
	border-color: var(--bs-primary);
	color: #fff;
}

.featured-stories__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 85%;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: .25rem .25rem 1rem;
	margin-inline: -.25rem;
	scrollbar-width: thin;
	scrollbar-color: var(--bs-secondary) transparent;
}
.featured-stories__track::-webkit-scrollbar { height: 6px; }
.featured-stories__track::-webkit-scrollbar-thumb {
	background: var(--bs-secondary);
	border-radius: 999px;
	opacity: .5;
}
.featured-stories__track::-webkit-scrollbar-track { background: transparent; }

@media (min-width: 576px) { .featured-stories__track { grid-auto-columns: 48%; } }
@media (min-width: 768px) { .featured-stories__track { grid-auto-columns: 32%; } }
@media (min-width: 992px) { .featured-stories__track { grid-auto-columns: 24%; gap: 1.25rem; } }
@media (min-width: 1200px){ .featured-stories__track { grid-auto-columns: 19.2%; } }

.featured-stories__card {
	scroll-snap-align: start;
	border-radius: var(--rhs-radius);
	transition: transform var(--rhs-transition), box-shadow var(--rhs-transition);
}
.featured-stories__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .1);
}
.featured-stories__media { position: relative; overflow: hidden; }
.featured-stories__media img {
	transition: transform .4s ease;
}
.featured-stories__card:hover .featured-stories__media img {
	transform: scale(1.06);
}
.featured-stories__cat {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rhs-600);
	margin-bottom: .4rem;
	line-height: 1;
}
.featured-stories__card .card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

/* ----------  Article cards  ---------- */
.page-header .letter-spaced { letter-spacing: .12em; color: var(--rhs-600) !important; }
.page-header h1, .page-header h2 { color: var(--rhs-900); }

.card-img-top { transition: transform var(--rhs-transition); }
.card:hover .card-img-top { transform: scale(1.02); }
.card { border-radius: var(--rhs-radius); }
.entry-content a:not(.btn):not(.page-link) { color: var(--rhs-600); text-decoration-color: var(--rhs-100); text-underline-offset: 3px; }
.entry-content a:not(.btn):not(.page-link):hover { color: var(--rhs-900); text-decoration-color: currentColor; }
.entry-title a { color: inherit; }
.entry-title a:hover { color: var(--rhs-600); }

/* ----------  Single post content  ---------- */
.entry-content { font-size: 1.0625rem; line-height: 1.75; }
.entry-content > * + * { margin-top: 1rem; }
.entry-content h2 { margin-top: 2.25rem; }
.entry-content h3 { margin-top: 1.75rem; }
.entry-content blockquote {
	border-left: 4px solid var(--rhs-600);
	padding: .75rem 1rem;
	margin: 1.5rem 0;
	background: var(--rhs-50);
	color: var(--rhs-900);
	border-radius: var(--rhs-radius);
}
.entry-content pre {
	background: #0d1117;
	color: #e6edf3;
	padding: 1rem;
	border-radius: var(--rhs-radius);
	overflow: auto;
}
.entry-content code { background: var(--bs-tertiary-bg); padding: .15em .35em; border-radius: .25rem; }
.entry-content pre code { background: transparent; padding: 0; }
.entry-content table { width: 100%; }

/* ----------  Comments  ---------- */
.comment-list { padding-left: 0; }
.comment-list .children { list-style: none; padding-left: 1.25rem; border-left: 2px solid var(--bs-border-color); }
.comment-body { padding: 1rem 0; border-bottom: 1px solid var(--bs-border-color); }
.comment-author img { border-radius: 50%; margin-right: .75rem; }

/* ----------  Pagination  ---------- */
.rhs-pagination { margin: 3rem 0 1rem; }

.rhs-pagination-list {
	--rhs-pg-size: 2.5rem;
	--rhs-pg-radius: 999px;
	--rhs-pg-bg: var(--bs-body-bg);
	--rhs-pg-border: var(--bs-border-color);
	--rhs-pg-color: var(--bs-body-color);
	--rhs-pg-hover-bg: var(--bs-primary-bg-subtle);
	--rhs-pg-active: var(--bs-primary);

	display: inline-flex;
	padding: .35rem;
	background: var(--bs-tertiary-bg);
	border-radius: var(--rhs-pg-radius);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

.rhs-pagination-list .page-item { margin: 0; }

.rhs-pagination-list .page-link {
	min-width: var(--rhs-pg-size);
	height: var(--rhs-pg-size);
	padding: 0 .85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	color: var(--rhs-pg-color);
	background: transparent;
	border: 0;
	border-radius: var(--rhs-pg-radius);
	transition: background-color var(--rhs-transition),
				color var(--rhs-transition),
				transform var(--rhs-transition),
				box-shadow var(--rhs-transition);
}

.rhs-pagination-list .page-link:hover {
	background: var(--rhs-pg-hover-bg);
	color: var(--rhs-pg-active);
	transform: translateY(-1px);
	box-shadow: 0 .25rem .75rem rgba(var(--rhs-600-rgb), .2);
}

.rhs-pagination-list .page-link:focus-visible {
	outline: 0;
	box-shadow: var(--rhs-focus-ring);
}

.rhs-pagination-list .page-link:active { transform: translateY(0); }

.rhs-pagination-list .page-item.active .page-link {
	color: #fff;
	background: linear-gradient(135deg, var(--rhs-300) 0%, var(--rhs-600) 55%, var(--rhs-900) 100%);
	box-shadow: 0 .35rem 1rem rgba(var(--rhs-600-rgb), .4);
	transform: translateY(-1px);
}
.rhs-pagination-list .page-item.active .page-link:hover { color: #fff; }

.rhs-pagination-list .page-item.disabled .page-link,
.rhs-pagination-list .page-item .page-link[aria-disabled="true"] {
	color: var(--bs-secondary-color);
	background: transparent;
	opacity: .5;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

/* Prev / Next pill — slightly wider, with chevron icon. */
.rhs-pagination-list .page-link svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform var(--rhs-transition);
}
.rhs-pagination-list .prev .page-link:hover svg { transform: translateX(-2px); }
.rhs-pagination-list .next .page-link:hover svg { transform: translateX( 2px); }

/* "Page X of Y" caption beneath the list. */
.rhs-pagination-meta {
	letter-spacing: .03em;
	text-transform: uppercase;
	font-size: .75rem;
	font-weight: 600;
}

/* Comments / single-post pagination — keep Bootstrap defaults polished too. */
.pagination { gap: .25rem; flex-wrap: wrap; }

/* ----------  Mobile pagination  ---------- */
@media (max-width: 575.98px) {
	.rhs-pagination-list {
		--rhs-pg-size: 2.25rem;
		padding: .25rem;
		max-width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.rhs-pagination-list::-webkit-scrollbar { display: none; }
	.rhs-pagination-list .page-link { font-size: .875rem; padding: 0 .65rem; }
	.rhs-pagination-list .rhs-page-label { display: none; }
	.rhs-pagination-list .prev .page-link,
	.rhs-pagination-list .next .page-link { padding: 0; min-width: var(--rhs-pg-size); }
}

/* ----------  Dark-mode-friendly (Bootstrap data-bs-theme="dark")  ---------- */
[data-bs-theme="dark"] .rhs-pagination-list {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
[data-bs-theme="dark"] .rhs-pagination-list .page-link:hover {
	background: rgba(var(--rhs-600-rgb), .18);
}

/* ----------  Footer  ---------- */
.site-footer {
	background: linear-gradient(180deg, var(--rhs-900) 0%, #3d0f0f 100%) !important;
	color: var(--rhs-50);
	border-top: 4px solid var(--rhs-600);
}
.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer a:hover { color: var(--rhs-300); }
.site-footer .widget-title { color: #fff; opacity: .95; letter-spacing: .04em; }
.site-footer .border-top { border-color: rgba(255, 255, 255, .12) !important; }

/* ----------  Utilities  ---------- */
.object-fit-cover { object-fit: cover; }
.ratio > img { width: 100%; height: 100%; object-fit: cover; }

/* Skip link visible on focus. */
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within { z-index: 1080; }

/* ----------  Mobile tweaks (≤575px)  ---------- */
@media (max-width: 575.98px) {
	.hero { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
	.hero .display-5 { font-size: 1.875rem; }
	.entry-content { font-size: 1rem; }
	.card-body { padding: 1rem; }
}

/* ----------  Print  ---------- */
@media print {
	.site-header, .site-footer, .widget-area, .breadcrumbs, .comments-area, .navbar { display: none !important; }
	a[href]:after { content: " (" attr(href) ")"; font-size: 80%; }
}