/*
 * nav-dropdowns.css — menu affordances extracted from fallback.css section 7
 * (flash gateway sprint-3 row 2). The theme never styled .sub-menu (flat
 * link-columns); this restores the designed dropdowns: hover + focus-within
 * + .efb-open tap/click reveal, absolute panels >=861px, expanded indented
 * lists inside the toggled mobile panel. Deliberately EXCLUDED from the
 * extraction: fallback.css's custom-logo 56px clamp (row-4 parity sets 120px)
 * and its gray ::after marker (home.css owns the navy/lime chevron).
 */

/* hide sub-menus until revealed (base state, all breakpoints) */
.main-navigation ul ul.sub-menu,
.main-navigation ul ul.children {
	display: none; /* overridden below in each breakpoint */
}
/* --- Desktop: real dropdowns --- */
@media (min-width: 861px) {
	.main-navigation ul { flex-wrap: nowrap; } /* 6 top labels + BOOK NOW fit at prod nav sizing; nowrap = single row (rob final nav parity) */
	.main-navigation li { position: relative; }
	.main-navigation a { white-space: normal; }
	.main-navigation ul ul.sub-menu,
	.main-navigation ul ul.children {
		position: absolute;
		z-index: 60;
		width: max-content;        /* hug the widest label — towns stay one-line, panels stay short */
		min-width: 240px;
		max-width: 420px;
		flex-direction: column;
		gap: 0;
		background: #93C93E;
		border: 1px solid #84b438;
		border-radius: var(--radius, 10px);
		box-shadow: 0 4px 14px rgba(20, 50, 36, .25);
		padding: .5rem 0;
		margin: 0;
		/* NO max-height / overflow here (rob): a scroll container would CLIP the
		   absolutely-positioned child flyouts and swallow them into an in-panel
		   scrollbar. Vertical fitting is JS-clamped in main.js (reveal()). */
	}
	/* LEVEL-1: classic drop-down UNDER the item (ash row 2: the sideways sweep
	   at level-1 blocked the announce-row button beside the menu; a drop-down
	   only covers what is directly below it — same as prod). Never covers the
	   band itself. */
	.main-navigation > ul > li > ul.sub-menu,
	.main-navigation > ul > li > ul.children {
		top: 100%;
		left: 0;
		right: auto;
	}
	/* level-1 edge overflow: right-align the panel under the item */
	.main-navigation > ul > li.efb-drop-left > ul.sub-menu,
	.main-navigation > ul > li.efb-drop-left > ul.children {
		left: auto;
		right: 0;
	}
	/* SUB-LEVELS: fly sideways, top-aligned to the parent item (ash i-doc);
	   JS adds .efb-fly-left when the panel would overflow the right edge */
	.main-navigation ul ul ul.sub-menu,
	.main-navigation ul ul ul.children {
		top: 0;
		left: calc(100% + 4px);
		right: auto;
	}
	.main-navigation ul ul li.efb-fly-left > ul.sub-menu,
	.main-navigation ul ul li.efb-fly-left > ul.children {
		left: auto;
		right: calc(100% + 4px);
	}
	.main-navigation ul ul.sub-menu li,
	.main-navigation ul ul.children li { display: block; }
	.main-navigation ul ul a {
		display: block;
		padding: .35rem .85rem;
		font-weight: 400;
		font-size: .88rem;
		white-space: normal;
		color: #fff;
		text-decoration: none;
	}
	/* prod parity (rob final): hover/current = white UNDERLINED on the lime
	   panel — no navy chips */
	.main-navigation ul ul a:hover,
	.main-navigation ul ul a:focus,
	.main-navigation ul ul .current-menu-item > a {
		background: transparent;
		color: #fff;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	/* flyout (sub-sub) panels: darker olive like the original's nested panel */
	.main-navigation ul ul ul.sub-menu,
	.main-navigation ul ul ul.children {
		background: #7aa33c;
		border-color: #6b8f34;
	}
	/* open on hover AND on keyboard focus; .efb-open is the JS tap/click hook */
	.main-navigation li.menu-item-has-children:hover > ul.sub-menu,
	.main-navigation li.menu-item-has-children:focus-within > ul.sub-menu,
	.main-navigation li.efb-open > ul.sub-menu { display: block; }
}
/* --- Mobile: everything inside the toggled panel, indented --- */
@media (max-width: 860px) {
	.main-navigation ul ul.sub-menu,
	.main-navigation ul ul.children { display: none; }
	/* sub-menus render expanded inside the open panel — fully navigable with
	   zero JS; the panel itself scrolls (max-height below) */
	.main-navigation.toggled ul ul.sub-menu,
	.main-navigation.toggled ul ul.children {
		display: block;
		position: static;
		border: 0;
		box-shadow: none;
		padding: 0 0 .25rem 1rem;
		margin: 0;
	}
	.main-navigation.toggled ul li { display: block; }
	.main-navigation.toggled ul ul a {
		font-size: .95rem;
		font-weight: 400;
		color: var(--c-muted, #5b6b63);
		padding: .3rem 0;
		display: block;
	}
 /* mobile: level-3 renders as STATIC indented lists inside the toggled panel
	(like level-2) — the old absolute flyout rules were clipped by the toggled
	panel's own overflow-y:auto scroll container (same trap rob caught on
	desktop). Touch has no hover; indented is the correct mobile shape. */
	/* affordance marker: home.css owns the chevron (navy/lime themed) */
	/* the toggled panel must be scrollable, not clipped by the viewport */
	.main-navigation.toggled {
		max-height: calc(100vh - 70px);
		overflow-y: auto;
	}
}