/* =============================================================================
   Theme Manager v2: shared static stylesheet
   ONE copy, served from /i4a/admin/design2/runtime/ and linked by every
   generated theme header AFTER the theme's own styles_template.css (the
   position the menu block had inside that file). Nothing here depends on
   theme settings; per-theme rules (colors, sizes, per-widget overrides)
   stay in styles_template.css. A change here is live on deploy for every
   theme, no republish. Formerly CssGenerator.generateMenuWidgetStyles.
   ============================================================================= */

/* ==========================================================================
   Menu widget base styles. Most knobs are exposed via CSS custom properties
   so per-widget overrides in generateWidgetCss can change one variable to
   shift many rules. Hover/active interaction styles + sticky behavior are
   class-based hooks emitted on the .i4a-menu-widget root.
   ========================================================================== */
.i4a-menu-widget {
	--menu-mega-cols: 3;
	--menu-link-size: 13px;
	--menu-link-weight: 400;
	--menu-link-transform: none;
	--menu-link-spacing: 0;
	--menu-item-gap: 0.5rem;
	--menu-item-vpad: 0.5rem;
	--menu-divider-color: transparent;
	--menu-divider-width: 0;
	--menu-mega-radius: 0;
	--menu-mega-shadow: 0 2px 4px rgba(0,0,0,0.08);
	--menu-mega-col-divider: 0;
	--menu-mega-bg: #fff;
}

/* Top-level + dropdown items — match each other for consistent reading.
   Both reference the same custom properties so the whole nav scales together. */
.i4a-menu-widget .nav-link {
	font-size: var(--menu-link-size, 13px);
	font-weight: var(--menu-link-weight, 400);
	text-transform: var(--menu-link-transform, none);
	letter-spacing: var(--menu-link-spacing, 0);
	/* Keep each top-level label on a single line - a multi-word item must
	   never break mid-label when the row gets tight. If the whole row runs
	   out of room, items wrap as complete units via the flex-wrap rule below
	   (graceful for any item count/length). */
	white-space: nowrap;
}
.i4a-menu-widget .dropdown-item {
	font-size: var(--menu-link-size, 13px);
	font-weight: var(--menu-link-weight, 400);
	text-transform: var(--menu-link-transform, none);
	letter-spacing: var(--menu-link-spacing, 0);
	padding: 0.5rem 1.25rem;
}

/* Item spacing + vertical dividers (top-level only). Dividers live on the
   left edge of each item EXCEPT the first, drawn via border-left. The gap
   variable controls the breathing room. */
.i4a-menu-widget .navbar-nav > .nav-item {
	padding-left: var(--menu-item-gap, 0.5rem);
	padding-right: var(--menu-item-gap, 0.5rem);
}
.i4a-menu-widget .navbar-nav > .nav-item + .nav-item {
	border-left: var(--menu-divider-width, 0) solid var(--menu-divider-color, transparent);
}

/* When the menu sits in a tall header column, navbar flex would stretch each
   nav-item to the full column height - then a dropdown anchored at top:100%
   drops far below its trigger. Centering the items while EXPANDED keeps them
   at content height so dropdowns open directly beneath the link.
   Expanded is signalled by the navbar-expand{-bp} class being present - the
   fit-based collapse script adds/strips it at ANY viewport width, so pivoting
   on a media query would leak this centering into a hamburger collapsed at
   desktop widths (items rendered centered instead of full-width). Class
   presence, not viewport, is the state of truth. */
.i4a-menu-widget[class*='navbar-expand'] .navbar-nav > .nav-item {
	align-self: center;
}
/* EXCEPTION - mega items stretch to the full bar height. Their panel anchors
   to the NAVBAR bottom (not the item), so a content-height item in a tall bar
   (e.g. 80px logo) leaves a dead hover gap between link and panel: crossing it
   drops :hover and the panel snaps shut (felt like click-to-hold). Stretching
   is safe for mega precisely because the panel doesn't anchor to the item. */
.i4a-menu-widget[class*='navbar-expand'] .navbar-nav > .nav-item.mega-menu-item {
	align-self: stretch;
	display: flex;
	align-items: center;
}
/* Overflow safety valve: with non-breaking labels above, a nav that's too
   wide for its row wraps complete items onto a second line instead of
   clipping off-screen or squeezing a label into two lines. row-gap keeps
   the wrapped line from touching the first. Harmless when everything fits
   on one row. Expanded-only for the same reason as above. */
.i4a-menu-widget[class*='navbar-expand'] .navbar-nav {
	flex-wrap: wrap;
	row-gap: 0.25rem;
}

/* Mega menu list-style — applies at all viewports (desktop grid rule sets these
   too, but mobile previously fell back to browser defaults: list-style: disc
   and padding-left: 40px). Explicit base rule ensures no bullets on any size. */
