/**
 * Home-page hero notice (#hours-closures-updates) -- the "Pizza & Pinots" box.
 *
 * The box is theme markup in the hero overlay; the Commerce7 personalization
 * block supplies its text. Its base styling lives in the Customizer's
 * Additional CSS, which sets `position: fixed` with no z-index and no way out:
 * the box never scrolls away, later content rides up over it, and wherever
 * that content is not fully opaque the notice text shows through.
 *
 * This adds the missing exit -- a fade tied to the hero leaving the viewport,
 * and a working dismiss -- without touching the existing rules.
 *
 * Specificity note: Additional CSS is printed inline on wp_head at priority
 * 101, after enqueued stylesheets, so its `#hours-closures-updates` (1,0,0)
 * would beat an equally specific rule here. Selectors below are (1,1,0) so
 * they win on specificity rather than on order.
 */

.hero-gallery-overlay #hours-closures-updates {
	opacity: 1;
	visibility: visible;
	/* Visibility flips instantly when showing; see the hidden state for why it
	   is delayed when hiding. */
	transition: opacity 0.35s ease, visibility 0s;
}

/* Scrolled past the hero.
 *
 * opacity alone would leave the box in the hit-testing and accessibility trees
 * -- still clickable and still read by screen readers. visibility removes it,
 * but cannot be transitioned smoothly, so it is delayed by the fade duration
 * so the element stays visible until the fade has finished. pointer-events
 * releases clicks to the content underneath immediately. */
.hero-gallery-overlay #hours-closures-updates.coleman-notice--hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

/* Remove the X. Nothing was ever bound to it -- verified dead on production as
 * well as locally -- and the notice now dismisses itself on scroll, so it has
 * no job. display: none also takes it out of the accessibility tree, so screen
 * readers no longer announce a button that does nothing.
 *
 * Hidden here rather than deleted from the page content because the markup
 * lives in the home page's ACF hero-overlay field: a content edit would be an
 * untracked database change needing to be repeated on production, and would be
 * undone by anyone re-editing that field. To strip the markup properly instead,
 * remove `<p><button class="close" type="button"><b>X</b></button></p>` from
 * the hero overlay content on page 7 and delete this rule. */
.hero-gallery-overlay #hours-closures-updates button.close,
.hero-gallery-overlay #hours-closures-updates p:has( > button.close ) {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.hero-gallery-overlay #hours-closures-updates,
	.hero-gallery-overlay #hours-closures-updates.coleman-notice--hidden,
	.hero-gallery-overlay #hours-closures-updates.coleman-notice--dismissed {
		transition: none;
	}
}