/*
 * Sacraw quick-return header — FROSTED-GLASS see-through variant (mobile/tablet <=1024px).
 * Restores the original "see the content blur through the header" look WITHOUT putting
 * backdrop-filter back on the fixed element (that's the iOS bug). The blur lives on an
 * absolute ::before layer instead, so #site-header itself stays plain `position:fixed`.
 * Loaded only when sacraw_qr_header_glass / ?glass=1 is active (companion mu-plugin).
 */
@media (max-width: 1024px) {
	@layer components {
		/* Make the header surface transparent so the ::before glass shows through. */
		#site-header.glass-header:not(.glass-header--transparent) {
			background-color: transparent !important;
		}
	}

	/* Frosted layer behind the header content; blurs the page scrolling underneath.
	   EXACT original .glass-header spec (sacraw-brand.css @layer components): cream 0.78
	   + blur(14px) saturate(140%) + the same hairline border — restored, not re-spec'd. */
	#site-header.glass-header:not(.glass-header--transparent)::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: rgba(247, 245, 241, 0.78);
		-webkit-backdrop-filter: blur(14px) saturate(140%);
		backdrop-filter: blur(14px) saturate(140%);
		border-bottom: 1px solid rgba(15, 23, 42, 0.04);
		pointer-events: none;
	}
}

/* Browsers without backdrop-filter support: fall back to a near-opaque cream so text
   stays legible (no see-through, but never a transparent/unreadable bar). */
@media (max-width: 1024px) {
	@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		@layer components {
			#site-header.glass-header:not(.glass-header--transparent) {
				background-color: rgba(247, 245, 241, 0.98) !important;
			}
		}
		#site-header.glass-header:not(.glass-header--transparent)::before {
			display: none;
		}
	}
}