/*
Theme Name: Home Of The Century
Theme URI: https://homeofthecentury.local/
Author: Allen Hirmiz
Description: Child theme of Twenty Twenty-Five for the Home Of The Century website. Adds a sticky, transparent header that gains a frosted background on scroll.
Template: twentytwentyfive
Version: 0.3.0
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
*/

/* ---------- Sticky + transparent site header ---------- */

/* The site header is rendered by the "header" template part with tagName=header,
   so it outputs as <header class="wp-block-template-part">. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	background-color: transparent;
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

/* Once the user scrolls past the threshold, JS adds .is-scrolled.
   Frosted-glass effect: translucent white + blur. */
header.wp-block-template-part.is-scrolled {
	background-color: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Safari fallback when backdrop-filter is unsupported. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	header.wp-block-template-part.is-scrolled {
		background-color: rgba(255, 255, 255, 0.92);
	}
}

/* Make sure content below the header isn't covered when the page starts
   at the very top. Sticky (vs fixed) handles this naturally — the header
   takes up its own space — so no body padding is needed. */