/*
 * MulchPros Classic — header + mega-menu system.
 * Values ported 1:1 from the Divi generator spec (2026-07-29 extract).
 * Owner-final rules in force: 150ms settled-hover OPEN (is-open via JS;
 * close + keyboard stay instant),
 * 150ms settled-hover SWAP + .mp-active persistence (mp-header.js),
 * labels never wrap, panels flush under the stripe (the 30px-offset
 * hover-gap problem cannot exist when the panel is the trigger's child),
 * red stripe + announcement hidden ≤980, one small-card skin everywhere.
 */

/* ── Shell: sticky, prototype spec ──────────────────────────────── */
.mp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 2px 12px rgba(0, 20, 40, 0.28);
	background: var(--blue);
}
body.admin-bar .mp-header { top: 32px; }

/* ── Announcement bar slot (desktop only; [mp_announcement_bar] owns
      the markup, the copy and the hash-keyed dismiss cookie) ──────── */
.mp-announce-slot .mp-announce p { font-size: 12.5px; }
@media (max-width: 980px) {
	.mp-announce-slot { display: none; } /* owner: mobile gets a modal later */
}

/* ── Blue utility bar — desktop row ─────────────────────────────── */
.mp-utility {
	display: flex;
	align-items: center;
	column-gap: 18px;
	row-gap: 10px;
	padding: 12px 24px;
	background: var(--blue);
}
.mp-utility__logo { flex: 0 0 auto; line-height: 0; }
.mp-utility__logo img { width: 196px; height: auto; }
/* 530px, CENTERED between logo and the right cluster (measured on
   divi5-sample: search left 415 / width 529 at 1920w — the Divi row's
   1_4·1_2·1_4 split floats it mid-gap; owner report 2026-07-29). The
   two auto margins split the free space with the cluster's own auto. */
.mp-utility__search { flex: 0 1 530px; min-width: 200px; margin-left: auto; margin-right: auto; }
.mp-utility__cluster {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: 12px;
	row-gap: 8px;
	margin-left: auto;
	flex-wrap: wrap;
}
@media (min-width: 1200px) {
	.mp-utility__cluster { flex-wrap: nowrap; } /* toggle + chip share one line */
}
.mp-utility__contact { margin: 0; font-size: 14px; line-height: 1.7em; color: var(--white); white-space: nowrap; }
.mp-utility__contact a { color: var(--white); text-decoration: none; }
.mp-utility__contact a:hover { color: var(--white); opacity: 0.85; }

/* On-blue widget skins (ported from the child theme's header context) */
.mp-header .mp-fulfill { border-color: rgba(255, 255, 255, 0.4); color: var(--white); }
.mp-header .mp-fulfill__btn { color: var(--white); font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 11.5px; }
.mp-header .mp-fulfill__btn.is-on { background: var(--white); color: var(--blue); }
.mp-header .mp-fulfill__btn:hover:not(.is-on) { background: var(--blue-hover); }
.mp-header .mp-addr { display: inline-flex; position: relative; min-width: 0; }
.mp-header .mp-addr__chip span,
.mp-header .mp-addr__chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.mp-header .mp-addr__chip { border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-sm); background: transparent; color: var(--white); height: 42px; padding: 0 12px; cursor: pointer; text-align: left; }
.mp-header .mp-addr__chip:hover { background: var(--blue-hover); }
.mp-header .mp-addr__kicker { display: block; font-size: 10.5px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; }
.mp-header .mp-addr__main { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.mp-header .mp-addr__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(340px, calc(100vw - 24px)); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-dialog); padding: 18px; color: var(--ink); }
.mp-header .mp-search input[type="search"] { border-color: transparent; }