.menu-mega .mega-menu-list,
.menu-mega .mega-menu-list ul,
.menu-mega .mega-menu-list ul.dropdown-menu {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/* ----- Hover style hooks. One class on the widget root, picks one path. ----- */

/* Default 'bg' hover style. All hoverable items (top-level nav-link,
   level-2 heading anchors, level-3 items in mega panels, plain
   dropdown items) get a subtle neutral wash so the hover state reads
   even with no brand color set. Dropdown items take the theme's link
   hover color, as the underline and border styles do; plain inherit
   picked up the panel's body text, so hovered items went near-black
   instead of the hover color the admin set. It also overrides the
   brand-color rule's contrast-text (white-on-light = invisible). The CSS custom property
   lets a future per-widget override replace the default without
   touching this rule. The 6-8% black levels read on white-to-light bgs
   and roughly disappear on near-black bgs; admins with dark navbars
   can override --menu-hover-bg-color to a white-alpha equivalent. */
.menu-hover-bg .nav-link:hover,
.menu-hover-bg .nav-link:focus {
	background-color: var(--menu-hover-bg-color, rgba(0,0,0,0.08));
}
.menu-hover-bg .dropdown-item:hover,
.menu-hover-bg .dropdown-item:focus {
	background-color: var(--menu-hover-bg-color, rgba(0,0,0,0.06));
	color: var(--theme-link-hover-color, var(--theme-link-color, inherit));
}

/* Underline style — drawn as bottom border on hover. Hides default Bootstrap
   bg highlight on dropdown items so the underline is the only signal.
   Restores link text color (via CSS variable from generateColorStyles)
   because the brand .dropdown-item:hover rule flips color to contrast-text;
   without restoring, dark contrast text on dark hover would have been fine,
   but light contrast text on transparent (white) bg = invisible. */
.menu-hover-underline .nav-link:hover,
.menu-hover-underline .nav-link:focus {
	background-color: transparent !important;
	color: var(--theme-link-hover-color, var(--theme-link-color, inherit)) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}
.menu-hover-underline .dropdown-item:hover,
.menu-hover-underline .dropdown-item:focus {
	background-color: transparent !important;
	color: var(--theme-link-hover-color, var(--theme-link-color, inherit)) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.menu-hover-underline .dropdown-item:hover a,
.menu-hover-underline .dropdown-item:focus a {
	color: var(--theme-link-hover-color, var(--theme-link-color, inherit)) !important;
}

/* Bottom-border style — solid 2px line drawn under hovered top-level item. */
.menu-hover-border .nav-link {
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
}
.menu-hover-border .nav-link:hover,
.menu-hover-border .nav-link:focus {
	background-color: transparent !important;
	color: var(--theme-link-hover-color, var(--theme-link-color, inherit)) !important;
	border-bottom-color: currentColor;
	/* Raise the link above the dropdown panel (Bootstrap z-index 1000):
	   the panel anchors flush to the link bottom (hover-gap fix), which
	   painted OVER the 2px underline on items with submenus. Drawn on
	   top it reads as the divider between item and panel. */
	position: relative;
	z-index: 1001;
}
.menu-hover-border .dropdown-item:hover,
.menu-hover-border .dropdown-item:focus {
	background-color: transparent !important;
	color: var(--theme-link-hover-color, var(--theme-link-color, inherit)) !important;
}
.menu-hover-border .dropdown-item:hover a,
.menu-hover-border .dropdown-item:focus a {
	color: var(--theme-link-hover-color, var(--theme-link-color, inherit)) !important;
}

/* No hover effect — color change only (subtle, link-color → link-hover-color). */
.menu-hover-none .nav-link:hover,
.menu-hover-none .nav-link:focus,
.menu-hover-none .dropdown-item:hover,
.menu-hover-none .dropdown-item:focus {
	background-color: transparent !important;
	color: var(--theme-link-hover-color, var(--theme-link-color, inherit)) !important;
}
.menu-hover-none .dropdown-item:hover a,
.menu-hover-none .dropdown-item:focus a {
	color: var(--theme-link-hover-color, var(--theme-link-color, inherit)) !important;
}

/* ----- Active page indicator hooks ----- */

/* 'match' uses the same look as hover (default — handled by brand overrides). */

/* 'border' — bottom border under the current page link, even at rest. */
.menu-active-border .nav-link.active,
.menu-active-border .nav-item.active > .nav-link {
	background-color: transparent !important;
	border-bottom: 2px solid currentColor;
	margin-bottom: -2px;
}
/* Same indicator inside the panels: the active-trail items at level 2
   and 3 get an edge bar instead of an underline (a full-width underline
   in a vertical list reads as a divider). Inset shadow, not a border, so
   nothing shifts and no padding rule has to be matched per layout. */
.menu-active-border .dropdown-item.active {
	background-color: transparent !important;
	box-shadow: inset 3px 0 0 currentColor;
}

/* 'bold' — current page renders in bold, no background fill. */
.menu-active-bold .nav-link.active,
.menu-active-bold .nav-item.active > .nav-link,
.menu-active-bold .dropdown-item.active {
	background-color: transparent !important;
	font-weight: 700;
}

/* 'none' — no active indicator (rarely used, but offered). No font-weight
   here on purpose: the link's own rest rule carries the widget's Font
   Weight setting, and 'inherit' would pull the parent LI's normal weight
   instead, un-bolding only the current page. */
.menu-active-none .nav-link.active,
.menu-active-none .nav-item.active > .nav-link,
.menu-active-none .dropdown-item.active {
	background-color: transparent !important;
	border-bottom: none;
}

/* The brand's .dropdown-item.active rule pairs its fill with white text.
   The three indicators above clear the fill, which would leave white text
   on a light panel. Give the item its siblings' color back (the theme link
   color, the same value the brand .dropdown-item rule uses) at exactly the
   brand rule's weight, (0,2,0) via :where(), so this wins only by source
   order against that rule and still loses to every intentional color:
   row link colors, the collapsed overlay/drawer rules and the widget's
   own !important panel colors. Browsers without :where() drop the rule
   and behave as before. */
:where(.menu-active-border, .menu-active-bold, .menu-active-none) .dropdown-item.active {
	color: var(--theme-link-color, inherit);
}

/* Seam guard between the header and the hero. Header rows inherit the
   theme's line-height, and a value like 1.7 on 16px makes each row a
   fraction of a pixel tall; at fractional zoom ratios (Windows 125% plus
   browser zoom, etc.) the header's bottom edge and the hero's top edge then
   snap to different device pixels and a hairline of the page background
   shows between two dark blocks. Letting the hero overlap the header by one
   CSS pixel removes the gap without moving anything visible. General
   sibling (~), not adjacent (+): the generated hero's own <style> block sits
   between the header and the hero in the markup. */
.site-header ~ .hero-section,
.site-header ~ .hero-fixed-width-wrapper {
	margin-top: -1px;
}

/* ----- Sticky on scroll ----- */
/* Horizontal menus only — vertical never emits this class (the nav's
   containing block, its widget wrapper div, is exactly its own height, so
   sticky would have zero travel; sidebars use the layout's sticky_sidebar
   setting instead). In a header row this rule alone can't work either —
   the ROW carries the sticky there (.header-row-sticky below). */
.menu-sticky-on {
	position: sticky;
	top: 0;
	z-index: 1020;
}

/* Header row set to stick to the top (the row's own setting, or a menu
   widget inside it with the older Stick-to-top checkbox). position:sticky
   cannot work anywhere in the header: every candidate element is confined
   to a parent exactly its own height (nav in its column, row in the
   site-header wrapper) — zero travel. Instead, a tiny runtime script
   emitted with the generated header switches the row to fixed once the
   page scrolls past it, growing a spacer to prevent the content jump.
   In boxed mode the row keeps its own max-width + auto margins, so
   left/right 0 recenters it identically while fixed.

   top and z-index here are the single-row case and the no-JS fallback.
   When more than one row is sticky they stack, and the runtime writes each
   row's own top (the height of the bars above it) and z-index (descending,
   so an upper bar's dropdown paints over the bar below) inline. */
.header-row-sticky.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
}

/* ==========================================================================
   MEGA MENU
   Designed per association best-practice (ANA / APNA / ANE patterns):
   bold section headings with subtle dividers, generous space between
   heading and items, regular-weight items beneath. Full-width panel below
   the trigger on desktop/tablet; stacked accordion on mobile.
   ========================================================================== */

/* ----- Base structure (all viewports) -------------------------------------- */

/* Outer list — container for the level-2 categories */
.menu-mega .mega-menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Inner list — container for level-3 items. Override Bootstrap's
   .dropdown-menu defaults (display:none) and the open/close transition rules
   (opacity:0; visibility:hidden) so level-3 always renders inline within
   the mega panel. Applies at all viewports including mobile. */
.menu-mega .mega-menu-list ul,
.menu-mega .mega-menu-list ul.dropdown-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	position: static;
	float: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	min-width: 0;
	transition: none;
	transform: none;
}

/* Section heading (level-2 anchor — the bold title above each column).
   Direct-child combinator targets ONLY level-2; level-3 anchors are inside
   nested ULs and won't match this rule. Generous margin-bottom so the
   heading and its items feel like distinct sections, not slammed together.
   Note: applies to ALL level-2 items including those without children.
   The empty-section-header look for childless items is intentional - admins
   should design their nav so panels have consistent shape. The per-panel
   mega-to-dropdown fallback (in menu_widget.cfm) handles the all-leaves case. */
.menu-mega .mega-menu-list > .dropdown-submenu > a:first-child {
	display: block;
	font-weight: var(--menu-mega-heading-weight, 700);
	font-size: 0.95rem;
	text-transform: var(--menu-link-transform, none);
	letter-spacing: var(--menu-link-spacing, 0);
	color: inherit;
	/* Compact heading box: the hover highlight paints the padding box, so
	   generous padding-bottom read as a tall clunky pill with the text in
	   the top corner. Keep the divider tight under the text; the breathing
	   room to the list below lives in margin (never painted by hover). */
	padding: 0.35rem 0.75rem;
	margin: 0 0 0.5rem 0;
	border-bottom: var(--menu-mega-divider-width, 1px) solid var(--menu-mega-divider-color, rgba(0,0,0,0.08));
}
/* Shallow branches (mega-always, B10): a childless level-2 entry is a plain
   link laid out as a grid column - normal link weight, no heading divider,
   so it reads as a link rather than an empty section heading. */
