/* ---------------------------------------------------------
   Site header overrides.
   Background matches text-slide (#f7f5f0), logo flush-left with
   minimal padding, menu items right-aligned in Fraunces to match
   the hero titles. !important is required because Kadence's
   CSS specificity is high and shipped via inline styles.
--------------------------------------------------------- */

#masthead,
#masthead .site-header-wrap,
#masthead .site-header-inner-wrap,
#masthead .site-header-row-container,
#masthead .site-header-row-container-inner,
#masthead .site-main-header-inner-wrap,
.site-header,
.site-header-wrap {
	background-color: var( --lotarch-bg-primary ) !important;
}

/* Force the header inner container to full-width with tight left/right padding
   so the logo can sit near the far-left edge and menu near the far-right. */
#masthead .site-container,
#masthead .site-header-wrap .site-container,
#masthead .kadence-header-widths {
	max-width: 100% !important;
	padding-left: clamp( 1.5rem, 4vw, 4rem ) !important;
	padding-right: clamp( 1.5rem, 3vw, 2.5rem ) !important;
}

/* Push branding to the left; push menu to the right. */
.site-header-item.site-header-focus-item[data-section="kadence_customizer_header_html_id_1"],
.site-branding,
.site-header .site-branding {
	margin-left: 0 !important;
	padding-left: 0 !important;
	justify-content: flex-start !important;
}

.header-menu-container,
.site-header .main-navigation,
.header-navigation {
	justify-content: flex-end !important;
}

/* Verplaats de nav-items op desktop ~1.5cm verder naar rechts via
   negative margin-right zodat ze dichter bij de rechterrand komen.
   Op mobile (< 900px) waar het menu een hamburger wordt houden we
   de default positie. site-header-wrap krijgt overflow-x: clip zodat
   een overhang van de nav geen horizontal-scroll veroorzaakt. */
@media ( min-width: 900px ) {
	#masthead .header-menu-container,
	#masthead .site-header .main-navigation,
	#masthead .header-navigation {
		margin-right: -1.5cm !important;
	}
}

.site-header,
.site-header-wrap {
	overflow-x: clip;
}

/* Menu items: Fraunces serif to match hero titles. */
.main-navigation .menu-item a,
.header-menu-container .menu a,
.header-navigation .menu a,
.site-header nav a,
.site-header .menu > li > a,
#site-navigation-primary .menu-item a {
	font-family: var(--lotarch-font-serif) !important;
	font-weight: 500 !important;
	font-size: 1.05rem !important;
	letter-spacing: -0.005em !important;
	color: #1a1a1a !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: opacity 0.2s ease !important;
}

.main-navigation .menu-item a:hover,
.header-menu-container .menu a:hover,
.header-navigation .menu a:hover,
.site-header nav a:hover,
.site-header .menu > li > a:hover,
.main-navigation .menu-item a:focus-visible,
.header-menu-container .menu a:focus-visible,
.header-navigation .menu a:focus-visible {
	opacity: 1 !important;
	color: #FD9606 !important;
	transition: color 0.2s ease !important;
}

/* Active page: menu-item van de huidige pagina blijft persistent oranje.
   Twee mechanismen naast elkaar:
     1. WordPress current-menu-item / current_page_item classes (op <li>)
     2. .is-current-page class die door onze eigen wp_footer JS wordt
        toegevoegd (op <li> EN <a>) als de href matcht met de huidige
        URL — dekt Kadence-varianten die de WP-classes niet zetten.

   Specificity moet Kadence's base rule
     #site-navigation-primary .menu-item a { color: #1a1a1a !important; }
   verslaan. Die base rule heeft specificity (1,1,1) met !important. Dus
   we gebruiken hier ID + minimaal 2 classes zodat we op (1,2,X) of
   hoger uitkomen — !important + hogere specificity = wint gegarandeerd.
   Doubled .is-current-page.is-current-page is een legit CSS-trick om
   de class-count in de specificity op te krikken zonder de match-logica
   te veranderen (een class match altijd tegen zichzelf). */
#masthead a.is-current-page.is-current-page,
#masthead .is-current-page > a.is-current-page,
#masthead .current-menu-item > a,
#masthead .current_page_item > a,
#masthead .current-menu-ancestor > a,
#masthead .current_page_ancestor > a,
#masthead .current-menu-parent > a,
#site-navigation-primary a.is-current-page.is-current-page,
#site-navigation-primary .is-current-page > a,
#site-navigation-primary .current-menu-item > a,
#site-navigation-primary .current_page_item > a,
#site-navigation-primary .current-menu-ancestor > a,
#site-navigation-primary .current_page_ancestor > a,
#site-navigation-primary .current-menu-parent > a {
	color: #FD9606 !important;
}

/* Neat, consistent spacing between menu items. */
.main-navigation ul.menu,
.header-menu-container ul.menu,
.header-navigation ul.menu {
	display: flex !important;
	align-items: center !important;
	gap: 2rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.main-navigation ul.menu > li,
.header-menu-container ul.menu > li,
.header-navigation ul.menu > li {
	margin: 0 !important;
	padding: 0 !important;
}

/* Ensure no bottom border/shadow separating header from hero
   (both are the same off-white now, so any border would look wrong).
   Extended: also strip shadows and filters from the logo and its wrappers,
   in case Kadence Customizer added a drop-shadow effect. */
#masthead,
#masthead *,
.site-header,
.site-header *,
.site-header-wrap,
.site-branding,
.site-branding a,
.site-branding img,
.custom-logo,
.custom-logo-link,
.custom-logo-link img {
	box-shadow: none !important;
	filter: none !important;
	-webkit-filter: none !important;
	text-shadow: none !important;
}

#masthead,
.site-header,
.site-header-wrap,
.site-header-inner-wrap,
.site-header-row-container {
	border-bottom: 0 !important;
	border-top: 0 !important;
}