/*
Theme Name: NNMC Modern
Description: Custom block theme for Northern Nevada Muslim Community.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nnmc-modern
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts a margin-block-start equal to the block gap (24px unless
   theme.json sets styles.spacing.blockGap) between the template's top-level
   sections (header part, main, footer part) — a gap that exists even when no
   markup asks for it. Zero it so sections butt edge-to-edge and own their
   vertical rhythm via padding; this does not affect block gaps inside nested
   layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

/* =========================================================================
   NNMC Modern — "Storm-lit Dusk Bands". Tokens live in theme.json; DESIGN.md
   explains them. Palette and type are always referenced through presets.
   ========================================================================= */
:root {
	--nnmc-header-h: 84px;
	--nnmc-strip-overlap: 88px;
	--nnmc-midnight: var(--wp--preset--color--midnight);
	--nnmc-ivory: var(--wp--preset--color--background);
	--nnmc-gold: var(--wp--preset--color--gold);
	--nnmc-gold-ink: var(--wp--preset--color--gold-ink);
	--nnmc-line: var(--wp--preset--color--line);
	--nnmc-muted: var(--wp--preset--color--muted);
	--nnmc-gutter: var(--wp--style--root--padding-left, clamp(1.25rem, 4.5vw, 4rem));
	--nnmc-shadow: 0 1px 2px rgb(11 42 69 / 0.06), 0 8px 24px rgb(11 42 69 / 0.06);
}

/* === base === */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nnmc-header-h) + 1rem);
}
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
::selection {
	background: var(--nnmc-gold);
	color: var(--nnmc-midnight);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}
:where(.has-midnight-background-color, .site-header, .nnmc-hero, .is-style-card-dark, .mobile-bar-part) :focus-visible,
:where(.has-midnight-background-color, .site-header, .nnmc-hero, .is-style-card-dark, .mobile-bar-part) .wp-element-button:focus {
	outline-color: var(--nnmc-gold);
}
.has-midnight-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--nnmc-ivory);
}
.has-midnight-background-color a:where(:not(.wp-element-button)) {
	color: var(--nnmc-gold);
}

/* === shared pieces: eyebrow, chips, ghost buttons, cards === */
.is-style-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nnmc-gold-ink);
}
:where(.has-midnight-background-color, .nnmc-hero, .is-style-card-dark) .is-style-eyebrow {
	color: var(--nnmc-gold);
}
.is-style-chip-confirm,
.is-style-chip-sample,
.is-style-chip-confirm {
	color: var(--nnmc-gold-ink);
	border: 1px dashed currentColor;
}
:where(.has-midnight-background-color, .is-style-card-dark) .is-style-chip-confirm {
	color: var(--nnmc-gold);
}
.is-style-chip-sample {
	color: var(--nnmc-gold-ink);
	background: var(--wp--preset--color--sand);
	border: 1px solid var(--nnmc-line);
}
.nnmc-chips {
	gap: 0.5rem;
	margin-top: 1.25rem;
}
.is-style-ghost-light .wp-block-button__link {
	background: transparent;
	color: var(--nnmc-ivory);
	border-color: rgb(250 247 240 / 0.72);
}
.is-style-ghost-light .wp-block-button__link:hover,
.is-style-ghost-light .wp-block-button__link:focus-visible {
	background: rgb(250 247 240 / 0.12);
	color: var(--nnmc-ivory);
	border-color: var(--nnmc-ivory);
}
.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}
.is-style-ghost .wp-block-button__link:hover,
.is-style-ghost .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.wp-element-button {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--nnmc-line);
	border-radius: 16px;
	padding: clamp(1.4rem, 2.4vw, 1.85rem);
	box-shadow: var(--nnmc-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.is-style-card-dark {
	background: var(--nnmc-midnight);
	color: var(--nnmc-ivory);
	border-radius: 16px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 22px 50px rgb(11 42 69 / 0.22);
}

/* === header === */
.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	/* Keep the open mobile menu above the phone action bar. */
	z-index: 120;
	background: var(--nnmc-midnight);
	color: var(--nnmc-ivory);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header:not(.is-top) {
	box-shadow: 0 10px 30px rgb(11 42 69 / 0.25);
}
.home .site-header.is-top {
	background: linear-gradient(180deg, rgb(11 42 69 / 0.62) 0%, rgb(11 42 69 / 0) 100%);
	box-shadow: none;
}
.site-header__inner {
	gap: 1.5rem;
	padding: 1rem var(--nnmc-gutter);
	transition: padding 0.3s ease;
}
.site-header:not(.is-top) .site-header__inner {
	padding-block: 0.65rem;
}
.site-brand {
	gap: 0.75rem;
}
.site-brand__mark {
	flex: none;
	color: var(--nnmc-gold);
}
.site-brand .wp-block-site-title {
	margin: 0;
	max-width: 9.6em;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: 0;
}
.site-brand .wp-block-site-title a {
	color: var(--nnmc-ivory);
	text-decoration: none;
}
.site-header__actions {
	gap: clamp(1rem, 2.4vw, 2rem);
}
.site-nav {
	font-size: 0.9375rem;
	font-weight: 500;
}
.site-nav .wp-block-navigation__container {
	gap: clamp(1.25rem, 2.2vw, 2.25rem);
}
.site-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.6rem;
	color: var(--nnmc-ivory);
	text-decoration: none;
}
.site-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.25rem;
	height: 2px;
	background: var(--nnmc-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.site-nav .wp-block-navigation-item__content:hover::after,
.site-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}
.site-nav .wp-block-navigation__responsive-container-open {
	padding: 0.6rem 1rem;
	border: 1px solid rgb(250 247 240 / 0.6);
	border-radius: 8px;
	color: var(--nnmc-ivory);
	font: 600 0.875rem/1 var(--wp--preset--font-family--inter);
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem var(--nnmc-gutter);
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.5rem;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.875rem;
}
.site-nav .wp-block-navigation__responsive-container-close {
	color: var(--nnmc-ivory);
}

