/*
Theme Name: Morning Barakah
Theme URI: https://morningbarakah.com
Author: Morning Barakah
Author URI: https://morningbarakah.com
Description: Modernist block theme for morningbarakah.com — flat, architectural, zero border radius, sage-on-white by default with four switchable style variations.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morning-barakah
*/

/* ------------------------------------------------------------------
   Everything below is CSS that theme.json cannot express: focus
   rings, text-wrap, tabular figures, the ghost button style, the
   separator/input resets, and the mobile section padding. Colors,
   type scale, buttons and separators are otherwise driven entirely
   by theme.json so style variations restyle them automatically.
   ------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
}

/* Visually hidden but available to screen readers — WP's standard admin
   utility class, not injected on the frontend by core, so the theme must
   provide it (used for visually-hidden form labels etc). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	border-radius: 0;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

body {
	text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

/* Focus state: 2px accent outline, 2px offset, everywhere — never the browser default. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Buttons: square, left-aligned label (core renders them centered by default). */
.wp-block-button__link {
	text-align: left;
	justify-content: flex-start;
	border-radius: 0 !important;
}

/* Ghost / outline button style: transparent fill, 2px ink border. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-100);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/* Outline (white): for buttons sitting on a dark photo, independent of the palette. */
.wp-block-button.is-style-outline-white .wp-block-button__link {
	background-color: transparent;
	color: #fff;
	border-color: #fff;
}

.wp-block-button.is-style-outline-white .wp-block-button__link:hover,
.wp-block-button.is-style-outline-white .wp-block-button__link:focus {
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
	border-color: #fff;
}

/* Grayscale: opt-in block style for core/cover and core/image — targets only the
   media layer, not any text/content sitting on top of it. */
.is-style-mb-grayscale .wp-block-cover__image-background,
.is-style-mb-grayscale.wp-block-cover video,
.is-style-mb-grayscale img {
	filter: grayscale(1);
}

/* Separator: solid 2px rule, no default margin (theme.json sets color/width). */
.wp-block-separator {
	border: none;
	border-top-width: 2px;
	border-top-style: solid;
	width: 100%;
}

/* Section separators align to the content column rather than running edge to
   edge, matching the design, where the rules sit inside the 1200px wrapper.
   The width calc keeps them flush with section content at every viewport;
   the 1200px cap takes over once there's room to spare. */
main > .wp-block-separator {
	width: calc(100% - (2 * var(--wp--preset--spacing--edge)));
	max-width: 1200px;
	margin-inline: auto;
}

/* Stat numbers: tabular figures wherever the "stat" font size is used. */
.has-stat-font-size {
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

/* Eyebrow labels. */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--wp--preset--color--accent-700);
}

/* Photography renders in full colour throughout, at the owner's direction —
   a deliberate departure from the design's "photos grayscale" token. The
   `mb-grayscale` block style below stays registered, so grayscale can still
   be applied per-image or per-cover from the editor. */

/* Inputs: square, 2px ink border, 12px padding, base background. */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
	background-color: var(--wp--preset--color--surface);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	padding: 12px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--contrast);
}

/* Muted text: contrast at ~72%, derived from the palette token so it adapts to every
   style variation (checked against AA 4.5:1 on all four palettes plus midnight-gold). */
.has-muted-text {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent);
}

/* ------------------------------------------------------------------
   Header & footer (Part 1)
   ------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header__inner,
.site-footer__inner,
.mb-day-strip__inner {
	max-width: 1200px;
	width: 100%;
	margin-inline: auto;
}

/* Core gives every top-level block a block-gap margin
   (`:where(.wp-site-blocks) > * { margin-block-start: 24px }`), which opened a
   24px gap between the header, the date strip, <main> and the footer. The
   design runs all four flush — each already carries its own rule or padding —
   so the gap is removed there. The same applies one level down, inside the
   front page's <main>: every section and every <hr> was picking up 24px,
   which meant each separator floated in ~48px of space instead of sitting
   flush the way the design's `margin: 0` rules do. Scoped via .mb-sections
   rather than a blanket `main > *`, which would also collapse the gap
   between post title and content on page.html. Block gap inside sections
   is untouched. */