.menu-mega .mega-menu-list > .dropdown-submenu:not(.has-submenu) > a:first-child {
	font-weight: var(--menu-link-weight, 400);
	border-bottom: 0;
	padding: 0.25rem 0.75rem;
	margin: 0;
}
/* Compact consistent rows for every mega-panel entry: the hover highlight
   hugs the text with a small even inset all around (headings above carry
   the same 0.75rem sides; divider spans the full column width). */
.menu-mega .mega-menu-list .dropdown-item {
	padding: 0.4rem 0.75rem;
}

/* Level-3 items — regular-weight links beneath the section heading.
   Vertical breathing room between consecutive items. */
.menu-mega .mega-menu-list ul .dropdown-item {
	display: block;
	/* Side insets match the heading's 0.75rem so hover pills wrap the text
	   evenly instead of hugging it flush-left (B12 — this rule outranks the
	   generic mega-item inset rule above via its extra `ul`). */
	padding: 0.4rem 0.75rem;
	font-weight: var(--menu-mega-item-weight, 400);
	line-height: 1.4;
}

/* Mega panel entries wrap inside their column — Bootstrap's .dropdown-item
   nowrap default pushes a long label past the panel edge instead (the
   panel's grid cells don't clip). Right for ordinary dropdowns, which
   auto-size wider; wrong inside the fixed-column grid. Items and section
   headings alike. */
.menu-mega .mega-menu-list .dropdown-item,
.menu-mega .mega-menu-list > .dropdown-submenu > a:first-child {
	white-space: normal;
	overflow-wrap: break-word;
}
/* Grid items default to min-width:auto — let columns actually shrink so a
   long word wraps instead of widening its column past the 1fr track. */
.menu-mega .mega-menu-list > .dropdown-submenu {
	min-width: 0;
}

/* ----- Desktop & tablet (>=768px): full-width grid panel ------------------- */