/* === hero === */
.wp-block-post-content > .wp-block-cover.nnmc-hero:first-child {
	margin-top: calc(-1 * var(--nnmc-header-h));
}
.wp-block-cover.nnmc-hero {
	min-height: clamp(640px, 92svh, 900px);
	padding: calc(var(--nnmc-header-h) + clamp(2rem, 6vh, 4rem)) var(--nnmc-gutter) calc(var(--nnmc-strip-overlap) + clamp(3.5rem, 8vh, 5.5rem));
	color: var(--nnmc-ivory);
	overflow: hidden;
}
.nnmc-hero .wp-block-cover__image-background {
	object-position: 50% 58%;
	animation: nnmc-drift 26s ease-in-out infinite alternate;
}
@keyframes nnmc-drift {
	to {
		transform: scale(1.045);
	}
}
.nnmc-hero .wp-block-cover__background.has-midnight-background-color {
	opacity: 1 !important;
	background-color: transparent !important;
	background-image:
		linear-gradient(90deg, rgb(11 42 69 / 0.93) 0%, rgb(11 42 69 / 0.88) 38%, rgb(11 42 69 / 0.6) 55%, rgb(11 42 69 / 0) 74%),
		linear-gradient(180deg, rgb(11 42 69 / 0.5) 0%, rgb(11 42 69 / 0) 22%),
		linear-gradient(0deg, rgb(11 42 69 / 0.5) 0%, rgb(11 42 69 / 0) 24%);
}
/* The inner container is static; its children sit above the image and overlay. */
.nnmc-hero .wp-block-cover__inner-container {
	position: static;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}
.nnmc-hero .wp-block-cover__inner-container > * {
	position: relative;
	z-index: 2;
}
.nnmc-hero .nnmc-hero__title {
	max-width: 11.5em;
	margin-block: 1rem 1.1rem;
	color: var(--nnmc-ivory);
	text-wrap: balance;
	text-shadow: 0 2px 24px rgb(11 42 69 / 0.5);
}
.nnmc-hero .nnmc-hero__lede {
	max-width: 34em;
	margin: 0;
	color: var(--nnmc-ivory);
}
.nnmc-hero .is-style-eyebrow,
.nnmc-hero .nnmc-hero__lede {
	text-shadow: 0 1px 14px rgb(11 42 69 / 0.75);
}
.nnmc-hero .nnmc-hero__ctas {
	gap: 0.75rem;
	margin-top: 2rem;
}

/* === prayer strip placement (styles ship with NNMC Core) === */
.wp-block-post-content > .wp-block-cover.nnmc-hero + .wp-block-nnmc-prayer-strip {
	margin-top: calc(-1 * var(--nnmc-strip-overlap));
}

/* === bands === */
.wp-block-post-content > .nnmc-band {
	margin-block: 0;
}
.nnmc-band {
	padding-block: clamp(4.5rem, 9vw, 6.75rem);
}
.nnmc-band--week {
	padding-top: clamp(3.5rem, 6vw, 5rem);
}
.nnmc-head {
	gap: 1rem 2rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.nnmc-head h2 {
	margin: 0.4rem 0 0;
}
.nnmc-head .nnmc-head__link,
.nnmc-head .nnmc-head__note {
	margin: 0;
}
.nnmc-head__link a {
	font-weight: 600;
	text-decoration: none;
}
.nnmc-head__link a::after {
	content: " →";
}
.nnmc-head__link a:hover,
.nnmc-head__link a:focus-visible {
	text-decoration: underline;
}
.nnmc-head__note,
.nnmc-muted {
	color: var(--nnmc-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* === sections === */
/* This week: Jumu'ah card + two event cards. */
.nnmc-week {
	gap: 1.25rem;
	align-items: stretch;
}
.nnmc-week > .wp-block-nnmc-upcoming-events {
	grid-column: span 2;
}

/* Announcements. */
.nnmc-announcements .wp-block-post-template {
	gap: 1.25rem;
}
.nnmc-announcement {
	height: 100%;
	gap: 0.5rem;
}
.nnmc-announcement:hover,
.nnmc-service:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 2px rgb(11 42 69 / 0.06), 0 14px 32px rgb(11 42 69 / 0.1);
}
.nnmc-announcement .nnmc-announcement__date {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nnmc-gold-ink);
}
.nnmc-announcement .wp-block-post-title {
	margin: 0;
	text-wrap: balance;
}
.nnmc-announcement .wp-block-post-title a {
	color: var(--nnmc-midnight);
	text-decoration: none;
}
.nnmc-announcement .wp-block-post-title a:hover,
.nnmc-announcement .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.nnmc-announcement .wp-block-post-excerpt {
	margin: 0;
	color: var(--nnmc-muted);
	font-size: var(--wp--preset--font-size--small);
}
.nnmc-announcement .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Text beside image / panel. */
.nnmc-split {
	gap: clamp(2rem, 6vw, 5.5rem);
}
.nnmc-split h2 {
	margin-block: 0.4rem 1.1rem;
}
.nnmc-ticks {
	display: grid;
	gap: 0.6rem;
	margin-block: 1.1rem;
	padding: 0;
	list-style: none;
}
.nnmc-ticks li {
	position: relative;
	padding-left: 1.75rem;
}
.nnmc-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 0.45em;
	height: 0.8em;
	border: solid var(--nnmc-gold-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	background: none;
}
.has-midnight-background-color .nnmc-ticks li::before {
	border-color: var(--nnmc-gold);
}
.is-style-arch img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 999px 999px 16px 16px;
	box-shadow: 0 24px 60px rgb(11 42 69 / 0.18);
}
.is-style-arch figcaption {
	text-align: left;
	margin-top: 0.75rem;
}