.wp-site-blocks > *,
.mb-sections > * {
	margin-block-start: 0;
}

/* Anchor targets scroll clear of the sticky header. Applied broadly so any future
   in-page section id (added from Part 4 onward) is already covered. */
:root {
	--mb-header-height: 80px;
}

[id] {
	scroll-margin-top: var(--mb-header-height);
}

/* Force the Navigation block's inline/overlay breakpoint to 782px — core defaults to
   600px, but the design calls for the hamburger below 782px specifically. */
@media (min-width: 782px) {
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
	}
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
		position: relative !important;
		width: 100%;
		z-index: auto;
	}
}

@media (max-width: 781.98px) {
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/* Mobile overlay menu: full-screen, base background, links 24px/800, stacked, flush
   left, 2px rules between items (the header nav sets backgroundColor="base" so the
   overlay inherits it correctly across every style variation). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-top: 2px solid var(--wp--custom--divider);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
	border-top: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 24px;
	font-weight: 800;
	padding: 16px 0;
	text-align: left;
}

/* ------------------------------------------------------------------
   Day strip (Part 2)
   ------------------------------------------------------------------ */

.mb-day-strip {
	border-bottom: 2px solid var(--wp--custom--divider);
	padding: 0 var(--wp--preset--spacing--edge);
}

.mb-day-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	padding: 12px 0;
}

/* Hijri and Gregorian sit side by side on one baseline, wrapping only when
   there genuinely isn't room (design: flex + wrap, gap 4px 20px). */
.mb-day-strip__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 20px;
}

.mb-day-strip__hijri {
	font-size: 14px;
	line-height: 22px;
	font-weight: 800;
}

.mb-day-strip__gregorian {
	font-size: 14px;
	line-height: 22px;
}

.mb-day-strip__phase {
	margin: 0;
	font-size: 14px;
	line-height: 22px;
}

.mb-day-strip__phase-label {
	color: var(--wp--preset--color--accent-700);
	font-weight: 700;
}

/* The design sets the dash off with extra space on both sides. */
.mb-day-strip__phase-sep {
	margin: 0 6px;
}

/* ------------------------------------------------------------------
   Hero + morning hadith (Part 3)
   ------------------------------------------------------------------ */

/* Shared 2-column row: side by side, stacks under 700px. */
/* Shared two-column row. The design doesn't use one breakpoint for these —
   each section declares its own minimum column width via
   `repeat(auto-fit, minmax(min(100%, Npx), 1fr))`, so each one collapses to a
   single column at whatever width its own content actually needs, not at a
   shared 700px guess. N and the gaps are set per section below. */
.mb-2col > * {
	margin-block: 0;
}

.mb-2col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mb-2col-min, 320px)), 1fr));
	gap: var(--mb-2col-gap, 32px 56px);
	align-items: var(--mb-2col-align, start);
}

/* Per-section column minimums and gaps, taken from the design's own
   grid declarations for each section. */
.hero-cover .mb-2col {
	--mb-2col-min: 300px;
	--mb-2col-gap: 20px 56px;
	--mb-2col-align: end;
}

.mb-morning-hadith__inner {
	border-top: 2px solid var(--wp--custom--divider);
	border-bottom: 2px solid var(--wp--custom--divider);
	padding-block: 72px;
	--mb-2col-min: 320px;
	--mb-2col-gap: 32px 64px;
}

.mb-adhkar__inner {
	--mb-2col-min: 380px;
	--mb-2col-gap: 48px 72px;
}

.mb-newsletter__inner {
	--mb-2col-min: 420px;
	--mb-2col-gap: 48px;
	--mb-2col-align: end;
}

/* Hero cover: the dark bottom-up scrim sits between the photo and the text as its
   own layer, independent of core/cover's single color-or-gradient overlay slot, so
   it survives regardless of whether/how the background image is set. */
/* min-height and the rule colour used to be inline in the pattern, but
   core/cover serialises min-height from its own attributes — a `clamp()`
   there never matched `save()` and invalidated the block. Both live here
   now, so the pattern markup can stay canonical. */
