/*
Theme Name: Renungan Hati (TT5 child)
Template: twentytwentyfive
Version: 1.0.0
Description: Child of Twenty Twenty-Five, recreating the GridLane look of renunganhati.com: black header, RECENT POSTS blue tag, 3-column card grid, blue social footer + black copyright bar. Poppins type, comfortable proportional sizes.
Author: yohanes
*/

/*
 * Global shell: near-white page, comfortable Poppins body text.
 * Colors mirror gridlane: accent blue #3498db, ink #111, header/footer black.
 */
body {
	background-color: #fafafa;
	color: #111;
	font-size: 1.0625rem !important;   /* 17px base: comfy for a devotional blog */
	line-height: 1.7;
}
.has-brand-color { color: #3498db !important; }
.has-brand-background-color { background-color: #3498db !important; }

/* ---------- Header: black bar ---------- */
.rh-header {
	background-color: #000000 !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
.rh-header .wp-block-site-title a { color: #fff !important; }
.rh-header .wp-block-site-tagline { color: #d5d5d5 !important; font-size: .875rem; line-height: 1.3; }
.rh-header nav.wp-block-navigation { color: #fff; }
.rh-header nav.wp-block-navigation a { color: #fff !important; }
.rh-header nav.wp-block-navigation a:hover { color: #dddddd !important; }
.rh-header .wp-block-search__button { background-color: #3498db !important; border: 0; }
.rh-header .wp-block-search__input { background: transparent; border: 1px solid #555; color: #fff; }

/* ---------- Home: RECENT POSTS pill + card grid ---------- */
.rh-recent-label {
	display: inline-block;
	background-color: #3498db;
	color: #fff !important;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .4px;
	line-height: 1;
	margin: 0 0 1.25rem;
	padding: 8px 12px;
	border-radius: 4px;
	text-transform: uppercase;
}
.rh-card-grid .wp-block-post {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	border-radius: 6px;
}
.rh-card-grid .wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
}
.rh-card-grid .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}
.rh-card-grid .wp-block-post-featured-image img {
	display: block;
	transition: transform .25s ease;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.rh-card-grid .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.rh-card-grid .wp-block-group { height: 100%; }
.rh-card-grid .rh-card-body {
	padding: 1.1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: .5rem;
}
.rh-card-grid .wp-block-post-title {
	font-size: 1.125rem;   /* 18px card titles: up from GridLane's 16px for readability */
	line-height: 1.35;
	margin: 0;
}
.rh-card-grid .wp-block-post-title a { color: #111 !important; text-decoration: none; }
.rh-card-grid .wp-block-post-title a:hover { color: #3498db !important; }
.rh-card-grid .wp-block-post-date { font-size: .8125rem; }
.rh-card-grid .wp-block-post-date a { color: #3498db !important; text-decoration: none; }
.rh-card-grid .wp-block-post-date a:hover { color: #111 !important; }

/* ---------- Footer: blue social bar + black bar ---------- */
.rh-footer-social { background-color: #3498db !important; }
.rh-footer-social .wp-block-social-links { color: #fff; }
/* White-only social icons (glyph + pill), matching the current design's plain white logos */
.rh-footer-social .wp-social-link {
	background: none !important;
	color: #fff !important;
}
.rh-footer-social .wp-social-link a {
	background: none !important;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	width: 34px;
	padding: 6px;
}
.rh-footer-social .wp-social-link svg { fill: #ffffff !important; }
.rh-footer-bottom { background-color: #000 !important; }
.rh-footer-bottom p, .rh-footer-bottom .wp-block-paragraph { color: #e5e5e5 !important; font-size: .8125rem; margin: 0; }
.rh-footer-bottom a { color: #fff !important; }

/* ---------- Single / Page: centered title ---------- */
.rh-single-title, .rh-page-title { text-align: center; }
.rh-single-meta { color: #666; font-size: .875rem; text-align: center; }

/* Comfortable reading measure for post content */
.rh-single-content, .rh-post-content { font-size: 1.05rem; line-height: 1.75; }

/* ---------- Related posts on single ---------- */
.rh-related { border-top: 1px solid color-mix(in srgb, #111 15%, transparent); }
.rh-related .rh-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40, 1.8rem);
	align-items: stretch;           /* equal-height cards → aligned images on top AND aligned text on bottom */
}
.rh-related .rh-related-grid > .wp-block-group {
	min-width: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-top: 0 !important;       /* kill the theme's is-layout-flow block-gap that staggered items 2–3 */
}
.rh-related .rh-rel-img { margin: 0 0 .75rem 0; order: 1; }
.rh-related .rh-rel-img img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.rh-related-card {
	padding: 0;
	margin-top: auto;              /* push text block to the bottom, below the image */
	order: 2;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.rh-related-card .wp-block-post-title { margin: 0 0 .2rem 0; font-size: 1rem; line-height: 1.4; }
.rh-related-card .wp-block-post-date { margin: 0; }
.rh-related-card .wp-block-post-title a { color: #111 !important; text-decoration: none; }
.rh-related-card .wp-block-post-title a:hover { color: #3498db !important; }
.rh-related-card .wp-block-post-date a { color: #3498db !important; text-decoration: none; }
.rh-related-card .wp-block-post-date a:hover { color: #111 !important; }
@media (max-width: 768px) {
	.rh-related .rh-related-grid { grid-template-columns: 1fr; }
}

/* ---------- Pagination matches blue accent ---------- */
.wp-block-query-pagination a { color: #444 !important; text-decoration: none; }
/* Boxed page numbers, matching GridLane's current pagination */
.rh-pagination .wp-block-query-pagination {
	justify-content: center;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}
.rh-pagination .page-numbers {
	display: inline-block;
	padding: 8px 12px;
	background: #eeeeee;
	border: 1px solid #cccccc;
	margin: 0 0 5px 2px;
	color: #444444 !important;
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 0;
}
.rh-pagination .page-numbers:hover,
.rh-pagination .page-numbers:focus,
.rh-pagination .page-numbers:active {
	background: #dddddd;
	border-color: #bbbbbb;
	color: #000000 !important;
}
.rh-pagination .page-numbers.current {
	background: #dddddd;
	border-color: #bbbbbb;
	color: #000000 !important;
}
.rh-pagination .page-numbers a { color: inherit; }
.rh-pagination .wp-block-query-pagination-previous,
.rh-pagination .wp-block-query-pagination-next,
.rh-pagination .wp-block-query-pagination-numbers { margin: 0; }

/* ---------- Sidebar ---------- */
.rh-sidebar-title { color: #111 !important; }
.rh-sidebar-list .wp-block-post-title { margin-bottom: .2rem; }
.rh-sidebar-list .wp-block-post-date a { color: #3498db !important; text-decoration: none; }
.rh-sidebar-list .wp-block-post-date a:hover { color: #111 !important; }
.rh-sep { border-color: color-mix(in srgb, #111 12%, transparent); }
.wp-block-columns.rh-home-columns .rh-side-col .wp-block-categories a { color: #3498db !important; text-decoration: none; }
.wp-block-columns.rh-home-columns .rh-side-col .wp-block-categories li { margin-bottom: .35rem; }

/* ---------- Responsive: stack the home columns on tablet/mobile ---------- */
@media (max-width: 900px) {
	.rh-home-columns .rh-main-col,
	.rh-home-columns .rh-side-col,
	.wp-block-columns.rh-home-columns .wp-block-column { flex-basis: 100% !important; }
}

/* ---------- Header hamburger: in-flow drop-down that pushes content down ---------- */
@media (max-width: 599px) {
	/* Widen the whole menu column + let the header row wrap so the dropdown spans full width */
	.rh-header .wp-block-group:has(> .wp-block-group:has(nav.wp-block-navigation.nav-turun .is-menu-open)) {
		flex-wrap: wrap !important;
	}
	.rh-header .wp-block-group:has(nav.wp-block-navigation.nav-turun .is-menu-open) {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		justify-content: flex-start !important;
	}
	.rh-header nav.wp-block-navigation.nav-turun { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; }
	.rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation__responsive-container.is-menu-open {
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		flex-basis: 100% !important;
		overflow: visible !important;
		margin: .75rem 0 0 0 !important;
		padding: 2rem 1rem .75rem !important;
		background-color: #111 !important;
		box-shadow: none !important;
		top: auto !important;
		left: auto !important;
	}
	.rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation__responsive-dialog {
		width: 100% !important;
	}
	.rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation__container { flex-direction: column !important; gap: 0 !important; width: 100% !important; }
	.rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation-item { flex-basis: 100% !important; width: 100% !important; margin: 0 !important; }
	.rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation-item__content {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding: .8rem .75rem !important;
		text-align: left !important;
		color: #fff !important;
		background: none !important;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
	.rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation-item__content:hover { background-color: #3498db !important; }
	.rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: .75rem !important;
		right: .75rem !important;
		color: #ccc !important;
	}
	/* Mouse-driven open: no focus ring on the first (auto-focused) item */
	.rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation-item__content:focus:not(:hover),
	html.nav-pointer .rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation-item__content:focus,
	html.nav-pointer .rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation-item__content:focus-visible {
		outline: none !important;
		background: none !important;
	}
	/* Keyboard-driven open: always a ring, never a hover fill */
	html.nav-keyboard .rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation-item__content:focus {
		outline: 2px solid #3498db !important;
		outline-offset: -2px !important;
	}
	html.nav-keyboard .rh-header nav.wp-block-navigation.nav-turun .wp-block-navigation-item__content:hover { background: none !important; }
}

/* ---------- Responsive: grid collapses below 768 ---------- */
@media (max-width: 768px) {
	.rh-header .wp-block-group { flex-wrap: wrap; }
}

/* Home card grid: 3-col desktop → 2-col tablet → 1-col mobile */
@media (max-width: 1100px) and (min-width: 600px) {
	.rh-card-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 599px) {
	.rh-card-grid .wp-block-post-template { grid-template-columns: 1fr !important; }
}