/**
 * Commerce7 surface modifier tokens and utilities.
 */

:root {
	--commerce7-frost-padding: 1rem;
	--commerce7-frost-blur: 1.8rem;
	--commerce7-frost-border: rgba(255, 255, 255, 0.28);
	--commerce7-frost-surface: rgba(255, 255, 255, 0.14);
	--commerce7-frost-radius: 1.5rem;
	--commerce7-bordered-padding: clamp(2rem, 5.5vw, 4.5rem) clamp(1.65rem, 5vw, 4rem);
	--commerce7-bordered-border: rgb(1 22 35 / 20%);
	--commerce7-bordered-radius: 2.4rem;
	--commerce7-nav-submenu-ring: 0.85rem;
	--commerce7-nav-submenu-radius: 1.5rem;
	--commerce7-nav-submenu-padding: 1.5rem;
	--commerce7-nav-submenu-surface: var(--wp--preset--gradient--dark-gradient, #011623);
	--commerce7-nav-submenu-gap: 1rem;
	--commerce7-nav-submenu-chevron-size: 2em;
	--ursa6-nav-submenu-gap: var(--commerce7-nav-submenu-gap);
	--ursa6-nav-submenu-offset-y: 0.65rem;
}

.has-frosted-surface {
	position: relative;
	isolation: isolate;
	padding: var(--commerce7-frost-padding);
	background-color: var(--commerce7-frost-surface);
	border: 1px solid var(--commerce7-frost-border);
	border-radius: var(--commerce7-frost-radius);
	-webkit-backdrop-filter: blur(var(--commerce7-frost-blur));
	backdrop-filter: blur(var(--commerce7-frost-blur)) saturate(140%);

	&.wp-block-image {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);

		& img {
			border-radius: 0.5rem;
		}
	}
}

.wp-block-group.has-bordered-surface,
.block-editor-block-list__block.wp-block-group.has-bordered-surface {
	padding: var(--commerce7-bordered-padding);
	border: 1px solid var(--commerce7-bordered-border);
	border-radius: var(--commerce7-bordered-radius);
}

