/**
 * Morales Feed & Supply homepage.
 *
 * Everything is scoped to body.home / .mfs-home so it cannot reach the 21
 * Elementor pages that still run on Agrimo's own styles.
 *
 * Layout note: header.php opens <div id="content" class="site-content container">
 * and footer.php closes it, so without the reset below every section would be
 * capped at the Bootstrap container width. Neutralising it hands the measure to
 * core's constrained layout (theme.json: contentSize 1140 / wideSize 1400).
 */

/* =========================================================================
   HERO
   Lives in Agrimo's own header slider slot, wrapped in .pbmit-slider-area,
   which already supplies border-radius:30px and margin:20px 20px 0. Adding
   overflow:hidden there is what actually clips the video to the radius.
   ====================================================================== */
body.home .pbmit-slider-area {
	overflow: hidden;
	background-color: #33342e;
}

.mfs-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 480px;
	/* svh, not vh: on mobile vh includes the URL-bar area and overshoots. */
	height: clamp(480px, calc(100svh - 40px), 900px);
	background-color: #33342e;
}

.mfs-hero .hero__bg-video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
	/* Required if an ancestor applies a constrained/cover layout, which caps
	   direct children to the content width. */
	max-width: none;
	margin: 0;
	/* Size container: the video covers the hero's REAL box (cqw/cqh), not the
	   viewport, so it still fills when the hero is taller than the screen. */
	container-type: size;
	background-color: #33342e;
	/* The filename carries a date on purpose. The poster is referenced from CSS
	   by a fixed path, and versioning the stylesheet does NOT bust a nested
	   url() - swapping the file in place leaves every returning visitor on the
	   old image. Rename the files when the artwork changes. */
	background-image: url("../images/morales-hero-poster-2026-08.jpg");
	background-image: image-set(
		url("../images/morales-hero-poster-2026-08.avif") type("image/avif"),
		url("../images/morales-hero-poster-2026-08.webp") type("image/webp"),
		url("../images/morales-hero-poster-2026-08.jpg")  type("image/jpeg")
	);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.mfs-hero .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;
}

/* Scrim: the footage is unpredictably light, and the transparent header's white
   logo and nav sit on top of it. The upper stop is what keeps them legible. */
.mfs-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(0,0,0,.55) 0%,
		rgba(0,0,0,.28) 18%,
		rgba(0,0,0,0)   40%,
		rgba(0,0,0,0)   72%,
		rgba(0,0,0,.35) 100%);
}

/* Pause/play control: WCAG 2.2.2 requires motion over 5s to be pausable. */
.mfs-hero .hero__toggle {
	display: none;
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 3;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	/*
	 * !important is load-bearing. Agrimo ships, at @media (max-width: 575px):
	 *   button:not(.pbmit-nav-menu-toggle):not(.wp-element-button):not(.nav-menu-toggle)
	 *     { padding: 15px 30px; }
	 * Three :not(.class) selectors give it specificity (0,3,1), which beats a
	 * plain class rule, so on phones this button inflated to 62x44 and pushed
	 * its icon outside the circle.
	 */
	padding: 0 !important;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,.45);
	border-radius: 50%;
	background: rgba(0,0,0,.4);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color .15s ease;
}
.mfs-hero .hero__toggle.is-ready { display: inline-flex; }
.mfs-hero .hero__toggle:hover    { background: rgba(0,0,0,.65); }
.mfs-hero .hero__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mfs-hero .hero__toggle .hero__toggle-icon { fill: currentColor; display: block; }
.mfs-hero .hero__toggle .hero__toggle-icon--play  { display: none; }
.mfs-hero .hero__toggle.is-paused .hero__toggle-icon--pause { display: none; }
.mfs-hero .hero__toggle.is-paused .hero__toggle-icon--play  { display: block; }

/* =========================================================================
   PAGE SHELL
   ====================================================================== */
/* Scoped to .mfs-home-blocks (added by front-page.php only when the front page
   really is block content) so a deploy window where the theme is live but the
   page is still Elementor cannot un-constrain that builder's layout. */
body.home.mfs-home-blocks #content.site-content {
	max-width: none;
	width: 100%;
	padding-inline: 0;
	margin-inline: 0;
}
body.home.mfs-home-blocks .site-content-contain,
body.home.mfs-home-blocks .site-content-wrap { overflow-x: clip; }

.mfs-home {
	--mfs-red:    #dc1f01;
	--mfs-red-dk: #911300;
	--mfs-ink:    #16170f;
	--mfs-muted:  #5c5c55;
	--mfs-rule:   #e3e0d4;
	--mfs-cream:  #f8f7f0;
	--mfs-card:   #ffffff;
	--mfs-head:   Signika, "Signika Negative", "Trebuchet MS", sans-serif;
	color: var(--mfs-ink);
}

