/**
 * core/navigation: main menu in the header (.ms-header__nav) and in the mobile menu (.ms-overlay__nav).
 * Header rules start at the direct <ul> so they do not affect the nested navigation in the overlay.
 *
 * @package ms-binovce
 */

/* Header (from 600 px): nav, Menu button, overlay container */

.ms-header__nav.wp-block-navigation {
	color: var(--wp--preset--color--contrast);

	/* Menu button (below 600 px). Core sets the font with a triple class (0,3,0). */
	& .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
		align-items: center;
		justify-content: center;
		min-height: var(--wp--custom--target--mobile);
		padding: 0 1.25rem;
		border: var(--wp--custom--border--strong) solid var(--wp--preset--color--accent-1);
		border-radius: var(--wp--custom--radius--pill);
		color: var(--wp--preset--color--accent-1);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 700;
		line-height: 1.2;
	}

	& .wp-block-navigation__responsive-container-open:hover {
		background-color: var(--wp--preset--color--accent-5);
	}

	/* Custom overlay has no core background or colour. */
	& .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
	}
}

/* Main menu */

.ms-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	gap: 0.25rem;

	/* Top-level item: link and submenu toggle. */
	& > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		min-height: var(--wp--custom--target--min);
		padding: 0 0.875rem;
		border-radius: var(--wp--custom--radius--pill);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
		text-decoration: none;
		text-decoration-color: var(--wp--preset--color--accent-1);
		text-underline-offset: 0.625rem;
	}

	/* Submenu toggle: room for the arrow. */
	& > .has-child > .wp-block-navigation-submenu__toggle {
		padding-right: 2.25rem;
	}

	/* The arrow is a separate <span> in core; negative margin moves it into the toggle padding. */
	& > .has-child > .wp-block-navigation__submenu-icon {
		width: 1.125rem;
		height: 1.125rem;
		margin: 0 0.75rem 0 -1.875rem;

		& svg {
			margin-top: 0;
		}
	}

	/* Hover: 2px underline, accent-2 text. */
	& .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--accent-2);
		text-decoration-line: underline;
		text-decoration-thickness: 2px !important; /* Beats a { 1px !important } in the parent theme. */
	}

	& .wp-block-navigation-submenu__toggle:hover + .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--accent-2);
	}

	/* Open submenu: accent-1 text and arrow (core rotates the arrow). */
	& .wp-block-navigation-submenu__toggle[aria-expanded="true"],
	& .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--accent-1);
	}

	/* Current page and its parent: 3px underline. */
	& .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"],
	& .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-submenu__toggle {
		text-decoration-line: underline;
		text-decoration-thickness: 3px !important; /* Beats a { 1px !important } in the parent theme. */
	}

	/* Submenu box */

	& .has-child > .wp-block-navigation__submenu-container {
		top: calc(100% + 0.625rem);
		left: 0;
		right: auto;
		z-index: 10;
		box-sizing: border-box;
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
		border: var(--wp--custom--border--card) solid var(--wp--preset--color--accent-6);
		border-radius: var(--wp--custom--radius--medium);
	}

	/* Dimensions only when open (closed box is 0 × 0 in core). */
	& .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		width: 21.25rem;
		min-width: 0;
		padding: var(--wp--preset--spacing--20);
	}

	/* No TT25 gap between items. */
	& .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		margin-bottom: 0;

		& > .wp-block-navigation-item__content {
			display: flex;
			align-items: center;
			min-height: var(--wp--custom--target--min);
			padding: 0 var(--wp--preset--spacing--30);
			border-radius: var(--wp--custom--radius--small);
			font-weight: 400;
			line-height: 1.2;
			white-space: nowrap;
			text-decoration-color: var(--wp--preset--color--accent-1);
			text-underline-offset: 0.625rem;
		}
	}

	/* Narrow tablet: align boxes with the menu's left edge so they do not overflow. */
	@media (min-width: 37.5rem) and (max-width: 43.9375rem) {
		position: relative;

		& > .has-child {
			position: static;
		}
	}
}

/* Focus. Flat rule: two different parents (menu items, Menu button). */
.ms-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .wp-block-navigation-item__content:focus-visible,
.ms-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent-1);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Mobile menu: nested navigation in the navigation-overlay template part */

.ms-overlay__nav.wp-block-navigation {
	& .wp-block-navigation__container {
		align-self: stretch;
		align-items: stretch;
		gap: 0;
		border-top: var(--wp--custom--border--thin) solid var(--wp--preset--color--accent-6);

		& > .wp-block-navigation-item {
			flex-direction: column;
			gap: 0;
			align-items: stretch;
			border-bottom: var(--wp--custom--border--thin) solid var(--wp--preset--color--accent-6);
		}

		& > .has-child {
			padding-bottom: 0.75rem;
		}

		/* Top level. */
		& > .wp-block-navigation-item > a.wp-block-navigation-item__content[href] {
			display: flex;
			align-items: center;
			min-height: 3.5rem;
			padding: 0;
			font-size: var(--wp--preset--font-size--large);
			font-weight: 700;
			line-height: 1.2;
		}

		/* Group heading (O škole, Pre rodičov): <a> without href, not interactive. */
		& > .has-child.open-always > .wp-block-navigation-item__content {
			padding: var(--wp--preset--spacing--30) 0 0.25rem;
			font-size: var(--wp--preset--font-size--medium);
			font-weight: 700;
			line-height: 1.4;
			letter-spacing: 0.01em;
			color: var(--wp--preset--color--accent-4);
		}
	}

	& .has-child.open-always > .wp-block-navigation__submenu-container {
		gap: 0;
		padding: 0 0 0 1.25rem;
	}

	& .has-child.open-always .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		margin-bottom: 0;

		& > .wp-block-navigation-item__content {
			display: flex;
			align-items: center;
			min-height: var(--wp--custom--target--mobile);
			padding: 0;
			font-size: var(--wp--preset--font-size--medium);
			font-weight: 400;
			line-height: 1.2;
		}
	}

	/* Link states. */
	& a.wp-block-navigation-item__content[href] {
		text-decoration: none;
		text-decoration-color: var(--wp--preset--color--accent-1);
		text-underline-offset: 0.625rem;
		border-radius: var(--wp--custom--radius--small);

		&:hover {
			color: var(--wp--preset--color--accent-2);
			text-decoration-line: underline;
			text-decoration-thickness: 2px !important; /* Beats a { 1px !important } in the parent theme. */
		}
	}

	& a.wp-block-navigation-item__content[aria-current="page"] {
		text-decoration-line: underline;
		text-decoration-thickness: 3px !important; /* Beats a { 1px !important } in the parent theme. */
	}

	/* Beats the TT25 submenu outline-offset: 0. */
	& .wp-block-navigation-item > a.wp-block-navigation-item__content:focus-visible {
		outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent-1);
		outline-offset: var(--wp--custom--focus--offset);
	}
}