/* =========================================================
   KBM MOBILE FIX — phone-first overrides (v2.3)
   Loads last so it wins over older responsive rules.
========================================================= */

/* Prevent horizontal scroll on all phones */
html, body {
	overflow-x: hidden;
	max-width: 100vw;
}
img, video, iframe, embed, object {
	max-width: 100%;
	height: auto;
}
.container {
	width: min(100% - 1.5rem, var(--container, 1140px));
	margin-inline: auto;
	padding-inline: 0;
}

/* Touch-friendly targets */
.btn, button, .mobile-toggle, .kbm-mobile-close,
.nav-menu a, .card-cta, .pagination a {
	min-height: 44px;
	min-width: 44px;
}

/* Header stability on phone */
@media (max-width: 1024px) {
	.top-bar {
		display: none !important;
	}
	:root {
		--topbar-h: 0px;
		--header-h: 64px;
	}
	main#main-content {
		padding-top: var(--header-h, 64px);
	}
	.site-header {
		position: sticky;
		top: 0;
		z-index: 1000;
		background: var(--white, #fff);
		box-shadow: 0 1px 0 var(--border, #e2e8f0);
	}
	.navbar {
		min-height: 64px;
		padding: 0.5rem 0;
		gap: 0.75rem;
	}
	.logo-title {
		font-size: 1.05rem;
		line-height: 1.2;
	}
	.logo-subtitle {
		font-size: 0.68rem;
	}
	.custom-logo-link img,
	.custom-logo {
		max-height: 42px !important;
		width: auto;
	}
}

/* Single column everything under 768 */
@media (max-width: 768px) {
	.card-grid,
	.kbm-feature-grid,
	.kbm-series-grid,
	.stats-grid,
	.hero-stats,
	.footer-grid,
	.contact-info-grid,
	.single-layout {
		grid-template-columns: 1fr !important;
		gap: 1.25rem;
	}
	.hero-grid,
	.hero-wrapper,
	.featured-article,
	.about-layout,
	.join-box {
		grid-template-columns: 1fr !important;
		text-align: center;
	}
	.hero-buttons,
	.page-hero .hero-buttons,
	.cta-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.hero-buttons .btn,
	.page-hero .hero-buttons .btn,
	.cta-actions .btn {
		width: 100%;
		justify-content: center;
	}
	.section-padding {
		padding: 2.5rem 0;
	}
	.page-hero,
	.hero {
		padding: 2.75rem 0 2.25rem;
	}
	h1 {
		font-size: clamp(1.55rem, 6vw, 2.1rem) !important;
		line-height: 1.25;
	}
	h2 {
		font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
	}
	.entry-content,
	.single-content {
		font-size: 1.02rem;
		line-height: 1.7;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
	.entry-content img,
	.single-content img,
	.featured-image img {
		border-radius: 10px;
	}
	/* Sermon / day meta chips wrap cleanly */
	.sermon-meta,
	.devotion-meta,
	.single-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
		font-size: 0.88rem;
	}
	/* Day navigation full-width buttons */
	.devotion-navigation {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
	.devotion-navigation .btn {
		width: 100%;
		justify-content: center;
	}
	/* Forms */
	.form-row {
		grid-template-columns: 1fr !important;
	}
	.contact-form {
		padding: 1.25rem;
	}
	.search-form {
		flex-direction: column;
	}
	.search-form .search-submit {
		width: 100%;
	}
	/* Footer */
	.footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}
	/* Series TOC on phone */
	.kbm-series-toc li a {
		grid-template-columns: 40px 1fr !important;
		padding: 0.85rem 1rem;
	}
	.kbm-series-toc .day-go {
		display: none;
	}
}

/* Very small phones */
@media (max-width: 380px) {
	.container {
		width: min(100% - 1rem, 100%);
	}
	.card-content,
	.kbm-feature-card,
	.kbm-series-card {
		padding: 1.1rem;
	}
	.stat-card h3 {
		font-size: 1.35rem;
	}
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
	.kbm-mobile-panel-inner {
		padding-top: max(0px, env(safe-area-inset-top));
		padding-bottom: max(0px, env(safe-area-inset-bottom));
	}
	.site-header {
		padding-left: max(0px, env(safe-area-inset-left));
		padding-right: max(0px, env(safe-area-inset-right));
	}
}

/* Ensure article body never stays hidden by reveal animation */
.single-content,
.entry-content,
.single-content.reveal,
.entry-content.reveal {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

/* =========================================================
   SERIES CARDS — force visible (fixes empty/white-text bug)
========================================================= */
.kbm-series {
	background: linear-gradient(160deg, #0A3559 0%, #0F4C81 50%, #0B1E33 100%) !important;
	color: #fff !important;
}
.kbm-series .section-header h2,
.kbm-series .section-header--light h2 {
	color: #ffffff !important;
}
.kbm-series .section-header p,
.kbm-series .section-header--light p {
	color: rgba(255, 255, 255, 0.9) !important;
}
.kbm-series .section-tag {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
}
.kbm-series-card {
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}
.kbm-series-card h3 {
	color: #ffffff !important;
	font-size: 1.2rem !important;
	margin: 0 0 0.75rem !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.kbm-series-card p {
	color: rgba(255, 255, 255, 0.88) !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.kbm-series-meta {
	color: rgba(255, 255, 255, 0.75) !important;
}
.kbm-series-icon {
	background: rgba(201, 162, 39, 0.3) !important;
	font-size: 1.6rem !important;
}
.btn-series {
	background: #C9A227 !important;
	color: #1a1200 !important;
}