/* TPS Site Add-ons: Services menu panel (desktop header). Markup: includes/class-tps-mega-menu.php.
   Pixel units on purpose: the theme sets html font-size to 62.5%.
   Tokens match the site: green #1B3B24, leaf #23803A, gold #FFD54F, light #F4F7F2, line #E4E7E1, muted #5B6770, ink #33413A.

   Positioning relies on the header template's own rules (min-width 768px): the header container is
   position:relative and the menu, its list and the items with a dropdown are position:static, so the
   panel is placed against the container: centred, directly under the header. */

/* Hidden by default everywhere: phones, the mobile menu, and any nav menu outside the header.
   The desktop header rule below turns it on. */
.tps-mm { display: none; }

@media (min-width: 768px) {
	#brx-header .bricks-nav-menu > li.tps-has-mm { position: static; }
	/* Bricks' own hover strip (li.open:hover::before) is not needed here: the panel has its own bridge.
	   Left in place it runs from the item's left edge for the full container width, past the window edge. */
	#brx-header .bricks-nav-menu > li.tps-has-mm::before { display: none; }
	/* The plain dropdown is replaced by the panel on desktop. */
	#brx-header .bricks-nav-menu > li.tps-has-mm > .sub-menu { display: none !important; }

	#brx-header .bricks-nav-menu .tps-mm {
		display: block;
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 998;
		box-sizing: border-box;
		width: min(1000px, calc(100vw - 40px));
		margin: 2px 0 0;
		padding: 0;
		background: #fff;
		border: 1px solid #E4E7E1;
		border-radius: 16px;
		box-shadow: 0 24px 60px rgba(20, 48, 31, .18);
		color: #33413A;
		font-family: "Source Sans 3", sans-serif;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.45;
		letter-spacing: 0;
		text-align: left;
		text-transform: none;
		white-space: normal;
		cursor: default;
		/* Closed. The delays are a grace period: the panel stays up for a moment after the pointer leaves
		   "Services", so the pointer can travel down or across to it. */
		visibility: hidden;
		opacity: 0;
		transform: translate(-50%, 6px);
		transition: opacity .16s ease .22s, transform .16s ease .22s, visibility 0s linear .38s;
	}
	#brx-header .bricks-nav-menu .tps-mm *,
	#brx-header .bricks-nav-menu .tps-mm *::before,
	#brx-header .bricks-nav-menu .tps-mm *::after { box-sizing: border-box; }

	/* Short windows: the content scrolls inside the panel. A child does the scrolling so the bridge is not clipped. */
	#brx-header .tps-mm .tps-mm__scroll {
		max-height: calc(100vh - 78px - var(--wp-admin--admin-bar--height, 0px));
		max-height: calc(100dvh - 78px - var(--wp-admin--admin-bar--height, 0px));
		padding: 22px 24px 24px;
		overflow-y: auto;
		border-radius: 15px;
	}

	/* Open: pointer on the item or the panel, or the arrow button pressed (Bricks adds .open). */
	#brx-header .bricks-nav-menu > li.tps-has-mm:hover .tps-mm,
	#brx-header .bricks-nav-menu > li.tps-has-mm.open .tps-mm,
	#brx-header .bricks-nav-menu > li.tps-has-mm:not(.menu-item-has-children):focus-within .tps-mm {
		visibility: visible;
		opacity: 1;
		transform: translate(-50%, 0);
		transition: opacity .16s ease .06s, transform .16s ease .06s, visibility 0s linear .06s;
	}
	/* Opened from the keyboard (focus is on the arrow button): no hover-intent delay, so Tab can move
	   straight in, and above a neighbour's dropdown that the resting pointer may have opened. */
	#brx-header .bricks-nav-menu > li.tps-has-mm.open:focus-within .tps-mm {
		transition-delay: 0s, 0s, 0s;
		z-index: 999;
	}
	/* Keyboard focus is inside the panel: keep it open even if the pointer has left. */
	#brx-header .bricks-nav-menu > li.tps-has-mm .tps-mm:has(:focus-visible) {
		visibility: visible;
		opacity: 1;
		transform: translate(-50%, 0);
	}
	/* Another menu item is hovered: close at once so two panels never overlap. Not while the list has
	   .tps-mm-guard (tps-mega-menu.js sets it while the pointer is on "Services" or its panel and for
	   300ms after it leaves): an item that is only crossed on the way to the panel must not take over.
	   Not for a panel opened from the keyboard (.open stays until it is closed). */
	#brx-header .bricks-nav-menu:not(.tps-mm-guard):has(> li:not(.tps-has-mm):hover) > li.tps-has-mm:not(.open) .tps-mm {
		visibility: hidden;
		opacity: 0;
		transition: none;
	}
	#brx-header .bricks-nav-menu.tps-mm-guard > li:not(.tps-has-mm):not(:focus-within) > .sub-menu { display: none !important; }
	/* Dismissed with the Escape key or a touch outside (tps-mega-menu.js). */
	#brx-header .bricks-nav-menu > li.tps-mm-off .tps-mm {
		visibility: hidden !important;
		opacity: 0 !important;
		transition: none !important;
	}

	/* Invisible bridge over the gap between the menu row and the panel. */
	#brx-header .bricks-nav-menu .tps-mm::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 22px;
	}
	/* The bridge is as wide as the panel and reaches up into the header row: keep the logo and the phone
	   button above it so they stay clickable while the panel is open. */
	#brx-header .brxe-logo,
	#brx-header .brxe-button { position: relative; z-index: 1000; }

	#brx-header .tps-mm p { margin: 0; padding: 0; }
	#brx-header .tps-mm a { text-decoration: none; }

	#brx-header .tps-mm .tps-mm__eyebrow {
		margin: 0 0 16px;
		font-size: 12.5px;
		font-weight: 700;
		letter-spacing: 1.2px;
		line-height: 1.3;
		text-transform: uppercase;
		color: #23803A;
	}

	/* ---------- Plan cards ---------- */
	#brx-header .tps-mm .tps-mm__cards {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
	#brx-header .tps-mm .tps-mm__card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
		padding: 20px 20px 18px;
		background: #fff;
		border: 1px solid #E4E7E1;
		border-radius: 14px;
	}
	#brx-header .tps-mm .tps-mm__card--featured {
		padding: 19px 19px 17px;
		border: 2px solid #1B3B24;
	}
	#brx-header .tps-mm .tps-mm__ribbon {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 5px 12px;
		border-radius: 999px;
		background: #FFD54F;
		color: #14301F;
		box-shadow: 0 4px 12px rgba(20, 48, 31, .18);
		font-family: Lexend, sans-serif;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .08em;
		line-height: 1.2;
		text-transform: uppercase;
		white-space: nowrap;
	}
	#brx-header .tps-mm .tps-mm__name {
		font-family: Lexend, sans-serif;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.2;
		color: #1B3B24;
	}
	#brx-header .tps-mm .tps-mm__price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px 8px;
		margin-top: 4px;
	}
	#brx-header .tps-mm .tps-mm__amount {
		font-family: Lexend, sans-serif;
		font-size: 32px;
		font-weight: 700;
		letter-spacing: -.5px;
		line-height: 1;
		color: #1B3B24;
	}
	#brx-header .tps-mm .tps-mm__per { font-size: 15px; line-height: 1.3; color: #5B6770; }
	#brx-header .tps-mm .tps-mm__alt { font-size: 13px; line-height: 1.4; color: #5B6770; }
	#brx-header .tps-mm .tps-mm__desc {
		flex: 1 1 auto;
		margin-top: 8px;
		font-size: 14.5px;
		line-height: 1.45;
		color: #33413A;
	}
	#brx-header .tps-mm .tps-mm__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 14px;
		margin-top: 14px;
	}
	#brx-header .tps-mm a.tps-mm__learn {
		display: inline-flex;
		align-items: center;
		width: auto;
		min-height: 40px;
		padding: 0;
		background: transparent;
		color: #1B3B24;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	#brx-header .tps-mm a.tps-mm__learn:hover { color: #23803A; }
	#brx-header .tps-mm a.tps-mm__book {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-height: 40px;
		padding: 9px 18px;
		background: #FFD54F;
		border: 1.5px solid #FFD54F;
		border-radius: 8px;
		color: #1B3B24;
		font-family: Lexend, sans-serif;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
		transition: background .15s, border-color .15s;
	}
	#brx-header .tps-mm a.tps-mm__book:hover { background: #ffe07a; border-color: #ffe07a; color: #1B3B24; }

	/* ---------- Residential / Commercial ---------- */
	#brx-header .tps-mm .tps-mm__paths {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: 16px;
	}
	#brx-header .tps-mm a.tps-mm__path {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: auto;
		min-width: 0;
		padding: 14px 18px;
		background: #F4F7F2;
		border: 1px solid #E4E7E1;
		border-radius: 12px;
		color: #1B3B24;
		transition: background .15s, border-color .15s, color .15s;
	}
	#brx-header .tps-mm a.tps-mm__path::after {
		content: "\203A";
		flex: 0 0 auto;
		font-size: 22px;
		line-height: 1;
		color: #1B3B24;
	}
	#brx-header .tps-mm .tps-mm__path-text { display: block; min-width: 0; }
	#brx-header .tps-mm .tps-mm__path-t {
		display: block;
		font-family: Lexend, sans-serif;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
	}
	#brx-header .tps-mm .tps-mm__path-d { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: #5B6770; }
	#brx-header .tps-mm a.tps-mm__path:hover,
	#brx-header .tps-mm a.tps-mm__path:focus-visible { background: #1B3B24; border-color: #1B3B24; color: #fff; }
	#brx-header .tps-mm a.tps-mm__path:hover .tps-mm__path-d,
	#brx-header .tps-mm a.tps-mm__path:focus-visible .tps-mm__path-d { color: rgba(255, 255, 255, .82); }
	#brx-header .tps-mm a.tps-mm__path:hover::after,
	#brx-header .tps-mm a.tps-mm__path:focus-visible::after { color: #FFD54F; }

	#brx-header .tps-mm a:focus-visible { outline: 3px solid #1B3B24; outline-offset: 2px; }
	#brx-header .tps-mm a.tps-mm__path:focus-visible { outline-color: #FFD54F; outline-offset: -4px; }
}

/* Narrow desktop and tablet widths: tighter cards. */
@media (min-width: 768px) and (max-width: 959px) {
	#brx-header .tps-mm .tps-mm__scroll { padding: 18px 16px 18px; }
	#brx-header .tps-mm .tps-mm__cards,
	#brx-header .tps-mm .tps-mm__paths { gap: 12px; }
	#brx-header .tps-mm .tps-mm__card { padding: 18px 14px 14px; }
	#brx-header .tps-mm .tps-mm__card--featured { padding: 17px 13px 13px; }
	#brx-header .tps-mm .tps-mm__amount { font-size: 28px; }
	#brx-header .tps-mm .tps-mm__desc { font-size: 14px; }
	#brx-header .tps-mm a.tps-mm__book { padding: 9px 14px; }
	#brx-header .tps-mm a.tps-mm__path { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	#brx-header .bricks-nav-menu .tps-mm,
	#brx-header .bricks-nav-menu > li.tps-has-mm:hover .tps-mm,
	#brx-header .bricks-nav-menu > li.tps-has-mm.open .tps-mm { transform: translate(-50%, 0); transition-property: opacity, visibility; }
}