/*
Theme Name: Mummes
Theme URI: https://mummes.local
Author: Papermud
Author URI: https://papermud.com
Description: Mummes — a feed & outdoor store. An editorial block child theme of Twenty Twenty-Five with a Sabon serif display face, red & navy palette, full-bleed magazine sections, reusable CTA patterns, and a native FAQ accordion.
Template: twentytwentyfive
Version: 0.7.10
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mummes
Tags: full-site-editing, block-patterns, custom-colors, editorial, e-commerce
*/

/* ------------------------------------------------------------------ *
 * Editorial helpers — these carry the refined "magazine" look.
 * ------------------------------------------------------------------ */

 :where(.wp-site-blocks :focus) {
 	outline-width: 0;
 }

/* Small letter-spaced eyebrow label */
.mummes-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Rule-kicker — a khaki hairline + small italic serif label. The editorial
   alternative to the uppercase eyebrow, used on the hero slides and hub features. */
.mummes-kicker {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 0.2rem;
	font-family: var(--wp--preset--font-family--sabon);
	font-style: italic;
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--wp--preset--color--secondary);
}
.mummes-kicker::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 1px;
	background: var(--wp--preset--color--accent);
}
/* Product kickers run without the leading rule — on the Feed line the label sits
   directly above the product name, and the dash read as a stray mark. */
.mummes-product-lead .mummes-kicker::before,
.mummes-product-card .mummes-kicker::before {
	content: none;
}

/* Light-on-dark. The default kicker is navy, so it vanishes on a navy band or a
   navy-dimmed cover — every dark stage needs this, whether centred or not. */
.mummes-hero-slider .mummes-kicker,
.mummes-about-band .mummes-kicker,
.mummes-product-lead .mummes-kicker {
	color: var(--wp--preset--color--base);
}

/* Centred variant — the khaki rule flanks the label on both sides */
.mummes-hero-slider .mummes-kicker,
.mummes-about-band .mummes-kicker {
	justify-content: center;
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}
.mummes-hero-slider .mummes-kicker::after,
.mummes-about-band .mummes-kicker::after {
	content: "";
	flex: none;
	width: 2rem;
	height: 1px;
	background: var(--wp--preset--color--accent);
}

/* Italic serif pull-quote */
.mummes-quote {
	font-family: var(--wp--preset--font-family--sabon);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.7rem, 2.8vw, 2.35rem);
	line-height: 1.18;
	color: var(--wp--preset--color--secondary);
}

/* Centred section intro */
.mummes-section-intro { margin-left: auto; margin-right: auto; }
.mummes-section-intro p { color: var(--wp--preset--color--muted); }

/* Thin centred rule */
.mummes-rule {
	width: 56px; height: 2px; border: 0;
	background: var(--wp--preset--color--primary);
	margin: 0 auto;
}

/* Value-prop "kriterium" numbers */
.mummes-num {
	font-family: var(--wp--preset--font-family--sabon) !important;
	font-style: italic;
	font-size: 2.75rem !important;
	color: var(--wp--preset--color--primary) !important;
	line-height: 1;
}

/* Rotated vertical heading beside magcard imagery */
.mummes-vertical {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted) !important;
	margin: 0;
}
@media (min-width: 900px) {
	.mummes-vertical {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		position: absolute;
		top: 2rem;
		left: -0.5rem;
		z-index: 5;
	}
}

/* ---- Magcard: full-bleed alternating image + text, two-tone field ---- */
.mummes-magcard { position: relative; }
@media (min-width: 782px) {
	.mummes-magcard.is-right { background: linear-gradient(to right, var(--wp--preset--color--white) 60%, var(--wp--preset--color--surface) 0); }
	.mummes-magcard.is-left  { background: linear-gradient(to left,  var(--wp--preset--color--white) 60%, var(--wp--preset--color--surface) 0); }
	/* Lift the text panel for an editorial overlap */
	.mummes-magcard .wp-block-media-text__content { position: relative; z-index: 2; }
	.mummes-magcard .mummes-magcard-panel {
		background: var(--wp--preset--color--white);
		padding: 3.5rem !important;
	}
	.mummes-magcard.is-right .mummes-magcard-panel { margin-left: -18%; }
	.mummes-magcard.is-left  .mummes-magcard-panel { margin-right: -18%; }
}
.mummes-magcard .wp-block-media-text__content { padding: 2rem 1.5rem; }

