/* =====================================================================
   innersight/mega-nav: header menu
   Self-contained: does NOT reuse any .wp-block-navigation styling, so the
   old nav CSS in the theme can be retired without touching this.

   Desktop  (>=860px): horizontal bar, full-bleed mega panels on hover/focus.
   Mobile   (<860px):  hamburger opens a slide-in overlay; panels become
                       accordions. Tap targets are >=44px throughout.
   860px matches the theme's existing two-row header breakpoint: if they
   disagree, the nav goes hamburger while the header still reserves a full
   row for it (or vice versa), leaving a dead zone.
   ===================================================================== */

.isnav {
	--isnav-blue: #4370b7;
	--isnav-ink: #1f3c6c;
	--isnav-purple: #4e2a7d;
	--isnav-coral: #ff6f61;
	--isnav-coral-deep: #e55a4d;
	--isnav-mist: #e8f1ff;
	--isnav-line: #edebe4;
	--isnav-line-blue: #dbe5f3;
	--isnav-gray: #666;
	position: static;
	display: block;
}

.isnav *,
.isnav *::before,
.isnav *::after { box-sizing: border-box; }

.isnav .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── top-level bar ─────────────────────────────────────────────── */
.isnav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2px;
}
.isnav-item { position: static; margin: 0; }

.isnav-top {
	display: inline-flex;
	align-items: center;
	border-radius: 9px;
	transition: background 0.15s, color 0.15s;
}
.isnav-toplink {
	display: inline-flex;
	align-items: center;
	padding: 12px 6px 12px 13px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--isnav-ink);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.2;
}
.isnav-item:not(.has-panel) .isnav-toplink { padding-right: 13px; }

.isnav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 12px 11px 12px 4px;
	margin: 0;
	color: var(--isnav-ink);
	cursor: pointer;
	font: inherit;
	line-height: 0;
}

/*
 * SOLO LABEL-TOGGLE (Mo, 2026-09-19): a top-level node with no hub page of its
 * own renders as ONE button carrying the label and the chevron, so clicking the
 * label opens the panel instead of navigating. It wears BOTH classes:
 * .isnav-toplink for the label look, .isnav-toggle because view.js finds the
 * control with querySelector('.isnav-toggle'). .isnav-toggle is declared later
 * in this file, so its font / line-height / padding win the tie on a shared
 * element and have to be restored here.
 */
.isnav-toggle.is-solo {
	gap: 6px;
	padding: 12px 11px 12px 13px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
}
.isnav-chev {
	width: 13px; height: 13px;
	opacity: 0.6;
	transition: transform 0.2s ease;
}
.isnav-top:hover,
.isnav-item.is-open .isnav-top { background: var(--isnav-mist); }
.isnav-top:hover .isnav-toplink,
.isnav-top:hover .isnav-toggle,
.isnav-item.is-open .isnav-toplink,
.isnav-item.is-open .isnav-toggle { color: var(--isnav-blue); }
.isnav-item.is-open .isnav-chev { transform: rotate(180deg); }
.isnav-toplink:focus-visible,
.isnav-toggle:focus-visible {
	outline: 2px solid var(--isnav-blue);
	outline-offset: -2px;
	border-radius: 8px;
}

/* ── mega panel (desktop) ──────────────────────────────────────── */
.isnav-panel {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: #fff;
	border-top: 1px solid var(--isnav-line);
	box-shadow: 0 22px 50px rgba(78, 42, 125, 0.13);
	z-index: 400;
}
/* [hidden] loses to any display rule, so pin it (theme-guard lesson). */
.isnav-panel[hidden] { display: none !important; }

.isnav-panel-in {
	max-width: 1520px;
	margin: 0 auto;
	padding: 28px 26px 24px;
	display: grid;
	gap: 26px;
}
.isnav-panel.has-aside .isnav-panel-in { grid-template-columns: minmax(0, 1fr) 262px; }

/* Full-width prompt at the top of a panel. .isnav-panel-in is a grid, so
   1/-1 spans it whether or not the promo aside is present. */
