/*
Theme Name:        MNIB — Masjid Noorul Islam Bradford
Theme URI:         https://github.com/unitas-global/masjid-madrassah-suite
Description:       Twenty Twenty-Five child theme carrying the Masjid Noorul Islam Bradford brand (logo-derived palette and typography via theme.json). Site work for deployment #1 of the Masjid & Madrassah Suite plugin; features live in the plugin — this theme is presentation only.
Author:            Unitas Global Ltd
Author URI:        https://github.com/unitas-global
Template:          twentytwentyfive
Version:           0.3.4
Requires at least: 6.7
Requires PHP:      8.2
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       mnib
*/

/*
 * Brand styling lives in theme.json (palette, typography, element styles).
 * This file holds what theme.json cannot express: overrides of the Masjid &
 * Madrassah Suite plugin's baseline table/announcement styling (the plugin
 * ships neutral defaults and expects the deploying theme to own the look),
 * and the hero/card/band compositions used by the homepage and the
 * Madrassah, Donate, Contact and Prayer Timetable pages.
 *
 * Palette decision (2026-06-10): green #2D6A2F links/buttons/marker, ink
 * #1F2933 text, gold tint #F8F1DE for the current-prayer and today's-row
 * highlights. Highlight rows keep their bold weight from the plugin and
 * gain a green marker bar, so the state survives any colour-vision or
 * dim-screen conditions — timetable readability on older readers' phones
 * is the acceptance test.
 *
 * Headings typeface: Marcellus (SIL OFL, self-hosted woff2 under
 * assets/fonts/marcellus/ — no font CDN). Marcellus ships a single 400
 * weight, so headings stay at 400 rather than synthesising a fake bold.
 *
 * Card surfaces share one recipe: white, 1px #E3E8E3 border, 14px radius,
 * shadow 0 8px 24px rgba(31,41,51,0.07). Muted text is #51605A (≥5.5:1 on
 * every surface it appears on). White-on-green stays ≥16px except the NOW
 * pill (11px, weight 700) — 6.6:1 passes AA at any size; noted exception.
 */

/* ── Prayer-times tables: brand baseline (monthly table + any page outside
      the homepage card). Times get tabular numerals so columns don't
      shimmy as the minutes change. ─────────────────────────────────────── */
.mmsuite-today-table th,
.mmsuite-today-table td,
.mmsuite-timetable th,
.mmsuite-timetable td {
	border-color: #c9d2cb;
}

.mmsuite-today-table td,
.mmsuite-timetable td {
	font-variant-numeric: tabular-nums;
}

/* Current prayer (today table) and today's row (monthly table): gold tint
   plus a green marker bar on the row's first cell. */
.mmsuite-today-table tr.mmsuite-current,
.mmsuite-timetable tr.mmsuite-today {
	background: #f8f1de;
}

.mmsuite-today-table tr.mmsuite-current > :first-child,
.mmsuite-timetable tr.mmsuite-today > :first-child {
	box-shadow: inset 4px 0 0 #2d6a2f;
}

/* The current prayer also announces itself with a NOW pill after the name.
   White on #2D6A2F at 11px is 6.6:1 — AA at any size, the one sanctioned
   exception to the ≥16px white-on-green house rule. */
.mmsuite-today-table tr.mmsuite-current th[scope="row"]::after {
	content: "NOW";
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.15em 0.65em;
	border-radius: 999px;
	background: #2d6a2f;
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.06em;
	vertical-align: middle;
}

/* Weekend rows: faint brand-neutral instead of the plugin's blue-grey. */
.mmsuite-timetable tr.mmsuite-weekend {
	background: #f4f6f4;
}

/* Month picker on the monthly timetable page, matched to the pill buttons.
   Flex row so the label/select/button align and wrap as one tidy strip. */
.mmsuite-month-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block-end: 1rem;
}

.mmsuite-month-picker select {
	padding: 0.45em 0.75em;
	border: 1px solid #c9d2cb;
	border-radius: 8px;
	background: #ffffff;
}

.mmsuite-month-picker button {
	padding: 0.5em 1.5em;
	border: 0;
	border-radius: 999px;
	background: #2d6a2f;
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
}

.mmsuite-month-picker button:hover {
	background: #245a27;
}

