/* Sticky header (free alternative to Astra Pro's Sticky Header module).
   Astra's Transparent Header forces #masthead to position:absolute with
   higher CSS specificity than a plain #masthead rule, so plain
   position:sticky never takes effect here — switch to position:fixed
   on scroll instead, via a JS-toggled class. */
#masthead {
	transition: box-shadow 0.2s ease;
}

#masthead.skinnyla-scrolled {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Keep the fixed header below the WP admin toolbar when logged in, instead
   of overlapping it. WP core's own breakpoint for the toolbar's height
   change (32px desktop / 46px mobile) is 782px — matched here exactly. */
body.admin-bar #masthead.skinnyla-scrolled {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar #masthead.skinnyla-scrolled {
		top: 46px !important;
	}
}

/* Regular (non-transparent) header state — e.g. search results, archives,
   any page without a hero image, e.g. search results. Without astra-addon
   active, the configured header background/text colors for this state
   don't render, leaving a bare white background with the site's global
   yellow link color for menu text — unreadable. Match the transparent
   hero look instead (brand yellow bg, black text) for a consistent header
   across the whole site rather than switching schemes per page. */
body:not(.ast-theme-transparent-header) #masthead {
	background-color: #fed531;
}

body:not(.ast-theme-transparent-header) #masthead .main-header-menu .menu-link,
body:not(.ast-theme-transparent-header) #masthead .ast-icon svg {
	color: #000000;
}

/* Shrink the header once it's pinned (scrolled), independent of positioning.
   Baseline height comes from Astra's own 80px min-height on the header row
   plus the full-size logo — reduce both, keep the logo's aspect ratio.
   Scoped to #ast-desktop-header specifically: Astra renders a *separate*
   #ast-mobile-header block for the off-canvas menu (both exist in the DOM,
   CSS toggles which one shows at the 768px breakpoint), and an unscoped
   .main-header-menu > .menu-item rule would also force this line-height
   onto the mobile menu's vertical item list, breaking its spacing. */
#masthead #ast-desktop-header .site-primary-header-wrap,
#masthead #ast-desktop-header .main-header-menu > .menu-item,
#masthead .site-logo-img img {
	transition: all 0.25s ease;
}

#masthead.skinnyla-scrolled #ast-desktop-header .site-primary-header-wrap {
	min-height: 56px !important;
}

#masthead.skinnyla-scrolled #ast-desktop-header .main-header-menu > .menu-item {
	line-height: 56px !important;
}

#masthead.skinnyla-scrolled .site-logo-img img {
	max-height: 40px !important;
	width: auto !important;
	height: auto !important;
}

.ast-button-wrap .menu-toggle:focus {
    outline: none;
}

/* Match the "no results" search prompt to the sidebar's Search widget styling.
   Astra deliberately hides its icon-button treatment in .no-results/.search
   contexts (falls back to a bare, unstyled form) — this replicates the same
   "icon docked inside the input" look .widget_search already gets. */
/* .no-results .search-form {
	position: relative;
	max-width: 400px;
}

.no-results .search-form .search-field {
	background: #fff;
	border: 1px solid var(--ast-border-color, #dddddd);
	border-radius: 2px;
	width: 100%;
	padding: 12px 45px 12px 15px;
}

.no-results .search-form .search-submit {
	display: block !important;
	position: absolute;
	top: 0;
	right: 0;
	width: 45px;
	height: 100%;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.no-results .search-form .search-submit span[hidden] {
	display: none !important;
}

.no-results .search-form .search-submit .ast-icon {
	display: inline-flex !important;
	color: #3a3a3a;
} */