/* Give band. */
.nnmc-band--give .wp-block-column > p:not([class*="is-style-"]) {
	color: rgb(250 247 240 / 0.86);
}
.nnmc-quote {
	margin: 1.5rem 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--nnmc-gold);
}
.nnmc-band--give .nnmc-quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--nnmc-ivory);
}
.nnmc-quote cite {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	font-style: normal;
	color: rgb(250 247 240 / 0.7);
}

/* Services. */
.nnmc-services {
	gap: 1.25rem;
}
.nnmc-service {
	position: relative;
	padding-top: 3.4rem;
}
.nnmc-service::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	left: clamp(1.4rem, 2.4vw, 1.85rem);
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--nnmc-gold);
	box-shadow: 0 0 0 4px rgb(216 178 75 / 0.18);
}
.nnmc-service h3 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	text-wrap: balance;
}
.nnmc-service p:not([class*="is-style-"]) {
	margin: 0;
	color: var(--nnmc-muted);
	font-size: var(--wp--preset--font-size--small);
}
.nnmc-service .nnmc-chips {
	margin-top: 0.9rem;
}

/* Visit. */
.nnmc-contact {
	gap: 1.25rem;
	margin-block: 1.5rem 1rem;
}
.nnmc-contact p {
	margin: 0;
}
.nnmc-contact strong {
	display: inline-block;
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nnmc-gold-ink);
}
.nnmc-band--visit h3 {
	margin-top: 2rem;
}
.nnmc-map h3 {
	margin: 0.4rem 0 0.4rem;
}
.nnmc-map p:not([class*="is-style-"]) {
	color: rgb(250 247 240 / 0.8);
	margin-top: 0;
}
.nnmc-map__art {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 1.5rem;
	border-radius: 12px;
	background: #10365a;
}
.nnmc-map .wp-block-buttons {
	margin-top: 1.25rem;
}

/* Single event details (from NNMC Core). */
.nnmc-event-details {
	display: grid;
	gap: 0.4rem;
	justify-items: start;
	margin-bottom: 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--sand);
	border-radius: 12px;
}
.nnmc-event-details p {
	margin: 0;
}
.nnmc-event-details strong {
	margin-right: 0.5rem;
	color: var(--nnmc-gold-ink);
}

/* === footer === */
.site-footer {
	padding-block: clamp(3.5rem, 7vw, 5rem) 1.75rem;
}
.site-footer p {
	margin: 0 0 0.75rem;
}
.site-footer__cols {
	gap: 2.5rem;
}
.site-footer__about {
	flex-basis: 34% !important;
}
.site-footer .site-brand .wp-block-site-title {
	color: var(--nnmc-ivory);
}
.site-footer .site-footer__mission {
	max-width: 38ch;
	margin-top: 1rem;
	color: rgb(250 247 240 / 0.78);
	font-size: var(--wp--preset--font-size--small);
}
.site-footer .site-footer__heading {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nnmc-gold);
}
.site-footer__links {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer a {
	color: var(--nnmc-ivory);
	text-decoration-color: rgb(216 178 75 / 0.6);
	text-underline-offset: 0.2em;
}
.site-footer__links a {
	text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--nnmc-gold);
	text-decoration: underline;
}
.site-footer .site-footer__note {
	font-size: 0.8125rem;
	color: rgb(250 247 240 / 0.65);
}
.site-footer__base {
	gap: 0.5rem 2rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(250 247 240 / 0.12);
	font-size: 0.8125rem;
	color: rgb(250 247 240 / 0.72);
}
.site-footer__base p {
	margin: 0;
}

/* === mobile bar === */
.mobile-bar-part {
	display: none;
}

/* === motion === */
.nnmc-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.nnmc-reveal.is-revealed {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.nnmc-hero .wp-block-cover__image-background {
		animation: none;
	}
	.nnmc-reveal,
	.is-style-card,
	.wp-element-button,
	.site-header,
	.site-header__inner {
		transition: none;
	}
	.nnmc-announcement:hover,
	.nnmc-service:hover {
		transform: none;
	}
}