/* ── Sticky glass header (parts/header.html) ──────────────────────────────
   Stickiness lives on the template-part WRAPPER (the <header
   class="wp-block-template-part"> element WordPress renders around the
   part), NOT on the group inside it: a sticky element can only travel
   within its parent's bounds, and the wrapper is exactly the group's own
   height — so group-level position:sticky (WP's block support) attaches
   its CSS but never moves. The wrapper's parent is .wp-site-blocks (full
   page height), which gives the sticky real travel. Core's admin-bar
   offset var only attaches to .is-position-sticky elements (the block
   support's class), so use the underlying height var directly: defined
   when the toolbar renders, 0px for everyone else. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10;
}

/* Glass treatment. backdrop-filter on an element establishes a containing
   block for its fixed-position descendants (same as filter/transform) —
   putting it on .mnib-header itself traps the mobile nav overlay
   (position:fixed; inset:0) inside the header bar. So the blur lives on a
   ::before layer painted behind the header's content; where backdrop-filter
   is unsupported the group's solid accent-1 background simply remains.
   Nav links are FULL white (not the previous 90%): over the blur the
   worst-case backdrop is a white section, blending the 0.88-alpha green to
   ~rgb(70,124,72) — white text is 4.96:1 there (AA at 16px), 90% white
   would drop to ~4.4:1. */
.mnib-header {
	position: relative;
	box-shadow: 0 2px 12px rgba(31, 41, 51, 0.08);
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
	.mnib-header.has-accent-1-background-color {
		background-color: transparent;
	}

	.mnib-header.has-accent-1-background-color::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: rgba(45, 106, 47, 0.88);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}

.mnib-header .wp-block-navigation a {
	color: #ffffff;
}