@media (min-width: 768px) {
	/* Trigger LI must be position:static so the absolute-positioned mega
	   panel spans the full navbar width instead of the trigger's width. */
	.menu-mega .mega-menu-item {
		position: static;
	}
	/* Anchor the panel to the NAVBAR itself. Without this, the panel's
	   containing block was whatever ancestor happened to be positioned
	   (usually the header row), so top:100% landed below the row's own
	   padding - a dead gap that looked bad on colored bars and, past the
	   12px hover bridge, dropped :hover so the panel snapped shut before
	   the cursor could reach it (felt like click-to-hold). Safe for the
	   regular dropdown items: their LIs carry Bootstrap's .dropdown
	   position:relative and never anchor to the navbar. */
	.i4a-menu-widget.menu-mega {
		position: relative;
	}
	.menu-mega .mega-menu-item > .mega-menu-panel {
		margin-top: 0;
	}
	/* Continuous hover territory across the full bar height. Bootstrap
	   centers .navbar-collapse inside a tall bar (e.g. 80px logo), so the
	   links live in a short centered band; the nav-owned space above/below
	   it is hover-dead - crossing it dropped :hover, the panel started its
	   fade-out, and the header row's padding flashed through as a white
	   strip. Stretch the collapse + list for mega menus; the mega items
	   are already flex containers that keep their labels centered. */
	.i4a-menu-widget.menu-mega[class*='navbar-expand'] .navbar-collapse {
		align-self: stretch;
	}
	.i4a-menu-widget.menu-mega[class*='navbar-expand'] .navbar-collapse .navbar-nav {
		height: 100%;
	}
	/* Panel — generous padding for breathing room. Bg/shadow/radius via
	   custom properties so per-widget overrides can tweak. */
	.menu-mega .mega-menu-panel {
		left: 0;
		right: 0;
		width: 100%;
		padding: 1.5rem 2rem;
		background-color: var(--menu-mega-bg, #fff);
		border-radius: var(--menu-mega-radius, 0);
		box-shadow: var(--menu-mega-shadow, 0 2px 4px rgba(0,0,0,0.08));
	}
	/* Multi-column grid of categories */
	.menu-mega .mega-menu-list {
		display: grid;
		grid-template-columns: repeat(var(--menu-mega-cols, 3), 1fr);
		gap: 1.5rem 2rem;
	}
	/* Optional vertical divider between columns */
	.menu-mega.menu-mega-cols-divided .mega-menu-list > .dropdown-submenu + .dropdown-submenu {
		border-left: 1px solid rgba(0,0,0,0.08);
		padding-left: 1.5rem;
	}
}

/* ----- Collapsed hamburger: stacked accordion ------------------------------ */

/* COLLAPSED is signalled by the navbar-expand{-bp} class being ABSENT: the
   fit-based collapse script strips it whenever the items do not fit on one
   line, at ANY viewport width (a narrow desktop window collapses too). The
   old @media (max-width: 767.98px) scoping left the hamburger looking like
   the desktop menu (floating card dropdowns) when it collapsed at >=768px.
   :not([class*='navbar-expand']) matches exactly the collapsed state; during
   the fit-measurement tick the script temporarily re-adds the class, so
   measuring happens against desktop styling as intended. */

/* No border or shadow on any dropdown panel while hamburger-collapsed
   (mega panel, basic top-level dropdown, nested submenu). The panels are
   inline-static inside the navbar-collapse stack and shouldn't read as
   separate floating cards - the navbar's own bg provides the visual
   container. */
.i4a-menu-widget:not([class*='navbar-expand']) .dropdown-menu {
	border: 0;
	box-shadow: none;
}
/* Mega panel: inline-static + bg + modest padding (chrome stripped above) */
.menu-mega:not([class*='navbar-expand']) .mega-menu-panel {
	position: static;
	float: none;
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: var(--menu-mega-bg, #fff);
}
/* Stack categories vertically with breathing room between sections */
.menu-mega:not([class*='navbar-expand']) .mega-menu-list {
	display: block;
}
.menu-mega:not([class*='navbar-expand']) .mega-menu-list > .dropdown-submenu + .dropdown-submenu {
	margin-top: 1rem;
}
/* Section heading - sized DOWN to the regular link size (desktop 0.95rem
   read as oversized next to 13px items in the hamburger, B13) and padded
   IDENTICALLY to the item rows: the collapse polish rules give every row
   flex + min-height 44px, so a heading with its own padding scheme became
   a tall mismatched hover box. Bold weight keeps the hierarchy readable. */
.menu-mega:not([class*='navbar-expand']) .mega-menu-list > .dropdown-submenu > a:first-child {
	font-size: var(--menu-link-size, 13px);
	padding: 0.65rem 0.75rem;
	margin: 0 0 0.25rem 0;
}
/* Level-3 items - small indent for hierarchy + 44px touch target */
.menu-mega:not([class*='navbar-expand']) .mega-menu-list ul .dropdown-item {
	padding: 0.5rem 0 0.5rem 0.75rem;
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* Vertical layout (sidebar use) */
.i4a-menu-vertical .nav-link {
	/* Item Spacing = row density here: stacked links have no side gap to
	   widen, so the tight/normal/loose choice drives vertical padding */
	padding: var(--menu-item-vpad, 0.5rem) 0.75rem;
	/* the widget-wide nowrap exists for horizontal BARS (labels must not
	   break when the row gets tight) — in a sidebar the column width is the
	   boundary and long labels must wrap inside it, never overlap content */
	white-space: normal;
	overflow-wrap: break-word;
}
.i4a-menu-vertical,
.i4a-menu-vertical .nav {
	max-width: 100%;
	min-width: 0;
}

/* Sidebar accordion: sub-lists stay collapsed until their item opens — the
   widget renders the active page's trail open, the chevron script toggles
   the rest. Row is flex so label + chevron share the line and the sub-list
   wraps beneath. menu-no-arrow hides the chevron (trail still auto-opens). */
.i4a-menu-vertical li.has-submenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.i4a-menu-vertical li.has-submenu > .nav-link {
	flex: 1 1 auto;
	min-width: 0;
}
.i4a-menu-vertical .menu-vert-toggle {
	flex: 0 0 auto;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.35rem 0.6rem;
	color: inherit;
	opacity: 0.65;
	line-height: 1;
}
.i4a-menu-vertical .menu-vert-toggle:hover,
.i4a-menu-vertical .menu-vert-toggle:focus {
	opacity: 1;
}
.i4a-menu-vertical .menu-vert-toggle i {
	font-size: 0.7em;
	transition: transform 0.18s ease;
}
.i4a-menu-vertical li.menu-open > .menu-vert-toggle i {
	transform: rotate(180deg);
}
.i4a-menu-vertical.menu-no-arrow .menu-vert-toggle {
	display: none;
}
.i4a-menu-vertical li.has-submenu > .nav {
	display: none;
	flex-basis: 100%;
	padding-left: 0.9rem;
}
.i4a-menu-vertical li.menu-open > .nav {
	display: flex;
}

/* External-link icon — small + muted, sits to the right of link text. Marks
   nav items whose page is set to 'open in new window' so users know the link
   leaves the site (industry-standard pattern). */
.i4a-menu-widget .menu-external-icon {
	font-size: 0.75em;
	margin-left: 0.4em;
	opacity: 0.6;
	vertical-align: baseline;
}

/* ----- Collapsed hamburger polish (touch targets, separators, indents) ----- */

/* Note: the level-3 nested-submenu inline-blend treatment (transparent bg,
   no border/shadow, small indent) used to live here hardcoded at <=991.98px.
   It is now emitted by the breakpoint-aware 'Level-3 flyout background' block
   further down (plus a collapsed-state variant there), so chrome is stripped
   ONLY when the navbar is actually collapsed.
   These polish rules previously lived behind @media (max-width: 991.98px) -
   same viewport-means-collapsed assumption as the accordion block above, so
   a hamburger collapsed at >=992px silently lost its touch targets and item
   separators. Now pivoted on actual collapse state (expand class absent). */

/* Inside a mega panel while collapsed, give the level-3 list a small indent
   from its category heading. Flush would lose hierarchy and the browser
   default 40px is too much, so 0.375rem is the half-of-half-indent we want. */
.menu-mega:not([class*='navbar-expand']) .mega-menu-list ul {
	padding-left: 0.375rem;
}
.i4a-menu-widget:not([class*='navbar-expand']) .navbar-nav .nav-link,
.i4a-menu-widget:not([class*='navbar-expand']) .navbar-nav .dropdown-item {
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
	min-height: 44px;
	display: flex;
	align-items: center;
}
/* Row insets - standard mobile-nav pattern: the tap/hover highlight spans
   the full row width while the label sits ~1rem in from the edge. Bootstrap
   zeroes the nav-link side padding inside a collapsed navbar, which left the
   hover bg text flush-left. Nested items step one clear level deeper than
   their parent: top-level 1rem, level-2 1.75rem, level-3 adds the nested
   menu container indent of 0.5rem on top - a 16/28/36px ladder. (The
   expanded inline menu is untouched: Bootstrap restores its own link
   padding and the item-gap variable handles spacing there.) */
.i4a-menu-widget:not([class*='navbar-expand']) .navbar-nav .nav-link {
	padding-left: 1rem;
	padding-right: 1rem;
}
.i4a-menu-widget:not([class*='navbar-expand']) .navbar-nav .dropdown-item {
	padding-left: 1.75rem;
	padding-right: 1rem;
}
.i4a-menu-widget:not([class*='navbar-expand']) .navbar-nav > .nav-item + .nav-item {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	border-left: 0;
}

/* Hamburger position. Right is Bootstrap's own look: the toggler takes the free
   space on its left and sits at the far end. Left puts the toggler BEFORE the
   logo with flex order, and moves the free space to the RIGHT of the logo so
   the pair stays at the left edge.

   Left used to be margin-left:auto on .navbar-brand. On an expanded navbar that
   did nothing, because .navbar-collapse grows and leaves the auto margin no free
   space to take. Once the navbar collapsed, though, the flex line was just logo
   + toggler, the auto margin swallowed all of it, and the LOGO slid right while
   the toggler stayed behind it — the opposite of the setting, and only ever
   visible on phones and tablets. */
.i4a-menu-widget.menu-hamburger-right .navbar-toggler {
	margin-left: auto;
}
.i4a-menu-widget.menu-hamburger-left .navbar-toggler {
	order: -1;
	margin-right: 0.75rem;
}
.i4a-menu-widget.menu-hamburger-left .navbar-brand {
	/* the auto margin replaces Bootstrap's own margin-right: 1rem, so the gap
	   to the menu items comes from padding instead */
	margin-right: auto;
	padding-right: 1rem;
}

/* Mobile menu style — overlay covers the viewport, drawer slides in from
   the right. Both modes only apply while the menu is ACTUALLY collapsed
   (expand class absent — see the collapsed-state convention above). The old
   @media (max-width: 991.98px) scoping hit the EXPANDED menu whenever the
   viewport was under 992px (common: the editor preview iframe): overlay mode
   painted the inline nav as a fixed full-viewport white sheet, and drawer
   mode parked it off-screen (translateX + visibility:hidden) while Bootstrap
   hides the toggler when expanded — no menu at all. Panel top padding must
   clear the hamburger toggler (z-index 1051, sits over the panel) so the
   first item's full-width hover row starts below it. */
/* Full-screen overlay */
.menu-mobile-overlay:not([class*='navbar-expand']) .navbar-collapse {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 1050;
	padding: 5.5rem 1.5rem 2rem;
	overflow-y: auto;
	display: none;
}
.menu-mobile-overlay:not([class*='navbar-expand']) .navbar-collapse.show {
	display: block;
}
.menu-mobile-overlay:not([class*='navbar-expand']) .navbar-toggler {
	position: relative;
	z-index: 1051;
}

/* Slide-in drawer (right) */
.menu-mobile-drawer:not([class*='navbar-expand']) .navbar-collapse {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 85%;
	max-width: 320px;
	background: #fff;
	z-index: 1050;
	padding: 5.5rem 1.5rem 2rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--menu-trans-duration, 250ms) ease;
	display: block !important;
	visibility: hidden;
}
.menu-mobile-drawer:not([class*='navbar-expand']) .navbar-collapse.show {
	transform: translateX(0);
	visibility: visible;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
}
.menu-mobile-drawer:not([class*='navbar-expand']) .navbar-toggler {
	position: relative;
	z-index: 1051;
}

/* While an overlay/drawer panel is open, its close control must stay on
   screen: the toggler is in normal flow at its header row, which can be
   well below the panel's top padding (menu in row 3) or above the
   viewport if the page was scrolled before opening. Bootstrap flips
   aria-expanded on the toggler when the collapse opens. */
.menu-mobile-overlay:not([class*='navbar-expand']) .navbar-toggler[aria-expanded='true'],
.menu-mobile-drawer:not([class*='navbar-expand']) .navbar-toggler[aria-expanded='true'] {
	position: fixed;
	top: 1rem;
	left: 1rem;
	margin: 0;
	z-index: 1051;
}
/* The overlay keeps the hamburger's own side; the drawer opens from the
   right, so its close control lives inside the drawer. */
.i4a-menu-widget.menu-hamburger-right.menu-mobile-overlay:not([class*='navbar-expand']) .navbar-toggler[aria-expanded='true'],
.menu-mobile-drawer:not([class*='navbar-expand']) .navbar-toggler[aria-expanded='true'] {
	left: auto;
	right: 1rem;
}
/* Hold the toggler's flow space (icon 1.5em at 1.25rem + padding + border)
   so the header row does not shrink under the open panel. */
.i4a-menu-widget:not([class*='navbar-expand']):has(> .navbar-toggler[aria-expanded='true'])::after {
	content: "";
	display: block;
	height: calc(1.875rem + 0.5rem + 2px);
}

/* Overlay/drawer panels are white by design (standard drawer pattern), but a
   COLORED nav bar gives its links light/contrast text — invisible on the white
   panel. Inside these panels, items use the theme link color (dark fallback)
   instead of the bar-contrast color. Dropdown-style-colored level-2 panels
   (match/dark) keep their own colors via their higher-specificity rules. */
.menu-mobile-overlay:not([class*='navbar-expand']) .navbar-collapse .nav-link,
.menu-mobile-drawer:not([class*='navbar-expand']) .navbar-collapse .nav-link {
	color: var(--theme-link-color, #212529);
}

/* ----- Open / close transitions (apply across mega panel, dropdown, drawer) ----- */

.i4a-menu-widget {
	--menu-trans-duration: 250ms;
}

/* Default Bootstrap dropdown uses display: none -> block. Transitions don't
   apply to display, so the panel is taken out of display:none and hidden with
   visibility instead; the .show class still toggles correctly via Bootstrap.

   Two things need that treatment, and they are NOT the same set:
     - the three animated effects, which need something to animate, and
     - hover-open, which needs a panel it can reveal. Its rule further down
       only flips visibility/opacity; nothing in it sets display. Before this,
       a menu with the effect set to None had no rule taking the panel out of
       display:none at all, so hovering animated the opacity of a panel that
       was never rendered and no dropdown opened. Level-3 flyouts carried
       their own display:block and kept working, which is what made the
       failure look arbitrary.
   So group A below keys on the effects AND .menu-open-on-hover, while the
   timing in group B stays keyed on the effects alone - otherwise a menu set
   to None would inherit the close delay and stop being instant.

   The effects are split rather than stacked: Slide moves without fading and
   Fade fades without moving, so the three names describe three different
   things. Previously the fade was on the shared rule, which made Slide and
   Fade + Slide byte-identical. Travel is 14px - at the original 8px the
   movement was below the threshold where it reads as motion, which also hid
   the difference between the speed settings.

   IMPORTANT: this may only apply while the navbar is actually EXPANDED. In
   the collapsed hamburger the dropdown is `position: static`, so a
   hidden-but-rendered panel occupies layout space and creates a giant gap
   between top-level items. Expanded cannot be inferred from viewport width
   alone: the fit-based collapse script adds/strips the navbar-expand-{bp}
   class at ANY width, so these rules pivot on that class (it sits on the same
   element as the menu-trans-* / menu-open-on-hover class) paired with the
   breakpoint's min-width - the same breakpoint-aware pattern as the 'Level-3
   flyout background' block. When the class is stripped (collapsed), none of
   these selectors match and dropdowns fall back to Bootstrap's display:none -
   zero phantom space. A menu expanded BELOW its breakpoint (fit-collapse
   allows this) just loses the animation and snap-opens; correct layout either
   way.

   Scope to top-level panels only (direct child of .nav-item): the unscoped
   form also matched the nested level-3 .dropdown-menu panels inside the mega
   panel, which never get .show - they were permanently hidden yet still
   intercepted pointer events where panels stacked.

   max-height:0 + overflow:hidden on the closed state is load-bearing, not
   tidiness: an invisible rendered panel still counts toward the document's
   SCROLLABLE OVERFLOW, so a long dropdown gives a short page a phantom
   scroll range - and because a stuck header row is position:fixed (whose
   subtree stops counting), scrolling collapses that range, the browser
   clamps scrollTop, the row releases, and the page vibrates in a
   stick/unstick loop. Every open path must reset max-height: the .show
   rules AND the hover-open :hover / :has(:focus-visible) rules further down.

   The OPEN state caps at the viewport (minus the sticky-bar height the
   runtime publishes, minus headroom for the header itself) and scrolls
   INTERNALLY (#1025, the old YUI menus' behavior) - so an open panel
   never extends past the page bottom and never creates scroll range
   either. The 240px floor keeps tiny windows usable. Every panel is
   capped, including one with a third level: its flyouts are
   position:fixed (see the flyout block further down) so the panel's
   overflow-y:auto cannot clip them. That is also why every OPEN state
   sets transform:none rather than translateY(0): any transform, even
   identity, makes the panel the containing block for fixed descendants
   and they would be clipped and mis-positioned. (An earlier exemption
   left third-level panels uncapped; an uncapped open panel hanging below
   a page that fits the screen gave the page a scroll range that existed
   only while the panel was open, and wheeling over it bounced the page
   by that amount.) The open cap is a length expression, never
   `none`: the close transition delays max-height by the fade duration
   the same way visibility is delayed, and none->0 is not interpolable,
   which would collapse the panel mid-fade. Known nit: the hover-gap
   ::before bridge above the panel is clipped by the panel's own
   overflow; margin-top:0 keeps the trigger/panel seam at zero height,
   so hover continuity survives without it. */

/* navbar-expand (no suffix) - always expanded, no media needed */
/* A - rendered but hidden: effects need something to animate,
      hover-open needs something to reveal. */
.i4a-menu-widget.navbar-expand:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide, .menu-open-on-hover) .nav-item > .dropdown-menu {
	display: block;
	visibility: hidden;
	pointer-events: none;
	max-height: 0;
	overflow: hidden;
}
.i4a-menu-widget.navbar-expand:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide, .menu-open-on-hover) .nav-item > .dropdown-menu.show {
	visibility: visible;
	pointer-events: auto;
	max-height: max(240px, calc(100vh - var(--i4a-sticky-header-h, 0px) - 160px));
	overflow-y: auto;
	overflow-x: hidden;
}
/* B - timing, effects only, so None stays genuinely instant. */
.i4a-menu-widget.navbar-expand:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
	transition:
		opacity var(--menu-trans-duration, 250ms) ease,
		transform var(--menu-trans-duration, 250ms) ease,
		visibility 0s linear var(--menu-trans-duration, 250ms),
		max-height 0s linear var(--menu-trans-duration, 250ms);
}
.i4a-menu-widget.navbar-expand:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
	transition-delay: 0s;
}
/* C - fade */
.i4a-menu-widget.navbar-expand:is(.menu-trans-fade, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
	opacity: 0;
}
.i4a-menu-widget.navbar-expand:is(.menu-trans-fade, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
	opacity: 1;
}
/* D - slide */
.i4a-menu-widget.navbar-expand:is(.menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
	transform: translateY(-14px);
}
.i4a-menu-widget.navbar-expand:is(.menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
	transform: none;
}
/* sm (576px) */
@media (min-width: 576px) {
	/* A - rendered but hidden: effects need something to animate,
	      hover-open needs something to reveal. */
	.i4a-menu-widget.navbar-expand-sm:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide, .menu-open-on-hover) .nav-item > .dropdown-menu {
		display: block;
		visibility: hidden;
		pointer-events: none;
		max-height: 0;
		overflow: hidden;
	}
	.i4a-menu-widget.navbar-expand-sm:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide, .menu-open-on-hover) .nav-item > .dropdown-menu.show {
		visibility: visible;
		pointer-events: auto;
		max-height: max(240px, calc(100vh - var(--i4a-sticky-header-h, 0px) - 160px));
		overflow-y: auto;
		overflow-x: hidden;
	}
	/* B - timing, effects only, so None stays genuinely instant. */
	.i4a-menu-widget.navbar-expand-sm:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		transition:
			opacity var(--menu-trans-duration, 250ms) ease,
			transform var(--menu-trans-duration, 250ms) ease,
			visibility 0s linear var(--menu-trans-duration, 250ms),
			max-height 0s linear var(--menu-trans-duration, 250ms);
	}
	.i4a-menu-widget.navbar-expand-sm:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		transition-delay: 0s;
	}
	/* C - fade */
	.i4a-menu-widget.navbar-expand-sm:is(.menu-trans-fade, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		opacity: 0;
	}
	.i4a-menu-widget.navbar-expand-sm:is(.menu-trans-fade, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		opacity: 1;
	}
	/* D - slide */
	.i4a-menu-widget.navbar-expand-sm:is(.menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		transform: translateY(-14px);
	}
	.i4a-menu-widget.navbar-expand-sm:is(.menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		transform: none;
	}
}
/* md (768px) - default */
@media (min-width: 768px) {
	/* A - rendered but hidden: effects need something to animate,
	      hover-open needs something to reveal. */
	.i4a-menu-widget.navbar-expand-md:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide, .menu-open-on-hover) .nav-item > .dropdown-menu {
		display: block;
		visibility: hidden;
		pointer-events: none;
		max-height: 0;
		overflow: hidden;
	}
	.i4a-menu-widget.navbar-expand-md:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide, .menu-open-on-hover) .nav-item > .dropdown-menu.show {
		visibility: visible;
		pointer-events: auto;
		max-height: max(240px, calc(100vh - var(--i4a-sticky-header-h, 0px) - 160px));
		overflow-y: auto;
		overflow-x: hidden;
	}
	/* B - timing, effects only, so None stays genuinely instant. */
	.i4a-menu-widget.navbar-expand-md:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		transition:
			opacity var(--menu-trans-duration, 250ms) ease,
			transform var(--menu-trans-duration, 250ms) ease,
			visibility 0s linear var(--menu-trans-duration, 250ms),
			max-height 0s linear var(--menu-trans-duration, 250ms);
	}
	.i4a-menu-widget.navbar-expand-md:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		transition-delay: 0s;
	}
	/* C - fade */
	.i4a-menu-widget.navbar-expand-md:is(.menu-trans-fade, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		opacity: 0;
	}
	.i4a-menu-widget.navbar-expand-md:is(.menu-trans-fade, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		opacity: 1;
	}
	/* D - slide */
	.i4a-menu-widget.navbar-expand-md:is(.menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		transform: translateY(-14px);
	}
	.i4a-menu-widget.navbar-expand-md:is(.menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		transform: none;
	}
}
/* lg (992px) */
@media (min-width: 992px) {
	/* A - rendered but hidden: effects need something to animate,
	      hover-open needs something to reveal. */
	.i4a-menu-widget.navbar-expand-lg:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide, .menu-open-on-hover) .nav-item > .dropdown-menu {
		display: block;
		visibility: hidden;
		pointer-events: none;
		max-height: 0;
		overflow: hidden;
	}
	.i4a-menu-widget.navbar-expand-lg:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide, .menu-open-on-hover) .nav-item > .dropdown-menu.show {
		visibility: visible;
		pointer-events: auto;
		max-height: max(240px, calc(100vh - var(--i4a-sticky-header-h, 0px) - 160px));
		overflow-y: auto;
		overflow-x: hidden;
	}
	/* B - timing, effects only, so None stays genuinely instant. */
	.i4a-menu-widget.navbar-expand-lg:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		transition:
			opacity var(--menu-trans-duration, 250ms) ease,
			transform var(--menu-trans-duration, 250ms) ease,
			visibility 0s linear var(--menu-trans-duration, 250ms),
			max-height 0s linear var(--menu-trans-duration, 250ms);
	}
	.i4a-menu-widget.navbar-expand-lg:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		transition-delay: 0s;
	}
	/* C - fade */
	.i4a-menu-widget.navbar-expand-lg:is(.menu-trans-fade, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		opacity: 0;
	}
	.i4a-menu-widget.navbar-expand-lg:is(.menu-trans-fade, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		opacity: 1;
	}
	/* D - slide */
	.i4a-menu-widget.navbar-expand-lg:is(.menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		transform: translateY(-14px);
	}
	.i4a-menu-widget.navbar-expand-lg:is(.menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		transform: none;
	}
}
/* xl (1200px) */
@media (min-width: 1200px) {
	/* A - rendered but hidden: effects need something to animate,
	      hover-open needs something to reveal. */
	.i4a-menu-widget.navbar-expand-xl:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide, .menu-open-on-hover) .nav-item > .dropdown-menu {
		display: block;
		visibility: hidden;
		pointer-events: none;
		max-height: 0;
		overflow: hidden;
	}
	.i4a-menu-widget.navbar-expand-xl:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide, .menu-open-on-hover) .nav-item > .dropdown-menu.show {
		visibility: visible;
		pointer-events: auto;
		max-height: max(240px, calc(100vh - var(--i4a-sticky-header-h, 0px) - 160px));
		overflow-y: auto;
		overflow-x: hidden;
	}
	/* B - timing, effects only, so None stays genuinely instant. */
	.i4a-menu-widget.navbar-expand-xl:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		transition:
			opacity var(--menu-trans-duration, 250ms) ease,
			transform var(--menu-trans-duration, 250ms) ease,
			visibility 0s linear var(--menu-trans-duration, 250ms),
			max-height 0s linear var(--menu-trans-duration, 250ms);
	}
	.i4a-menu-widget.navbar-expand-xl:is(.menu-trans-fade, .menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		transition-delay: 0s;
	}
	/* C - fade */
	.i4a-menu-widget.navbar-expand-xl:is(.menu-trans-fade, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		opacity: 0;
	}
	.i4a-menu-widget.navbar-expand-xl:is(.menu-trans-fade, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		opacity: 1;
	}
	/* D - slide */
	.i4a-menu-widget.navbar-expand-xl:is(.menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu {
		transform: translateY(-14px);
	}
	.i4a-menu-widget.navbar-expand-xl:is(.menu-trans-slide, .menu-trans-fadeslide) .nav-item > .dropdown-menu.show {
		transform: none;
	}
}

