/*
 * Homepage-only hero layout.
 *
 * Enqueued exclusively via is_front_page() in enqueue.php — never loads
 * on any other page. Rules here use bare selectors (no .is-homepage prefix)
 * because this file IS the scope guard. This makes the cinematic hero layout
 * work regardless of whether the body_class filter fires correctly.
 */

/* ── Fixed chrome: announcement bar + navigation ─────────────────────────── */

.announcement-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
}

/* WP admin bar (logged-in view) shifts everything down */
.admin-bar .announcement-bar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .announcement-bar {
		top: 46px;
	}
}

.site-header {
	position: fixed;
	top: var(--announcement-height);
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	/*
	 * No bottom divider in the transparent hero state: the header must
	 * blend into the photograph underneath. border-bottom is explicitly
	 * none because main.css's interior header border would otherwise
	 * re-apply here (same specificity, that file loads first). The
	 * scrolled white state below keeps its own separation line.
	 */
	border-bottom: none;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.admin-bar .site-header {
	top: calc(32px + var(--announcement-height));
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: calc(46px + var(--announcement-height));
	}
}

.site-header.is-scrolled {
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-line);
}

/* ── Word logo: sized for the transparent hero header ────────────────────── */

/* Asset is white on transparent — show white on dark hero, override main.css brightness(0) */
.site-header__brand .site-header__logo--word,
.site-header__brand img.site-header__logo--word {
	height: 80px;
	max-height: 80px;
	max-width: 500px;
	filter: none;
}

/* Once scrolled past hero, header turns white — invert logo to black */
.site-header.is-scrolled .site-header__brand .site-header__logo--word,
.site-header.is-scrolled .site-header__brand img.site-header__logo--word {
	filter: brightness(0);
}

/* ── White nav on transparent header ─────────────────────────────────────── */

.site-header:not(.is-scrolled) .site-header__nav a,
.site-header:not(.is-scrolled) .site-header__icon-btn {
	color: #fff;
}

.site-header:not(.is-scrolled) .site-header__cart-count,
.site-header:not(.is-scrolled) .site-header__wishlist-count {
	background: #fff;
	color: var(--color-ink);
}

.site-header.is-scrolled .site-header__nav a,
.site-header.is-scrolled .site-header__icon-btn {
	color: var(--color-ink);
}

/* ── Search by photo on the transparent header ───────────────────────────── */

/*
 * The search panel is a child of .site-header, so it inherits the same two
 * states the nav does: transparent over the hero, white once scrolled. Reusing
 * that hook keeps the treatment out of visual-search.css, which loads on every
 * page — interior pages, with their light backgrounds, never see these rules
 * and keep the ink version. Once scrolled, .is-scrolled stops matching and the
 * ink version comes back here too, against the white header.
 */
.site-header:not(.is-scrolled) .visual-search__open {
	color: #fff;
}

.site-header:not(.is-scrolled) .visual-search__open span {
	border-bottom-color: #fff;
}

/* Hover dims rather than darkens: black over a photograph would read as off. */
.site-header:not(.is-scrolled) .visual-search__open:hover {
	color: rgba(255, 255, 255, 0.7);
}

.site-header:not(.is-scrolled) .visual-search__open:hover span {
	border-bottom-color: rgba(255, 255, 255, 0.7);
}

/* main.css focuses with an ink outline, invisible against the hero. */
.site-header:not(.is-scrolled) .visual-search__open:focus-visible {
	outline-color: #fff;
}

/* The divider carries the same composition, so it whitens with it. */
.site-header:not(.is-scrolled) .visual-search__divider {
	color: rgba(255, 255, 255, 0.85);
}

.site-header:not(.is-scrolled) .visual-search__divider::before,
.site-header:not(.is-scrolled) .visual-search__divider::after {
	background: rgba(255, 255, 255, 0.45);
}

/* ── Hero: true full-viewport cinematic ───────────────────────────────────── */

/*
 * Both chrome bars are position:fixed — they take zero document flow.
 * <main> starts at the very top (Y = 0) of the scrolling document.
 * Hero must fill the complete viewport: 100svh, no subtraction needed.
 * 100dvh fallback for browsers that don't support svh (Safari < 15.4).
 */
.hero {
	height: 100dvh;        /* fallback */
	height: 100svh;        /* preferred: excludes mobile browser chrome */
	min-height: 560px;
}

/*
 * Mobile hero: section height and content safe area are separate.
 *
 * Confirmed mobile DOM geometry (header.php + home-hero.css):
 *   .announcement-bar  position:fixed, top 0,    height --announcement-height (40px, opaque)
 *   .site-header       position:fixed, top 40px, height --header-height (88px, TRANSPARENT)
 *   section.hero       in normal flow, starts at document Y=0
 *
 * Section height: the hero BOX is the full small viewport (100svh).
 * The fixed bars overlay the hero, so the box must not be shortened to
 * account for them — 0.8.20 subtracted the 40px announcement bar and
 * the category section's first 40px became visible above the fold.
 * With a full-viewport box, the category section begins exactly at
 * Y = one viewport and appears only on scroll.
 *
 * Content safe area: .hero__content is bottom-aligned (align-items:
 * flex-end on .hero__slide) inside that box, with 40px + safe-area
 * bottom padding — the CTA's fold clearance comes from the padding,
 * not from the section height. svh is the SMALL viewport (all Safari
 * browser chrome shown), so the CTA never sits behind the bottom
 * browser controls. Declaration order 100vh (legacy fallback, iOS
 * < 15.4) -> 100dvh -> 100svh; the last valid declaration always wins,
 * so svh is authoritative. No min-height floor on mobile (the 560px
 * desktop floor stays >=768px only). Desktop (>=768px) keeps the
 * approved design untouched.
 */
@media (max-width: 767px) {
	.hero {
		height: 100vh;   /* legacy fallback */
		height: 100dvh;  /* dynamic */
		height: 100svh;  /* small viewport — wins */
		min-height: 0;
	}

	.hero__content {
		padding: var(--space-10) var(--page-margin)
			calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
	}
}