.wp-block-cover.hero-cover {
	min-height: clamp(520px, 78vh, 760px);
	/* Anchors content to the bottom. Done here rather than with core's
	   `contentPosition` attribute, because that emits
	   `has-custom-content-position`, and core then forces the inner container
	   to `margin: 0; width: auto` at (0,5,0) — which stops it centring and
	   drops the text out of the 1200px column onto the cover's own 1em
	   padding. Flex alignment gets the same result without that fight. */
	align-items: flex-end;
	/* Replaces core's `padding: 1em`, so the hero pads by `edge` like every
	   other band and its inner wrapper only has to cap the column. */
	padding: 0 var(--wp--preset--spacing--edge);
}

.hero-cover .wp-block-separator {
	border-color: rgba(255, 255, 255, 0.7);
}

.hero-cover {
	position: relative;
}

.hero-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.1) 100%);
}

.hero-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 0;
	padding-bottom: 56px;
	color: #fff;
}

.hero-cover .wp-block-heading {
	max-width: 14ch;
}

.hero-cover__lead {
	font-size: 17px;
	line-height: 27px;
	max-width: 46ch;
	margin: 0;
}

/* Buttons sit against the right edge of the content column once the hero
   row is two columns wide. Below that the row stacks under the lead
   paragraph, where right-aligning would leave them floating away from the
   text — so they stay flush left there, matching every other control on
   the site. The breakpoint is the width at which this row's own
   `auto-fit` grid gives up its second column (2 x 300px + 56px gap,
   reached at ~729px viewport). */
.hero-cover__actions {
	flex-shrink: 0;
	justify-content: flex-start;
}

@media (min-width: 729px) {
	.hero-cover__actions {
		justify-content: flex-end;
	}
}

/* Morning hadith band. The 2px rules live on the inner wrapper, not the
   full-bleed section, so they stop at the content column like every other
   section rule. */
.mb-morning-hadith {
	padding-inline: var(--wp--preset--spacing--edge);
}

.mb-morning-hadith__inner {
	max-width: 1200px;
	margin-inline: auto;
}

.mb-morning-hadith__arabic {
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.5;
	font-weight: 700;
	text-align: right;
	margin: 0;
}

.mb-morning-hadith__quote {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 16px 0 0;
}

.mb-morning-hadith__source {
	font-size: 15px;
	line-height: 24px;
	margin: 16px 0 0;
}

/* ------------------------------------------------------------------
   The routine (Part 4)
   ------------------------------------------------------------------ */

.mb-routine__inner {
	max-width: 1200px;
	margin-inline: auto;
}

.mb-routine__heading {
	max-width: 20ch;
	margin: 0 0 40px;
}

/* The design uses auto-fit tracks with the copy spanning two of them, which
   gives three different layouts as the viewport grows: everything stacked on
   mobile, [meta][title] over [copy] on tablet, and all three on a single
   baseline row once four tracks fit. Reproduced with the same technique
   rather than fixed columns, so those transitions happen where the design
   puts them. */
.mb-routine__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 12px 48px;
	align-items: baseline;
	border-top: 2px solid var(--wp--custom--divider);
	padding: 28px 0;
}

/* Below ~500px the grid is down to a single track, where `span 2` would
   otherwise create an implicit second column and overflow the row. */
@media (max-width: 499.98px) {
	.mb-routine__desc {
		grid-column: auto;
	}
}

/* Step number and time sit side by side on one baseline ("01   AT FAJR"),
   not stacked (design: flex, gap 16px, align-items baseline). */
