/* =========================================================================
   Homepage styles — Madara child theme
   Loaded ONLY on the front page (enqueued from front-page.php), so these
   rules cannot reach any other page on the site.
   ========================================================================= */

:root {
	/* --- the colours you're most likely to want to change --- */
	--mrm-accent: #4f7cff;   /* links, chip hover, current page */
	--mrm-rank: #ff6b3d;     /* rank badges on covers */

	/* light mode */
	--mrm-ink: #16181d;      /* titles */
	--mrm-muted: #6d7480;    /* chapter numbers, timestamps */
	--mrm-line: #e4e6ea;     /* borders */
	--mrm-chip: #f2f3f5;     /* chip + card backgrounds */
	--mrm-panel: #ffffff;    /* widget background */

	--mrm-cover-radius: 6px;
	--mrm-card-w: 118px;
	--mrm-side-w: 444px;     /* width of the right-hand column */
}

body.dark {
	--mrm-ink: #eceff4;
	--mrm-muted: #99a1ae;
	--mrm-line: #2c313a;
	--mrm-chip: #23282f;
	--mrm-panel: #1c2027;
}

/* Page + sidebar backgrounds, and the wider container.
   These were inline in the old front-page.php; they live here now so the
   template prints nothing before the doctype. */
.c-page-content.style-1,
.sidebar-col {
	background-color: #f8f9fa;
}

body.dark .c-page-content.style-1,
body.dark .sidebar-col {
	background-color: #1e1e1e;
}

.site-content .content-area > .container,
.c-top-sidebar > .container.c-container {
	max-width: 1640px;
	margin-left: auto;
	margin-right: auto;
}

/* The top widget area is a transparent box with ~50px of padding, so the
   wrapper behind it (which is white) shows through as a pale band under the
   header. Painting it the same colour as the content area below removes the
   seam whatever that ancestor turns out to be. */
.c-sidebar.c-top-sidebar,
.c-sidebar.c-top-second-sidebar {
	background-color: #f8f9fa;
	padding-top: 18px !important;
	padding-bottom: 18px !important;
}

body.dark .c-sidebar.c-top-sidebar,
body.dark .c-sidebar.c-top-second-sidebar {
	background-color: #1e1e1e;
}

/* -------------------------------------------------------------------------
   Two-column layout: listing on the left, widgets on the right
   ---------------------------------------------------------------------- */

.mrm-layout {
	display: block;
}

@media (min-width: 1200px) {
	.mrm-layout.has-side {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--mrm-side-w);
		gap: 26px;
		align-items: start;
	}
}

.mrm-layout__main {
	min-width: 0;
}

.mrm-layout__side {
	min-width: 0;
	margin-top: 30px;
}

@media (min-width: 1200px) {
	.mrm-layout__side {
		margin-top: 26px;
	}
}

/* -------------------------------------------------------------------------
   Section headings
   ---------------------------------------------------------------------- */

.mrm-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 26px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--mrm-line);
	scroll-margin-top: 90px; /* so #latest doesn't land under the sticky header */
}

.mrm-head .mrm-head__title {
	margin: 0;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--mrm-ink) !important;
}

.mrm-head .mrm-head__link {
	flex: none;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mrm-muted) !important;
	text-decoration: none !important;
}

.mrm-head .mrm-head__link:hover {
	color: var(--mrm-accent) !important;
}

/* -------------------------------------------------------------------------
   Quick browse chips
   ---------------------------------------------------------------------- */

.mrm-home .mrm-quicknav {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 4px;
}

.mrm-home .mrm-chip {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	padding: 9px 14px;
	border-radius: 6px;
	background: var(--mrm-chip);
	color: var(--mrm-ink) !important;
	text-decoration: none !important;
	transition: background .12s ease, color .12s ease;
}

.mrm-home .mrm-chip:hover {
	background: var(--mrm-accent);
	color: #fff !important;
}

/* -------------------------------------------------------------------------
   Sliders
   ---------------------------------------------------------------------- */

.mrm-slider {
	position: relative;
}

