/* =============================================================================
   Mueller's Home Sections — home-sections.css
   Version: 1.0.2

   Only classes prefixed with mrp-home-sections- are styled here.
   No generic element selectors (section, div, ul, li, img, a, h2, p, etc.).
   ============================================================================= */

/* ── Custom properties ──────────────────────────────────────────────────────── */
:root {
	--mrp-home-sections-font:            -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--mrp-home-sections-black:           #0d0d0d;
	--mrp-home-sections-dark:            #1a1a1a;
	--mrp-home-sections-mid:             #444444;
	--mrp-home-sections-muted:           #666666;
	--mrp-home-sections-border:          rgba(0, 0, 0, 0.10);
	--mrp-home-sections-white:           #ffffff;
	--mrp-home-sections-inner-max:       1600px;
	--mrp-home-sections-section-pad:     clamp(4.5rem, 8vw, 6.25rem);
	--mrp-home-sections-brands-height:   140px;
	--mrp-home-sections-logo-max-h:      70px;
	--mrp-home-sections-logo-max-w:      180px;
	--mrp-home-sections-ticker-dur:      36s;
}

/* ── Screen-reader utility ──────────────────────────────────────────────────── */
.mrp-home-sections-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Full-width breakout ────────────────────────────────────────────────────── */
/*
   Both sections use the same technique as muellers-home-hero to escape any
   narrow WordPress content column the shortcode is placed inside.
*/
.mrp-home-sections-brands,
.mrp-home-sections-showroom {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PARTNER BRAND LOGO STRIP
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Brands section wrapper ─────────────────────────────────────────────────── */
.mrp-home-sections-brands {
	background: var(--mrp-home-sections-white);
	border-top: 1px solid var(--mrp-home-sections-border);
	height: var(--mrp-home-sections-brands-height);
	overflow: hidden;
}

/* ── Viewport: masks overflow; defines the visible window for the ticker ─────── */
.mrp-home-sections-brands__viewport {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* ── Track: houses both logo lists side-by-side; the animated element ────────── */
/*
   width:max-content ensures the track's own width equals the true sum of both
   <ul> elements regardless of viewport size.
   min-width:100% prevents the track from collapsing when logo content is
   narrower than the viewport — guaranteeing translateX(-50%) always shifts
   by exactly one full list width.
   Both lists are independently given min-width:100vw (see below) so they are
   always at least as wide as the viewport; together they always fill 200vw,
   keeping the loop seamless on every desktop breakpoint.
*/
.mrp-home-sections-brands__track {
	display: flex;
	width: max-content;
	min-width: 100%;
	height: 100%;
	animation:
		mrp-home-sections-ticker
		var(--mrp-home-sections-ticker-dur)
		linear
		infinite;
	will-change: transform;
}

/* Pause when the pointer is over the strip */
.mrp-home-sections-brands__viewport:hover .mrp-home-sections-brands__track {
	animation-play-state: paused;
}

/* Pause when keyboard focus lands anywhere inside the strip */
.mrp-home-sections-brands__viewport:focus-within .mrp-home-sections-brands__track {
	animation-play-state: paused;
}

/* ── Logo lists ─────────────────────────────────────────────────────────────── */
/*
   min-width:100vw guarantees each list fills at least the full viewport width
   even when only a few logos are present, keeping logos spaced across the
   full strip and ensuring translateX(-50%) always equals one complete pass.
   Both the primary and duplicate lists share these rules so they are
   always identical in rendered width.
   box-sizing:border-box keeps min-width accurate if padding is ever added.
*/
.mrp-home-sections-brands__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 100%;
	flex-shrink: 0;      /* prevents compression; keeps each list at natural width */
	min-width: 100vw;
	box-sizing: border-box;
}

/* ── Logo items ─────────────────────────────────────────────────────────────── */
.mrp-home-sections-brands__item {
	list-style: none;
	margin: 0;
	padding: 0 clamp(2rem, 4vw, 4rem);
	display: flex;
	align-items: center;
	height: 100%;
}

/* ── Logo link / non-interactive span ───────────────────────────────────────── */
.mrp-home-sections-brands__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;    /* minimum 44px touch target (WCAG 2.5.5) */
	min-height: 44px;
	text-decoration: none;
}

.mrp-home-sections-brands__link:focus-visible {
	outline: 2px solid var(--mrp-home-sections-black);
	outline-offset: 4px;
	border-radius: 2px;
}