/* Hover transition — subtle smoothing on the bg / underline / border changes
   that hover-style hooks emit. Always-on baseline; uses the same duration
   variable so hover speed scales with open/close speed. */
.i4a-menu-widget .nav-link,
.i4a-menu-widget .dropdown-item {
	transition:
		background-color var(--menu-trans-duration, 250ms) ease,
		color var(--menu-trans-duration, 250ms) ease,
		border-color var(--menu-trans-duration, 250ms) ease;
}

/* Dropdown caret flip - rotate the Bootstrap-default down caret 180deg
   when its parent .nav-item / .dropdown gets the .show class. The flip
   is intentionally instant (no CSS transition) - matches the pattern
   used by Apple / GitHub / Stripe / Notion. Animation is reserved for
   the panel itself; animating the tiny caret was distracting and added
   no UX value. transform-origin: center keeps the rotation pivot
   centered if a theme adjusts the caret size. */
.i4a-menu-widget .dropdown-toggle::after {
	transform-origin: center;
}
.i4a-menu-widget .nav-item.show > .dropdown-toggle::after,
.i4a-menu-widget .dropdown.show > .dropdown-toggle::after {
	transform: rotate(180deg);
}

/* Hide the top-level dropdown caret when the admin opts out via the
   Show-dropdown-arrow-on-top-level-items checkbox. The .menu-no-arrow
   class lands on the widget root (.i4a-menu-widget). Bootstrap
   click-to-open still works; only the top-bar visual caret is
   suppressed. The nested level-2 right-arrow indicator (below) always
   shows since users need that signal to know there's a level-3 flyout. */