.isnav-lead {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0 0 20px;
	padding: 13px 16px;
	background: #e8f1ff;
	border: 1px solid var(--isnav-line-blue);
	border-radius: 13px;
	text-decoration: none;
	transition: background .18s, border-color .18s;
}
.isnav-lead:hover { background: #dbe5f3; border-color: var(--isnav-blue); }
.isnav-lead-ic {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: #fff;
	color: var(--isnav-blue);
}
.isnav-lead-ic svg { width: 17px; height: 17px; }
.isnav-lead-tx { min-width: 0; }
.isnav-lead-tx b { display: block; font-size: 0.93rem; font-weight: 700; color: var(--isnav-ink); line-height: 1.3; }
.isnav-lead-tx span { display: block; font-size: 0.82rem; color: var(--isnav-gray); line-height: 1.45; margin-top: 2px; }
.isnav-lead-arr { margin-left: auto; flex-shrink: 0; color: var(--isnav-blue); font-weight: 700; }

.isnav-cols {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(var(--isnav-cols, 3), minmax(0, 1fr));
}
.isnav-col { min-width: 0; }

.isnav-ch {
	margin: 0 0 11px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--isnav-blue);
	padding-bottom: 9px;
	border-bottom: 1px solid var(--isnav-line-blue);
	line-height: 1.3;
}
.isnav-ch.is-blank { border-bottom-color: transparent; }
.isnav-ch.is-blank::after { content: "\00a0"; }

.isnav-col ul { list-style: none; margin: 0; padding: 0; }
.isnav-col li { margin: 0; }

.isnav-link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: #333;
	font-size: 0.9rem;
	line-height: 1.35;
	transition: background 0.14s, color 0.14s;
}
.isnav-link:hover,
.isnav-link:focus-visible { background: var(--isnav-mist); }
.isnav-link:focus-visible { outline: 2px solid var(--isnav-blue); outline-offset: -2px; }
.isnav-link b { display: block; font-weight: 600; color: var(--isnav-ink); }
.isnav-lab { min-width: 0; }
.isnav-desc {
	display: block;
	font-size: 0.78rem;
	color: var(--isnav-gray);
	margin-top: 1px;
	font-weight: 400;
	line-height: 1.4;
}

/* Acronym badges beat invented icons for the 12 modalities: the acronym IS
   the recognisable mark. */
.isnav-badge {
	flex: 0 0 auto;
	min-width: 46px;
	text-align: center;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	background: var(--isnav-mist);
	color: var(--isnav-blue);
	border-radius: 5px;
	padding: 4px 6px;
	margin-top: 1px;
	line-height: 1.3;
}