/* === responsive === */
/* Tablet: the navigation collapses into its overlay below 1100px, not core's 600px. */
@media (min-width: 600px) and (max-width: 1100px) {
	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
@media (max-width: 1100px) and (orientation: portrait) {
	/* Portrait tablets and phones: sky and lit arch stay clear at the top, copy sits on the dark ground. */
	.wp-block-cover.nnmc-hero {
		align-items: flex-end;
		padding-bottom: calc(var(--nnmc-strip-overlap) + 3rem);
	}
	.nnmc-hero .wp-block-cover__image-background {
		object-position: 70% 50%;
	}
	.nnmc-hero .wp-block-cover__background.has-midnight-background-color {
		background-image: linear-gradient(180deg, rgb(11 42 69 / 0.55) 0%, rgb(11 42 69 / 0) 16%, rgb(11 42 69 / 0) 24%, rgb(11 42 69 / 0.88) 46%, rgb(11 42 69 / 0.96) 100%);
	}
}
@media (min-width: 641px) and (max-width: 1100px) and (orientation: landscape) {
	/* Landscape tablets: desktop composition, with the gradient reaching a little further for the narrower width. */
	.nnmc-hero .wp-block-cover__image-background {
		object-position: 62% 58%;
	}
	.nnmc-hero .wp-block-cover__background.has-midnight-background-color {
		background-image:
			linear-gradient(90deg, rgb(11 42 69 / 0.93) 0%, rgb(11 42 69 / 0.9) 50%, rgb(11 42 69 / 0.62) 66%, rgb(11 42 69 / 0) 84%),
			linear-gradient(180deg, rgb(11 42 69 / 0.5) 0%, rgb(11 42 69 / 0) 22%),
			linear-gradient(0deg, rgb(11 42 69 / 0.5) 0%, rgb(11 42 69 / 0) 24%);
	}
}
@media (max-width: 1100px) {
	.nnmc-week {
		grid-template-columns: 1fr 1fr !important;
	}
	.nnmc-week > .wp-block-nnmc-upcoming-events {
		grid-column: 1 / -1;
	}
	.nnmc-announcements .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 781px) {
	.nnmc-week {
		grid-template-columns: 1fr !important;
	}
	.site-footer__about {
		flex-basis: 100% !important;
	}
}
@media (max-width: 640px) {
	:root {
		--nnmc-strip-overlap: 40px;
	}
	body {
		padding-bottom: 76px;
	}
	.site-header .site-header__donate {
		display: none;
	}
	.site-brand .wp-block-site-title {
		font-size: 1rem;
	}
	.site-brand__mark {
		width: 28px;
		height: 28px;
	}
	.wp-block-cover.nnmc-hero {
		min-height: clamp(660px, 94svh, 820px);
		padding-bottom: calc(var(--nnmc-strip-overlap) + 2.5rem);
	}
	.nnmc-hero .wp-block-cover__image-background {
		object-position: 74% 50%;
	}
	/* Phones: the dark scrim is attached to the text block, so it always starts just above
	   the eyebrow whatever the screen height; the artwork above it stays clear. */
	.nnmc-hero .wp-block-cover__background.has-midnight-background-color {
		background-image: linear-gradient(180deg, rgb(11 42 69 / 0.55) 0%, rgb(11 42 69 / 0) 16%);
	}
	.nnmc-hero .wp-block-cover__inner-container {
		position: relative;
	}
	.nnmc-hero .wp-block-cover__inner-container::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: -6rem;
		bottom: calc(-1 * (var(--nnmc-strip-overlap) + 2.5rem));
		left: calc(-1 * var(--nnmc-gutter));
		right: calc(-1 * var(--nnmc-gutter));
		background: linear-gradient(180deg, rgb(11 42 69 / 0) 0, rgb(11 42 69 / 0.9) 5rem, rgb(11 42 69 / 0.96) 100%);
		pointer-events: none;
	}
	.nnmc-hero .nnmc-hero__ctas .wp-block-button {
		flex: 1;
	}
	.nnmc-hero .nnmc-hero__ctas .wp-block-button__link {
		width: 100%;
		padding-inline: 0.75rem;
	}
	.nnmc-announcements .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
	.nnmc-contact {
		grid-template-columns: 1fr !important;
	}
	.mobile-bar-part {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		padding: 0.6rem var(--nnmc-gutter) calc(0.6rem + env(safe-area-inset-bottom));
		background: var(--nnmc-midnight);
		box-shadow: 0 -8px 24px rgb(11 42 69 / 0.25);
	}
	.mobile-bar {
		gap: 0.5rem;
	}
	.mobile-bar .wp-block-button {
		flex: 1;
	}
	.mobile-bar .wp-block-button__link {
		width: 100%;
		padding: 0.7rem 0.5rem;
		text-align: center;
	}
}

/* === interior pages === */
:root {
}
.nnmc-page-hero {
	padding-block: clamp(2.75rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4.25rem);
	background-image: linear-gradient(90deg, var(--nnmc-midnight) 32%, rgb(11 42 69 / 0.55) 62%, rgb(11 42 69 / 0.2));
	background-size: auto, 72px 72px;
	border-bottom: 3px solid var(--nnmc-gold);
}
.nnmc-page-hero__inner > * {
	margin-block: 0;
}
.nnmc-page-hero .nnmc-page-hero__title {
	max-width: 18em;
	margin-block: 0.5rem 1rem;
	font-size: clamp(2.25rem, 1.55rem + 2.8vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--nnmc-ivory);
	text-wrap: balance;
}
.nnmc-page-hero .nnmc-page-hero__intro,
.nnmc-page-hero .nnmc-page-hero__intro p {
	max-width: 46ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	color: rgb(250 247 240 / 0.88);
}
.nnmc-page-hero .nnmc-page-hero__meta {
	font-size: var(--wp--preset--font-size--small);
	color: rgb(250 247 240 / 0.78);
}
.nnmc-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.4rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}
.nnmc-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.4rem;
	color: rgb(250 247 240 / 0.5);
}
.nnmc-breadcrumbs a {
	color: rgb(250 247 240 / 0.85);
	text-decoration: none;
}
.nnmc-breadcrumbs a:hover,
.nnmc-breadcrumbs a:focus-visible {
	color: var(--nnmc-gold);
	text-decoration: underline;
}
.nnmc-breadcrumbs [aria-current="page"] {
	color: var(--nnmc-gold);
}
.nnmc-page-hero .nnmc-search {
	max-width: 32rem;
}

/* Section helpers used across interior pages. Band content sits on the wide
   grid; running text keeps a comfortable measure. */
.nnmc-band__inner > p:not([class*="is-style-"]):not(.nnmc-head__link),
.nnmc-band__inner > .wp-block-list,
.nnmc-band__inner > .wp-block-quote,
.nnmc-band__inner > .nnmc-faq,
.wp-block-column > p:not([class*="is-style-"]) {
	max-width: 68ch;
}
.nnmc-band__inner > * + * {
	margin-block-start: 1.1rem;
}
.nnmc-band__inner > .nnmc-head + *,
.nnmc-band__inner > .nnmc-faq + .nnmc-faq {
	margin-block-start: 0;
}
.nnmc-band__inner > h2 {
	margin-block-end: 0;
}
.nnmc-band--article .nnmc-prose > * + * {
	margin-block-start: 1.1rem;
}
.nnmc-back-link a {
	font-weight: 600;
	text-decoration: none;
}
.nnmc-back-link a::before {
	content: "← ";
}
.nnmc-back-link a:hover,
.nnmc-back-link a:focus-visible {
	text-decoration: underline;
}
.nnmc-lead {
	max-width: 62ch;
}
.nnmc-stack > * + * {
	margin-block-start: 1rem;
}
.nnmc-facts {
	gap: 1.25rem 2rem;
}
.nnmc-card-grid {
	gap: 1.25rem;
}
.nnmc-card-grid .is-style-card h3,
.nnmc-card-grid .is-style-card-dark h3 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	text-wrap: balance;
}
.nnmc-card-grid .is-style-card p:not([class*="is-style-"]) {
	margin: 0;
	color: var(--nnmc-muted);
	font-size: var(--wp--preset--font-size--small);
}
.is-style-card > :first-child,
.is-style-card-dark > :first-child {
	margin-top: 0;
}
.is-style-card-dark p:not([class*="is-style-"]) {
	color: rgb(250 247 240 / 0.85);
}

