/* ==========================================================================
   HIMPEL header — the page you are on
   --------------------------------------------------------------------------
   The one stylesheet in this plugin that loads on every page. Every other one
   is pulled in by its own shortcode; a header rule has to be there whether a
   HIMPEL section is on the page or not.

   It adds nothing to the theme and changes no theme file — it only recolours
   menu items the theme already renders.
   ========================================================================== */

/*
 * The theme gives every menu item the same black, current page or not, so the
 * header never says where the reader is. This colours the current one — and
 * its parent, for a page reached from a dropdown — in the brand green.
 *
 * Both copies of the menu are covered, not just the horizontal one: the second
 * is what a tablet shows, and the reader needs the answer at every width.
 */
.site-header .main-nav > li.current-menu-item > a,
.site-header .main-nav > li.current_page_item > a,
.site-header .main-nav > li.current-menu-parent > a,
.site-header .main-nav > li.current-menu-ancestor > a,
.site-header .main-nav > li.current_page_ancestor > a {
	/*
	 * !important, and not lightly. The header menu is an Elementor widget, and
	 * Elementor prints its colour as
	 * ".elementor-207 .elementor-element.elementor-element-XXX .main-nav > li > a"
	 * — four classes deep, against the three any sane selector here can reach.
	 * No amount of scoping wins that, and chasing it with a fifth class would
	 * mean naming an element id that changes the day the header is rebuilt.
	 *
	 * One property, on the current item only.
	 */
	color: var(--himpel-nav-active, #0b7347) !important;
}

/*
 * The dropdown arrow beside a parent item is an icon in its own element, so it
 * takes the colour it is given rather than the link's — currentColor keeps the
 * two in step.
 */
.site-header .main-nav > li.current-menu-item > a .link-icon,
.site-header .main-nav > li.current_page_item > a .link-icon,
.site-header .main-nav > li.current-menu-parent > a .link-icon,
.site-header .main-nav > li.current-menu-ancestor > a .link-icon,
.site-header .main-nav > li.current_page_ancestor > a .link-icon {
	color: currentColor;
}