/* Dynamic Classic Block Navigation — classic menu + mobile toggle for FSE */

.dcn-navigation {
	--dcn-text: #111111;
	--dcn-text-hover: #0a58ca;
	--dcn-text-current: #0a58ca;
	--dcn-bg: transparent;
	--dcn-submenu-bg: #ffffff;
	--dcn-submenu-text: #111111;
	--dcn-toggle: #111111;
	--dcn-toggle-hover: #0a58ca;
	--dcn-toggle-bg: transparent;
	--dcn-mobile-bg: #111111;
	--dcn-mobile-text: #ffffff;
	--dcn-mobile-text-hover: #cfe2ff;
	--dcn-overlay-close: #ffffff;
	--dcn-side-overlay-width: 320px;
	--dcn-hamburger-height: 24px;
	--dcn-font-size: 16px;
	--dcn-main-pad-x: 12px;
	--dcn-main-pad-y: 10px; /* fixed desktop main height — not tied to Vertical spacing */
	--dcn-item-pad-y: 10px;
	--dcn-submenu-pad-x: 12px; /* desktop dropdown L/R padding */
	--dcn-link-pad-x: 12px; /* fixed left/right padding inside mobile links */
	--dcn-mobile-submenu-indent: 12px;
	--dcn-submenu-width: 220px;
	--dcn-justify: flex-start;
	--dcn-breakpoint: 768px;
	--dcn-menu-offset: 0px;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: var(--dcn-justify);
	background: var(--dcn-bg);
	color: var(--dcn-text);
	font-size: var(--dcn-font-size);
	/* Shrink-wrap in header rows — width:100% forced title/menu to wrap. */
	width: fit-content;
	max-width: 100%;
	flex: 0 1 auto;
	min-width: 0;
	box-sizing: border-box;
	z-index: 20;
}

/* When this block is a flex child of a Row / Group (FSE headers). */
.is-layout-flex > .wp-block-dynamic-block-navigation-menu,
.is-layout-flex > .wp-block-insight-menu-block-menu,
.is-layout-flex > .dcn-navigation {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	width: fit-content;
	max-width: 100%;
}

.dcn-navigation .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.dcn-menu-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem;
	border: 0;
	background: var(--dcn-toggle-bg);
	color: var(--dcn-toggle);
	cursor: pointer;
	line-height: 1;
}

.dcn-menu-toggle:hover,
.dcn-menu-toggle:focus,
.dcn-menu-toggle:focus-visible {
	color: var(--dcn-toggle-hover);
}

.dcn-menu-toggle > * {
	pointer-events: none;
}

.dcn-menu-toggle .dcn-menu-close-icon {
	display: none;
}

.dcn-menu-toggle--toggled .dcn-menu-open-icon {
	display: none;
}

.dcn-menu-toggle--toggled .dcn-menu-close-icon {
	display: block;
}

.dcn-hide-toggle-close .dcn-menu-toggle--toggled .dcn-menu-open-icon,
.dcn-navigation[data-dcn-mobile-menu-type="side-left"] .dcn-menu-toggle--toggled .dcn-menu-open-icon,
.dcn-navigation[data-dcn-mobile-menu-type="side-right"] .dcn-menu-toggle--toggled .dcn-menu-open-icon {
	display: flex;
}

.dcn-hide-toggle-close .dcn-menu-toggle--toggled .dcn-menu-close-icon,
.dcn-navigation[data-dcn-mobile-menu-type="side-left"] .dcn-menu-toggle--toggled .dcn-menu-close-icon,
.dcn-navigation[data-dcn-mobile-menu-type="side-right"] .dcn-menu-toggle--toggled .dcn-menu-close-icon {
	display: none;
}

.dcn-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	box-sizing: border-box;
	width: calc(var(--dcn-hamburger-height) * 1.2);
	height: var(--dcn-hamburger-height);
	background: transparent;
	color: inherit;
	/* Whole pixels so the three bars stay the same thickness on the page. */
	--dcn-line: round(calc(var(--dcn-hamburger-height) * 0.12), 1px);
}