/* ---- FAQ accordion built on the native <details> block ---- */
.mummes-faq .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 0;
	margin: 0;
}
.mummes-faq .wp-block-details:last-of-type { border-bottom: 1px solid var(--wp--preset--color--line); }
.mummes-faq .wp-block-details summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 1.7rem 3rem 1.7rem 0;
	font-family: var(--wp--preset--font-family--sabon);
	font-size: clamp(1.25rem, 2vw, 1.7rem);
	line-height: 1.25;
	color: var(--wp--preset--color--secondary);
}
.mummes-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.mummes-faq .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0.1rem;
	top: 1.6rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 300;
	font-size: 1.9rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
.mummes-faq .wp-block-details[open] summary::after { content: "\2013"; }
.mummes-faq .wp-block-details > *:not(summary) {
	margin: 0;
	padding: 0 3rem 1.9rem 0;
	max-width: 820px;
	color: var(--wp--preset--color--muted);
}

/* Surface page intros (Shop, hubs): core cover forces white text — restore the
   navy serif title against the light stone overlay */
.mummes-page-intro .wp-block-post-title { color: var(--wp--preset--color--secondary); }

/* ---- Brand wall (Fashion hub) — hairline grid of logo tiles ---- */
.mummes-wall-label {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-bottom: var(--wp--preset--spacing--30, 1.25rem);
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted) !important;
}
.mummes-wall-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--line);
}
.mummes-brand-wall {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: 1px;
	background: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	overflow: hidden;
}
.mummes-brand-wall > .mummes-brand-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 2.4rem 1.8rem;
	min-height: 9.5rem;
	background: var(--wp--preset--color--white);
}
.mummes-brand-wall > .mummes-brand-tile img {
	width: auto;
	height: auto;
	max-height: 3.4rem;
	max-width: min(78%, 240px);
	object-fit: contain;
	border-radius: 0;
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter 0.25s ease, opacity 0.25s ease;
}
.mummes-brand-wall > .mummes-brand-tile.is-tall img { max-height: 6.5rem; }
.mummes-brand-wall > .mummes-brand-tile.is-wide img { max-width: 90%; }
.mummes-brand-wall > .mummes-brand-tile:hover img,
.mummes-brand-wall > .mummes-brand-tile:focus-within img {
	filter: none;
	opacity: 1;
}

/* A single brand mark outside the wall — the All Seasons logo on the homepage
   section. Same monochrome treatment as the brand tiles so one logo standing
   on its own doesn't read louder than a whole wall of them. */
.mummes-all-seasons-logo img {
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter 0.25s ease, opacity 0.25s ease;
}
.mummes-all-seasons-logo:hover img,
.mummes-all-seasons-logo:focus-within img {
	filter: none;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.mummes-all-seasons-logo img { transition: none; }
}
/* Typeset tile — for boutique brands with no published logo */
.mummes-brand-wall > .mummes-brand-tile.is-typeset p {
	margin: 0;
	font-family: var(--wp--preset--font-family--sabon);
	font-style: italic;
	font-size: 1.45rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast);
	opacity: 0.62;
	transition: opacity 0.25s ease;
}
.mummes-brand-wall > .mummes-brand-tile.is-typeset:hover p { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.mummes-brand-wall > .mummes-brand-tile img { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Mumme's own product line (Feed hub)
 * ------------------------------------------------------------------ */

/* Lead product — the #1 seller, given a full-bleed navy stage of its own.
   The bag art carries its own red/navy field from the flyer, so the band
   behind it is navy and the type goes light. */
.mummes-product-lead {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50, 2rem);
	align-items: center;
}
@media (min-width: 860px) {
	.mummes-product-lead {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 5vw, 5rem);
	}
}
.mummes-product-lead .mummes-product-lead__media { margin: 0; }
.mummes-product-lead .mummes-product-lead__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 40px 60px -40px rgba(0, 0, 0, 0.75);
}

/* Red rule-pill for the "#1 in Texas" claim */
.mummes-flag {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1rem;
	padding: 0.4rem 0.9rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--primary);
	border-radius: 2px;
}

