/*
 * Overrides for the header presets ("solid/gradient" and "transparent"),
 * the nav link hover color, the dropdown sub-menu, and the topline row.
 * Relies on the theme's own header/menu/topline markup already existing -
 * it adds modifier classes instead of touching the theme's stylesheet, so
 * this file is the only CSS this feature needs in any project, aside from a
 * handful of tiny `var(--webone-header-nav-hover, ...)` /
 * `var(--webone-dropdown-*, ...)` / `.header-topline-item--hide-sm` hooks
 * added to the theme's main.css (search it for "webone-dropdown" and
 * "webone-header-nav-hover"), needed because those rules target IDs/!important
 * declarations whose specificity a plugin stylesheet can't out-rank any
 * other way.
 *
 * --webone-header-bg / --webone-header-fg / --webone-header-nav-hover
 * (solid preset), --webone-header-transparent-bg /
 * --webone-header-transparent-blur / --webone-header-transparent-fg /
 * --webone-header-nav-hover (transparent preset), the --webone-dropdown-*
 * vars (dropdown sub-menu, same for both presets), and the
 * --webone-topline-* vars (topline row) are set inline per-page by
 * webone_header_attrs() / webone_header_dropdown_style_vars() /
 * webone_header_topline_attrs() (see includes/webone_header_output.php).
 */