.dcn-hamburger-line {
	display: block;
	flex: 0 0 var(--dcn-line);
	width: 100%;
	height: var(--dcn-line);
	min-height: var(--dcn-line);
	max-height: var(--dcn-line);
	border-radius: calc(var(--dcn-line) / 2);
	background: currentColor;
	box-sizing: border-box;
}

.dcn-hamburger--strong {
	--dcn-line: round(calc(var(--dcn-hamburger-height) * 0.168), 1px); /* 40% thicker than base 0.12 */
}

/* Same line thickness on every bar (match the top line). */
.dcn-hamburger--unequal {
	align-items: flex-start;
}

.dcn-hamburger--unequal .dcn-hamburger-line {
	height: var(--dcn-line);
	flex-basis: var(--dcn-line);
}

.dcn-hamburger--unequal .dcn-hamburger-line:nth-child(1) {
	width: 100%;
}

.dcn-hamburger--unequal .dcn-hamburger-line:nth-child(2) {
	width: 72%;
}

.dcn-hamburger--unequal .dcn-hamburger-line:nth-child(3) {
	width: 48%;
}

.dcn-hamburger--default {
	justify-content: space-between;
}

.dcn-hamburger--default .dcn-hamburger-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	width: 100%;
	height: var(--dcn-line);
	gap: 0.2em;
	box-sizing: border-box;
}

.dcn-hamburger--default .dcn-hamburger-line {
	height: var(--dcn-line);
	flex-basis: var(--dcn-line);
}

.dcn-hamburger--default .dcn-hamburger-line--short {
	width: 58%;
	flex: 0 0 auto;
	height: 100%;
}

.dcn-hamburger-chevron {
	display: block;
	width: calc(var(--dcn-hamburger-height) * 0.2);
	height: calc(var(--dcn-hamburger-height) * 0.2);
	border-right: var(--dcn-line) solid currentColor;
	border-bottom: var(--dcn-line) solid currentColor;
	transform: rotate(45deg);
	flex: 0 0 auto;
	background: transparent;
	box-sizing: border-box;
}

.dcn-hamburger--doner {
	display: grid;
	--dcn-doner-gap: round(calc(var(--dcn-hamburger-height) * 0.12), 1px);
	--dcn-doner-cell: round(down, calc((var(--dcn-hamburger-height) - (2 * var(--dcn-doner-gap))) / 3), 1px);
	grid-template-columns: repeat(3, var(--dcn-doner-cell));
	grid-template-rows: repeat(3, var(--dcn-doner-cell));
	gap: var(--dcn-doner-gap);
	width: calc((3 * var(--dcn-doner-cell)) + (2 * var(--dcn-doner-gap)));
	height: calc((3 * var(--dcn-doner-cell)) + (2 * var(--dcn-doner-gap)));
	justify-content: unset;
}

.dcn-hamburger-cell {
	display: block;
	width: var(--dcn-doner-cell);
	height: var(--dcn-doner-cell);
	background: currentColor;
	border-radius: 1px;
}

.dcn-hamburger--ellipsis {
	align-items: center;
	justify-content: space-between;
	--dcn-dot: round(calc(var(--dcn-hamburger-height) * 0.22), 1px);
	width: var(--dcn-dot);
	padding: 0;
}

.dcn-hamburger-dot {
	display: block;
	flex: 0 0 var(--dcn-dot);
	width: var(--dcn-dot);
	height: var(--dcn-dot);
	min-width: var(--dcn-dot);
	min-height: var(--dcn-dot);
	border-radius: 50%;
	background: currentColor;
}

.dcn-menu-close-icon svg {
	width: var(--dcn-hamburger-height);
	height: var(--dcn-hamburger-height);
	display: block;
}

.dcn-desktop-nav {
	width: auto;
	max-width: 100%;
}

/* Overlay column is mobile-only; desktop uses .dcn-desktop-nav. */
.dcn-menu-container {
	display: none;
}

.dcn-overlay-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
	width: 100%;
}

.dcn-menu-items {
	width: 100%;
}

.dcn-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--dcn-justify);
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dcn-menu-item {
	position: relative;
	margin: 0;
	list-style: none;
}

.dcn-menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4em;
	/* Defaults overridden per context below — padding keeps hit targets large. */
	padding: var(--dcn-main-pad-y) var(--dcn-main-pad-x);
	color: inherit;
	text-decoration: none;
}