/* Guaranteed-analysis / spec row — hairline-separated figures */
.mummes-spec {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.6rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}
.mummes-spec li {
	flex: 0 1 auto;
	padding-right: 1.6rem;
	border-right: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.mummes-spec li:last-child { border-right: 0; padding-right: 0; }
.mummes-spec b {
	display: block;
	font-family: var(--wp--preset--font-family--sabon);
	font-style: italic;
	font-weight: 400;
	font-size: 1.7rem;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
}
.mummes-spec span {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.7;
}
/* On the navy lead stage the red figures lose contrast — go khaki instead */
.mummes-product-lead .mummes-spec b { color: var(--wp--preset--color--accent); }

/* Product grid — the rest of the Mumme's line */
.mummes-product-grid {
	--mummes-product-gap: clamp(1.5rem, 2.5vw, 2.25rem);
	display: grid;
	/* Still auto-fit, but capped at three across: the max() floor keeps every
	   track at least a third of the row, so a fourth column can never fit.
	   The inner min() is the narrow-viewport guard — below 17rem the track
	   falls back to 100% instead of overflowing. */
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				min(17rem, 100%),
				(100% - 2 * var(--mummes-product-gap)) / 3
			),
			1fr
		)
	);
	gap: var(--mummes-product-gap);
}
.mummes-product-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mummes-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 44px -30px rgba(35, 34, 32, 0.45);
}
.mummes-product-card > figure,
.mummes-product-card > .wp-block-image {
	margin: 0;
	/* The tiles are cut 3:4 out of the flyers; lock the ratio so a row of
	   cards keeps a common baseline even though the crops differ slightly. */
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.mummes-product-card > figure img,
.mummes-product-card > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.mummes-product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.75rem 1.6rem 1.9rem;
}
.mummes-product-card__body > :last-child { margin-bottom: 0; }
.mummes-product-card h3 {
	margin: 0.15em 0 0.3em;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
}
/* In a card the row is only ~15rem wide, so flex-wrapping strands the third
   figure on its own line with a dangling rule. Grid keeps all three on one row
   at any card width; the figures shrink instead of wrapping. */
.mummes-product-card .mummes-spec {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: auto;
	padding-top: 1.2rem;
}
.mummes-product-card .mummes-spec li {
	padding: 0 0.7rem;
	text-align: center;
}
.mummes-product-card .mummes-spec li:first-child { padding-left: 0; }
.mummes-product-card .mummes-spec li:last-child { padding-right: 0; }
.mummes-product-card .mummes-spec b { font-size: 1.45rem; }
.mummes-product-card .mummes-spec span { font-size: 0.62rem; letter-spacing: 0.1em; }

/* "View the flyer" link — the client's own spec sheet, one click away */
.mummes-flyer-link a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.mummes-flyer-link { margin: 1.2rem 0 0; }

/* ---- Archival clipping (About) — a matted, slightly lifted newspaper scan ---- */
.mummes-archive-clip img {
	background: var(--wp--preset--color--white);
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 18px 34px -26px rgba(35, 34, 32, 0.55);
}
.mummes-archive-clip figcaption {
	font-family: var(--wp--preset--font-family--sabon);
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	text-align: left;
}

/* ---- Refined category cards (Shop) ---- */
.mummes-category-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	height: 100%;
}
.mummes-category-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 40px -28px rgba(35, 34, 32, 0.4);
}
.mummes-category-card .mummes-card-link {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---- Header / nav refinement ---- */
.mummes-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.mummes-header .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--sabon);
	font-weight: 400;
	text-decoration: none;
}

/* Outline buttons sit lighter, and fill in on hover */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
	/* Re-assert core's currentColor border — the 1px transparent height-matching
	   border below would otherwise erase it (theme selector outspecifies core's :where) */
	border-color: currentColor;
	background: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--secondary) !important;
}

/* Filled buttons darken slightly on hover */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	transition: filter 0.2s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	filter: brightness(0.92);
}

/* ------------------------------------------------------------------ *
 * Modern rounding — subtle radius on buttons, cards & images
 * ------------------------------------------------------------------ */
/* Transparent 1px border so filled buttons match the outline button's box height */
.wp-block-button__link { border-radius: 4px; border: 1px solid transparent; }
.wp-block-image img,
.wp-block-image .wp-block-image__crop-area { border-radius: 4px; }
.mummes-category-card,
.mummes-category-card img { border-radius: 4px; }

/* Cards that lead with a photograph: pin the image to one ratio so the copy
   below lines up across the row whatever the source dimensions are — the
   feeder still is landscape, the blinds flyer is nearly square. */
.mummes-category-card > .wp-block-image { margin: 0; }
/* Core sets `.wp-block-image > a { display: inline-block }`, so a link-wrapped
   image shrink-wraps to its intrinsic width and `width: 100%` below resolves
   against THAT, not the card — a small source then sits undersized in a wide
   card. Core solves the same problem for alignwide/alignfull; do it here too. */