.wp-block-group.is-linked {
	&:hover,
	&:focus-within {
		border-color: var(--wp--preset--color--custom-accessible-blue, #2b6cb0) !important;
		
		& .wp-block-outermost-icon-block.arrow svg {
			transform: translateX(4px);
		}
	}
}

.wp-block-column > .wp-block-group.has-bordered-surface:only-child {
	height: 100%;
}

.wp-block-group.has-frosted-surface,
.wp-block-cover.has-frosted-surface {
	overflow: hidden;
}

.wp-block-image.has-frosted-surface {

	& img {
		display: block;
		width: 100%;
		height: auto;
	}

	&.is-style-round {
		border-radius: 9999px;
		overflow: hidden;

		& img {
			border-radius: 9999px;
		}
	}

	&.is-style-media-boxed img {
		border-radius: 0.5rem;
	}
}

/* Desktop navigation submenus: frosted glass ring around a solid brand panel. */

.wp-block-navigation:not(.ursa6-nav-is-mobile) {
	& .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
		--wp--navigation-submenu-background-color: transparent;

		z-index: 20;
		isolation: isolate;
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: var(--commerce7-nav-submenu-radius);
		padding: calc(var(--commerce7-nav-submenu-ring) + var(--commerce7-nav-submenu-padding));
		background-color: rgba(255, 255, 255, 0.14);
		-webkit-backdrop-filter: blur(1.25rem) saturate(140%);
		backdrop-filter: blur(1.25rem) saturate(140%);
		box-shadow:
			0 1rem 2.75rem rgba(1, 22, 35, 0.34),
			inset 0 1px 0 rgba(255, 255, 255, 0.18);
		color: var(--wp--preset--color--base, #ffffff);

		&::after {
			content: "";
			position: absolute;
			inset: var(--commerce7-nav-submenu-ring);
			z-index: 0;
			border-radius: calc(var(--commerce7-nav-submenu-radius) - 0.4rem);
			background: var(--commerce7-nav-submenu-surface);
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
			pointer-events: none;
		}

		& > .wp-block-navigation-item {
			position: relative;
			z-index: 1;
			border: 0;
			background-color: transparent;
		}
	}

	& .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
	& .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
		min-width: 240px;
	}

	& .wp-block-navigation__container > .wp-block-navigation-item.ursa6-submenu-columns > .wp-block-navigation__submenu-container {
		gap: 0.85rem 2.25rem;
		min-width: clamp(30rem, 42rem, 92vw);
		padding: calc(var(--commerce7-nav-submenu-ring) + var(--commerce7-nav-submenu-padding));
		left: -3rem;
	}

	& .ursa6-submenu-columns > .wp-block-navigation__submenu-container > .ursa6-nav-column-heading {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-width: 0;

		& > .wp-block-navigation__submenu-container {
			position: static !important;
			visibility: visible !important;
			opacity: 1 !important;
			transform: none !important;
			left: auto !important;
			right: auto !important;
			top: auto !important;
			width: 100% !important;
			min-width: 0 !important;
			height: auto !important;
			margin: 0 !important;
			padding: 0 !important;
			border: 0 !important;
			border-radius: 0 !important;
			background: transparent !important;
			box-shadow: none !important;
			-webkit-backdrop-filter: none !important;
			backdrop-filter: none !important;
			display: flex !important;
			flex-direction: column !important;
			gap: 0.15rem;
			z-index: auto !important;
			isolation: auto !important;

			&::after {
				content: none !important;
				display: none !important;
			}

			& .wp-block-navigation-item {
				padding: 0;
				margin-left: -0.5rem;
			}

			& .wp-block-navigation-item__content {
				padding: 0.5rem;

				& .wp-block-navigation-item__label {
					font-weight: 400;
				}
			}
		}

		& > .wp-block-navigation-submenu__toggle {
			display: none !important;
		}

		& .ursa6-nav-column-heading__label {
			font-weight: 600;
			cursor: default;
			pointer-events: none;
			margin-block-end: 0.35rem;
			padding: 0;
			background: transparent !important;
			flex: 0;
		}

		& .ursa6-nav-column-heading--click > button.ursa6-nav-column-heading__label {
			background: transparent;
			border: 0;
			text-align: inherit;
			font: inherit;
			color: inherit;
		}
	}

	/* Override core submenu row padding (.5em 1em) with even spacing. */
	& .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:not(.ursa6-nav-column-heading__label) {
		padding: 0.5rem;
	}

	& .wp-block-navigation__submenu-container {
		& .wp-block-navigation-item__content {
			background: transparent;
			border: 0;
			box-shadow: none;
			outline: none;
			padding: 0.5em;
			text-decoration: none;
			gap: 0.05em;
			border-radius: 10px;

			&:hover,
			&:focus {
				background-color: rgba(255, 255, 255, 0.1);
			}
		}

		& .wp-block-navigation-item__label {
			font-weight: 600;
			/* line-height: 1.25; */
		}

		& .wp-block-navigation-item__description {
			margin-top: 0.35rem;
			font-size: 0.875em;
			line-height: 1.45;
			color: var(--wp--preset--color--base, #ffffff);
			opacity: 0.72;
		}

		&.has-base-dark-color,
		&.has-text-color,
		& .wp-block-navigation-item__content,
		& .wp-block-navigation-item__label {
			color: var(--wp--preset--color--base, #ffffff);
		}

		& .wp-block-navigation-item {
			&:hover,
			&:focus-within {
				background-color: inherit;
			}
		}
	}

	& .wp-block-navigation__container > .wp-block-navigation-item.ursa6-submenu-align-right > .wp-block-navigation__submenu-container,
	& .wp-block-navigation-item.ursa6-submenu-align-right > .wp-block-navigation__submenu-container {
		left: auto;
		right: -3em;
		max-width: calc(100vw - 1.5rem);
	}

	& .wp-block-navigation-item.ursa6-submenu-flyout-left > .wp-block-navigation__submenu-container {
		left: auto;
		right: 100%;
	}
}

/* Navigation submenu chevron — replaces core stroke chevron with Commerce7 icon. */

.wp-block-navigation .wp-block-navigation__submenu-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--commerce7-nav-submenu-chevron-size);
	height: var(--commerce7-nav-submenu-chevron-size);
	margin: 0;

	& svg {
		display: none;
	}

	&::after {
		content: "";
		width: calc(var(--commerce7-nav-submenu-chevron-size) * 0.75);
		height: calc(var(--commerce7-nav-submenu-chevron-size) * 0.75);
		background-color: currentColor;
		mask: url("../images/nav-submenu-chevron.svg") no-repeat center / contain;
		-webkit-mask: url("../images/nav-submenu-chevron.svg") no-repeat center / contain;
		pointer-events: none;
		transition: transform var(--ursa6-mobile-nav-transition, 0.2s ease);
	}
}

.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon::after,
button.wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.wp-block-navigation.ursa6-nav-collapse-mobile-submenus .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
	--commerce7-nav-submenu-chevron-size: 30px;
}