/*
 * h4x0r dropdown navigation
 *
 * Loaded AFTER wp-block-navigation styles (via dependency) so these
 * overrides actually win. This is why this lives in a separate file
 * rather than in style.css — load order, not feature toggling.
 */

/* -------------------------------------------
   Hamburger button — three-line icon
------------------------------------------- */

/* Hide the default SVG icon WP ships */
.wp-block-navigation__responsive-container-open svg {
	display: none !important;
}

/* Draw a three-line hamburger with box-shadow */
.wp-block-navigation__responsive-container-open {
	position: relative;
	width: 2em;
	height: 2em;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 1.25em;
	height: 0.13em;
	background: currentColor;
	box-shadow:
		0 0.4em 0 0 currentColor,
		0 0.8em 0 0 currentColor;
	transition: color 0.15s;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container-open:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

/* -------------------------------------------
   Close button — hidden; menu closes via
   the hamburger toggle or clicking outside
------------------------------------------- */
.wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* -------------------------------------------
   Overlay container — dropdown, not fullscreen
------------------------------------------- */

/* Reset the full-screen overlay positioning */
.wp-block-navigation__responsive-container.is-menu-open {
	position: absolute !important;
	top: 100% !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	min-width: 22ch;
	max-width: calc(100vw - 2ch);
	height: auto !important;
	padding: 0 !important;
	overflow: visible !important;
	z-index: 99999;

	/* Theme colors */
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 0.25em solid var(--wp--preset--color--midtone);

	/* Animate in */
	animation: h4x0r-dropdown-in 0.15s ease-out;
}

@keyframes h4x0r-dropdown-in {
	from { opacity: 0; transform: translateY(-0.5em); }
	to   { opacity: 1; transform: translateY(0); }
}

/* The nav block's parent needs relative positioning to anchor the dropdown */
.wp-block-navigation {
	position: relative;
}

/* -------------------------------------------
   Inner container — remove overlay layout
------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	padding: 0 !important;
	width: 100%;
	height: auto !important;
}

/* Remove full-screen dialog layout WP applies */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* -------------------------------------------
   Menu items
------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: 100%;
	margin: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display: block;
	padding: 0.75em 2ch;
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none !important;
	white-space: nowrap;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.6;
	border-bottom: 1px solid var(--wp--preset--color--midtone);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:last-child
	.wp-block-navigation-item__content {
	border-bottom: none;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	text-decoration: none !important;
	outline: none;
}

/* -------------------------------------------
   Sub-menus inside dropdown
------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	position: static !important;
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	padding-left: 4ch;
}

/* Nested sub-menus */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	padding-left: 6ch;
}

/* Hide submenu toggle arrows — items flow vertically */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon {
	display: none !important;
}