.nnmc-quote--light p {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--nnmc-midnight);
}
.nnmc-quote--light cite {
	color: var(--nnmc-muted);
}
.nnmc-split--cards {
	align-items: stretch !important;
	gap: 1.25rem;
}
@media (min-width: 782px) {
	.nnmc-split--form > .wp-block-column:first-child {
		flex: 1 1 auto !important;
	}
	.nnmc-split--form > .wp-block-column:last-child {
		flex: 0 0 min(100%, 21rem) !important;
	}
}
/* Headings inside midnight cards are ivory (headings default to midnight). */
.is-style-card-dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--nnmc-ivory);
}
.nnmc-contact-card .nnmc-fact + .nnmc-fact {
	margin-top: 1rem;
}
.nnmc-card-grid .nnmc-fact {
	margin-top: 0.75rem;
}
.nnmc-card-grid h3 a {
	color: var(--nnmc-midnight);
	text-decoration-color: var(--nnmc-gold);
	text-underline-offset: 0.2em;
}
.nnmc-band__inner > .wp-block-nnmc-prayer-strip {
	margin-bottom: 1.5rem;
}

/* Services: sticky "On this page" menu beside the service sections. */
.nnmc-split--toc {
	align-items: flex-start !important;
}
.nnmc-toc {
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--nnmc-line);
	border-radius: 16px;
}
.nnmc-toc .nnmc-toc__list {
	display: grid;
	gap: 0.15rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}
.nnmc-toc__list a {
	display: block;
	padding: 0.4rem 0.55rem;
	border-radius: 8px;
	color: var(--nnmc-midnight);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}
.nnmc-toc__list a:hover,
.nnmc-toc__list a:focus-visible {
	background: var(--wp--preset--color--sand);
	text-decoration: underline;
}
@media (min-width: 782px) {
	.nnmc-split--toc > .wp-block-column:first-child {
		position: sticky;
		top: calc(var(--nnmc-header-h) + 1.5rem);
		flex: 0 0 15rem !important;
	}
	.nnmc-split--toc > .wp-block-column:last-child {
		flex: 1 1 auto !important;
	}
}
@media (max-width: 781px) {
	.nnmc-toc .nnmc-toc__list {
		grid-template-columns: 1fr 1fr;
	}
}
.nnmc-service-section {
	padding-block: 2.25rem;
	border-top: 1px solid var(--nnmc-line);
}
.wp-block-column > .nnmc-service-section:first-child {
	padding-top: 0;
	border-top: 0;
}
.nnmc-service-section > * {
	margin-block: 0;
}
.nnmc-service-section > * + * {
	margin-block-start: 1rem;
}
.nnmc-service-section > p:not([class*="is-style-"]),
.nnmc-service-section > .wp-block-list {
	max-width: 68ch;
}

/* History timeline. */
.nnmc-timeline {
	max-width: 54rem;
	margin-top: 2.5rem !important;
	padding-left: 1.75rem;
	border-left: 2px solid var(--nnmc-gold);
}
.nnmc-timeline__item {
	position: relative;
	padding: 0 0 2.25rem 0.75rem;
}
.nnmc-timeline__item::before {
	content: "";
	position: absolute;
	top: 0.15rem;
	left: calc(-1.75rem - 10px);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--nnmc-gold);
	box-shadow: 0 0 0 3px var(--nnmc-ivory);
}
.nnmc-timeline__item > * {
	margin-block: 0;
}
.nnmc-timeline__item > * + * {
	margin-block-start: 0.6rem;
}
.nnmc-timeline__item .nnmc-timeline__years {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nnmc-gold-ink);
}
.nnmc-timeline__item h3 {
	font-size: 1.375rem;
}
.nnmc-timeline__item p:not([class*="is-style-"]):not(.nnmc-timeline__years) {
	max-width: 68ch;
}

/* Numbered steps. */
.nnmc-steps {
	display: grid;
	gap: 0.9rem;
	max-width: 60ch;
	padding: 0;
	list-style: none;
	counter-reset: nnmc-step;
}
.nnmc-steps li {
	position: relative;
	padding-left: 2.75rem;
	counter-increment: nnmc-step;
}
.nnmc-steps li::before {
	content: counter(nnmc-step);
	position: absolute;
	top: -0.1rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--nnmc-midnight);
	color: var(--nnmc-gold);
	font: 600 0.9rem/1 var(--wp--preset--font-family--inter);
}

/* Long-form text pages. */
.nnmc-band--prose .nnmc-band__inner > h2:not(:first-child) {
	margin-top: 2.5rem;
}
.nnmc-band--prose .nnmc-band__inner > h2 + * {
	margin-top: 0.75rem;
}

.nnmc-section-ctas {
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* Search form followed by content (404, search results). */
.nnmc-search + * {
	margin-top: 3rem !important;
}

/* NNMC photographs: rounded, softly shadowed, never stretched. */
.nnmc-photo {
	margin: 0;
}
.nnmc-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 18px 44px rgb(11 42 69 / 0.14);
}
.nnmc-photo figcaption,
.is-style-arch figcaption {
	margin-top: 0.7rem;
	font-size: 0.875rem;
	color: var(--nnmc-muted);
	text-align: left;
}
.nnmc-photo--portrait {
	max-width: 22rem;
}
.nnmc-photo--portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 30%;
}
.nnmc-split--media {
	margin-bottom: 2.5rem;
}
.nnmc-split--portrait > .wp-block-column:first-child {
	flex: 0 0 min(100%, 20rem);
}