/* ── Mobile bar + delivery band (≤980) ──────────────────────────── */
.mp-mobilebar { display: none; }
.mp-mobileband { display: none; }
@media (max-width: 980px) {
	.mp-utility { display: none; }
	.mp-mobilebar {
		display: grid;
		grid-template-columns: 44px auto 44px;
		column-gap: 8px;
		align-items: center;
		padding: 5px 12px;
		background: var(--blue);
	}
	.mp-mobilebar__burger {
		justify-self: start;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 40px;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}
	/* Pure-CSS hamburger (fa-bars is not in the icon subset). */
	.mp-burger,
	.mp-burger::before,
	.mp-burger::after {
		display: block;
		width: 22px;
		height: 2.5px;
		border-radius: 2px;
		background: var(--white);
	}
	.mp-burger { position: relative; }
	.mp-burger::before,
	.mp-burger::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.mp-burger::before { top: -7px; }
	.mp-burger::after { top: 7px; }
	.mp-mobilebar__logo { justify-self: center; line-height: 0; }
	.mp-mobilebar__logo img { width: 180px; height: auto; }
	.mp-mobilebar__cart { justify-self: end; }
	/* The compact band is the mobile stand-in for the red stripe. */
	.mp-mobileband {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 2px 12px;
		background: var(--blue-hover);
		border-bottom: 3px solid var(--red);
	}
	.mp-header .mp-mobileband .mp-fulfill { padding: 1px; }
	.mp-header .mp-mobileband .mp-fulfill__btn { font-size: 10.5px; height: 24px; padding: 0 8px; }
	.mp-header .mp-mobileband .mp-addr { flex: 1; min-width: 0; }
	.mp-header .mp-mobileband .mp-addr__chip { display: flex; align-items: center; gap: 6px; width: 100%; max-width: none; border: 0; height: 24px; padding: 0 2px; }
	.mp-header .mp-mobileband .mp-addr__chip::before { content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; }
	.mp-header .mp-mobileband .mp-addr__chip::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; margin-left: auto; opacity: 0.8; }
	.mp-header .mp-mobileband .mp-addr__kicker { display: inline; font-size: 12.5px; text-transform: none; letter-spacing: 0; opacity: 1; overflow: visible; max-width: none; flex-shrink: 0; }
	.mp-header .mp-mobileband .mp-addr__main { display: inline; font-size: 13px; max-width: none; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Red nav stripe (desktop only) ──────────────────────────────── */
.mp-nav { background: var(--red); }
.mp-nav__list {
	display: flex;
	align-items: flex-end; /* load-bearing: stretch grew links to pill height */
	/* 30px between items — Divi's group flex gap, measured on
	   divi5-sample (owner spacing report 2026-07-29). */
	column-gap: 30px;
	height: 40px;
	margin: 0;
	padding: 0 0 0 28px;
	list-style: none;
}
.mp-nav__item {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 40px;
	margin: 0;
}
.mp-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	/* NO caps tracking here — measured on divi5-sample: the nav link
	   modules render letter-spacing normal; adding the brand 6% read
	   as a different, heavier menu (owner report 2026-07-29). The
	   quote pill DOES carry 0.06em (generator-explicit). */
	letter-spacing: normal;
	font-size: 16px;
	color: var(--white);
	text-decoration: none;
	white-space: nowrap;
	padding: 8px clamp(13px, 1.8vw, 24px) 5px;
}
/* Hover paints the ITEM, not the link (owner 2026-07-31): the li is the
   bar's full 40px, so the dark red runs top to bottom — and because the
   panel is the li's CHILD, :hover holds while the shopper browses the
   open panel. The CTA pill item is exempt (orange pill, no red wash). */
.mp-nav__item:not(.mp-nav__item--cta):hover,
.mp-nav__item--haspanel:focus-within,
.mp-nav__item--haspanel.is-open { background: var(--red-hover); }
.mp-nav__link:hover { color: var(--white); }
/* 981–1180: compress the caps so the single row FITS — never scroll the
   list (an overflow-x container would clip the panels). */
@media (max-width: 1180px) and (min-width: 981px) {
	.mp-nav__link { font-size: 12px; padding-left: 9px; padding-right: 9px; }
}
.mp-nav__item--cta { margin-left: auto; padding-right: 28px; }
.mp-nav__pill {
	display: inline-block;
	background: var(--orange);
	color: var(--blue);
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: 13px;
	text-decoration: none;
	border-radius: 4px;
	padding: 7px 14px;
	margin-bottom: 5px;
	white-space: nowrap;
}
.mp-nav__pill:hover { background: var(--orange-hover); color: var(--blue); }
@media (max-width: 980px) {
	.mp-nav { display: none; }
}

/* ── Chevrons — pure CSS carets (no icon-font dependency), colored by
   currentColor so the owner's red-on-hover/active rule is automatic. */
.mp-chevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px); /* down, optically centered on the caps */
	flex: none;
}
.mp-chevron--right { transform: rotate(-45deg); }

/* ── Panels — nested in their trigger <li>, flush under the stripe ── */
.mp-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	background: var(--white);
	border-bottom: 3px solid var(--red);
	box-shadow: var(--shadow-dialog);
}
/* OPEN waits for settled hover (owner 2026-07-31): mp-header.js stamps
   .is-open after the same 150ms the swap links use — a brush across the
   bar never flashes a panel. Keyboard focus opens instantly. */
.mp-nav__item--haspanel.is-open > .mp-panel,
.mp-nav__item--haspanel:focus-within > .mp-panel { display: block; }
.mp-panel--lm { width: min(90vw, calc(100vw - 56px)); padding: 10px 0; }
.mp-panel--dlv { width: min(900px, 70vw); padding: 14px 18px 12px; }
.mp-panel--svc { width: min(880px, 72vw); padding: 14px 18px 12px; }

.mp-panel__cols { display: flex; align-items: flex-start; }
.mp-panel--lm .mp-panel__cols { width: 95%; margin: 0 auto; }
/* 14px row-gap = the old child theme's column rhythm, measured on
   divi5-sample (owner spacing report 2026-07-29). */
.mp-panel__leftcol { flex: 0 0 25%; padding-right: 15px; display: flex; flex-direction: column; row-gap: 14px; }
.mp-panel--dlv .mp-panel__leftcol { flex: 0 0 29%; }
.mp-panel__midcol { flex: 1 1 auto; min-width: 0; }
.mp-panel__rightcol { flex: 0 0 25%; padding-left: 12px; }