/* Desktop main bar only — Horizontal spacing. */
.dcn-desktop-nav > .dcn-menu > .menu-item > .dcn-menu-link {
	padding: var(--dcn-main-pad-y) var(--dcn-main-pad-x);
}

/* Desktop dropdowns — Vertical spacing (Y) + Submenu horizontal spacing (X). */
.dcn-desktop-nav .dcn-menu .sub-menu .dcn-menu-link {
	padding: var(--dcn-item-pad-y) var(--dcn-submenu-pad-x);
}

.dcn-menu-link:hover,
.dcn-menu-link:focus {
	color: var(--dcn-text-hover);
}

.dcn-menu-item.current-menu-item > .dcn-menu-link,
.dcn-menu-item.current-menu-ancestor > .dcn-menu-link,
.dcn-menu-item.current-menu-parent > .dcn-menu-link {
	color: var(--dcn-text-current);
}

.dcn-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 1.5em;
	line-height: 0;
	cursor: pointer;
}

.dcn-submenu-toggle-icon {
	display: block;
	transition: transform 0.2s ease;
}

.dcn-submenu-toggle[aria-expanded="true"] > .dcn-submenu-toggle-icon,
.dcn-menu-link[aria-expanded="true"] > .dcn-submenu-toggle-icon {
	transform: rotate(180deg);
}