.i4a-menu-widget.menu-no-arrow .dropdown-toggle::after {
	display: none;
}

/* Right-pointing arrow on level-2+ items inside basic dropdowns that
   have their own nested submenu. Industry-standard more-inside
   indicator (matches the pattern in Mac/Windows menus, every nested-
   submenu plugin, etc.). Scoped to .dropdown-menu.multi-level ancestor
   so it only fires inside basic dropdowns - mega panel level-3 items
   are inline beneath their heading and don't need a side-arrow.
   Position absolute at right edge with vertical centering; the parent
   anchor reserves padding-right for the arrow. */
.i4a-menu-widget .dropdown-menu.multi-level .dropdown-submenu.has-submenu > .dropdown-item {
	position: relative;
	padding-right: 1.75rem;
}
.i4a-menu-widget .dropdown-menu.multi-level .dropdown-submenu.has-submenu > .dropdown-item::after {
	content: "";
	position: absolute;
	right: 0.85rem;
	top: 50%;
	margin-top: -0.3em;
	width: 0;
	height: 0;
	border-top: 0.3em solid transparent;
	border-bottom: 0.3em solid transparent;
	border-left: 0.3em solid;
}

/* Open submenus on hover (and keyboard focus for accessibility).
   CSS-only so it coexists with Bootstrap's click-toggle JS - hover opens,
   click also opens or closes. Pinned to (hover: hover) so touch devices
   skip the rule entirely (touch + hover-only nav is broken UX), and to
   min-width: 768px so the collapsed hamburger view always uses click.
   The reused open-state declarations below mirror the .show branch of
   the rules above so the panel becomes opaque + interactive. Note what is
   NOT here: display. The panel is taken out of display:none by group A
   above, which is why .menu-open-on-hover had to be in that group - keyed
   on the effect classes alone, a menu with the effect set to None was
   still display:none and hover revealed nothing.
   Keyboard focus uses :has(:focus-visible), not :focus-within: a mouse
   click also focuses the link, and :focus-within then held the clicked
   panel open until focus moved (two panels open while hovering the next
   item; a second click could not close it). :focus-visible is set for
   keyboard focus only. The focus rules are kept SEPARATE from the :hover
   rules because a browser without :has() drops the whole rule it appears
   in, and the hover half must survive there. */