.mb-routine__meta {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.mb-routine__number {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.mb-routine__time {
	margin: 0;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.mb-routine__title {
	margin: 0;
}

.mb-routine__desc {
	grid-column: span 2;
	max-width: 56ch;
	margin: 0;
}

/* ------------------------------------------------------------------
   Morning adhkar (Part 5)
   ------------------------------------------------------------------ */

.mb-adhkar__inner {
	max-width: 1200px;
	margin-inline: auto;
	align-items: flex-start;
}

.mb-adhkar__intro {
	min-width: 0;
}

.mb-adhkar__lead {
	margin: 20px 0 0;
	max-width: 46ch;
}

.mb-adhkar__panel {
	margin-top: 32px;
	border-top: 2px solid var(--wp--custom--divider);
	padding: 24px;
}

.mb-adhkar__panel-arabic {
	font-size: 26px;
	line-height: 1.7;
	text-align: right;
	direction: rtl;
	margin: 0;
}

.mb-adhkar__panel-english {
	font-size: 15px;
	line-height: 24px;
	margin: 12px 0 0;
}

/* Tasbih counter block. */
/* Grid item: min-width 0 so the 96px count can't force the column wider
   than its track. Top rule + 24px above the tabs, per the design. */
.mb-tasbih {
	min-width: 0;
	border-top: 2px solid var(--wp--custom--divider);
	padding-top: 24px;
}

/* Three equal columns spanning the full width, per the design
   (`repeat(3, minmax(0, 1fr))`) — not content-width tabs. */
.mb-tasbih__tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-bottom: 2px solid var(--wp--custom--divider);
}

.mb-tasbih__tab {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 14px;
	font-weight: 700;
	background: none;
	border: none;
	border-bottom: 4px solid transparent;
	margin-bottom: -2px;
	padding: 12px 0;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	text-align: left;
}

.mb-tasbih__tab.is-active {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}



.mb-tasbih__arabic {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.3;
	text-align: right;
	direction: rtl;
	margin: 40px 0 0;
}

.mb-tasbih__english {
	font-size: 15px;
	line-height: 24px;
	margin: 4px 0 0;
}

.mb-tasbih__count-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: 32px;
}

.mb-tasbih__count {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	font-size: 96px;
	line-height: 1;
	color: var(--wp--preset--color--accent-600);
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 380px) {
	.mb-tasbih__count {
		font-size: 72px;
	}
}

.mb-tasbih__target {
	font-size: 20px;
	font-weight: 700;
}

.mb-tasbih__progress {
	margin-top: 20px;
	height: 8px;
	background: var(--wp--preset--color--accent-200);
}

.mb-tasbih__progress-fill {
	height: 100%;
	background: var(--wp--preset--color--accent);
	transition: width 0.2s ease;
}

.mb-tasbih__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.mb-tasbih__actions .wp-element-button {
	min-height: 48px;
}

.mb-tasbih__count-button {
	min-width: 200px;
}

.mb-tasbih__count-button:disabled {
	opacity: 0.7;
	cursor: default;
}

.mb-tasbih__reward {
	margin-top: 32px;
	padding: 24px;
	background: var(--wp--preset--color--accent-100);
	border-top: 2px solid var(--wp--preset--color--accent);
}

.mb-tasbih__reward-title {
	margin: 12px 0 0;
	font-size: 26px;
}

.mb-tasbih__reward-text {
	margin: 10px 0 0;
	max-width: 46ch;
}

.mb-tasbih__reward-actions,
.mb-tasbih__email-gate {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.mb-tasbih__email-gate label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 6px;
}

.mb-tasbih__gate-message {
	margin-top: 12px;
}

.mb-tasbih__start-again-row {
	margin-top: 16px;
}

/* ------------------------------------------------------------------
   40-night challenge (Part 6)
   ------------------------------------------------------------------ */

/* Every other section is a full-width band with edge padding and an inner
   wrapper capped at 1200px. This block renders no inner wrapper of its own,
   so the band itself provides the 1200px column as a single centred grid
   track. Centring this way rather than with `margin-inline: auto` on the
   children matters: any child using a `margin` *shorthand* would reset the
   inline margins back to 0 and break out of the column — which is exactly
   what the progress block's `margin: 48px 0 40px` was doing, throwing the
   40-segment bar up to 128px left of everything else at 1600px. A grid
   track can't be knocked out of alignment that way. */
.mb-forty-nights {
	display: grid;
	grid-template-columns: minmax(0, 1200px);
	justify-content: center;
	padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--edge);
}

.mb-forty-nights__header {
	margin-bottom: 0;
}

/* Eyebrow + heading on the left, intro paragraph on the right, bottom
   aligned — the design pairs them side by side rather than stacking. */