/* Gallery: masonry columns keep every photo's own proportions (no face crops). */
.wp-block-gallery.nnmc-gallery.has-nested-images {
	display: block;
	columns: 3 15rem;
	column-gap: 1rem;
	margin-top: 2rem;
	margin-bottom: 1.5rem;
}
.wp-block-gallery.nnmc-gallery--two.has-nested-images {
	columns: 2 18rem;
	max-width: 60rem;
}
.wp-block-gallery.nnmc-gallery.has-nested-images figure.wp-block-image {
	display: block;
	width: 100% !important;
	margin: 0 0 1rem !important;
	break-inside: avoid;
}
.wp-block-gallery.nnmc-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain;
	border-radius: 10px;
	background: var(--wp--preset--color--sand);
}
.wp-block-gallery.nnmc-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	display: none;
}
.wp-block-gallery.nnmc-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	overflow: visible;
	padding: 0.45rem 0.1rem 0;
	background: none;
	color: var(--nnmc-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
	text-align: left;
	text-shadow: none;
}
.wp-block-gallery.nnmc-gallery .lightbox-trigger {
	opacity: 0.9;
}

/* History timeline with portraits. */
.nnmc-timeline__item.has-photo {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}
.nnmc-timeline__item.has-photo > * + * {
	margin-block-start: 0;
}
.nnmc-timeline__photo {
	margin: 0 !important;
}
.nnmc-timeline__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 10px;
	box-shadow: 0 8px 22px rgb(11 42 69 / 0.14);
}
.nnmc-timeline__photo--none {
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	background: var(--wp--preset--color--sand);
	border: 1px solid var(--nnmc-line);
}
.nnmc-timeline__text > * {
	margin-block: 0;
}
.nnmc-timeline__text > * + * {
	margin-block-start: 0.6rem;
}
.nnmc-timeline__item .nnmc-timeline__role {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nnmc-muted);
}
@media (max-width: 600px) {
	.nnmc-timeline {
		padding-left: 1.25rem;
	}
	.nnmc-timeline__item::before {
		left: calc(-1.25rem - 10px);
	}
	/* Phones: the portrait floats beside the name and the biography wraps under it. */
	.nnmc-timeline__item.has-photo {
		display: flow-root;
		padding-left: 0.25rem;
	}
	.nnmc-timeline__item.has-photo > .nnmc-timeline__photo {
		float: left;
		width: 5.25rem;
		margin: 0 1rem 0.5rem 0 !important;
	}
	.nnmc-timeline__item p:not([class*="is-style-"]):not(.nnmc-timeline__years) {
		max-width: none;
	}
	/* Years, name and role sit beside the portrait; the biography starts below it. */
	.nnmc-timeline__text > :is(h3, .nnmc-timeline__role) + :not(.nnmc-timeline__role) {
		clear: left;
		padding-top: 0.4rem;
	}
	.nnmc-timeline__item.has-photo > .nnmc-timeline__photo {
		margin-bottom: 0.75rem !important;
	}
}

/* Donate: monthly giving. */
.nnmc-page-hero .nnmc-give-hero {
	gap: clamp(2rem, 5vw, 4.5rem);
	margin: 0;
}
@media (min-width: 782px) {
	.nnmc-page-hero .nnmc-give-hero > .wp-block-column:last-child {
		flex: 0 0 min(100%, 30rem);
	}
}
.nnmc-page-hero .nnmc-give-hero .wp-block-column > * {
	margin-block: 0;
}
.nnmc-page-hero .nnmc-give-hero .wp-block-column > * + * {
	margin-block-start: 1rem;
}
.nnmc-page-hero .nnmc-give-urgency {
	max-width: 34em;
	margin-block-start: 1.5rem !important;
	padding-left: 1rem;
	border-left: 3px solid var(--nnmc-gold);
	color: var(--nnmc-ivory);
}
.nnmc-page-hero .nnmc-give-urgency strong {
	color: var(--nnmc-gold);
}
.nnmc-page-hero .nnmc-give-hero .wp-block-buttons {
	gap: 0.75rem;
	margin-block-start: 1.75rem !important;
}

@media (min-width: 782px) {
	.nnmc-split--give {
		gap: clamp(2rem, 4vw, 4rem);
	}
	.nnmc-split--give > .wp-block-column:last-child {
		flex: 0 0 min(100%, 33rem);
	}
}
.nnmc-give-photo {
	margin-top: 2rem !important;
}
.nnmc-give-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	margin-top: 2rem !important;
	padding: 1.1rem 1.4rem;
	border-left: 4px solid var(--nnmc-gold);
	border-radius: 12px;
	background: var(--wp--preset--color--sand);
}
.nnmc-give-trust p {
	margin: 0;
	color: var(--nnmc-midnight);
}
.nnmc-band__inner > .nnmc-give-fees + p,
.nnmc-band__inner > .wp-block-nnmc-giving + p {
	margin-top: 1.25rem;
}

/* Mobile comfort (audit 4 Nov 2026). */
/* Lightbox "Enlarge" button: a comfortable tap target (the photo itself is also tappable). */
.wp-lightbox-container button.lightbox-trigger {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	display: grid;
	place-items: center;
}
.wp-lightbox-container button.lightbox-trigger svg {
	width: 14px;
	height: 14px;
}
/* Post-title links in cards and search results: taller tap area. */
.wp-block-post-title a {
	display: inline-block;
	padding-block: 0.2rem;
}
/* Small uppercase labels: at least 12px on phones and tablets. */
@media (max-width: 781px) {
	.nnmc-chip,
	[class*="is-style-chip-"],
	.nnmc-ps__flag,
	.nnmc-jc__topic-label,
	.wp-block-nnmc-school-status dt,
	.nnmc-person__role,
	.nnmc-give-copy__label,
	.nnmc-tier__vote,
	.nnmc-tier__facts dt,
	.nnmc-card .nnmc-tier__includes {
		font-size: 0.75rem !important;
	}
	/* Iqama timetable headings and the Today tag: normal case at 12px instead of tiny capitals. */
	.nnmc-iqama thead th,
	.nnmc-iqama__now {
		font-size: 0.75rem !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
	}
}
@media (max-width: 380px) {
	/* Six columns must fit 320px screens: 12px text throughout the timetable. */
	.nnmc-iqama table {
		font-size: 0.75rem !important;
	}
	.nnmc-iqama__month {
		padding-inline: 0.4rem !important;
	}
	.nnmc-iqama__now {
		padding: 0.1rem 0.3rem !important;
	}
}