@media (hover: hover) and (min-width: 768px) {
	.i4a-menu-widget.menu-open-on-hover .nav-item.dropdown:hover > .dropdown-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
		transform: none;
		max-height: max(240px, calc(100vh - var(--i4a-sticky-header-h, 0px) - 160px));
		overflow-y: auto;
		overflow-x: hidden;
	}
	.i4a-menu-widget.menu-open-on-hover .nav-item.dropdown:has(:focus-visible) > .dropdown-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
		transform: none;
		max-height: max(240px, calc(100vh - var(--i4a-sticky-header-h, 0px) - 160px));
		overflow-y: auto;
		overflow-x: hidden;
	}
	.i4a-menu-widget.menu-open-on-hover .nav-item.dropdown:hover > .dropdown-toggle::after {
		transform: rotate(180deg);
	}
	.i4a-menu-widget.menu-open-on-hover .nav-item.dropdown:has(:focus-visible) > .dropdown-toggle::after {
		transform: rotate(180deg);
	}

	/* Hover-gap fix (level-1 -> level-2). The level-2 panel stays open only
	   while .nav-item.dropdown:hover is true. Bootstrap's default margin-top
	   on .dropdown-menu leaves a dead gap between the trigger and the panel
	   that belongs to neither box, so crossing it drops :hover and the menu
	   snaps shut. Fix: (1) margin-top:0 so the panel butts against the
	   trigger, and (2) a transparent ::before bridge over the seam so the
	   hover region from link to panel is continuous even on a diagonal
	   path. The bridge is only live while the panel is shown (it inherits
	   the panel's visibility/pointer-events), so it never blocks anything
	   when the menu is closed. */
	.i4a-menu-widget.menu-open-on-hover .nav-item.dropdown > .dropdown-menu {
		margin-top: 0;
	}
	.i4a-menu-widget.menu-open-on-hover .nav-item.dropdown > .dropdown-menu::before {
		content: "";
		position: absolute;
		top: -12px;
		left: 0;
		right: 0;
		height: 12px;
		background: transparent;
	}

	/* Nested submenu flyout (level-3+ in basic dropdowns). The level-2
	   panel is a capped scrolling box (overflow-y:auto), which would clip
	   anything positioned inside it, so the flyout is position:fixed:
	   its containing block is the viewport (no ancestor carries a
	   transform in the open state), and an overflow ancestor cannot clip
	   it. The runtime positions it (menu_widget.cfm flyout positioner)
	   from the parent item's bounding rect on hover/focus, flipping to
	   the left when there is no room on the right, and follows the
	   panel's internal scroll. Without the script the flyout still shows
	   at its static position (below its parent) rather than off-screen.
	   The transition rule above is scoped to .nav-item > .dropdown-menu
	   so it never reaches these nested ULs; they use plain display:none
	   / block toggling instead. Mega panel level-3 items are inline
	   beneath their heading and don't match this rule. */
	.i4a-menu-widget .dropdown-menu.multi-level .dropdown-submenu {
		position: relative;
	}
	.i4a-menu-widget[class*='navbar-expand'] .dropdown-menu.multi-level .dropdown-submenu > .dropdown-menu {
		position: fixed;
		top: auto;
		left: auto;
		margin: 0;
		z-index: 1001;
	}
	/* Positioner flipped the flyout to the parent's left: the hover bridge
	   belongs on the flyout's right edge, where it meets the parent. */
	.i4a-menu-widget .dropdown-menu.multi-level .dropdown-submenu.i4a-fly-flipped > .dropdown-menu::before {
		left: auto;
		right: -12px;
	}
	/* Hover-gap fix (level-2 -> level-3). Same problem on the horizontal
	   seam: moving the cursor right/diagonally from the level-2 item onto
	   the flyout (anchored at left:100%) can briefly leave the submenu LI's
	   box and collapse the flyout. A transparent ::before bridge on the
	   flyout's left edge keeps the hover region continuous. Live only while
	   the flyout is shown. */
	.i4a-menu-widget .dropdown-menu.multi-level .dropdown-submenu > .dropdown-menu::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -12px;
		width: 12px;
		background: transparent;
	}
	/* Deliberately NOT keyed on .menu-open-on-hover: that setting governs how
	   the top-level panel opens (hover vs click). A level-2 parent is a real
	   link that navigates on click, so hover/focus is the only way its
	   children can ever be reached once the panel is open. */
	.i4a-menu-widget .dropdown-menu.multi-level .dropdown-submenu:hover > .dropdown-menu {
		display: block;
	}
	.i4a-menu-widget .dropdown-menu.multi-level .dropdown-submenu:has(:focus-visible) > .dropdown-menu {
		display: block;
	}

	/* Last-item overflow guard. The right-most top-level trigger is
	   always the closest to the viewport's right edge, regardless of
	   menu alignment - so its dropdown is the most likely to overflow
	   off-screen if anchored on the left. Anchor that one panel's
	   RIGHT edge to the trigger's right edge so it extends leftward
	   into safe space. Other items keep the default left-anchor
	   (their dropdowns extend rightward where there's typically room).
	   Mega panels excluded - they always span full navbar width.
	   Note: this is a heuristic, not collision detection. For per-item
	   collision-aware positioning, Popper.js or a small custom hover
	   script would be needed. */
	.i4a-menu-widget .navbar-nav > .nav-item:last-child > .dropdown-menu:not(.mega-menu-panel) {
		right: 0;
		left: auto;
	}
}