.mrp-home-sections-brands__link--nolink {
	cursor: default;
	pointer-events: none;
}

/* ── Logo image ─────────────────────────────────────────────────────────────── */
/*
   Natural aspect ratio is always preserved.
   Logos are NOT cropped into squares.
   width:auto + height:auto with max-width/max-height scales proportionally.
   object-fit:contain is a defensive rule for any browser that might constrain
   the box differently.
*/
.mrp-home-sections-brands__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--mrp-home-sections-logo-max-w);
	max-height: var(--mrp-home-sections-logo-max-h);
	object-fit: contain;
}

/* ── Infinite ticker keyframes ──────────────────────────────────────────────── */
@keyframes mrp-home-sections-ticker {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ── Reduced motion: disable animation, allow manual scroll ─────────────────── */
@media (prefers-reduced-motion: reduce) {
	.mrp-home-sections-brands {
		height: auto;
		min-height: var(--mrp-home-sections-brands-height);
		overflow: visible;
	}

	.mrp-home-sections-brands__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
	}

	.mrp-home-sections-brands__track {
		animation: none;
		flex-wrap: nowrap;
		width: max-content;
	}

	/* Hide the decorative duplicate — no loop needed without animation */
	.mrp-home-sections-brands__list--dupe {
		display: none;
	}

	.mrp-home-sections-brands__item {
		scroll-snap-align: start;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SHOWROOM / MAP SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Showroom section wrapper ───────────────────────────────────────────────── */
.mrp-home-sections-showroom {
	background: var(--mrp-home-sections-white);
	border-top: 1px solid var(--mrp-home-sections-border);
}

/* ── Inner constrained container ────────────────────────────────────────────── */
.mrp-home-sections-showroom__inner {
	max-width: var(--mrp-home-sections-inner-max);
	margin: 0 auto;
	padding: var(--mrp-home-sections-section-pad) clamp(1.5rem, 5vw, 4rem);
	display: grid;
	grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.35fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* ── Details column ─────────────────────────────────────────────────────────── */
.mrp-home-sections-showroom__details {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* ── Eyebrow ────────────────────────────────────────────────────────────────── */
.mrp-home-sections-showroom__eyebrow {
	font-family: var(--mrp-home-sections-font);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mrp-home-sections-muted);
	margin: 0;
}

/* ── Heading ────────────────────────────────────────────────────────────────── */
.mrp-home-sections-showroom__heading {
	font-family: var(--mrp-home-sections-font);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--mrp-home-sections-black);
	margin: 0;
	line-height: 1.1;
}

/* ── Address ────────────────────────────────────────────────────────────────── */
.mrp-home-sections-showroom__address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-family: var(--mrp-home-sections-font);
	font-size: 1rem;
	color: var(--mrp-home-sections-dark);
	line-height: 1.55;
	margin: 0;
}

.mrp-home-sections-showroom__biz-name {
	font-weight: 700;
	color: var(--mrp-home-sections-black);
}

.mrp-home-sections-showroom__street,
.mrp-home-sections-showroom__city {
	display: block;
	font-weight: 400;
}

/* ── Hours ──────────────────────────────────────────────────────────────────── */
.mrp-home-sections-showroom__hours {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--mrp-home-sections-font);
	font-size: 0.9375rem;
	color: var(--mrp-home-sections-mid);
	line-height: 1.7;
}

.mrp-home-sections-showroom__hours li {
	margin: 0;
	padding: 0;
}

/* ── Phone ──────────────────────────────────────────────────────────────────── */
.mrp-home-sections-showroom__phone {
	margin: 0;
	font-family: var(--mrp-home-sections-font);
}

.mrp-home-sections-showroom__phone-link {
	font-size: 1.3125rem;
	font-weight: 600;
	color: var(--mrp-home-sections-black);
	text-decoration: none;
	letter-spacing: 0.01em;
}

.mrp-home-sections-showroom__phone-link:hover {
	text-decoration: underline;
}