/* FAQ (core details block). */
.nnmc-faq {
	border-top: 1px solid var(--nnmc-line);
	padding: 1.1rem 0;
}
.nnmc-faq:last-of-type {
	border-bottom: 1px solid var(--nnmc-line);
}
.nnmc-faq summary {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--nnmc-midnight);
}
.nnmc-faq summary::-webkit-details-marker {
	display: none;
}
.nnmc-faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--inter);
	color: var(--nnmc-gold-ink);
}
.nnmc-faq[open] summary::after {
	content: "−";
}
.nnmc-faq > :not(summary) {
	margin: 0.75rem 0 0;
	max-width: 68ch;
}

/* Pagination and search results. */
.nnmc-pagination {
	margin-top: 2rem;
	gap: 0.75rem;
	font-weight: 600;
}
.nnmc-result {
	padding-block: 1.25rem;
	border-top: 1px solid var(--nnmc-line);
}
.nnmc-result .wp-block-post-title {
	margin: 0 0 0.35rem;
}
.nnmc-result .wp-block-post-title a {
	color: var(--nnmc-midnight);
}
.nnmc-search .wp-block-search__input {
	min-height: 2.9rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--nnmc-muted);
	border-radius: 8px;
	background: #fff;
}

/* Dropdown menus: midnight panels on desktop, expanded groups inside the overlay. */
.site-nav .wp-block-navigation-submenu__toggle {
	padding-block: 0.6rem;
	color: var(--nnmc-ivory);
	font: inherit;
	cursor: pointer;
}
.site-nav .wp-block-navigation__submenu-icon {
	color: var(--nnmc-gold);
}
.site-nav a[aria-current="page"]::after {
	transform: scaleX(1);
}
@media (min-width: 1101px) {
	.site-nav .wp-block-navigation__submenu-container {
		min-width: 14rem !important;
		padding: 0.5rem !important;
		background: var(--nnmc-midnight) !important;
		border: 1px solid rgb(216 178 75 / 0.35) !important;
		border-radius: 12px;
		box-shadow: 0 18px 40px rgb(11 42 69 / 0.35);
	}
	.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.55rem 0.8rem;
		border-radius: 8px;
	}
	.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		display: none;
	}
	.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
	.site-nav .wp-block-navigation__submenu-container [aria-current="page"] {
		background: rgb(250 247 240 / 0.08);
		color: var(--nnmc-gold);
	}
}
/* The overlay inherits the header's right justification; align every level left. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}
.site-nav .is-menu-open .wp-block-navigation-item,
.site-nav .is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
}
.site-nav .is-menu-open .wp-block-navigation-submenu__toggle {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.875rem;
	padding: 0;
}
.site-nav .is-menu-open .wp-block-navigation__submenu-container {
	padding: 0.35rem 0 0.5rem 1.1rem !important;
	gap: 0.35rem;
	border-left: 1px solid rgb(216 178 75 / 0.4) !important;
}
.site-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: 1.125rem !important;
	padding-block: 0.3rem;
}

/* === print === */
@media print {
	/* No transition either: print must not catch a section mid-fade. */
	.nnmc-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.site-header {
		position: static;
		background: var(--nnmc-midnight);
	}
	.site-nav,
	.site-header__donate,
	.mobile-bar-part {
		display: none !important;
	}
	.wp-block-post-content > .wp-block-cover.nnmc-hero:first-child {
		margin-top: 0;
	}
	.nnmc-hero .wp-block-cover__image-background {
		animation: none;
	}
	body {
		padding-bottom: 0;
	}
}
.nnmc-service--marriage {
	--nnmc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='14' r='5'/%3E%3Ccircle cx='15' cy='14' r='5'/%3E%3Cpath d='M10 4l2-2 2 2-2 3z'/%3E%3C/svg%3E");
}
.nnmc-service--funeral {
	--nnmc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3.5a8.5 8.5 0 1 0 5 13.8A7 7 0 0 1 15.5 3.5z'/%3E%3C/svg%3E");
}
.nnmc-service--burial {
	--nnmc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20c0-9 6-15 15-15 0 9-6 15-15 15z'/%3E%3Cpath d='M5 20l8-8'/%3E%3C/svg%3E");
}
.nnmc-service--new-muslims {
	--nnmc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h6a3 3 0 0 1 3 3v12a2.5 2.5 0 0 0-2.5-2.5H3z'/%3E%3Cpath d='M21 5h-6a3 3 0 0 0-3 3v12a2.5 2.5 0 0 1 2.5-2.5H21z'/%3E%3C/svg%3E");
}
.nnmc-service--dawa {
	--nnmc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v11H10l-6 5z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E");
}
.nnmc-service--counseling {
	--nnmc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.2 4.2 0 0 1 12 7.2a4.2 4.2 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E");
}
.nnmc-service--zakat {
	--nnmc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='2.8'/%3E%3Cpath d='M5 6v6c0 1.6 3.1 2.8 7 2.8s7-1.2 7-2.8V6'/%3E%3Cpath d='M5 12v6c0 1.6 3.1 2.8 7 2.8s7-1.2 7-2.8v-6'/%3E%3C/svg%3E");
}
.nnmc-service--membership {
	--nnmc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.4 2.7-6 6-6s6 2.6 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M16 14.3a4.8 4.8 0 0 1 5 4.7'/%3E%3C/svg%3E");
}