.mummes-category-card > .wp-block-image > a {
	display: block;
	width: 100%;
}
.mummes-category-card > .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 4px 4px 0 0;
}
.mummes-magcard-panel { border-radius: 4px; }
.wp-block-search__input,
.wp-block-search__button { border-radius: 4px; }

/* ------------------------------------------------------------------ *
 * Slim header — logo left · nav centred · hamburger right
 * ------------------------------------------------------------------ */
.mummes-header {
	position: sticky;
	top: 0;
	z-index: 50;
	transition: padding 0.25s ease, top 0.25s ease, box-shadow 0.25s ease;
}
/* On inner pages, stick below the admin bar when logged in */
body.admin-bar .mummes-header { top: 32px; }
.mummes-header-inner {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}
.mummes-header-inner > .wp-block-site-logo { justify-self: start; }
.mummes-header .mummes-nav-center { justify-self: center; }
.mummes-header .mummes-header-actions { justify-self: end; align-items: center; gap: 0.75rem; flex-wrap: nowrap; }

/* Slim red phone button in the header */
.mummes-header .mummes-phone .wp-block-button__link {
	padding: 0.5rem 1.05rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Hamburger overlay only on mobile — hide the toggle on wider screens */
@media (min-width: 782px) {
	.mummes-header .mummes-nav-toggle { display: none; }
}
.mummes-header .wp-block-site-logo img { height: 44px; width: auto !important; max-width: none; display: block; transition: height 0.25s ease; }

/* Shrink the header once the page is scrolled */
.mummes-header.is-scrolled {
	padding-top: var(--wp--preset--spacing--20) !important;
	padding-bottom: var(--wp--preset--spacing--20) !important;
}
.mummes-header.is-scrolled .wp-block-site-logo img { height: 34px; }

/* The hamburger toggle is always a button; keep its icon comfortably sized */
.mummes-header .mummes-nav-toggle .wp-block-navigation__responsive-container-open {
	display: flex;
}
.mummes-header .mummes-nav-toggle .wp-block-navigation__responsive-container-open svg { width: 1.6rem; height: 1.6rem; }

/* Scout-style nav hover: a soft rounded pill behind each link */
.mummes-header .mummes-nav-center .wp-block-navigation-item__content {
	padding: 0.45rem 0.95rem;
	border-radius: 4px;
	transition: background-color 0.18s ease;
}
.mummes-header .mummes-nav-center .wp-block-navigation-item__content:hover,
.mummes-header .mummes-nav-center .current-menu-item .wp-block-navigation-item__content {
	background-color: rgba(20, 20, 20, 0.07);
	text-decoration: none;
}
/* Matching rounded hover on the hamburger toggle */
.mummes-header .mummes-nav-toggle .wp-block-navigation__responsive-container-open {
	padding: 0.4rem;
	border-radius: 4px;
	transition: background-color 0.18s ease;
}
.mummes-header .mummes-nav-toggle .wp-block-navigation__responsive-container-open:hover {
	background-color: rgba(20, 20, 20, 0.07);
}

/* On phones: drop the centre links, lay out logo-left / actions-right */
@media (max-width: 781px) {
	.mummes-header .mummes-nav-center { display: none; }
	.mummes-header-inner { display: flex !important; justify-content: space-between; }
	.mummes-header .mummes-header-actions { gap: 0.5rem; margin-left: auto; }
	.mummes-header .mummes-nav-toggle { margin-left: auto; }
	.mummes-header .mummes-phone .wp-block-button__link {
		padding: 0.38rem 0.72rem;
		font-size: 0.72rem;
		letter-spacing: 0.01em;
	}
	.mummes-header .wp-block-site-logo img { height: 36px; }
}

/* ------------------------------------------------------------------ *
 * Homepage — white rounded header floating over a full-viewport hero
 * ------------------------------------------------------------------ */
body.home .mummes-header {
	position: fixed;
	top: 1rem;
	left: 0;
	right: 0;
	width: calc(100% - 2rem);
	max-width: 1240px;
	margin-inline: auto;
	z-index: 50;
	border-radius: 4px;
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
}
/* Float below the WordPress admin bar when logged in */
body.admin-bar.home .mummes-header { top: calc(32px + 1rem); }
@media (max-width: 782px) {
	body.admin-bar.home .mummes-header { top: calc(46px + 1rem); }
}
/* Tuck tighter to the top as the page scrolls */
body.home .mummes-header.is-scrolled { top: 0.5rem; box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.5); }
body.admin-bar.home .mummes-header.is-scrolled { top: calc(32px + 0.5rem); }

