/*
 * HushStreet "Neighborhoods" mega menu -- layout/typography overrides on
 * top of Kadence Pro's native mega-menu module (enabled via postmeta on
 * menu item 3350: _kad_mega_menu, _kad_mega_menu_width=content,
 * _kad_mega_menu_columns=4, _kad_mega_menu_layout=equal -- plus the
 * sitewide `kadence_pro_theme_config` option's "mega_menu" feature flag).
 *
 * _kad_mega_menu_width was originally "container". Changed to "content"
 * 2026-10-16 after real Playwright-driven clicks (not the iframe/forced-
 * class shortcut used in the original build-and-verify pass) surfaced a
 * genuine defect: Kadence's own "container" width mode forces
 * `position:static` on the LI, which knocked the separate dropdown
 * toggle BUTTON's `position:absolute; right:9px` off its intended
 * reference (the LI) onto the next positioned ancestor (the whole
 * `ul.menu`), landing it on top of the About/Contact links at common
 * desktop widths (confirmed at 1280px: clicking the toggle actually hit
 * Contact). "content" width mode achieves the same visually-contained,
 * full-row-width panel via Kadence's own JS sizing instead of
 * `position:static`, so the LI keeps a normal positioning context and
 * the toggle button stays correctly placed. See
 * tools/playwright-nav/README.md for the full before/after geometry.
 *
 * Kadence's own mega-menu CSS lays the sub-menu out as CSS Grid, which
 * flows items row-major (across, then down). The brief requires reading
 * alphabetically DOWN each column, then across, so this file keeps CSS
 * Grid but switches it to `grid-auto-flow: column`, which flows that way
 * natively. (An earlier version of this file used CSS multi-column
 * instead -- that was reverted: multi-column's height-driven column
 * *balancing* silently spills extra columns off the right edge of the
 * viewport once a fixed/max height can't fit the content, which is
 * exactly the "short viewport" case this panel has to handle safely.
 * Grid with an explicit row count doesn't have that failure mode.)
 *
 * `grid-auto-flow: column` needs an explicit row count to know where to
 * wrap into the next column -- the companion PHP file computes that
 * count from the live "Neighborhoods" submenu's actual item count (never
 * hardcoded) and prints it as a small inline <style> block after this
 * stylesheet. The `repeat(10, auto)` / `repeat(13, auto)` values below
 * are just a same-math fallback for the rare case that inline block
 * doesn't load (matches today's 39 neighborhoods at 4/3 columns); they
 * self-correct automatically once the inline block is present.
 *
 * Everything else (hover/click/keyboard open-close, positioning, dark
 * panel background+shadow) is left to the native module; only
 * display/column mechanics, the map-link treatment, and link
 * typography/density are touched here.
 *
 * Scoped entirely to #menu-item-3350 (the "Neighborhoods" item) so it
 * cannot affect the Development/Spotlights dropdowns or any other menu.
 * Source of truth: wordpress/mu-plugins/assets/hushstreet-neighborhoods-megamenu.css
 * in the hushstreet git repo -- do not hand-edit the deployed copy.
 */