.dcn-sub-menu,
.dcn-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	min-width: var(--dcn-submenu-width);
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: var(--dcn-submenu-bg);
	color: var(--dcn-submenu-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.dcn-sub-menu .dcn-sub-menu,
.dcn-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* Last top-level item: open dropdown to the left (stay in viewport). */
.dcn-flip-last-dropdown .dcn-desktop-nav > .dcn-menu > .menu-item:last-child > .sub-menu {
	left: auto;
	right: 0;
}

.dcn-flip-last-dropdown .dcn-desktop-nav > .dcn-menu > .menu-item:last-child .sub-menu .sub-menu {
	left: auto;
	right: 100%;
}

.dcn-menu--hover .menu-item:hover > .sub-menu,
.dcn-menu--hover .menu-item:focus-within > .sub-menu,
.dcn-menu .menu-item.dcn-sub-menu--open > .sub-menu,
.dcn-menu--click .menu-item > a[aria-expanded="true"] + .sub-menu {
	display: block;
}

@media (hover: hover) {
	.dcn-desktop-nav .dcn-menu--hover .dcn-submenu-toggle {
		pointer-events: none;
	}
}

/* Mobile */
.dcn-navigation--mobile .dcn-menu-toggle {
	display: inline-flex;
	margin-left: auto;
}

.dcn-navigation--mobile .dcn-desktop-nav {
	display: none;
}

.dcn-navigation--mobile .dcn-menu-container {
	display: none;
}

.dcn-navigation--mobile .dcn-menu-container--toggled {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	z-index: 1000;
	overflow-y: auto;
	background: var(--dcn-mobile-bg);
	color: var(--dcn-mobile-text);
	padding: 1.25rem 1.25rem 2rem;
	box-sizing: border-box;
}

.dcn-overlay-close {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	margin: 0;
	padding: 0.35rem;
	border: 0;
	background: transparent;
	color: var(--dcn-overlay-close);
	cursor: pointer;
	line-height: 0;
}

.dcn-navigation[data-dcn-mobile-menu-type="full-overlay"].dcn-navigation--mobile .dcn-menu-container--toggled .dcn-overlay-close,
.dcn-navigation[data-dcn-mobile-menu-type="side-left"].dcn-navigation--mobile .dcn-menu-container--toggled .dcn-overlay-close,
.dcn-navigation[data-dcn-mobile-menu-type="side-right"].dcn-navigation--mobile .dcn-menu-container--toggled .dcn-overlay-close {
	display: inline-flex;
}

.dcn-navigation--mobile .dcn-menu-container--toggled .dcn-overlay-inner {
	padding-right: 2rem; /* room for close button on full / side overlays */
}

/* Side flyouts: click the page beside the panel to close. The panel stays above this layer. */
.dcn-flyout-backdrop {
	display: none;
}

.dcn-navigation--mobile.dcn-navigation--open .dcn-flyout-backdrop {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 999;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* Keep the header button above the side-flyout backdrop only.
   A full overlay already has its own close icon; lifting the toggle there
   stacks a second X on top, which turns blue on hover. */
.dcn-navigation--mobile.dcn-navigation--open[data-dcn-mobile-menu-type="side-left"] .dcn-menu-toggle,
.dcn-navigation--mobile.dcn-navigation--open[data-dcn-mobile-menu-type="side-right"] .dcn-menu-toggle {
	position: relative;
	z-index: 1002;
}

/* Side flyouts: full height, panel from left or right (always full viewport height). */
.dcn-navigation[data-dcn-mobile-menu-type="side-left"].dcn-navigation--mobile .dcn-menu-container--toggled,
.dcn-navigation[data-dcn-mobile-menu-type="side-right"].dcn-navigation--mobile .dcn-menu-container--toggled {
	top: 0;
	bottom: 0;
	width: var(--dcn-side-overlay-width, 320px);
	max-width: 100%;
	height: 100%;
	box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
}

.dcn-navigation[data-dcn-mobile-menu-type="side-left"].dcn-navigation--mobile .dcn-menu-container--toggled {
	left: 0;
	right: auto;
	animation: dcn-flyout-in-left 0.22s ease-out;
}

.dcn-navigation[data-dcn-mobile-menu-type="side-right"].dcn-navigation--mobile .dcn-menu-container--toggled {
	left: auto;
	right: 0;
	animation: dcn-flyout-in-right 0.22s ease-out;
}

@keyframes dcn-flyout-in-left {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes dcn-flyout-in-right {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

.dcn-navigation--mobile .dcn-menu-container--toggled .dcn-menu-link {
	color: var(--dcn-mobile-text);
}

.dcn-navigation--mobile .dcn-menu-container--toggled .dcn-menu-link:hover,
.dcn-navigation--mobile .dcn-menu-container--toggled .dcn-menu-link:focus {
	color: var(--dcn-mobile-text-hover);
}

.dcn-navigation--mobile .dcn-menu-container--toggled .dcn-submenu-toggle {
	color: var(--dcn-mobile-text);
}

.dcn-navigation--mobile .dcn-menu-container--toggled .menu-item.current-menu-item > .dcn-menu-link,
.dcn-navigation--mobile .dcn-menu-container--toggled .menu-item.current-menu-ancestor > .dcn-menu-link {
	color: var(--dcn-mobile-text-hover);
}

/* Partial: fill viewport below header — never use inset:auto (it cleared top/left/right). */
.dcn-navigation[data-dcn-mobile-menu-type="partial-overlay"].dcn-navigation--mobile .dcn-menu-container--toggled {
	top: var(--dcn-menu-offset, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.dcn-navigation--mobile .dcn-menu {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
}

/* Mobile main + submenu rows — Vertical spacing. */
.dcn-navigation--mobile .dcn-menu-link {
	padding: var(--dcn-item-pad-y) var(--dcn-link-pad-x);
}

.dcn-navigation--mobile .dcn-menu .sub-menu {
	position: relative;
	left: auto;
	top: auto;
	min-width: 0;
	width: 100%;
	box-shadow: none;
	background: transparent;
	color: inherit;
	padding-left: var(--dcn-mobile-submenu-indent);
}

.dcn-navigation--mobile .dcn-menu--hover .menu-item:hover > .sub-menu {
	display: none;
}

.dcn-navigation--mobile .dcn-menu .menu-item.dcn-sub-menu--open > .sub-menu {
	display: block;
}

/* No-JS fallback: keep submenus visible on mobile when the setting is on. */
.dcn-navigation--mobile.dcn-mobile-submenus-open:not(.dcn-navigation--js) .dcn-menu .menu-item-has-children > .sub-menu {
	display: block;
}

.dcn-navigation--mobile .dcn-submenu-toggle {
	pointer-events: auto;
}

body[data-dcn-menu-open] {
	overflow: hidden;
}

.dcn-placeholder {
	padding: 0.75rem 1rem;
	border: 1px dashed #c3c4c7;
	color: #646970;
	font-size: 13px;
}