/* One centred measure per section, created with padding rather than auto
   margins. Core's constrained layout centres every child with margin-inline:auto,
   which pushes anything given a narrower max-width (the H1, the lead) into the
   middle of the page instead of aligning it to the column's left edge. */
.mfs-section {
	--mfs-measure: 1140px;
	padding-block: clamp(3rem, 6vw, 5.5rem);
	padding-inline: max(20px, calc((100% - var(--mfs-measure)) / 2));
}
.mfs-home .mfs-section > * {
	margin-inline: 0;
	max-width: 100%;
	margin-block: 0;
}
.mfs-home .mfs-section > * + * { margin-block-start: 1.25rem; }

/* Alternating band so sections read as distinct without extra chrome. */
.mfs-services,
.mfs-testimonials,
.mfs-locations { background: #fff; }

.mfs-eyebrow {
	font-family: var(--mfs-head);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mfs-red);
	margin: 0 0 .25rem;
}

.mfs-home h1,
.mfs-home h2,
.mfs-home h3 {
	font-family: var(--mfs-head);
	color: var(--mfs-ink);
	line-height: 1.12;
	margin: 0;
}
.mfs-home .mfs-h1 {
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -.01em;
	max-width: 18ch;
}
.mfs-section > h2 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -.005em;
}
.mfs-lead {
	max-width: 62ch;
	color: var(--mfs-muted);
	line-height: 1.6;
}
.mfs-fineprint { color: var(--mfs-muted); }
.mfs-fineprint a { color: var(--mfs-red); }

/* ---------------------------------------------------------------- Buttons */
.mfs-home .wp-block-buttons.mfs-cta { gap: .75rem; margin-top: 1.75rem; }
.mfs-home .wp-block-button__link {
	font-family: var(--mfs-head);
	font-weight: 600;
	font-size: .9375rem;
	letter-spacing: .01em;
	border-radius: 999px;
	padding: .8rem 1.6rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
/* Agrimo ships `.wp-block-button__link { color:#fff !important }`, so these
   overrides need the same weight to land. Scoped to .mfs-home so the rest of
   the site keeps the theme's own button colours. */
.mfs-home .mfs-btn-primary .wp-block-button__link {
	background: var(--mfs-red);
	color: #fff !important;
}
.mfs-home .mfs-btn-primary .wp-block-button__link:hover,
.mfs-home .mfs-btn-primary .wp-block-button__link:focus-visible {
	background: var(--mfs-red-dk);
	color: #fff !important;
}
.mfs-home .mfs-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--mfs-ink) !important;
	box-shadow: inset 0 0 0 1.5px var(--mfs-rule);
}
.mfs-home .mfs-btn-ghost .wp-block-button__link:hover,
.mfs-home .mfs-btn-ghost .wp-block-button__link:focus-visible {
	background: var(--mfs-ink);
	color: #fff !important;
	box-shadow: inset 0 0 0 1.5px var(--mfs-ink);
}
.mfs-home .wp-block-button__link:focus-visible {
	outline: 2px solid var(--mfs-red);
	outline-offset: 2px;
}
.mfs-cta-small { margin-top: 1rem !important; }

/* ------------------------------------------------- Query Loop card grids */
.mfs-home .mfs-card-grid {
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: 2.5rem;
	padding: 0;
	list-style: none;
}
.mfs-home .mfs-card-grid > li {
	display: flex;
	flex-direction: column;
	background: var(--mfs-card);
	border: 1px solid var(--mfs-rule);
	border-radius: 16px;
	overflow: hidden;
}
.mfs-services .mfs-card-grid > li { background: var(--mfs-cream); }

.mfs-home .mfs-card-media { margin: 0; }
.mfs-home .mfs-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mfs-home .mfs-card-title {
	font-size: 1.1875rem;
	font-weight: 600;
	margin: 1.25rem 1.25rem 0;
}
.mfs-home .mfs-card-title a { color: inherit; text-decoration: none; }
.mfs-home .mfs-card-title a:hover { color: var(--mfs-red); }
.mfs-home .mfs-card-excerpt {
	margin: .5rem 1.25rem 1.25rem;
	color: var(--mfs-muted);
	font-size: .9375rem;
	line-height: 1.55;
}
.mfs-home .mfs-card-excerpt p { margin: 0; }
.mfs-home .mfs-card-date {
	margin: 1rem 1.25rem 0;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mfs-muted);
}
.mfs-home .mfs-card-date + .mfs-card-title { margin-top: .35rem; }