@media screen and (min-width: 1025px) {
	/* The visible dropdown chevron is a decorative <svg>, wrapped in two
	   more Kadence spans (.kadence-svg-iconset, .dropdown-nav-toggle),
	   rendered inside the "Neighborhoods" <a> text -- sitting almost
	   exactly on top of the separate, real toggle <button> underneath it
	   (confirmed directly: their boxes overlap by design, since the
	   button IS positioned to sit where the chevron appears). Without
	   this, a click/tap landing on the chevron hits whichever of those
	   nested wrapper spans is topmost instead of the button beneath it,
	   and the menu never opens. Blanket-disabling pointer-events on every
	   descendant of the link (rather than chasing each wrapper) is the
	   robust fix; the <a> itself is untouched and still fully clickable,
	   and everything disabled here is already aria-hidden, so this has
	   no accessibility effect -- it only lets the click pass through to
	   the real control. */
	#menu-item-3350 > a * {
		pointer-events: none;
	}

	/* Kadence's own base dropdown CSS swaps which element owns pointer
	   events depending on open/closed state: while CLOSED, the toggle
	   <button> is pointer-events:all and the <a> is pointer-events:none
	   (so a tap anywhere opens it); once OPENED (".menu-item--toggled-on"
	   added), that flips -- the <button> becomes pointer-events:none and
	   the <a> becomes pointer-events:auto. The <a>'s click handler only
	   navigates to its own #neighborhoods anchor; it does not also close
	   the menu, and tapping elsewhere on the page doesn't close it
	   either. Net effect, confirmed directly: a touch user who opens this
	   menu by tapping has no tap gesture that closes it again -- not the
	   same spot, not elsewhere on the page. This is Kadence's generic
	   dropdown-toggle behavior (not introduced by this file), but
	   "Neighborhoods" is the only item on this site with a toggle button
	   to expose it, and it falls inside this mega-menu's own navigation
	   scope, so it's fixed here, narrowly: force the toggle button to
	   stay tappable in both states, restoring a plain, predictable
	   tap-to-open/tap-again-to-close toggle. This does not touch any
	   other theme dropdown. */
	#menu-item-3350 > .dropdown-nav-special-toggle {
		pointer-events: auto !important;
	}

	#menu-item-3350.kadence-menu-mega-enabled > .sub-menu {
		display: grid !important;
		grid-auto-flow: column;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(10, auto);
		column-gap: 28px;
		row-gap: 2px;
		padding: 18px 22px;
		max-height: min(75vh, 620px);
		overflow-y: auto;
		overflow-x: hidden;
	}

	#menu-item-3350.kadence-menu-mega-enabled > .sub-menu > li > a {
		font-family: "AR One Sans", sans-serif;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.5;
		text-transform: none;
		letter-spacing: normal;
		padding: 7px 10px;
		border-radius: 4px;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	#menu-item-3350.kadence-menu-mega-enabled > .sub-menu > li > a:hover,
	#menu-item-3350.kadence-menu-mega-enabled > .sub-menu > li > a:focus {
		background-color: rgba(255, 255, 255, 0.08);
		color: var(--global-palette1, #ff2c00);
	}

	#menu-item-3350.kadence-menu-mega-enabled > .sub-menu > li > a:focus-visible {
		outline: 2px solid var(--global-palette1, #ff2c00);
		outline-offset: -2px;
	}

	/* "View neighborhood map" -- explicitly placed across every column in
	   row 1 so it sits as a clearly distinguished full-width strip at the
	   top of the panel; the auto-placed neighborhood links below it start
	   from row 2 automatically (Grid skips the occupied row-1 cells). */
	#menu-item-3350.kadence-menu-mega-enabled > .sub-menu > li.hs-map-link {
		grid-row: 1;
		grid-column: 1 / -1;
		margin-bottom: 14px;
		padding-bottom: 12px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	#menu-item-3350.kadence-menu-mega-enabled > .sub-menu > li.hs-map-link > a {
		display: inline-block;
		font-size: 15px;
		font-weight: 600;
		color: var(--global-palette1, #ff2c00);
		padding: 7px 10px 7px 10px;
	}

	#menu-item-3350.kadence-menu-mega-enabled > .sub-menu > li.hs-map-link > a:hover,
	#menu-item-3350.kadence-menu-mega-enabled > .sub-menu > li.hs-map-link > a:focus {
		background-color: rgba(255, 255, 255, 0.08);
		color: var(--global-palette1, #ff2c00);
	}
}

/* Narrower desktop / small-laptop widths: step down to 3 columns before
   4 columns gets cramped, still above the theme's 1024px mobile cutoff.
   Row count fallback here assumes today's 39 neighborhoods at 3 columns;
   the inline <style> block (see PHP) overrides it with the live count. */
@media screen and (min-width: 1025px) and (max-width: 1300px) {
	#menu-item-3350.kadence-menu-mega-enabled > .sub-menu {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(13, auto);
	}
}

/*
 * Mobile/tablet (<=1024px, the theme's own drawer-navigation breakpoint):
 * the mega-grid module is disabled entirely for this item via the
 * `kadence_mobile_allow_mega_support` filter (see the companion PHP file),
 * so the drawer renders its normal accordion submenu. These rules only
 * style the synthetic alphabetical letter-group toggles that same PHP
 * inserts, plus the prominent map link, within that existing accordion --
 * they do not change how any other drawer submenu looks or behaves.
 */
@media screen and (max-width: 1024px) {
	.mobile-navigation .hs-map-link > a {
		font-weight: 600;
		color: var(--global-palette1, #ff2c00);
	}

	.mobile-navigation .hs-letter-group > a {
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		font-size: 0.85em;
		opacity: 0.85;
	}
}