header.webone-header-solid::before {
	background: var(--webone-header-bg);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/*
 * Two classes (.webone-header-solid.sticky) beat the theme's plain
 * `header.sticky::before` rule on specificity alone, so this wins
 * regardless of which stylesheet loads first in <head>.
 */
header.webone-header-solid.sticky::before {
	background: var(--webone-header-bg);
}

header.webone-header-solid {
	--tertiary: var(--webone-header-fg);
}

/*
 * The transparent preset's non-sticky background/blur are scoped with
 * :not(.sticky) rather than relying on a specificity fight against the
 * theme's `header.sticky::before` rule - so the theme's own sticky
 * background (var(--secondary)) still takes over unchanged once the header
 * sticks, exactly like it did before this preset was configurable.
 */
header.webone-header-transparent:not(.sticky)::before {
	background: var(--webone-header-transparent-bg);
	-webkit-backdrop-filter: blur(var(--webone-header-transparent-blur, 7px));
	backdrop-filter: blur(var(--webone-header-transparent-blur, 7px));
}

header.webone-header-transparent {
	--tertiary: var(--webone-header-transparent-fg);
}

/*
 * Nav link hover color, both presets. The custom property itself is
 * inherited from the <header> element regardless of which competing rule
 * "wins" in the theme's stylesheet (including its menu-ID-specific
 * override), so both of the theme's hover rules end up painting the same
 * color once they read var(--webone-header-nav-hover, ...) - see the two
 * matching edits in the theme's main.css.
 */

/*
 * Topline row. `.header-topline--managed` is always added by
 * webone_header_topline_attrs(), so these two classes together
 * out-specificity the theme's plain `.header-topline` / `a.header-topline-item:hover`
 * rules regardless of stylesheet load order.
 */
.header-topline.header-topline--managed {
	background: var(--webone-topline-bg);
	max-height: var(--webone-topline-max-height);
}

.header-topline.header-topline--managed .header-topline-inner {
	min-height: var(--webone-topline-height);
}

.header-topline.header-topline--managed .header-topline-item {
	color: var(--webone-topline-fg);
	font-size: var(--webone-topline-size, 1.3rem);
	font-weight: var(--webone-topline-weight, normal);
}

.header-topline.header-topline--managed .header-topline-item i {
	color: var(--webone-topline-icon);
}

.header-topline.header-topline--managed a.header-topline-item:hover {
	color: var(--webone-topline-hover);
}

/*
 * Admin's "Höjd (mobil)" field (webone_header_resolve_mobile_topline_height())
 * - matches the theme's own breakpoint where it already shrinks topline
 * padding/font-size (main.css, ~768px), so the height reduction lands at
 * the same point the content itself gets more compact instead of the two
 * changing at different widths.
 */
@media all and (max-width: 768px) {
	.header-topline.header-topline--managed {
		max-height: var(--webone-topline-max-height-mobile);
	}

	.header-topline.header-topline--managed .header-topline-inner {
		min-height: var(--webone-topline-height-mobile);
	}
}

/*
 * Ikon i huvudmenyns länkar (valfri, per menylänk - se
 * includes/webone_header_menu_icons.php). Samma "ikon+text i en flex-rad"-
 * mönster som knappikonerna i temats sidbyggare (css/blocks/blocks.css,
 * sök på "Ikon i knappar") och WebOne Footer-CTA/Footer Manager, fast
 * .mainmenu li a redan är en flex-rad genom att vara list-item-innehåll -
 * displayen sätts om till inline-flex bara för länkar som faktiskt har en
 * ikon, så länkar utan ikon behåller sin vanliga layout oförändrad.
 */
.mainmenu .webone-menu-icon {
	display: inline-flex;
	align-items: center;
	margin: 0 0.5rem 0 0;
	font-size: 0.9em;
	line-height: 1;
	color: inherit;
}

.mainmenu li a:has(.webone-menu-icon) {
	display: inline-flex;
	align-items: center;
}

/* Ikon EFTER texten (settings: Ikonens placering) - DOM-ordningen (ikonen
   ligger sist i markupen då, se nav_menu_item_title-filtret) räcker för
   visuell ordning, bara marginalen behöver flyttas om till vänster sida. */
.mainmenu li a .webone-menu-link-text ~ .webone-menu-icon {
	margin: 0 0 0 0.5rem;
}

/*
 * "Visa på små skärmar" (settings['menu']['mobile_display']) - modifierar-
 * klassen sätts på <header> av webone_header_attrs() bara när admin valt
 * något annat än "Ikon och text" (standard, ingen klass = ingen ändring
 * alls). Samma brytpunkt (1200px) som temats egen mainmenu-drawer, se
 * main.css "#main-menu" i @media (max-width:1200px).
 */
@media all and (max-width: 1200px) {
	header.webone-menu-mobile-icon .webone-menu-link-text {
		display: none;
	}

	header.webone-menu-mobile-text .webone-menu-icon {
		display: none;
	}
}

/*
 * Menyval som knapp (per menylänk, se includes/webone_header_menu_buttons.php).
 * Färgerna kommer som --wmb-* i länkens style-attribut; tomt = temats
 * standard (samma som .block-button). :is(#main-menu-inner-wrapper, header)
 * ger ID-specificitet så att temats "#main-menu-inner-wrapper
 * .current-menu-item>a { color: ... !important }" inte färgar om knappen
 * när man står på sidan den länkar till.
 */
:is(#main-menu-inner-wrapper, header) .mainmenu li.webone-menu-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 0.9rem 2rem;
	border-radius: 10px;
	line-height: 1.2;
	background-color: var(--wmb-bg, var(--primary));
	color: var(--wmb-fg, var(--secondary)) !important;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

:is(#main-menu-inner-wrapper, header) .mainmenu li.webone-menu-button > a:hover,
:is(#main-menu-inner-wrapper, header) .mainmenu li.webone-menu-button > a:focus-visible {
	background-color: var(--wmb-bg-hover, var(--wmb-bg, var(--primary-light)));
	color: var(--wmb-fg-hover, var(--wmb-fg, var(--secondary))) !important;
}

/* Hover-animationer - samma tre som WebOne Formulär (button_hover_animation). */
:is(#main-menu-inner-wrapper, header) .mainmenu li.webone-menu-button > a[data-btn-hover-anim="lift"]:hover {
	transform: translateY(-3px);
}

:is(#main-menu-inner-wrapper, header) .mainmenu li.webone-menu-button > a[data-btn-hover-anim="zoom"]:hover {
	transform: scale(1.05);
}

:is(#main-menu-inner-wrapper, header) .mainmenu li.webone-menu-button > a[data-btn-hover-anim="shadow"]:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
	:is(#main-menu-inner-wrapper, header) .mainmenu li.webone-menu-button > a:hover {
		transform: none;
	}
}

/* Mobilmenyn (temats drawer, samma brytpunkt): länkarna är där rader i full
   bredd - knappen blir en egen knapp med luft runt istället. */
@media all and (max-width: 1200px) {
	:is(#main-menu-inner-wrapper, header) .mainmenu li.webone-menu-button > a {
		width: auto;
		margin: 1.2rem 2.4rem;
		padding: 1.2rem 2.4rem;
	}
}

/* Vänsterkant i linje med de andra länkarna (temat: 1.8rem under 767px). */
@media all and (max-width: 767px) {
	:is(#main-menu-inner-wrapper, header) .mainmenu li.webone-menu-button > a {
		margin: 1.2rem 1.8rem;
	}
}