/* Colour alone no longer marks the current page, so underline it. */
.mnib-header .wp-block-navigation a[aria-current="page"],
.mnib-header .wp-block-navigation a:hover,
.mnib-header .wp-block-navigation a:focus {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Anchor jumps (e.g. /madrassah/#apply) must land below the stuck header. */
html {
	scroll-padding-top: 5.5rem;
}

/* ── Section headings: short green geometric rule (three diamonds) ────────*/
.wp-block-post-content h2.wp-block-heading::after {
	content: "";
	display: block;
	width: 32px;
	height: 8px;
	margin-top: 0.45em;
	background-color: #2d6a2f;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8'%3E%3Cpath d='M4 0l4 4-4 4-4-4zM16 0l4 4-4 4-4-4zM28 0l4 4-4 4-4-4z'/%3E%3C/svg%3E") left center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8'%3E%3Cpath d='M4 0l4 4-4 4-4-4zM16 0l4 4-4 4-4-4zM28 0l4 4-4 4-4-4z'/%3E%3C/svg%3E") left center / contain no-repeat;
}

/* No rule for the live-card title (it sits in a flex row with its icon)
   or for headings inside cards (the Donate account-card labels). */
.mnib-live-title::after,
.mnib-card h2.wp-block-heading::after {
	content: none !important;
}

/* ── Hero band (homepage): tinted gradient + eight-point-star tessellation
      at ~4.5% opacity, centred content. ──────────────────────────────────*/
.mnib-hero {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cdefs%3E%3Cg id='s'%3E%3Crect x='-15' y='-15' width='30' height='30'/%3E%3Crect x='-15' y='-15' width='30' height='30' transform='rotate(45)'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%232D6A2F' fill-opacity='0.045'%3E%3Cuse href='%23s' x='48' y='48'/%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' x='96'/%3E%3Cuse href='%23s' y='96'/%3E%3Cuse href='%23s' x='96' y='96'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(180deg, #f2f7f2 0%, #ffffff 100%);
	padding-block: clamp(2rem, 4vw, 3rem) clamp(2.25rem, 5vw, 3.5rem);
	text-align: center;
}

/* Overline: today's Gregorian + Hijri date ([mnib_today_date] shortcode).
   #2D6A2F on the #F2F7F2 tint is ~6.2:1 — AA-clean at 13px/600. */
.mnib-overline {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #2d6a2f;
}

.mnib-hero h1 {
	margin-top: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.125rem);
}

/* ── Timetable card (homepage): floating white card around the plugin's
      today table. The card is a group in the page markup; everything
      inside targets the plugin's stable .mmsuite-* classes. ─────────────*/
.mnib-timetable-card {
	box-sizing: border-box;
	max-width: 560px;
	margin-inline: auto;
	background: #ffffff;
	border: 1px solid #e3e8e3;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(31, 41, 51, 0.07);
	padding: clamp(1rem, 3.5vw, 1.75rem);
}

/* Inside the card: no vertical borders, horizontal hairlines only. */
.mnib-timetable-card .mmsuite-today-table {
	max-width: none;
}

.mnib-timetable-card .mmsuite-today-table th,
.mnib-timetable-card .mmsuite-today-table td {
	border: 0;
	border-bottom: 1px solid #eef1ee;
	padding: 0.7rem 0.6rem;
}

.mnib-timetable-card .mmsuite-today-table tbody tr:last-child > th,
.mnib-timetable-card .mmsuite-today-table tbody tr:last-child > td {
	border-bottom: 0;
}

/* Column headers as small uppercase muted labels (5.9:1 on white). */
.mnib-timetable-card .mmsuite-today-table thead th {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #51605a;
}

/* Jummah rows: italic muted label, value right-aligned. */
.mnib-timetable-card .mmsuite-today-table tr.mmsuite-jummah th[scope="row"] {
	font-style: italic;
	font-weight: 500;
	color: #51605a;
}

.mnib-timetable-card .mmsuite-today-table tr.mmsuite-jummah td {
	font-style: normal;
	text-align: right;
}

/* ── Live-from-the-Masjid card: heading row (green circle broadcast icon +
      title + muted one-liner) inside the card with the eMasjid player. ──*/
.mnib-embed-card {
	background: #ffffff;
	border: 1px solid #e3e8e3;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(31, 41, 51, 0.07);
	padding: clamp(1.25rem, 3.5vw, 1.75rem);
}

.mnib-embed-card iframe {
	display: block;
	width: 100%;
	max-width: 100%;
}

.mnib-live-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #2d6a2f;
	color: #ffffff;
}

.mnib-live-icon svg {
	width: 22px;
	height: 22px;
}

.mnib-live-title {
	margin: 0;
	font-size: 1.375rem;
}

.mnib-live-sub {
	margin: 0.15rem 0 0;
	font-size: 0.9375rem;
	color: #51605a;
}

/* ── Announcements band (homepage): full-width tinted strip; each
      announcement is a white card, poster thumbnail left of the text. ───*/
.mnib-band {
	background: #f7f9f7;
	padding-block: clamp(2rem, 4vw, 3rem);
}

.mmsuite-announcements {
	gap: 1rem;
}

.mmsuite-announcement {
	background: #ffffff;
	border: 1px solid #e3e8e3;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(31, 41, 51, 0.07);
	padding: 1.25rem;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1.25rem;
	align-items: start;
}

/* No poster → no empty icon column (the gap would otherwise indent). */
.mmsuite-announcement:not(:has(.mmsuite-announcement-image)) {
	display: block;
}

.mmsuite-announcement-image {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: clamp(5rem, 18vw, 7rem);
}

.mmsuite-announcement-poster {
	border-radius: 10px;
}

.mmsuite-announcement-title {
	grid-column: 2;
	margin: 0;
}

.mmsuite-announcement-details {
	grid-column: 2;
	margin-top: 0.25rem;
}

/* No-announcements state: quiet white card with a muted bell. */
.mmsuite-no-announcements {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #ffffff;
	border: 1px solid #e3e8e3;
	border-radius: 14px;
	padding: 1rem 1.25rem;
	color: #51605a;
	font-style: normal;
}

.mmsuite-no-announcements::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background-color: #51605a;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Quick-links: equal icon tiles ────────────────────────────────────────
   The group uses grid layout (minimumColumnWidth 9rem): 2×2 on phones,
   4-up at content width; 1fr rows keep every tile the same height. Icons
   are CSS-masked inline SVGs painted with currentColor, so they follow the
   text colour through hover/primary states for free. */
.mnib-quick-links {
	grid-auto-rows: 1fr;
}

.mnib-quick-links p.mnib-tile {
	margin: 0;
}

.mnib-tile a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	height: 100%;
	min-height: 6.5rem;
	padding: 1rem 0.75rem;
	border: 2px solid #2d6a2f;
	border-radius: 12px;
	background: #ffffff;
	color: #2d6a2f;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.mnib-tile a::before {
	content: "";
	width: 26px;
	height: 26px;
	background-color: currentColor;
	-webkit-mask: var(--mnib-tile-icon) center / contain no-repeat;
	mask: var(--mnib-tile-icon) center / contain no-repeat;
}