.isnav-hours {
	margin: 0;
	padding: 8px 10px;
	font-size: 0.88rem;
	color: var(--isnav-gray);
	line-height: 1.65;
}
.isnav-hours a { color: var(--isnav-blue); font-weight: 600; text-decoration: none; }
.isnav-hours a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* promo panel */
.isnav-promo {
	background: #f4f8ff;
	border: 1px solid var(--isnav-line-blue);
	border-radius: 14px;
	padding: 20px;
	align-self: start;
}
.isnav-promo h4 { margin: 0 0 7px; font-size: 1rem; color: var(--isnav-ink); font-weight: 600; line-height: 1.3; }
.isnav-promo p { margin: 0 0 14px; font-size: 0.83rem; color: var(--isnav-gray); line-height: 1.55; }
.isnav-btn {
	display: block;
	text-align: center;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 0.83rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.16s, color 0.16s;
}
.isnav-btn + .isnav-btn { margin-top: 8px; }
/* CTA button */
.isnav-btn.is-coral { background: var(--isnav-coral); color: #fff; box-shadow: 0 6px 18px rgba(255, 111, 97, 0.26); }
.isnav-btn.is-coral:hover { background: var(--isnav-coral-deep); color: #fff; }
.isnav-btn.is-outline { border-color: var(--isnav-purple); color: var(--isnav-purple); }
.isnav-btn.is-outline:hover { background: rgba(78, 42, 125, 0.06); }

.isnav-foot {
	max-width: 1520px;
	margin: 0 auto;
	padding: 0 26px 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.isnav-foot > a { color: var(--isnav-blue); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.isnav-foot > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.isnav-note { font-size: 0.82rem; color: var(--isnav-gray); }

/* hamburger + mobile chrome are desktop-hidden */
.isnav-burger,
.isnav-mobhead,
.isnav-scrim { display: none; }

/* Narrower desktops: drop the 5-col conditions panel to 3 and hide the aside
   before anything can overflow. */
@media (max-width: 1300px) {
	.isnav-panel.has-aside .isnav-panel-in { grid-template-columns: minmax(0, 1fr); }
	.isnav-promo { display: none; }
}
@media (max-width: 1040px) {
	.isnav-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.isnav-toplink { padding-left: 10px; font-size: 0.9rem; }
	.isnav-toggle { padding-right: 8px; }
	.isnav-toggle.is-solo { padding-left: 10px; padding-right: 8px; font-size: 0.9rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE / TABLET  (<980px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 859.98px) {

	.isnav-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--isnav-ink);
		cursor: pointer;
	}
	.isnav-burger-bars { display: block; width: 22px; }
	.isnav-burger-bars span {
		display: block;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}
	.isnav-burger-bars span + span { margin-top: 5px; }

	.isnav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(31, 60, 108, 0.42);
		z-index: 998;
	}
	.isnav-scrim[hidden] { display: none !important; }

	/*
	 * Closed state uses transform + visibility, NEVER the `hidden` attribute.
	 * `hidden` carries a UA `display:none` that applies at EVERY width, so a
	 * stale hidden attribute left over from a mobile page load would wipe out
	 * the whole desktop menu. Visibility keeps it un-tabbable and out of the
	 * a11y tree while still allowing the slide transition.
	 */
	.isnav-shell {
		position: fixed;
		top: 0; bottom: 0; left: 0;
		width: min(92vw, 420px);
		background: #fff;
		z-index: 999;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 0 40px;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.24s;
		box-shadow: 0 0 60px rgba(31, 60, 108, 0.2);
	}
	.isnav.is-mobile-open .isnav-shell { transform: translateX(0); visibility: visible; }

	.isnav-mobhead {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid var(--isnav-line);
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 2;
	}
	.isnav-mobhead span { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--isnav-blue); }
	.isnav-close {
		width: 40px; height: 40px;
		border: 0; background: none;
		font-size: 27px; line-height: 1;
		color: var(--isnav-ink);
		cursor: pointer;
	}

	.isnav-list { display: block; padding: 6px 12px; }
	.isnav-item { border-bottom: 1px solid #eef1f6; }
	.isnav-item:last-child { border-bottom: 0; }

	.isnav-top { display: flex; width: 100%; align-items: stretch; border-radius: 0; }
	.isnav-toplink {
		flex: 1 1 auto;
		min-height: 50px;
		padding: 10px 8px 10px 10px;
		font-size: 1rem;
		align-items: center;
	}
	.isnav-toggle {
		flex: 0 0 auto;
		width: 52px;
		min-height: 50px;
		padding: 0;
		border-left: 1px solid #f2f4f8;
	}
	/* Solo label-toggle takes the whole row; the chevron sits at the right edge
	   so it lines up with the chevrons on the linked rows above and below. */
	.isnav-toggle.is-solo {
		flex: 1 1 auto;
		width: auto;
		min-height: 50px;
		padding: 10px 18px 10px 10px;
		border-left: 0;
		justify-content: space-between;
		font-size: 1rem;
	}
	.isnav-chev { width: 16px; height: 16px; opacity: 0.75; }

	/* Panels become in-flow accordions. */
	.isnav-panel {
		position: static;
		box-shadow: none;
		border-top: 0;
		border-left: 2px solid var(--isnav-mist);
		margin: 0 0 10px 10px;
		background: transparent;
	}
	.isnav-panel-in,
	.isnav-panel.has-aside .isnav-panel-in {
		display: block;
		padding: 4px 0 4px 10px;
		max-width: none;
	}
	.isnav-cols { display: block; }
	.isnav-col + .isnav-col { margin-top: 14px; }
	.isnav-ch { font-size: 0.68rem; margin-bottom: 6px; padding-bottom: 6px; }
	.isnav-ch.is-blank { display: none; }
	.isnav-link { min-height: 42px; align-items: center; font-size: 0.92rem; padding: 6px 8px; }
	.isnav-desc { display: none; }

	.isnav-badge { min-width: 42px; }

	.isnav-promo {
		display: block;
		margin: 12px 8px 4px;
		padding: 16px;
	}
	.isnav-promo p { display: none; }
	.isnav-lead { margin: 4px 8px 14px; padding: 12px 14px; }
	.isnav-foot { display: block; padding: 4px 8px; }
	.isnav-foot .isnav-note { display: none; }
	/* the "View all …" link is the only sub-38px tap target otherwise */
	.isnav-foot > a { display: flex; align-items: center; min-height: 42px; }
	.isnav-hours { font-size: 0.85rem; }
	.isnav-hours a { display: inline-flex; align-items: center; min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.isnav-shell { transition: none; }
	.isnav-chev { transition: none; }
}

/* ── panel search (the lead bar became a live search, 2026-08-13) ── */
.isnav-find { cursor: text; }
.isnav-find:focus-within { background: #fff; border-color: var(--isnav-blue); box-shadow: 0 0 0 3px rgba(67,112,183,.14); }
.isnav-find-in { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 0.93rem; color: var(--isnav-ink); outline: none; padding: 4px 0; }
.isnav-find-in::placeholder { color: var(--isnav-gray); opacity: 1; }
.isnav-find-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.isnav-find-all { white-space: nowrap; font-size: 0.85rem; text-decoration: none; }
.isnav-find-res { grid-column: 1 / -1; margin: -8px 0 16px; display: grid; gap: 6px; }
/* the hidden attribute LOSES to any display rule (documented site-wide trap):
   without this the empty dropdown box paints permanently under the search bar */
.isnav-find-res[hidden] { display: none !important; }
.isnav-find-a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 14px; background: #fff; border: 1px solid var(--isnav-line); border-radius: 10px; text-decoration: none; transition: background .15s, border-color .15s; }
.isnav-find-a b { font-size: 0.92rem; font-weight: 600; color: var(--isnav-ink); min-width: 0; }
.isnav-find-a span { flex-shrink: 0; font-size: 0.8rem; font-weight: 600; color: var(--isnav-blue); }
.isnav-find-a:hover { background: #e8f1ff; border-color: var(--isnav-blue); }
.isnav-find-none { grid-column: 1 / -1; margin: 0; padding: 10px 14px; font-size: 0.88rem; color: var(--isnav-gray); }
.isnav-find-none a { color: var(--isnav-blue); font-weight: 600; text-decoration: none; }
@media (max-width: 859.98px) {
	.isnav-find { margin: 4px 8px 10px; }
	.isnav-find-all { display: none; }
	.isnav-find-res { margin: 0 8px 14px; }
}

/* ── header search slot (moved out of the panel, 2026-08-14) ─────────
   .isnav-hsearch is a SIBLING of <nav class="isnav"> inside .is-headrow, so it
   can sit in the header's top row (order set in the theme's global.css). The
   same bar renders inside the mobile shell as .isnav-shellfind. */
.isnav-hsearch { position: relative; order: 2; flex: 1 1 200px; max-width: 640px; margin: 0 auto; }
.isnav-hsearch .isnav-find { margin: 0; padding: 8px 12px 8px 14px; border-radius: 999px; }
.isnav-hsearch .isnav-lead-ic { width: 28px; height: 28px; }
.isnav-hsearch .isnav-find-res {
	position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 1200;
	margin: 0; padding: 8px; background: #fff; border: 1px solid var(--isnav-line);
	border-radius: 14px; box-shadow: 0 18px 44px rgba(31, 60, 108, .16);
}
@media (max-width: 1199.98px) { .isnav-hsearch .isnav-find-all { display: none; } }
@media (max-width: 859.98px) { .isnav-hsearch { display: none; } }

.isnav-shellfind { display: none; }
@media (max-width: 859.98px) {
	.isnav-shellfind { display: block; padding: 12px 14px 2px; }
	.isnav-shellfind .isnav-find { margin: 0 0 8px; }
	.isnav-shellfind .isnav-find-res { margin: 0 0 10px; }
}