/*
 * MFI Theme component styles (planning doc §5.5 components, §5.6 accessibility).
 *
 * Written with CSS logical properties (margin-inline, padding-inline, etc.) instead of
 * left/right wherever direction matters, so the layout flips correctly once Arabic/Hebrew
 * RTL content ships (§0 scoping decision: "architected for later"). Do not introduce new
 * left/right-specific rules without a logical-property equivalent.
 */

/* Skip link (§5.6) */
.mfi-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	background: var( --wp--preset--color--primary-900 );
	color: #fff;
	padding: 0.75rem 1.25rem;
	z-index: 100;
}
.mfi-skip-link:focus {
	inset-inline-start: 0;
}

/* Visible focus ring on every interactive element (§5.6) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent-gold );
	outline-offset: 2px;
}

/* Header */
.mfi-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-block-end: 1px solid var( --wp--preset--color--neutral-100 );
	padding-block: 0.75rem;
}

.mfi-header-inner {
	align-items: center;
}

.mfi-utility-bar {
	align-items: center;
	gap: 1rem;
}

.mfi-donate-button .wp-block-button__link {
	background: var( --wp--preset--color--accent-gold );
	color: var( --wp--preset--color--neutral-900 );
}

/* Section rhythm — 96px vertical spacing between major homepage sections (§5.4) */
.mfi-section {
	padding-block: var( --wp--custom--spacing--section-gap, 96px );
}

/* Mission highlights */
.mfi-mission-highlights h3 {
	color: var( --wp--preset--color--primary-900 );
}

/* Featured Initiative — hero-style card (§4.1) */
.mfi-featured-initiative-card img {
	border-radius: 8px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

/* Featured Stories band — 1 large + smaller grid on desktop (§4.1 desktop expansion) */
.mfi-featured-stories-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
.mfi-story-card img,
.mfi-news-card img {
	border-radius: 8px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}
.mfi-category-badge {
	display: inline-block;
	background: var( --wp--preset--color--neutral-100 );
	color: var( --wp--preset--color--primary-900 );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	margin-block: 0.5rem;
}

@media ( min-width: 782px ) {
	.mfi-featured-stories-grid {
		grid-template-columns: 1.4fr 1fr;
	}
	.mfi-featured-stories-grid > :first-child {
		grid-row: span 2;
	}
}

/* Latest News — horizontal scroll on mobile, grid on desktop (§4.1) */
.mfi-latest-news-row {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: 0.5rem;
}
.mfi-latest-news-row .mfi-news-card {
	flex: 0 0 80%;
	scroll-snap-align: start;
}
@media ( min-width: 782px ) {
	.mfi-latest-news-row {
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		overflow-x: visible;
	}
	.mfi-latest-news-row .mfi-news-card {
		flex: initial;
	}
}

/* Placeholder thumbnail (functions.php fallback) reads visually distinct from real photos
   so editors are nudged to replace it, without looking broken to visitors. */
.mfi-placeholder-thumbnail {
	border-radius: 8px;
	opacity: 0.9;
}

/* Events row */
.mfi-events-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media ( min-width: 600px ) {
	.mfi-events-row {
		grid-template-columns: repeat( 2, 1fr );
	}
}
.mfi-event-card {
	border-inline-start: 4px solid var( --wp--preset--color--accent-gold );
	padding-inline-start: 1rem;
}

/* Impact stats strip */
.mfi-impact-stats {
	border-radius: 12px;
	padding: var( --wp--preset--spacing--60 );
	text-align: center;
}

/* Action row — 2x3 grid mobile, 5-across desktop (§4.1) */
.mfi-action-row {
	grid-template-columns: repeat( 2, 1fr );
	gap: 1rem;
}
.mfi-action-row .wp-block-buttons {
	width: 100%;
}
.mfi-action-row .wp-block-button__link {
	display: block;
	text-align: center;
}
@media ( min-width: 782px ) {
	.mfi-action-row {
		grid-template-columns: repeat( 5, 1fr );
	}
}

/* Footer */
.mfi-site-footer {
	background: var( --wp--preset--color--primary-900 );
	color: #fff;
	padding-block: var( --wp--preset--spacing--70 );
	margin-block-start: var( --wp--preset--spacing--80 );
}
.mfi-site-footer a {
	color: #fff;
}
.mfi-newsletter-form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.mfi-newsletter-form input {
	min-height: 44px;
	padding-inline: 0.75rem;
	border-radius: 6px;
	border: none;
	flex: 1 1 240px;
}
.mfi-newsletter-form button {
	min-height: 44px;
	padding-inline: 1.25rem;
	border-radius: 6px;
	border: none;
	background: var( --wp--preset--color--accent-gold );
	color: var( --wp--preset--color--neutral-900 );
	font-weight: 700;
	cursor: pointer;
}
.mfi-footer-columns {
	gap: 2rem;
	margin-block-start: 2rem;
}

/* News hub filter chips */
.mfi-filter-chips {
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-block: 1rem;
}
.mfi-chip {
	display: inline-block;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	background: var( --wp--preset--color--neutral-100 );
	color: var( --wp--preset--color--neutral-900 );
	text-decoration: none;
}
.mfi-chip.is-active {
	background: var( --wp--preset--color--primary-600 );
	color: #fff;
}

/* Reduced motion respect (§5.6) */
@media ( prefers-reduced-motion: reduce ) {
	.mfi-latest-news-row {
		scroll-behavior: auto;
	}
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* RTL note: because every directional rule above uses logical properties
   (margin-inline-start, padding-inline-start, inset-inline-start, border-inline-start), this
   stylesheet does not need a separate style-rtl.css override for layout direction — WordPress
   will still auto-load style-rtl.css if present for anything script-specific (e.g. a
   flipped icon) once Arabic/Hebrew ship. See DEPLOYMENT-README.md multilingual notes. */