/**
 * Rahiq — glass (frosted) effects, in four places only: the sticky header
 * (with the product page's section tabs under it), the phone menu, the text
 * box on the home banners and the phone order bar.
 *
 * They live in this file so they can be switched off in one place: remove
 * the 'rahiq-glass' enqueue in inc/setup.php. Browsers without
 * backdrop-filter keep the opaque look.
 */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

	/* 1. Header: frosted white, the page shows softly through it while
	   scrolling. The glass is a pseudo-element because backdrop-filter on the
	   header itself would trap the phone menu (position: fixed) inside it. */
	.rahiq-header {
		position: relative;
		isolation: isolate;
	}

	.rahiq-header.has-background {
		background-color: transparent !important;
	}

	.rahiq-header::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgb(255 255 255 / 80%);
		-webkit-backdrop-filter: blur(18px) saturate(180%);
		backdrop-filter: blur(18px) saturate(180%);
		pointer-events: none;
	}

	/* The product page's section tabs stick under the header: same glass. */
	.rahiq-section-nav {
		background: rgb(255 255 255 / 80%);
		-webkit-backdrop-filter: blur(18px) saturate(180%);
		backdrop-filter: blur(18px) saturate(180%);
	}

	/* 2. Phone menu: a frosted layer with the page blurred behind it. */
	.rahiq-header-nav .wp-block-navigation__responsive-container.is-menu-open {
		background-color: rgb(255 255 255 / 74%) !important;
		-webkit-backdrop-filter: blur(24px) saturate(180%);
		backdrop-filter: blur(24px) saturate(180%);
	}

	.rahiq-header-nav .is-menu-open .wp-block-navigation-item__content {
		border-block-end-color: rgb(21 18 14 / 10%);
	}

	.rahiq-header-nav .is-menu-open .rahiq-menu-search .wp-block-search__inside-wrapper {
		background: rgb(255 255 255 / 70%);
		box-shadow: inset 0 0 0 1px rgb(21 18 14 / 8%);
	}

	/* 3. Banners: lighter photo, with the text on a dark glass panel. */
	.is-style-slider .wp-block-cover__background.has-background-dim {
		opacity: 0.28 !important;
	}

	.is-style-slider .wp-block-cover__inner-container {
		inline-size: auto;
		max-inline-size: 34rem;
		padding: clamp(1rem, 0.75rem + 1.2vw, 1.75rem);
		border: 1px solid rgb(255 255 255 / 16%);
		border-radius: var(--rahiq-radius-lg);
		background: linear-gradient(150deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 0%) 45%), rgb(21 18 14 / 42%);
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 24px 48px -24px rgb(0 0 0 / 55%);
		-webkit-backdrop-filter: blur(14px) saturate(140%);
		backdrop-filter: blur(14px) saturate(140%);
	}

	@media (max-width: 719px) {
		.is-style-slider .wp-block-cover {
			padding-block-end: 2.75rem;
		}
	}

	/* 4. Phone order bar: frosted white over the page. */
	.rahiq-order-bar {
		background: rgb(255 255 255 / 80%);
		-webkit-backdrop-filter: blur(18px) saturate(180%);
		backdrop-filter: blur(18px) saturate(180%);
	}
}