/* =========================================================================
   Homepage (v0.9): welcome cards, service icons, community photos, support
   and visit sections. Every section is ordinary blocks; only the prayer
   strip, Jumu'ah card, events, announcements and contact card are dynamic.
   ========================================================================= */

/* Hero eyebrow: "Religious and Social Organization · Established in Nevada since 1980". */
.nnmc-hero .nnmc-hero__eyebrows {
	gap: 0.2rem 0.75rem;
}
.nnmc-hero .nnmc-hero__eyebrows > p {
	margin: 0;
}
@media (min-width: 641px) {
	.nnmc-hero .nnmc-hero__eyebrows > p + p::before {
		content: "·";
		margin-right: 0.75rem;
	}
}

/* Welcome: three cards with a photo on top. */
.nnmc-welcome {
	gap: 1.25rem;
}
.nnmc-welcome-card {
	display: flex;
	flex-direction: column;
	padding: 0 0 1.5rem;
	overflow: hidden;
}
.nnmc-welcome-card > * {
	margin-block: 0;
	padding-inline: clamp(1.25rem, 2.2vw, 1.6rem);
}
.nnmc-welcome-card > .nnmc-welcome-card__media {
	padding: 0;
	margin: 0 0 1.25rem;
}
.nnmc-welcome-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.nnmc-welcome-card h3 {
	margin-bottom: 0.5rem;
	font-size: 1.375rem;
}
.nnmc-welcome-card p:not(.nnmc-card-link) {
	color: var(--nnmc-muted);
	font-size: var(--wp--preset--font-size--small);
}
.nnmc-welcome-card .nnmc-card-link {
	margin-top: auto;
	padding-top: 1rem;
}
.nnmc-card-link a {
	font-weight: 600;
	text-decoration: none;
}
.nnmc-card-link a::after {
	content: " →";
}
.nnmc-card-link a:hover,
.nnmc-card-link a:focus-visible {
	text-decoration: underline;
}

/* Services: a line icon per card; the whole card is the link to that service. */
.nnmc-service[class*="nnmc-service--"]::before {
	top: 1.35rem;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--nnmc-gold-ink);
	-webkit-mask: var(--nnmc-icon) center / contain no-repeat;
	mask: var(--nnmc-icon) center / contain no-repeat;
}
.nnmc-service[class*="nnmc-service--"] {
	padding-top: 3.75rem;
}
.nnmc-service h3 a {
	color: var(--nnmc-midnight);
	text-decoration: none;
}
.nnmc-service h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.nnmc-service:has(h3 a:hover) h3 a,
.nnmc-service h3 a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.nnmc-service:has(h3 a:focus-visible) {
	outline: 3px solid var(--nnmc-gold-ink);
	outline-offset: 3px;
}
.nnmc-service h3 a:focus-visible {
	outline: none;
}
@media (prefers-reduced-motion: no-preference) {
	.nnmc-service:has(h3 a:hover) {
		transform: translateY(-2px);
	}
}

/* Community photos: one large photo and four smaller ones. Select a photo to see all of it. */
.wp-block-gallery.nnmc-home-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(9rem, 15vw, 13rem);
	gap: 0.75rem;
}
.wp-block-gallery.nnmc-home-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: auto;
	height: 100%;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
}
.wp-block-gallery.nnmc-home-gallery.has-nested-images figure.wp-block-image:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.wp-block-gallery.nnmc-home-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wp-block-gallery.nnmc-home-gallery.has-nested-images figure.wp-block-image figcaption {
	font-size: 0.8125rem;
	padding: 2rem 0.75rem 0.6rem;
	text-align: left;
}

/* Support NNMC. */
.nnmc-band--give .nnmc-give-tax {
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: rgb(250 247 240 / 0.78);
}
.nnmc-give-photo {
	margin: 0;
}
.nnmc-give-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 0 0 1px rgb(216 178 75 / 0.35), 0 24px 60px rgb(0 0 0 / 0.3);
}
.nnmc-give-photo figcaption {
	margin-top: 0.75rem;
	text-align: left;
	color: rgb(250 247 240 / 0.72);
}

/* Visit and contact: the masjid photo with the contact card overlapping it. */
.nnmc-visit-photo {
	margin: 0;
}
.nnmc-visit-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 16px;
}
.nnmc-visit-aside .wp-block-nnmc-contact {
	position: relative;
	margin: -3rem clamp(0.75rem, 3vw, 1.5rem) 0;
}
.nnmc-band--visit .nnmc-section-ctas {
	margin-top: 1.75rem;
}

/* Footer contact lines (from NNMC Settings). */
.site-footer .nnmc-contact-block.is-footer p {
	margin: 0 0 0.75rem;
}

@media (max-width: 1100px) {
	.nnmc-services {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 781px) {
	.nnmc-welcome {
		grid-template-columns: 1fr !important;
	}
	.nnmc-welcome-card__media img {
		aspect-ratio: 16 / 9;
	}
}
@media (max-width: 640px) {
	.wp-block-gallery.nnmc-home-gallery.has-nested-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 8.5rem;
		gap: 0.5rem;
	}
	.nnmc-visit-aside .wp-block-nnmc-contact {
		margin: -2rem 0.5rem 0;
	}
}
@media (max-width: 560px) {
	.nnmc-services {
		grid-template-columns: 1fr !important;
	}
	.nnmc-service[class*="nnmc-service--"] {
		padding: 1.1rem 1.25rem 1.1rem 3.6rem;
	}
	.nnmc-service[class*="nnmc-service--"]::before {
		top: 1.15rem;
		left: 1.25rem;
	}
}

/* Standalone text links (section links, card links, footer links) get a 24px-tall tap area. */
.nnmc-head__link a,
.nnmc-card-link a,
.site-footer__links a,
.site-footer__base a,
.nnmc-card__action .nnmc-link-arrow,
.nnmc-event__more .nnmc-link-arrow {
	display: inline-block;
	min-height: 24px;
	padding-block: 0.15rem;
}