/* Kill the global flow margin so the hero sits flush at the very top
   (header is position:absolute, so the 1.5rem margin lands on <main>) */
body.home .wp-site-blocks > main { margin-block-start: 0; }
body.page .wp-site-blocks > main { margin-block-start: 0; }
body.page .wp-site-blocks > main.is-layout-flow > :first-child { margin-block-start: 0; }

/* Remove the parent theme's 1.5rem top-level flow margin above the footer */
.wp-site-blocks > footer { margin-block-start: 0; }

/* Hero fills the viewport, full-bleed behind the floating header.
   dvh matches the *visible* mobile viewport; 100vh would overshoot behind
   the browser chrome. vh first as the fallback for engines without dvh. */
body.home main > .wp-block-cover:first-child,
body.home main > .mummes-hero-slider:first-child { min-height: 100vh !important; }
body.home main > .wp-block-cover:first-child,
body.home main > .mummes-hero-slider:first-child { min-height: 100dvh !important; }

/* ------------------------------------------------------------------ *
 * Inner-page banner — shorter full-bleed cover with a title
 * ------------------------------------------------------------------ */
.mummes-page-banner .wp-block-cover__inner-container { width: 100%; max-width: 1100px; }
.mummes-page-banner .mummes-eyebrow {
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.4rem;
}
/* Inner-page headline sits a step below the homepage hero, so a banner never
   competes with it — and so long titles don't wrap into the photograph. */
.mummes-page-banner h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }

/* ------------------------------------------------------------------ *
 * Hero slider — manual, full-viewport, one slide per hub
 * ------------------------------------------------------------------ */
.mummes-hero-slider { position: relative; overflow: hidden; }
.mummes-hero-slider > .mummes-hero-slide { margin-block-start: 0; }

/* Core's flow layout sets `margin-block-start` on every child but the first:
 *   :root :where(.is-layout-flow) > * { margin-block-start: 1.5rem }
 * The cover's layers are position:absolute with inset:0, so a block-start
 * margin drags the top edge down while the bottom stays pinned - the scrim
 * stops short of the top and the raw poster shows through as a strip.
 * The two-class selector is (0,2,0), which clears core's (0,1,0) without
 * needing !important. Applies to every child so a future layer is covered
 * too; .hero__bg-video already zeroes its own margin for the same reason. */
.mummes-hero-slider > .mummes-hero-slide > * { margin-block-start: 0; }

/* Slides stack on top of each other; each fills the slider */
.mummes-hero-slider > .mummes-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Before JS runs, show only the first slide so there's no flash of stacked heroes */
.mummes-hero-slider:not(.is-ready) > .mummes-hero-slide:not(:first-child) {
	opacity: 0;
	visibility: hidden;
}
/* Once enhanced, cross-fade between slides by class */
.mummes-hero-slider.is-ready > .mummes-hero-slide {
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.mummes-hero-slider.is-ready > .mummes-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	transition: opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
	.mummes-hero-slider.is-ready > .mummes-hero-slide { transition: none; }
}

/* ---- Background video on the Feed slide ---- *
 * Layer order inside the slide: poster <img> (0) < video (1) < scrim (2)
 * < content (3) < pause button (4). Core gives .wp-block-cover__image-background
 * z-index 0, so everything above it is set explicitly rather than left to
 * DOM order. The poster stays visible underneath until the video paints,
 * which is what keeps the hero from flashing black on a slow connection. */
.mummes-hero-slide--video .hero__bg-video {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	/* The cover's layout caps direct children to the content width; without
	   these the wrapper collapses into a narrow centre column. */
	max-width: none;
	margin: 0;
	/* Size container so the video covers the slide's REAL box below, not the
	   viewport — the hero can grow taller than the screen on short landscape phones. */
	container-type: size;
}
/* Oversize-and-centre so the frame always covers, whatever the slide's aspect */
.mummes-hero-slide--video .hero__bg-video video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100cqw, calc(100cqh * 16 / 9));
	height: max(100cqh, calc(100cqw * 9 / 16));
	min-width: 100cqw;
	min-height: 100cqh;
	border: 0;
}
.mummes-hero-slide--video > .wp-block-cover__background { z-index: 2; }
.mummes-hero-slide--video > .wp-block-cover__inner-container { z-index: 3; }