.mrm-slider__track {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 2px 0 6px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.mrm-slider__track::-webkit-scrollbar {
	display: none;
}

.mrm-slider__track .mrm-item {
	flex: 0 0 var(--mrm-card-w);
	scroll-snap-align: start;
	list-style: none;
	margin: 0;
	min-width: 0;
}

/* Arrows: desktop only, and only while the row is hovered or focused. */
.mrm-arrow {
	position: absolute;
	top: calc((var(--mrm-card-w) * 1.5) / 2 - 17px);
	z-index: 3;
	width: 34px;
	height: 34px;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0 0 3px;
	border: 1px solid var(--mrm-line);
	border-radius: 999px;
	background: var(--mrm-panel);
	color: var(--mrm-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .12s ease, border-color .12s ease, color .12s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.mrm-arrow.is-prev {
	left: -12px;
}

.mrm-arrow.is-next {
	right: -12px;
}

.mrm-arrow:hover {
	border-color: var(--mrm-accent);
	color: var(--mrm-accent);
}

@media (min-width: 992px) {
	.mrm-arrow {
		display: inline-flex;
	}

	.mrm-slider:hover .mrm-arrow,
	.mrm-arrow:focus-visible {
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------
   Cover cards (used by the sliders)
   ---------------------------------------------------------------------- */

.mrm-item__link {
	display: block;
	text-decoration: none !important;
}

.mrm-item__art {
	position: relative;
	display: block;
	border-radius: var(--mrm-cover-radius);
	overflow: hidden;
	background: var(--mrm-chip);
	aspect-ratio: 2 / 3;
}

.mrm-item__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .18s ease;
}

.mrm-item__link:hover .mrm-item__art img {
	transform: scale(1.04);
}

/* Scrim so the overlaid title stays readable on pale artwork. */
.mrm-item__art::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 62%;
	background: linear-gradient(to top, rgba(8, 9, 13, .92) 0%, rgba(8, 9, 13, .65) 42%, rgba(8, 9, 13, 0) 100%);
	pointer-events: none;
	z-index: 1;
}

.mrm-rank {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-bottom-right-radius: var(--mrm-cover-radius);
	background: var(--mrm-rank);
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

/* Title sits over the artwork rather than under the card. */
.mrm-item__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 6px 7px 7px;
	font-size: 11.5px;
	line-height: 1.28;
	font-weight: 600;
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   The main "Latest updates" listing
   Madara wraps its cards in Bootstrap rows. display:contents lifts the cards
   out of those wrappers so one flat grid controls the whole listing.
   Column counts are explicit at every width so the theme's own rules can
   never collapse the grid to a single title per row.
   ---------------------------------------------------------------------- */

.mrm-grid #loop-content {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 16px 9px !important;
}

.mrm-grid #loop-content .page-listing-item,
.mrm-grid #loop-content .page-listing-item > .row {
	display: contents;
}

.mrm-grid #loop-content [class*="col-"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0;
}

@media (min-width: 480px) {
	.mrm-grid #loop-content {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 640px) {
	.mrm-grid #loop-content {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 20px 12px !important;
	}
}

@media (min-width: 768px) {
	.mrm-grid #loop-content {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		gap: 22px 14px !important;
	}
}

@media (min-width: 992px) {
	.mrm-grid #loop-content {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
	}
}

.mrm-grid .page-item-detail {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.mrm-grid .page-item-detail .item-thumb {
	border-radius: var(--mrm-cover-radius);
	overflow: hidden;
	background: var(--mrm-chip);
	aspect-ratio: 2 / 3;
	margin: 0;
}

.mrm-grid .page-item-detail .item-thumb a,
.mrm-grid .page-item-detail .item-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mrm-grid .page-item-detail .item-summary {
	padding: 8px 0 0 !important;
	margin: 0 !important;
}

.mrm-grid .page-item-detail .post-title h3,
.mrm-grid .page-item-detail .post-title .h5 {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mrm-grid .page-item-detail .post-title h3 a {
	color: var(--mrm-ink) !important;
}

.mrm-grid .page-item-detail .post-title h3 a:hover {
	color: var(--mrm-accent) !important;
}

/* Author and star rating are hidden to keep the grid calm.
   Delete this rule to bring them back. */
.mrm-grid .page-item-detail .author,
.mrm-grid .page-item-detail .meta-item.rating {
	display: none !important;
}

.mrm-grid .page-item-detail .list-chapter {
	margin: 0;
	padding: 0;
}

.mrm-grid .page-item-detail .list-chapter > div,
.mrm-grid .page-item-detail .list-chapter .chapter-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	margin: 0 0 3px;
	padding: 0;
	border: 0 !important;
}

.mrm-grid .page-item-detail .list-chapter .chapter a {
	font-size: 12px;
	font-weight: 600;
	color: var(--mrm-accent) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mrm-grid .page-item-detail .list-chapter .post-on {
	flex: none;
	font-size: 11px;
	color: var(--mrm-muted) !important;
}

/* -------------------------------------------------------------------------
   Side widgets
   ---------------------------------------------------------------------- */

.mrm-widget {
	background: var(--mrm-panel);
	border: 1px solid var(--mrm-line);
	border-radius: 10px;
	padding: 15px 17px 8px;
	margin-bottom: 16px;
}

.mrm-widget .mrm-widget__title {
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--mrm-line);
	font-size: 15px;
	font-weight: 700;
	color: var(--mrm-ink) !important;
}

.mrm-widget .mrm-widget__empty {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mrm-muted) !important;
}