.mb-forty-nights__header-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 24px 72px;
	align-items: end;
}

.mb-forty-nights__intro {
	max-width: 50ch;
	margin: 0;
}


.mb-forty-nights__progress {
	margin-block: 48px 40px;
}

.mb-forty-nights__progress-count {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	font-size: 48px;
	line-height: 1;
	color: var(--wp--preset--color--accent-600);
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.mb-forty-nights__progress-label {
	font-size: 15px;
	font-weight: 700;
	margin-left: 8px;
}

.mb-forty-nights__segments {
	display: grid;
	grid-template-columns: repeat(40, 1fr);
	gap: 2px;
	height: 10px;
	margin-top: 12px;
}

.mb-forty-nights__segment {
	background: var(--wp--preset--color--surface);
}

.mb-forty-nights__segment.is-kept {
	background: var(--wp--preset--color--accent);
}

.mb-forty-nights__segment.is-selected {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: -2px;
}

.mb-forty-nights__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 12px 32px;
	align-items: center;
	border-top: 2px solid var(--wp--custom--divider);
	padding: 16px 12px;
}

.mb-forty-nights__rows > .mb-forty-nights__row:last-child {
	border-bottom: 2px solid var(--wp--custom--divider);
}

.mb-forty-nights__row.is-selected-row {
	background: var(--wp--preset--color--surface);
}

.mb-forty-nights__row-meta {
	display: flex;
	align-items: baseline;
	gap: 16px;
	min-width: 0;
}

.mb-forty-nights__row-week {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	min-width: 52px;
}

.mb-forty-nights__row-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mb-forty-nights__row-title {
	font-weight: 800;
	font-size: 17px;
	line-height: 22px;
}

.mb-forty-nights__row-range {
	font-size: 13px;
	line-height: 18px;
}

/* Seven equal columns, so week 6's five cells line up under the first five
   columns of the weeks above instead of free-wrapping (design:
   `repeat(7, minmax(36px, 1fr))`). */
.mb-forty-nights__nights {
	display: grid;
	grid-template-columns: repeat(7, minmax(36px, 1fr));
	gap: 4px;
}

.mb-forty-nights__night {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	font-size: 13px;
	height: 40px;
	min-width: 0;
	padding: 0 8px;
	text-align: left;
	border: 2px solid var(--wp--custom--divider);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.mb-forty-nights__night.is-kept {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.mb-forty-nights__night.is-selected {
	border-color: var(--wp--preset--color--contrast);
}

.mb-forty-nights__detail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 24px 48px;
	align-items: start;
	padding-top: 32px;
}

.mb-forty-nights__detail-number-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mb-forty-nights__detail-number {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	font-size: 72px;
	line-height: 1;
	color: var(--wp--preset--color--accent-600);
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.mb-forty-nights__detail-title {
	margin: 0;
}

.mb-forty-nights__detail-how {
	font-size: 17px;
	line-height: 28px;
	margin: 12px 0 0;
}

.mb-forty-nights__detail-why {
	font-size: 15px;
	line-height: 24px;
	margin: 8px 0 0;
}

.mb-forty-nights__detail-stack {
	font-size: 14px;
	line-height: 22px;
	font-weight: 700;
	margin: 16px 0 0;
}

.mb-forty-nights__detail-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
}

.mb-forty-nights__detail-actions .wp-element-button {
	min-height: 48px;
}

/* ------------------------------------------------------------------
   Subscribe block (Part 9, pulled forward for Part 7's course form)
   ------------------------------------------------------------------ */

.mb-subscribe__row {
	display: flex;
	flex-wrap: wrap;
}

.mb-subscribe__input {
	flex: 1 1 240px;
	min-width: 0;
}

.mb-subscribe .mb-subscribe__button {
	flex-shrink: 0;
	border-left: 0;
	white-space: nowrap;
}

/* Joined to an ink-bordered field, so the button takes the same ink border
   rather than theme.json's accent one — design: `border: 2px solid
   var(--color-text); border-left: 0`. The on-accent variant overrides this. */
.mb-subscribe:not(.mb-subscribe--on-accent) .mb-subscribe__button {
	border-color: var(--wp--preset--color--contrast);
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields),
   and aria-hidden on its wrapper so screen reader users never reach it. */
.mb-subscribe__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.mb-subscribe__message {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 700;
}

/* The design gives the success state real presence where it replaces a form:
   28px/800 in the newsletter band, 20px/800 accent-700 on the cohort form.
   Errors stay at the small default size in both. */
.mb-subscribe--newsletter .mb-subscribe__message:not(.is-error) {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 800;
	margin-top: 0;
}

.mb-subscribe--notify .mb-subscribe__message:not(.is-error) {
	font-size: 20px;
	line-height: 28px;
	font-weight: 800;
	color: var(--wp--preset--color--accent-700);
}

.mb-subscribe__message.is-error {
	color: #b3261e;
}

.mb-subscribe__privacy {
	margin: 12px 0 0;
	font-size: 13px;
}

.mb-subscribe__privacy a {
	text-decoration: underline;
}

/* On-accent color scheme: for use on an accent-filled band (Part 9's
   newsletter section). */
.mb-subscribe.mb-subscribe--on-accent .mb-subscribe__input {
	background: transparent;
	border-color: var(--wp--preset--color--on-accent);
	color: var(--wp--preset--color--on-accent);
}

.mb-subscribe.mb-subscribe--on-accent .mb-subscribe__input::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--on-accent) 70%, transparent);
}