/* ------------------------------------------------------------------ Hats */
.mfs-hats { background: var(--mfs-cream); }
.mfs-home .mfs-hat-grid {
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: 2.5rem;
	flex-wrap: wrap;
}
.mfs-home .mfs-hat-grid > .wp-block-column {
	flex-basis: 0;
	min-width: 180px;
	background: #fff;
	border: 1px solid var(--mfs-rule);
	border-radius: 16px;
	padding: 1rem 1rem 1.25rem;
}
.mfs-home .mfs-hat__img { margin: 0 0 .85rem; }
.mfs-home .mfs-hat__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
	background: var(--mfs-cream);
}
.mfs-home .mfs-hat__name {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 .3rem;
}
.mfs-home .mfs-hat__price {
	font-family: var(--mfs-head);
	font-weight: 700;
	color: var(--mfs-red);
	margin: 0 0 .35rem;
}
.mfs-home .mfs-hat__blurb {
	margin: 0;
	color: var(--mfs-muted);
	line-height: 1.5;
}

/* ---------------------------------------------------------- Testimonials */
.mfs-home .mfs-quote-grid { gap: clamp(1rem, 2vw, 1.75rem); margin-top: 2.5rem; flex-wrap: wrap; }
.mfs-home .mfs-quote-grid > .wp-block-column { min-width: 240px; }
.mfs-home .mfs-quote {
	height: 100%;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--mfs-rule);
	border-left: 3px solid var(--mfs-red);
	border-radius: 4px 16px 16px 4px;
	background: var(--mfs-cream);
}
.mfs-home .mfs-quote p {
	margin: 0 0 .9rem;
	font-size: .9375rem;
	line-height: 1.6;
	font-style: normal;
}
.mfs-home .mfs-quote cite {
	font-family: var(--mfs-head);
	font-style: normal;
	font-weight: 600;
	font-size: .875rem;
	color: var(--mfs-ink);
}

/* ------------------------------------------------------------- Locations */
.mfs-home .mfs-store-grid { gap: clamp(1.5rem, 3vw, 3rem); margin-top: 2.5rem; }
.mfs-home .mfs-store-grid > .wp-block-column {
	background: var(--mfs-cream);
	border: 1px solid var(--mfs-rule);
	border-radius: 16px;
	padding: clamp(1.5rem, 3vw, 2rem);
}
.mfs-home .mfs-store__name { font-size: 1.5rem; font-weight: 700; margin: 0 0 .75rem; }
.mfs-home .mfs-store__addr,
.mfs-home .mfs-store__hours { margin: 0 0 .6rem; color: var(--mfs-muted); line-height: 1.6; }
.mfs-home .mfs-store__tel { margin: 0 0 .6rem; font-weight: 600; }
.mfs-home .mfs-store__tel a { color: var(--mfs-red); text-decoration: none; }
.mfs-home .mfs-store__tel a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- Instagram */
.mfs-instagram { background: var(--mfs-cream); }
.mfs-instagram h2 { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }

/* ============================================================== Responsive */
@media (max-width: 900px) {
	.mfs-home .mfs-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 781px) {
	.mfs-home .mfs-hat-grid > .wp-block-column { flex-basis: calc(50% - .75rem) !important; }
}
@media (max-width: 600px) {
	/* No radius/margin override here on purpose: Agrimo scopes the hero's
	   30px corners to @media (min-width:1201px), so below that the slider area
	   is deliberately full-bleed. Matching the theme rather than inventing a
	   rounded mobile hero the original never had. */
	.mfs-hero { min-height: 420px; height: clamp(420px, calc(100svh - 24px), 620px); }
	.mfs-hero .hero__toggle { right: 1rem; bottom: 1rem; }
	.mfs-section { padding-inline: 16px; }
	.mfs-home .mfs-card-grid { grid-template-columns: 1fr !important; }
	.mfs-home .mfs-hat-grid > .wp-block-column { flex-basis: 100% !important; }
}

/* Hat cards link out to the store; the whole card should read as one target. */
.mfs-home .mfs-hat__img a,
.mfs-home .mfs-hat__name a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.mfs-home .mfs-hat__name a:hover { color: var(--mfs-red); }
.mfs-home .mfs-hat-grid > .wp-block-column:hover {
	border-color: var(--mfs-red);
}
.mfs-home .mfs-hat__img a:focus-visible,
.mfs-home .mfs-hat__name a:focus-visible {
	outline: 2px solid var(--mfs-red);
	outline-offset: 3px;
}