/**
 * 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;
	--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 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 {
	display: block;

	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.35rem;
			}

			.wp-block-navigation-item__content {
				padding: 0.35rem;

				.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;
		}
	}

	.wp-block-navigation__submenu-container {
		.wp-block-navigation-item__content {
			background: transparent;
			border: 0;
			box-shadow: none;
			outline: none;
			padding: 0.4rem 0;
			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: 0;
		max-width: calc(100vw - 1.5rem);
	}

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