.mb-subscribe.mb-subscribe--on-accent .mb-subscribe__button {
	background: var(--wp--preset--color--on-accent);
	color: var(--wp--preset--color--accent-800);
	border-color: var(--wp--preset--color--on-accent);
	border-left: none;
}

.mb-subscribe.mb-subscribe--on-accent .mb-subscribe__button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--on-accent) 88%, transparent);
}

.mb-subscribe--on-accent .mb-subscribe__privacy,
.mb-subscribe--on-accent .mb-subscribe__message {
	color: var(--wp--preset--color--on-accent);
}

/* ------------------------------------------------------------------
   Cohort course (Part 7)
   ------------------------------------------------------------------ */

.mb-course__inner {
	max-width: 1200px;
	margin-inline: auto;
}

.mb-course__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 56px;
	row-gap: 32px;
}

.mb-course__intro,
.mb-course__signup {
	flex: 1 1 320px;
	min-width: 320px;
}

.mb-course__tag {
	margin: 0;
	display: inline-block;
	background: var(--wp--preset--color--accent-100);
	color: var(--wp--preset--color--accent-700);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
}

.mb-course__heading {
	margin: 16px 0 0;
	font-size: clamp(36px, 4.4vw, 60px);
}

.mb-course__heading-accent {
	color: var(--wp--preset--color--accent-600);
}

.mb-course__signup {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mb-course__signup > * {
	margin-block: 0;
}

.mb-course__lead {
	max-width: 50ch;
	margin: 0;
}

.mb-course__seats {
	margin: 0;
}

.mb-course__weeks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
	gap: 0;
	margin-top: 48px;
	border-top: 2px solid var(--wp--custom--divider);
}

.mb-course__weeks > * {
	margin-block: 0;
}

.mb-course__week {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 24px 24px 0;
}

.mb-course__week > * {
	margin-block: 0;
}

.mb-course__week-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
}

.mb-course__week-copy {
	margin: 0;
	font-size: 15px;
	line-height: 24px;
}

/* ------------------------------------------------------------------
   Journal (Part 8) — shared by the homepage teaser, the archive and
   category templates, since all three use the same card markup/classes.
   ------------------------------------------------------------------ */

.mb-journal__inner,
.mb-archive__inner {
	max-width: 1200px;
	margin-inline: auto;
}

.mb-journal__header {
	margin-bottom: 40px;
	align-items: flex-end;
}

/* Override core's fixed-columnCount grid with a responsive, min-300px one. */
.mb-journal__query .wp-block-post-template,
.mb-archive__grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

/* The grid stretches each <li> to the tallest in its row, but the card
   inside was still auto-height — so the surface fill stopped short and the
   cards ended ragged even though their cells lined up. Filling the cell
   makes the tinted blocks bottom-align, as in the design. */
