/* ==========================================================================
   Cide Child — sticky horizontal menu that floats above the hero slider
   ========================================================================== */

/*
 * 1. Make the header stick to the top of the viewport and sit ON TOP of
 *    the hero slider (transparent at first), then solidify once the
 *    visitor scrolls. This gives the "menu above a sliding hero" look
 *    even though the header and hero are separate, stacked sections.
 */
#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: transparent;
	box-shadow: none;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Only float transparently over the hero on the front page, where the
   slider is the very first thing under the header. On inner pages the
   header stays solid so text/menu remain readable against page content. */
body:not(.home) #masthead.site-header {
	background-color: var(--cide-header-bg, #fff);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Once the visitor scrolls past the hero (class added by custom.js). */
#masthead.site-header.is-scrolled {
	background-color: var(--cide-header-bg, #fff);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/*
 * 2. On the transparent (pre-scroll, front-page-only) state, keep menu
 *    text and logo readable against a busy hero image.
 */
body.home #masthead.site-header:not(.is-scrolled) .main-navigation a,
body.home #masthead.site-header:not(.is-scrolled) .site-title a,
body.home #masthead.site-header:not(.is-scrolled) .site-description {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/*
 * 3. Horizontal menu polish — even styling on top of whichever of the
 *    five built-in menu styles you pick in Customize > Header Menu Style.
 */
#site-navigation #primary-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.75rem;
}

#site-navigation #primary-menu > li > a {
	position: relative;
	padding-block: 0.35rem;
}

#site-navigation #primary-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: currentColor;
	transition: right 0.25s ease;
}

#site-navigation #primary-menu > li > a:hover::after,
#site-navigation #primary-menu > li > a:focus::after {
	right: 0;
}

/* Hide the housekeeping "close menu" item on desktop; it's only needed
   inside the mobile off-canvas panel. */
@media (min-width: 769px) {
	#site-navigation .menu-close-item {
		display: none;
	}
}

/*
 * 4. Optional: give the hero section (first element Cide renders inside
 *    .cide-fullwidth on the front page) a taller, more cinematic height.
 *    Safe to delete this block if you're happy with the default sizing.
 */
body.home .cide-fullwidth > *:first-child {
	min-height: 70vh;
}