.mrp-home-sections-showroom__phone-link:focus-visible {
	outline: 2px solid var(--mrp-home-sections-black);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Action buttons row ─────────────────────────────────────────────────────── */
.mrp-home-sections-showroom__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

/* Base button ── */
.mrp-home-sections-showroom__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 2rem;
	font-family: var(--mrp-home-sections-font);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	box-sizing: border-box;  /* width:100% on mobile includes padding and border */
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Directions: black fill, white text */
.mrp-home-sections-showroom__btn--primary {
	background: var(--mrp-home-sections-black);
	color: var(--mrp-home-sections-white);
	border: 2px solid var(--mrp-home-sections-black);
}

.mrp-home-sections-showroom__btn--primary:hover {
	background: var(--mrp-home-sections-dark);
	border-color: var(--mrp-home-sections-dark);
	color: var(--mrp-home-sections-white);
}

.mrp-home-sections-showroom__btn--primary:focus-visible {
	outline: 2px solid var(--mrp-home-sections-black);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Call Showroom: outlined (transparent fill, black border) */
.mrp-home-sections-showroom__btn--outline {
	background: transparent;
	color: var(--mrp-home-sections-black);
	border: 2px solid var(--mrp-home-sections-black);
}

.mrp-home-sections-showroom__btn--outline:hover {
	background: var(--mrp-home-sections-black);
	color: var(--mrp-home-sections-white);
}

.mrp-home-sections-showroom__btn--outline:focus-visible {
	outline: 2px solid var(--mrp-home-sections-black);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Map column ─────────────────────────────────────────────────────────────── */
.mrp-home-sections-showroom__map {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* ── Responsive iframe container ────────────────────────────────────────────── */
/*
   aspect-ratio reserves space before the iframe loads (prevents layout shift).
   min-height ensures a usable size on narrow viewports.
   The absolutely-positioned iframe fills the container exactly.
*/
.mrp-home-sections-showroom__map-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 440px;
	background: #f0f0f0;  /* visible placeholder while iframe loads */
}

.mrp-home-sections-showroom__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ── View Larger Map link ────────────────────────────────────────────────────── */
.mrp-home-sections-showroom__map-link {
	font-family: var(--mrp-home-sections-font);
	font-size: 0.8125rem;
	color: var(--mrp-home-sections-muted);
	text-decoration: underline;
	text-align: right;
}

.mrp-home-sections-showroom__map-link:hover {
	color: var(--mrp-home-sections-dark);
}

.mrp-home-sections-showroom__map-link:focus-visible {
	outline: 2px solid var(--mrp-home-sections-black);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE — 768px and below
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 48rem) {

	/* ── Neutralise the 100vw full-width breakout ──────────────────────────────── */
	/*
	   On desktop both sections use width:100vw + negative margins to escape a
	   narrow content column. On mobile that can produce horizontal overflow.
	   Replace with width:100% so both sections are bound by their container.
	*/
	.mrp-home-sections-brands,
	.mrp-home-sections-showroom {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* ── Logo strip: disable ticker, enable manual horizontal scroll ─────────── */
	.mrp-home-sections-brands {
		height: auto;
		min-height: var(--mrp-home-sections-brands-height);
		overflow: visible;
	}

	.mrp-home-sections-brands__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		/* Horizontal scrolling is contained within this viewport.
		   The page itself does not scroll horizontally. */
	}

	.mrp-home-sections-brands__track {
		animation: none;
		flex-wrap: nowrap;
		width: max-content;
	}

	/* Hide duplicate list — no loop needed without animation */
	.mrp-home-sections-brands__list--dupe {
		display: none;
	}

	.mrp-home-sections-brands__item {
		scroll-snap-align: start;
		padding: 0 1.5rem;
	}

	/* ── Showroom: box-model safety ──────────────────────────────────────────── */
	.mrp-home-sections-showroom,
	.mrp-home-sections-showroom__inner,
	.mrp-home-sections-showroom__details,
	.mrp-home-sections-showroom__actions,
	.mrp-home-sections-showroom__map,
	.mrp-home-sections-showroom__map-frame {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* ── Showroom: stack details above map ───────────────────────────────────── */
	.mrp-home-sections-showroom__inner {
		grid-template-columns: 1fr;
		width: 100%;
		padding-top: clamp(3rem, 6vw, 4rem);
		padding-bottom: clamp(3rem, 6vw, 4rem);
		padding-inline: 1rem;
		margin-inline: 0;
	}

	/* Compact map on mobile */
	.mrp-home-sections-showroom__map-frame {
		aspect-ratio: 4 / 3;
		min-height: 260px;
	}

	/* View Larger Map: allow wrapping so the link is never clipped */
	.mrp-home-sections-showroom__map-link {
		overflow-wrap: anywhere;
	}

	/* Stack buttons full-width on narrow screens */
	.mrp-home-sections-showroom__actions {
		flex-direction: column;
	}

	.mrp-home-sections-showroom__btn {
		width: 100%;
	}
}