/**
 * Match the header nav to the Astro build's Header.astro: translucent
 * "Call" pill button (the site header's mixed-transparency treatment core
 * button color/background attributes can't express) and a hover-opening
 * (not click-only) Loans/Resources dropdown, since WordPress's core
 * Navigation block only opens submenus on click by default.
 */
.df-sticky-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* 3-zone desktop layout: logo pinned to the far-left edge, nav truly
   centered independent of the logo/button widths, Call+Contact pinned to
   the far-right edge. Gutenberg's flex justifyContent:space-between only
   spaces siblings apart by their own width, which doesn't center an
   unevenly-sized middle item — grid does. Gated to the same 768px
   breakpoint calculators.css already uses, so mobile keeps the stock
   wrapped-flex fallback (logo + hamburger toggle) untouched. */
@media (min-width: 768px) {
	.df-header-row {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.df-header-logo {
		justify-self: start;
	}

	.df-header-nav {
		justify-self: center;
	}

	.df-header-buttons {
		justify-self: end;
	}
}

.df-header-pill-outline .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.df-header-pill-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

/* Submenus already open on hover via WP core's own navigation CSS (our items
   carry "open-on-hover-click", which core's `:hover` rule doesn't exclude) —
   no extra open/close rule needed here.

   The visibility bug: core's navigation stylesheet forces the submenu box to
   a white background via `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{background-color:#fff}`,
   a selector MORE specific than a plain `.wp-block-navigation .wp-block-navigation__submenu-container`
   rule, so it wins the cascade regardless of source order. Meanwhile the
   dropdown text inherits the header's white text color. White text on a
   white box the theme never asked for = invisible. Matching (or beating)
   core's specificity, with !important as a guaranteed win against a core
   block stylesheet, fixes both sides: navy box, white text. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--contrast, #002855) !important;
	border-radius: 8px;
	padding: 0.5rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #ffffff !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: rgba(255, 255, 255, 0.1);
}