/*
Theme Name: Plaça del Nord
Description: Tema de blocs personalitzat per a Plaça del Nord.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: placa-del-nord
*/

/* Mobile Navigation overlay. Desktop navigation is intentionally untouched. */
@media (max-width: 782px) {
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		box-sizing: border-box;
		inset: 0;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: 100dvh;
		padding: 16px 24px 24px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
		align-items: flex-start;
		justify-content: flex-start;
		padding-top: 68px;
		overflow: visible;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		box-sizing: border-box;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 0;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin: 0;
		border-bottom: 1px solid rgba(107, 33, 168, 0.12);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		box-sizing: border-box;
		min-width: 0;
		padding: 12px 0;
		font-size: clamp(1.25rem, 5.5vw, 1.5rem);
		line-height: 1.25;
		overflow-wrap: anywhere;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content {
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
		flex: 1 1 auto;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
		display: grid;
		flex: 0 0 44px;
		place-items: center;
		width: 44px;
		height: 44px;
		margin: 0 0 0 auto;
		padding: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
		width: 14px;
		height: 14px;
		margin: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container {
		box-sizing: border-box;
		position: static;
		inset: auto;
		flex: 1 0 100%;
		align-items: stretch;
		gap: 0;
		visibility: hidden;
		opacity: 0;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: 0;
		margin: 0;
		padding: 0 0 0 18px;
		overflow: hidden;
		border: 0;
		background: transparent;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		visibility: visible;
		opacity: 1;
		height: auto;
		padding-top: 2px;
		padding-bottom: 8px;
		overflow: visible;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin: 0;
		background: transparent;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 8px 0;
		font-size: 1.125rem;
		line-height: 1.3;
		overflow-wrap: anywhere;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: grid;
		place-items: center;
		top: 0;
		right: 0;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus-visible,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon:focus-visible {
		outline: 3px solid #22c55e;
		outline-offset: 3px;
	}
}

@media (max-width: 782px) and (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
		animation: none !important;
		transition: none !important;
	}
}