/* Pause/play control — WCAG 2.2.2. Hidden until hero-video.js marks it ready,
   so it is never a dead control. Sits right of the slider's centred arrows. */
.hero__toggle {
	display: none;
	position: absolute;
	right: clamp(1.25rem, 4vw, 2.5rem);
	bottom: clamp(1.75rem, 5vh, 3.5rem);
	z-index: 4;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--white);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 32%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent);
	border-radius: 50%;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hero__toggle.is-ready { display: inline-flex; }
.hero__toggle:hover,
.hero__toggle:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	border-color: var(--wp--preset--color--white);
	outline: none;
}
.hero__toggle .hero__toggle-icon { display: block; fill: currentColor; }
.hero__toggle .hero__toggle-icon--play { display: none; }
.hero__toggle.is-paused .hero__toggle-icon--pause { display: none; }
.hero__toggle.is-paused .hero__toggle-icon--play { display: block; }

/* Controls bar — arrows flanking the dots, resting near the bottom */
.mummes-hero-slider__controls {
	position: absolute;
	left: 50%;
	bottom: clamp(1.75rem, 5vh, 3.5rem);
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.mummes-hero-slider__arrow {
	appearance: none;
	cursor: pointer;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wp--preset--color--white);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 32%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent);
	border-radius: 50%;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mummes-hero-slider__arrow:hover,
.mummes-hero-slider__arrow:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	border-color: var(--wp--preset--color--white);
	outline: none;
}
.mummes-hero-slider__dots { display: flex; align-items: center; gap: 0.7rem; }
.mummes-hero-slider__dot {
	appearance: none;
	cursor: pointer;
	width: 0.7rem;
	height: 0.7rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--white);
	background: transparent;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.mummes-hero-slider__dot:hover,
.mummes-hero-slider__dot:focus-visible { background: color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent); outline: none; }
.mummes-hero-slider__dot[aria-current="true"] {
	background: var(--wp--preset--color--white);
	transform: scale(1.15);
}

/* ------------------------------------------------------------------ *
 * Newsletter modal — native <dialog>, opened by the "Sign Me Up" CTA
 * ------------------------------------------------------------------ */
.mummes-modal {
	width: min(92vw, 540px);
	padding: 0;
	border: none;
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 24px 60px rgb(35 34 32 / 28%);
}
.mummes-modal::backdrop {
	background: rgb(43 62 85 / 62%);
}

.mummes-modal__inner {
	position: relative;
	padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.75rem);
}

/* Sits inside the padding rather than over the copy, so a long heading
   never runs underneath it. */
.mummes-modal__close {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-end: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--muted);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.mummes-modal__close:hover,
.mummes-modal__close:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	outline: none;
}

/* Centre the modal's own intro only. This used to be text-align on
   .mummes-modal__inner, which inherited straight into the form and centred
   every label, sublabel and validation message — and because it was inherited
   rather than matched, it didn't show up against those elements in devtools. */
.mummes-modal__inner > .mummes-eyebrow,
.mummes-modal__inner > h2,
.mummes-modal__lede {
	text-align: center;
}

.mummes-modal__inner h2 {
	margin: 0.2em 0 0.3em;
	font-size: clamp(1.6rem, 3.4vw, 2.15rem);
}
.mummes-modal__lede {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: 1.02rem;
	line-height: 1.7;
}

/* The form keeps Gravity's own left-aligned layout — no alignment overrides
   here on purpose. Note: GF 2.9 renders the "Orbital" theme
   (.gform-theme--orbital), NOT the older .gravity-theme — and it drives its
   colours through --gf-color-* custom properties emitted in an inline <style>
   scoped by form ID. Brand colours are therefore set in
   mummes_render_newsletter_modal(), which can beat that ID selector. */
.mummes-modal .gform_wrapper .gform_footer {
	padding-bottom: 0;
}

/* The page behind a modal must not scroll under it. */
body:has(.mummes-modal[open]) {
	overflow: hidden;
}

/* Gun-room stills: 16:9 frames cut from the store walkthrough. Rounded to match
   the cards, and the pair below the wide shot share one ratio so they line up. */
.mummes-gunroom-shot img {
	display: block;
	width: 100%;
	border-radius: 4px;
}
/* No aspect-ratio/object-fit here on purpose: both stills are already 16:9 out
   of the 4K source, so they line up unaided — and forcing the ratio made Chrome
   intermittently fail to paint one of the two columns. */