.mb-journal-card {
	position: relative;
	padding: 20px;
	height: 100%;
}

/* Reserves the same 3:2 space whether or not a featured image exists — a
   post without one just shows the surface-tinted box, so cards stay
   aligned either way. Sits inside the card's padding rather than bleeding
   to its edges. */
.mb-journal-card__media {
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
	margin: 0 0 16px;
}

/* The featured-image block wraps the <img> in a <figure>. Without a height
   here that figure is auto-height, so the `height: 100%` below resolves
   against `auto` and computes to `auto` too — which let every image size
   itself by its own aspect ratio and made card heights drift apart
   depending on what was uploaded. Giving the figure the box's full height
   restores the percentage chain, so any image is cropped to the same 3:2. */
.mb-journal-card__media .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
}

.mb-journal-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mb-journal-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Category link sits above the card's stretched title link so it stays
   independently clickable (different destination). */
.mb-journal-card__category {
	position: relative;
	z-index: 2;
	margin: 0;
}

.mb-journal-card__category a {
	color: inherit;
	text-decoration: none;
}

.mb-journal-card__category a:hover {
	text-decoration: underline;
}

/* Whole-card click target: the title's link is stretched to cover the
   card (the only real link pointing at the post, so no duplicate links
   for screen reader / keyboard users). */
.mb-journal-card__title {
	margin: 0;
	position: relative;
}

.mb-journal-card__title a {
	color: inherit;
	text-decoration: none;
}

.mb-journal-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Borderless by design — the surface fill is what defines the card. Hover
   (and keyboard focus) shifts that fill instead of adding an outline: an 8%
   ink mix, which stays visible in every palette, unlike accent-200 which is
   near-identical to surface in three of them. */
.mb-journal-card {
	border: 0;
	transition: background-color 0.15s ease;
}

.mb-journal-card:hover,
.mb-journal-card:focus-within {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, var(--wp--preset--color--surface));
}

.mb-journal-card:hover .mb-journal-card__title,
.mb-journal-card:focus-within .mb-journal-card__title {
	color: var(--wp--preset--color--accent);
}

.mb-journal-card__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mb-journal-card__meta {
	margin-top: 4px;
	font-size: 13px;
}

.mb-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 48px;
}

.mb-pagination a,
.mb-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 2px solid var(--wp--custom--divider);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
}

.mb-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.mb-pagination a:hover {
	background: var(--wp--preset--color--accent-100);
}

.mb-pagination .page-numbers.dots {
	border: none;
	height: auto;
	min-width: 0;
}

/* ------------------------------------------------------------------
   Single post (Part 8)
   ------------------------------------------------------------------ */

.mb-single__inner {
	max-width: 720px;
	margin-inline: auto;
}

.mb-single__lead {
	font-size: 18px;
	line-height: 28px;
	font-weight: 700;
	margin: 16px 0 0;
}

.mb-single__rule {
	margin: 24px 0 32px;
}

.mb-single__image img {
	width: 100%;
	height: auto;
	margin-bottom: 32px;
}

.mb-single__content p {
	font-size: 17px;
	line-height: 28px;
}

.mb-single__letter {
	margin-top: 48px;
	padding: 32px;
	border-top: 2px solid var(--wp--custom--divider);
}

.mb-single__letter .mb-subscribe {
	margin-top: 20px;
	max-width: 420px;
}

/* ------------------------------------------------------------------
   Newsletter band (Part 9)
   ------------------------------------------------------------------ */

.mb-newsletter {
	padding: 96px var(--wp--preset--spacing--edge);
}

.mb-newsletter__inner {
	max-width: 1200px;
	margin-inline: auto;
}

.mb-newsletter__heading {
	min-width: 0;
	font-size: clamp(38px, 4.6vw, 64px);
	line-height: 1.04;
	color: inherit;
	margin: 0;
}

.mb-newsletter__form-col {
	min-width: 0;
}

.mb-newsletter__note {
	font-size: 18px;
	line-height: 28px;
	font-weight: 700;
	margin: 16px 0 0;
}