/* Left links — the 16px ink-2 rows with the hover slide. .mp-active =
   the FULL hover look, persistent while the state shows (owner-final
   2026-07-24). currentColor turns the chevron red with the text. */
.mp-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--font-headline);
	font-weight: 400;
	font-size: 16px;
	color: var(--ink-2);
	text-decoration: none;
	padding: 6px 10px 4px;
	border-radius: 5px;
	transition: padding-left 0.15s ease, background-color 0.15s ease;
}
.mp-panel__link .mp-chevron--right { width: 8px; height: 8px; }
.mp-panel__link:hover,
.mp-panel__link.mp-active {
	background: var(--panel);
	color: var(--red);
	font-weight: 700;
	padding-left: 25px;
}
.mp-panel__link--head {
	font-size: 20px;
	font-variant: all-small-caps;
	margin-left: -15px;
}
.mp-panel__link--head:hover,
.mp-panel__link--head.mp-active { padding-left: 25px; }

/* Swap states: default ships .is-on in markup — nothing to initialize,
   nothing to flash. */
.mp-panel__state { display: none; }
.mp-panel__state.is-on { display: block; }
/* 12px: the in-panel rhythm the caps-label margins are built on. */
.mp-panel__rightcol .mp-panel__state.is-on { display: flex; flex-direction: column; gap: 12px; }

/* Panel caps headings — 12.5px blue caps; the owner's label rhythm:
   30px above, snug below, first label tucks to the column head. */
.mp-panel-caps {
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: 12.5px;
	color: var(--blue);
	margin: 30px 0 12px;
	padding: 0;
}
.mp-panel__state > .mp-panel-caps:first-child { margin-top: 10px; }
/* Caps headings that link (owner 2026-07-30: existing labels become nav to
   the collection pages — no new panel elements). Same caps look at rest;
   the red + underline on hover is the panel's standard link affordance. */
.mp-panel-caps__link { color: inherit; text-decoration: none; }
.mp-panel-caps__link:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* Right-rail cards (spec CSS verbatim, as classes) */
.mp-feature-card { display: block; border-radius: 8px; text-decoration: none; }
.mp-feature-card--blue { background: var(--blue); padding: 14px 16px; }
.mp-feature-card--white { background: var(--white); border: 1px solid var(--border); padding: 12px 16px; }
.mp-feature-card__kicker {
	display: block;
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: 10.5px;
	margin-bottom: 3px;
}
.mp-feature-card--blue .mp-feature-card__kicker { color: var(--orange); }
.mp-feature-card--white .mp-feature-card__kicker { color: var(--red); }
.mp-feature-card b { font-family: var(--font-headline); font-weight: 700; }
.mp-feature-card--blue b { color: var(--white); font-size: 15.5px; }
.mp-feature-card--white b { color: var(--ink); font-size: 14.5px; }
.mp-feature-card__copy { display: block; font-size: 12px; margin-top: 4px; line-height: 1.45; }
.mp-feature-card--blue .mp-feature-card__copy { color: rgba(255, 255, 255, 0.85); }
.mp-feature-card--white .mp-feature-card__copy { color: var(--ink-2); }

.mp-tip { background: var(--panel); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; color: var(--ink-2); margin: 0; }
.mp-tip b {
	display: block;
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: 10.5px;
	color: var(--blue);
	margin-bottom: 3px;
}

.mp-panel__viewall {
	display: inline-block;
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: 14px;
	color: var(--blue);
	text-decoration: none;
	padding: 6px 0 4px;
}
.mp-panel__viewall:hover { color: var(--red); }
.mp-panel__viewall--sm { font-size: 13px; padding: 8px 0 2px; }

/* We Deliver! extras */
.mp-towns { columns: 2; column-gap: 24px; font-size: 13.5px; line-height: 2.1; margin: 0; }
.mp-towns a { display: block; color: var(--ink); text-decoration: none; }
.mp-towns a:hover { color: var(--red); }
.mp-towns__all { font-size: 12.5px; margin: 10px 0 0; }
.mp-rateline { font-size: 12px; color: var(--ink-2); margin: 8px 0 0; }

/* ── Mobile nav panel — flat list, scroll-capped when open ──────── */
.mp-mobile-panel {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%; /* never 100vw — that includes the scrollbar gutter */
	z-index: 60;
	background: var(--white);
	border-bottom: 3px solid var(--red);
	padding: 8px 12px 10px;
	max-height: 72vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: var(--shadow-dialog);
}
.mp-mobile-panel[hidden] { display: none; }
@media (min-width: 981px) {
	.mp-mobile-panel { display: none; }
}
.mp-mobile-panel .mp-panel-caps { margin: 18px 0 0; }
.mp-mobile-panel .mp-panel-caps:first-child { margin-top: 0; }
.mp-mobile-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--font-headline);
	font-weight: 400;
	font-size: 16px;
	color: var(--ink-2);
	text-decoration: none;
	padding: 10px;
	border-bottom: 1px solid var(--panel);
}
.mp-mobile-panel__link:hover { color: var(--red); }
.mp-mobile-panel__link .mp-chevron--right { width: 8px; height: 8px; }