/* Level-3 flyout background — match level-2 EXACTLY.
   When the navbar is EXPANDED, the level-3 panel is a floating, absolutely-
   positioned .dropdown-menu; it needs the same opaque white bg (plus Bootstrap's
   default border) as the level-2 panel, or page content bleeds through. When the
   navbar is COLLAPSED into the hamburger, the level-3 list renders inline and
   should blend in (transparent, no border/shadow, small indent).
   The pivot between the two states is the widget's ACTUAL collapse breakpoint -
   the per-widget menu_mobile_breakpoint setting, emitted as navbar-expand-{bp}
   (default md/768px) - NOT a hardcoded 992px. The old 992px assumption left a
   transparent band (e.g. 768-991px under the default md breakpoint) where the
   navbar was already expanded but the white rule had not kicked in yet.
   navbar-expand (no suffix) = menu is always expanded, so it is always opaque. */
.i4a-menu-widget.navbar-expand .dropdown-menu.multi-level .dropdown-submenu > .dropdown-menu {
	background-color: #fff;
}
/* Collapsed at ANY width (fit-based collapse stripped the expand class):
   inline-blend the nested submenu exactly like the per-breakpoint below-bp
   rules beneath. Without this, a hamburger collapsed at a wide viewport
   fell through to Bootstrap's default white/bordered panel for level-3.
   display:block because the collapsed view has no hover and the level-2
   parent link navigates on tap, so the nested list is always open inline
   while its panel is open (Bootstrap's .dropdown-menu default is none). */
.i4a-menu-widget:not([class*='navbar-expand']) .navbar-nav .dropdown-submenu .dropdown-menu:not(.mega-menu-panel) {
	display: block;
	position: static;
	border: 0;
	padding-left: 0.5rem;
	background: transparent;
	box-shadow: none;
}
/* sm (576px) */
@media (max-width: 575.98px) {
	.i4a-menu-widget.navbar-expand-sm .navbar-nav .dropdown-submenu .dropdown-menu:not(.mega-menu-panel) {
		display: block;
		position: static;
		border: 0;
		padding-left: 0.5rem;
		background: transparent;
		box-shadow: none;
	}
}
@media (min-width: 576px) {
	.i4a-menu-widget.navbar-expand-sm .dropdown-menu.multi-level .dropdown-submenu > .dropdown-menu {
		background-color: #fff;
	}
}
/* md (768px) — default */
@media (max-width: 767.98px) {
	.i4a-menu-widget.navbar-expand-md .navbar-nav .dropdown-submenu .dropdown-menu:not(.mega-menu-panel) {
		display: block;
		position: static;
		border: 0;
		padding-left: 0.5rem;
		background: transparent;
		box-shadow: none;
	}
}
@media (min-width: 768px) {
	.i4a-menu-widget.navbar-expand-md .dropdown-menu.multi-level .dropdown-submenu > .dropdown-menu {
		background-color: #fff;
	}
}
/* lg (992px) */
@media (max-width: 991.98px) {
	.i4a-menu-widget.navbar-expand-lg .navbar-nav .dropdown-submenu .dropdown-menu:not(.mega-menu-panel) {
		display: block;
		position: static;
		border: 0;
		padding-left: 0.5rem;
		background: transparent;
		box-shadow: none;
	}
}
@media (min-width: 992px) {
	.i4a-menu-widget.navbar-expand-lg .dropdown-menu.multi-level .dropdown-submenu > .dropdown-menu {
		background-color: #fff;
	}
}
/* xl (1200px) */
@media (max-width: 1199.98px) {
	.i4a-menu-widget.navbar-expand-xl .navbar-nav .dropdown-submenu .dropdown-menu:not(.mega-menu-panel) {
		display: block;
		position: static;
		border: 0;
		padding-left: 0.5rem;
		background: transparent;
		box-shadow: none;
	}
}
@media (min-width: 1200px) {
	.i4a-menu-widget.navbar-expand-xl .dropdown-menu.multi-level .dropdown-submenu > .dropdown-menu {
		background-color: #fff;
	}
}

/* Hamburger toggle — visible by default. Bootstrap's .navbar-toggler-icon
   only gets a stroke color when paired with .navbar-light or .navbar-dark.
   We don't ship those classes (theme can be either), so we set both the
   border and the icon stroke explicitly. Default: dark grey on light bg.
   Per-widget overrides (menu_hamburger_color) replace the icon stroke;
   auto-flip to white happens when menu_bg_color luminance is dark. */
.i4a-menu-widget .navbar-toggler {
	border: 1px solid rgba(0, 0, 0, 0.15);
	color: #212529;
	padding: 0.25rem 0.55rem;
}
.i4a-menu-widget .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(33,37,41,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}



/* ==========================================================================
   Responsive content images. A large image dropped into page content (or a
   sidebar widget) must never overflow the content column — max-width caps
   it at the column, height:auto keeps the aspect ratio even when the img
   tag carries fixed width/height attributes. Scoped to the main content
   wrapper on purpose: hero slides, logos and header/footer widget images
   manage their own sizing and must not inherit this.
   The wrapper id sits inside :where() so the rule weighs no more than a bare
   img (0,0,1): a module that sizes a picture with a class (the member and
   organization profile logos, .memberProfile_icon, 100px tall) keeps its
   size instead of being flattened to height:auto by an id selector. Plain
   content images, which carry no such class, still get the responsive cap.
   ========================================================================== */
:where(#i4a_mainContentWrapper) img {
	max-width: 100%;
	height: auto;
}
/* The WYSIWYG image dialog writes its Width/Height boxes as an INLINE style,
   which beats the height:auto above — the width gets capped at the column
   while the fixed height stays, and the picture squishes. Only when BOTH are
   set inline can a capped width distort, so only that case is overridden;
   an image sized by height alone (an inline icon) keeps its height. */
#i4a_mainContentWrapper img[style*="width"][style*="height"] {
	height: auto !important;
}