.mnib-tile-madrassah {
	--mnib-tile-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

.mnib-tile-apply {
	--mnib-tile-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}

.mnib-tile-donate {
	--mnib-tile-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

.mnib-tile-contact {
	--mnib-tile-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.mnib-tile a:hover,
.mnib-tile a:focus {
	background: #2d6a2f;
	color: #ffffff;
}

.mnib-tile-primary a {
	background: #2d6a2f;
	color: #ffffff;
}

.mnib-tile-primary a:hover,
.mnib-tile-primary a:focus {
	background: #245a27;
}

/* ── Madrassah, Donate & Contact pages: shared card recipe + compositions ─
   The hero band/overline rules above are page-agnostic and these pages
   reuse them — their overlines are static paragraphs, not the date
   shortcode, and templates/page-madrassah.html / page-donate.html /
   page-contact.html / page-prayer-timetable.html drop the template
   post-title so the hero h1 leads, exactly like the homepage. */
.mnib-hero-sub {
	max-width: 38rem;
	margin: 0.35rem auto 0;
	color: #51605a;
}

/* The house card recipe (white / hairline border / 14px / soft shadow) as
   a reusable class for content cards. */
.mnib-card {
	background: #ffffff;
	border: 1px solid #e3e8e3;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(31, 41, 51, 0.07);
	padding: clamp(1rem, 3vw, 1.5rem);
}

/* Label/value rows inside a card (flex groups in the markup): hairline
   internals only. Core's flow-layout gap puts margins between rows — zeroed
   here (higher specificity than the generated container rules) so the
   rhythm comes from row padding and the hairlines sit centred. */
.mnib-card > .mnib-card-row {
	margin-block: 0;
	padding-block: 0.7rem;
}

.mnib-card > .mnib-card-row:first-child {
	padding-block-start: 0;
}

.mnib-card > .mnib-card-row:last-child {
	padding-block-end: 0;
}

.mnib-card > .mnib-card-row + .mnib-card-row {
	border-top: 1px solid #eef1ee;
}

.mnib-card-row p {
	margin: 0;
}

/* Row values: right-aligned, tabular numerals so account numbers, sort
   codes and times keep their digits in columns. overflow-wrap shrinks the
   flex item's min-content size so an unbreakable token (the contact email
   address) wraps inside its box instead of overflowing the card. */
.mnib-card-value {
	text-align: right;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Fee cards (Madrassah), account cards (Donate) and the Visit-us/Get-in-
   touch pair (Contact): two-card grid rows (the groups' minimumColumnWidth
   stacks them on phones), equal heights. */
.mnib-fee-cards,
.mnib-account-cards,
.mnib-contact-cards {
	grid-auto-rows: 1fr;
}

.mnib-fee-card {
	text-align: center;
}

.mnib-fee-card > p {
	margin-block: 0;
}

/* Small-caps muted label: fee-card names and the Donate/Contact card
   headings share one treatment. */
.mnib-fee-name,
.mnib-account-card > h2,
.mnib-contact-card > h2 {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #51605a;
}

/* The card headings are h2s for the document outline but read as card
   labels: body face instead of Marcellus, flow-gap margins dropped. */
.mnib-account-card > h2,
.mnib-contact-card > h2 {
	margin-block: 0;
	font-family: inherit;
	line-height: 1.4;
}

/* ── Monthly timetable (Prayer Timetable page): the plugin's scroll-
      wrapped 13-column table inside an alignwide house card. Internals
      mirror the homepage today-card: horizontal hairlines only, small-caps
      muted column labels; the row backgrounds (today gold, weekend tint)
      come from the baseline rules above. ──────────────────────────────── */
.mnib-monthly-card .mmsuite-timetable th,
.mnib-monthly-card .mmsuite-timetable td {
	border: 0;
	border-bottom: 1px solid #eef1ee;
	padding: 0.55rem 0.5rem;
}

.mnib-monthly-card .mmsuite-timetable tbody tr:last-child > th,
.mnib-monthly-card .mmsuite-timetable tbody tr:last-child > td {
	border-bottom: 0;
}

.mnib-monthly-card .mmsuite-timetable thead th {
	font-size: 0.71875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #51605a;
}

/* Sticky date column: engages only against the scroll wrapper's own
   horizontal scroll (phones), so its z-index lives entirely inside the
   wrapper's stacking context and never meets the glass site header.
   Sticky cells need their own backgrounds — the row's background scrolls
   away underneath them — so the white/weekend/today fills are restated
   per cell; the green today-marker inset shadow already sits on this
   cell and travels with it. */
.mnib-monthly-card .mmsuite-timetable th:first-child,
.mnib-monthly-card .mmsuite-timetable td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: #ffffff;
}

.mnib-monthly-card .mmsuite-timetable tr.mmsuite-weekend > :first-child {
	background: #f4f6f4;
}

.mnib-monthly-card .mmsuite-timetable tr.mmsuite-today > :first-child {
	background: #f8f1de;
}

/* Fill the card on wide screens. The plugin's baseline already sets the
   table to width:100% but caps it at max-width:60em, which left a dead
   right gutter inside the alignwide card — lift the cap and pin the date
   column to its content (width:1% + nowrap) so the time columns absorb
   the space evenly. Gated to wide viewports out of caution; below the
   breakpoint nothing changes anyway, because a table's specified width
   floors at its min-content width — inside the scroll wrapper the columns
   never crush and horizontal scroll still engages. */
@media (min-width: 900px) {
	.mnib-monthly-card .mmsuite-timetable {
		max-width: none;
	}

	.mnib-monthly-card .mmsuite-timetable th:first-child,
	.mnib-monthly-card .mmsuite-timetable td:first-child {
		width: 1%;
		white-space: nowrap;
	}
}

/* Map embed (Contact, Visit-us card): rounded clipped container; the
   iframe carries loading="lazy" in the markup so the third-party map
   never holds the document in a loading state (same reasoning as the
   eMasjid player). */
.mnib-map-embed {
	overflow: hidden;
	border-radius: 10px;
}

.mnib-map-embed iframe {
	display: block;
	width: 100%;
}

.mnib-fee-price {
	margin-block-start: 0.4rem;
	font-family: var(--wp--preset--font-family--marcellus);
	font-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);
	line-height: 1.1;
	color: #1f2933;
}

.mnib-fee-meta,
.mnib-fee-detail {
	font-size: 0.9375rem;
	color: #51605a;
}

.mnib-fee-meta {
	margin-block-start: 0.3rem;
}

.mnib-fee-detail {
	margin-block-start: 0.75rem;
}

/* Bank-details and Chanda-form cards: column-narrow, like the homepage
   timetable card. */
.mnib-bank-card,
.mnib-chanda-card {
	max-width: 560px;
}

/* Quiet callout (cash not accepted): the gold highlight tint with ink text
   — reads as a note, not a warning banner. 1F2933 on F8F1DE is ~12:1. */
.mnib-callout {
	background: #f8f1de;
	color: #1f2933;
	border-radius: 10px;
	padding: 0.85rem 1.15rem;
}

/* ── Brand footer (parts/footer.html) ─────────────────────────────────────
   Everything in the footer sits on the brand green: links full white
   (6.5:1), underlined so colour is not the only link signal. */
.mnib-footer a {
	color: #ffffff;
}

.mnib-footer ul {
	list-style: none;
	padding-left: 0;
}

.mnib-footer-smallprint {
	font-size: 1rem; /* never below 16px — white-on-green AA discipline */
	color: rgba(255, 255, 255, 0.9);
}

/* ── Section rhythm (homepage + Madrassah page) ───────────────────────────
   Each page section is a group.mnib-section; one consistent gap —
   ~36px on phones up to ~56px on desktop — between sections regardless of
   what each contains. */
.wp-block-post-content > .mnib-section {
	margin-block-start: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
}

.wp-block-post-content > .mnib-section:first-child {
	margin-block-start: 0;
}

/* ── Focus visibility: green ring everywhere, white where the backdrop is
      the brand green. Always on — never gated by reduced-motion. ────────*/
:focus-visible {
	outline: 3px solid #2d6a2f;
	outline-offset: 2px;
}

.mnib-header :focus-visible,
.mnib-footer :focus-visible {
	outline-color: #ffffff;
}

/* ── Micro-interactions (motion only when the visitor allows it) ─────────*/
@media (prefers-reduced-motion: no-preference) {
	.mnib-tile a,
	.mmsuite-announcement,
	.wp-element-button,
	.mmsuite-month-picker button {
		transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
	}

	.mnib-tile a:hover,
	.mmsuite-announcement:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 28px rgba(31, 41, 51, 0.11);
	}
}