/*
 * KDR — Header extras
 * Loaded by the kdr child theme (see functions.php).
 * Applies to the native-Elementor header (Container + Image + Heading
 * + WordPress Menu widgets), targeted via the "kdr-header-pill" CSS
 * class set on the Container in Elementor's Advanced tab.
 */

.kdr-header-pill {
	/* Transparent, no blur, no shadow at rest — Elementor natively sets a
	   background_color + box_shadow on this container, so both need
	   !important here to actually start invisible. */
	background-color: transparent !important;
	box-shadow: none !important;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease;
}

.kdr-header-pill.is-scrolled {
	/* Pure glass: blur only, no color tint behind it. */
	background-color: transparent !important;
	box-shadow: 0 4px 24px rgba(41, 54, 19, 0.15) !important;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
}

/* Keep the site title on one line instead of wrapping mid-word */
.kdr-header-pill .elementor-widget-heading .elementor-heading-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Let the nav wrap onto a tidy second row instead of an off-balance
   orphan item, and tighten spacing so more items fit per row */
.kdr-header-pill .elementor-nav-menu--main,
.kdr-header-pill nav.elementor-nav-menu--main {
	flex-wrap: wrap;
	row-gap: 6px;
	column-gap: 4px;
	justify-content: flex-end;
}
.kdr-header-pill .elementor-nav-menu {
	flex-wrap: wrap;
	row-gap: 6px;
}
.kdr-header-pill .elementor-nav-menu .elementor-item {
	padding: 6px 12px;
	white-space: nowrap;
}

/* Keep the WordPress Menu widget's mobile dropdown panel on-brand */
.kdr-header-pill .elementor-nav-menu--dropdown {
	background-color: #293613;
}
.kdr-header-pill .elementor-nav-menu--dropdown .elementor-item {
	color: #fcfbf2;
}
.kdr-header-pill .elementor-nav-menu--dropdown .elementor-item:hover,
.kdr-header-pill .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
	color: #c0b648;
}