/* ==========================================================================
   PropertyBazaar — mega menu  (v1.38, Sprint 40)

   Its own file, deliberately.

   main.css is ~5,000 lines of appended sprint output and declares .pb-mega
   FOUR separate times. Every fix written into the end of that file has to
   win an argument with three earlier versions of itself, and any correction
   also has to survive whatever cached copy of a 200KB stylesheet the browser
   is still holding. A new filename cannot be cached and has nothing above it
   to override.

   This file is the single authority for the mega menu. The declarations
   still sitting in main.css are dead — they lose on load order — and are
   left alone only because other headers reference some of their sub-classes.

   LAYOUT MODEL
   Panels are NOT anchored to their own <li>. They share one position,
   aligned to the site container and clamped to the viewport, so a panel
   under the first trigger and a panel under the last land in exactly the
   same place. That is what fixes the outer menus running off-screen, and
   it is why the menu feels stable as you move across it.
   ========================================================================== */

/* The positioning context for every panel. .pb-mega__item is static below,
   so the panel resolves against this element and mega.js can compute its
   offset from one predictable origin. Without this the panel would resolve
   against the sticky header and land in the wrong place. */
.pb-mega { position: relative; flex: 1 1 auto; min-width: 0; margin: 0 14px; }

.pb-mega__list {
	display: flex; align-items: center; justify-content: center;
	gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap;
}

/* The <li> is only a hover target. Positioning happens against the nav. */
.pb-mega__item { position: static; }

.pb-mega__trigger {
	display: inline-flex; align-items: center; gap: 5px;
	background: transparent; border: 0; cursor: pointer;
	color: rgba(255, 255, 255, 0.92);
	font-family: inherit; font-size: 13.5px; font-weight: 600;
	padding: 10px 13px; border-radius: 8px; white-space: nowrap;
	transition: background .15s, color .15s;
}
.pb-mega__trigger:hover,
.pb-mega__item.is-open > .pb-mega__trigger {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}
.pb-mega__caret { font-size: 9px; opacity: .7; transition: transform .18s; }
.pb-mega__item.is-open .pb-mega__caret { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.pb-mega__panel {
	position: absolute;
	top: 100%;
	left: 0;                      /* JS replaces this with a clamped offset */
	width: min(1120px, calc(100vw - 32px));
	margin-top: 12px;
	background: #fff;
	border: 1px solid #E4EAEA;
	border-radius: 14px;
	padding: 26px 30px 28px;
	box-shadow: 0 26px 60px rgba(14, 31, 38, 0.20);
	z-index: 300;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .16s ease, visibility .16s ease, transform .16s ease;

	/* A tall panel scrolls inside itself rather than running past the fold.
	   The For Buyers panel has five columns of links and would otherwise be
	   taller than the window. */
	max-height: calc(100vh - 108px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.pb-mega__item.is-open .pb-mega__panel {
	opacity: 1; visibility: visible; transform: translateY(0);
}

/* --wide is now meaningless: every panel shares one width. Kept so the
   existing markup does not have to change. */
.pb-mega__panel--wide { width: min(1120px, calc(100vw - 32px)); }

/* Bridges the 12px gap so a pointer travelling from trigger to panel does
   not pass over dead space and dismiss it. */
.pb-mega__item.is-open::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 14px;
	z-index: 299;
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */
.pb-mega__grid {
	display: grid;
	gap: 4px 30px;
	align-items: start;
}
.pb-mega__grid--1 { grid-template-columns: minmax(0, 1fr); }
.pb-mega__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-mega__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-mega__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-mega__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 24px; }

.pb-mega__col { min-width: 0; }

.pb-mega__col h4 {
	margin: 0 0 10px;
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8B979C;
	font-weight: 800;
	padding-bottom: 9px;
	border-bottom: 1px solid #EEF2F2;
}

.pb-mega__col a {
	display: block;
	padding: 6px 8px 6px 0;
	margin-left: -8px;
	padding-left: 8px;
	border-radius: 6px;
	color: #2B3F47;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: color .12s, background .12s;
}
.pb-mega__col a:hover {
	color: #1F6B6B;
	background: #F2F7F7;
}
.pb-mega__col hr { border: 0; border-top: 1px solid #EEF2F2; margin: 10px 0; }

.pb-mega__accent { color: #E8873C; font-weight: 700; }
.pb-mega__accent:hover { color: #C26A25; background: #FDF0E5; }

.pb-mega__soon { color: #B9C2C6; cursor: not-allowed; font-style: italic; }
.pb-mega__soon:hover { background: transparent; color: #B9C2C6; }
.pb-mega__soon em {
	color: #8B979C; background: #F4F6F6; padding: 2px 6px; border-radius: 3px;
	font-size: 10px; margin-left: 6px; font-style: normal;
}

.pb-mega__lg { padding: 11px 12px; border-radius: 9px; margin-left: 0; }
.pb-mega__lg:hover { background: #F2F7F7; }
.pb-mega__lg strong { display: block; font-size: 14px; color: #0E1F26; margin-bottom: 2px; font-weight: 700; }
.pb-mega__lg span { display: block; font-size: 11.5px; color: #8B979C; font-weight: 500; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
	.pb-mega { margin: 0 8px; }
	.pb-mega__trigger { font-size: 12.5px; padding: 9px 9px; }
	.pb-mega__grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
	.pb-mega__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.pb-mega__grid--5,
	.pb-mega__grid--4,
	.pb-mega__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
	.pb-mega__panel { padding: 20px 22px 22px; }
}
@media (max-width: 900px) {
	.pb-mega { display: none; }
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.pb-mega__trigger:focus-visible,
.pb-mega__col a:focus-visible {
	outline: 2px solid #E8873C;
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.pb-mega__panel { transition: none; transform: none; }
	.pb-mega__item.is-open .pb-mega__panel { transform: none; }
}

/* Thin scrollbar inside a tall panel, so the overflow reads as intentional. */
.pb-mega__panel::-webkit-scrollbar { width: 8px; }
.pb-mega__panel::-webkit-scrollbar-thumb { background: #DDE4E4; border-radius: 4px; }
.pb-mega__panel::-webkit-scrollbar-track { background: transparent; }