.mrm-widget .mrm-widget__empty a {
	color: var(--mrm-accent) !important;
	font-weight: 600;
}

.mrm-widget .mrm-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mrm-widget .mrm-mini {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	list-style: none;
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid var(--mrm-line);
}

.mrm-widget .mrm-mini:last-child {
	border-bottom: 0;
}

.mrm-widget .mrm-mini__art {
	flex: none;
	width: 46px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--mrm-chip);
	aspect-ratio: 2 / 3;
	display: block;
}

.mrm-widget .mrm-mini__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mrm-widget .mrm-mini__avatar {
	flex: none;
	line-height: 0;
}

.mrm-widget .mrm-mini__avatar img {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	display: block;
}

.mrm-widget .mrm-mini__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}

.mrm-widget .mrm-mini__title {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mrm-ink) !important;
	text-decoration: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mrm-widget .mrm-mini__title:hover {
	color: var(--mrm-accent) !important;
}

.mrm-widget .mrm-badge {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--mrm-rank);
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	vertical-align: 1px;
}

.mrm-widget .mrm-mini__meta {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mrm-accent) !important;
	text-decoration: none !important;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.mrm-widget .mrm-mini__meta .mrm-mini__time {
	flex: none;
	font-size: 11px;
	font-weight: 500;
	color: var(--mrm-muted) !important;
}

.mrm-widget .mrm-mini__text {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--mrm-muted) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mrm-widget .mrm-mini__by {
	font-size: 11.5px;
	color: var(--mrm-muted) !important;
	text-decoration: none !important;
	opacity: .85;
}

a.mrm-mini__by:hover {
	color: var(--mrm-accent) !important;
	opacity: 1;
}

/* -------------------------------------------------------------------------
   Numbered pagination
   ---------------------------------------------------------------------- */

.mrm-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 30px 0 6px;
}

.mrm-pager .mrm-pager__num,
.mrm-pager .mrm-pager__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--mrm-line);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mrm-ink) !important;
	text-decoration: none !important;
	transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.mrm-pager a.mrm-pager__num:hover,
.mrm-pager a.mrm-pager__btn:hover {
	border-color: var(--mrm-accent);
	color: var(--mrm-accent) !important;
}

.mrm-pager .mrm-pager__num.is-current {
	background: var(--mrm-accent);
	border-color: var(--mrm-accent);
	color: #fff !important;
	cursor: default;
}

.mrm-pager .mrm-pager__gap {
	padding: 0 2px;
	color: var(--mrm-muted) !important;
}

/* -------------------------------------------------------------------------
   Small screens
   ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--mrm-card-w: 100px;
	}

	.mrm-head {
		margin: 20px 0 10px;
	}

	.mrm-head .mrm-head__title {
		font-size: 15px;
	}

	.mrm-item__title {
		font-size: 11px;
		padding: 5px 6px 6px;
	}

	.mrm-grid .page-item-detail .post-title h3 {
		font-size: 12px;
	}

	.mrm-home .mrm-chip {
		font-size: 12px;
		padding: 8px 12px;
	}

	.mrm-pager .mrm-pager__num,
	.mrm-pager .mrm-pager__btn {
		min-width: 32px;
		height: 32px;
		padding: 0 9px;
		font-size: 12px;
	}
}

/* Very narrow phones: keep two covers per row, just smaller. */
@media (max-width: 379px) {
	:root {
		--mrm-card-w: 88px;
	}

	.mrm-grid #loop-content {
		gap: 14px 7px !important;
	}

	.mrm-item__title {
		font-size: 10.5px;
		-webkit-line-clamp: 2;
	}

	.mrm-grid .page-item-detail .post-title h3 {
		font-size: 11.5px;
	}

	.mrm-grid .page-item-detail .list-chapter .chapter a {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mrm-layout *,
	.mrm-slider__track {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}