/*
 * Toppmeny: the header, its mega panels and the mobile menu (Figma "Nynasbo – Design",
 * Ny design desktop + mobil, 2026-11). The atomic containers carry their own layout as local
 * styles; this file only styles what the v3 widgets inside them cannot take as tokens
 * (nav-menu, search-form, mega-menu, nested-accordion, off-canvas) and the one breakpoint the
 * kit does not have. Keyed on hook classes (nb-*) and the header's local style classes (s-nbh*).
 */

.s-nbh {
	--nb-linje: rgba(255, 255, 255, 0.1); /* Figma border/default on blue, no token */
	--nb-yta: rgba(255, 255, 255, 0.05); /* Figma field and open-item surface, no token */
	--nb-ikon: none;
	color: var(--text-secondary-inverted);
	font-family: var(--font-family-primary), sans-serif;
}

/* Sticky as a whole. nynasbo.css pulls the old header up by its logo row (live copy); not this one. */
html header.elementor-location-header:has(.s-nbh) {
	position: sticky;
	top: 0;
}

/* Webien gives every v3 container a default padding; the nested widgets' children own none. */
.s-nbh .e-con.webien-container-padding-default {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

/*
 * Gutter. The container class owns the measure but not the gutter (a page's section does that);
 * the header has no section around its row, so the row and each panel take the gutter here.
 */
.s-nbh .s-nbh-inner {
	box-sizing: border-box;
	/* Figma's measure for the header: 1170px of content (135px sides at 1440). No token holds it. */
	max-width: calc(1170px + 2 * var(--space-gutter));
	padding-inline: var(--space-gutter);
}

.s-nbh .nb-mega .e-n-menu-content > .e-con.e-con {
	--padding-left: var(--space-gutter);
	--padding-right: var(--space-gutter);
}

/* nynasbo.css steps every non-header .container down to live's widths (910px at 1136-1262px);
   a panel is rendered as its own document, so it would be caught by that. Panels keep the header's measure. */
.s-nbh .nb-mega .e-n-menu-content .elementor .elementor-element.container.container {
	max-width: 1170px; /* same measure as the header row above it */
}

/* ---------------------------------------------------------------- Shared: masked icons */

.s-nbh .nb-verktyg .elementor-item::before,
.s-nbh .nb-lista .elementor-item::after,
.s-nbh .nb-landning .elementor-item::after,
.s-nbh .nb-sok .elementor-search-form__submit::before,
.s-nbh .nb-mega .e-n-menu-dropdown-icon::before,
.s-nbh .nb-dragspel .e-n-accordion-item-title::after,
.s-nbh-oppna::before,
.s-nbo-stang::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	/* !important: Elementor's nav-menu pointer rules paint these pseudo-elements with the kit accent. */
	background: currentColor !important;
	-webkit-mask: var(--nb-ikon) center / contain no-repeat;
	mask: var(--nb-ikon) center / contain no-repeat;
	/* Elementor's pointer effects own these pseudo-elements on nav items (hidden until hover); undo them. */
	opacity: 1 !important;
	position: static;
	transform: none;
}

/* ---------------------------------------------------------------- Logo */

.s-nbh-logo,
.s-nbo-logo {
	display: block;
	height: auto;
}

.s-nbh-inner > a:has(.s-nbh-logo) {
	padding-bottom: 20px; /* Figma: the logo sits 10px above the row's centre */
}

/* ---------------------------------------------------------------- Utility row */

.elementor .nb-verktyg .elementor-nav-menu--main .elementor-nav-menu {
	gap: 16px;
}

/* Elementor's clearfix ::before/::after on the list are flex items here and each took a 16px gap,
   pushing the search field 16px further from "Mina sidor" than Figma's 8px padding + 16px gap. */
.elementor .nb-verktyg .elementor-nav-menu--main .elementor-nav-menu::before,
.elementor .nb-verktyg .elementor-nav-menu--main .elementor-nav-menu::after {
	content: none;
	display: none;
}

.elementor .nb-verktyg .elementor-nav-menu--main .elementor-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	font-family: var(--font-family-primary), sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--text-secondary-inverted);
}

.elementor .nb-verktyg .elementor-nav-menu--main .elementor-item:hover,
.elementor .nb-verktyg .elementor-nav-menu--main .elementor-item:focus-visible {
	color: var(--surface-highlight);
}

.s-nbh .nb-verktyg .elementor-item::before {
	width: 16px;
	height: 16px;
}

.s-nbh .nb-verktyg .ikon-wrench { --nb-ikon: var(--icon-wrench); }
.s-nbh .nb-verktyg .ikon-phone { --nb-ikon: var(--icon-phone); }
.s-nbh .nb-verktyg .ikon-user-circle { --nb-ikon: var(--icon-user-circle); }

/* The nav-menu widget always prints a hidden mobile copy; none of these menus use it. */
.s-nbh .nb-verktyg .elementor-nav-menu--dropdown,
.s-nbh .nb-lista .elementor-nav-menu--dropdown,
.s-nbh .nb-landning .elementor-nav-menu--dropdown,
.s-nbh .nb-verktyg .elementor-menu-toggle,
.s-nbh .nb-lista .elementor-menu-toggle,
.s-nbh .nb-landning .elementor-menu-toggle {
	display: none;
}

/* ---------------------------------------------------------------- Search */

.s-nbh .elementor-widget-search-form.nb-sok .elementor-search-form__container {
	width: 260px;
	height: 36px;
	min-height: 36px;
	background: var(--nb-yta);
	border: 1px solid var(--nb-linje);
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: none;
}

.s-nbh .elementor-widget-search-form.nb-sok .elementor-search-form__input {
	height: auto;
	min-height: 0;
	height: 100%;
	padding: 0 0 0 12px;
	background: transparent;
	border: 0;
	color: var(--text-secondary-inverted);
	font-family: var(--font-family-primary), sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
}

.s-nbh .elementor-widget-search-form.nb-sok .elementor-search-form__input::placeholder {
	color: var(--text-secondary-inverted);
	opacity: 0.6;
}

.s-nbh .elementor-widget-search-form.nb-sok .elementor-search-form__submit,
.s-nbh .elementor-widget-search-form.nb-sok .elementor-search-form__submit:hover,
.s-nbh .elementor-widget-search-form.nb-sok .elementor-search-form__submit:focus {
	--nb-ikon: var(--icon-search);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	min-width: 42px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--text-secondary-inverted);
}

.s-nbh .elementor-widget-search-form.nb-sok .elementor-search-form__submit .e-font-icon-svg-container {
	display: none;
}

.s-nbh .nb-sok .elementor-search-form__submit::before {
	width: 18px;
	height: 18px;
}

/* The widget writes a 3px radius on both container and input at (0,4,0). Figma: 8px on the field. */
.s-nbh .elementor-widget-search-form.nb-sok.nb-sok .elementor-search-form__container {
	border-radius: var(--radius-sm);
}

.s-nbh .elementor-widget-search-form.nb-sok.nb-sok .elementor-search-form__input {
	border-radius: 0;
}

/* ---------------------------------------------------------------- Main menu (mega-menu) */

.elementor-widget-n-menu.nb-mega {
	--n-menu-title-color-normal: var(--text-secondary-inverted);
	--n-menu-title-color-hover: var(--surface-highlight);
	--n-menu-title-color-active: var(--text-secondary-inverted); /* an open title keeps its colour, like every other item */
	--n-menu-title-space-between: 12px;
	--n-menu-title-distance-from-content: 16px;
	--n-menu-dropdown-content-box-border-radius: 0px;
}

.elementor-widget-n-menu.nb-mega .e-n-menu-heading {
	gap: 12px;
}

.elementor-widget-n-menu.nb-mega .e-n-menu-title {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--text-secondary-inverted);
	cursor: pointer;
}

.elementor-widget-n-menu.nb-mega .e-n-menu-title-container,
.elementor-widget-n-menu.nb-mega .e-n-menu-title-text {
	padding: 0;
	color: inherit;
	font-family: var(--font-family-primary), sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.elementor-widget-n-menu.nb-mega .e-n-menu-title:hover {
	color: var(--surface-highlight);
}

.elementor-widget-n-menu.nb-mega .e-n-menu-title:has(.e-n-menu-dropdown-icon[aria-expanded="true"]) {
	background: var(--nb-yta);
}

.elementor-widget-n-menu.nb-mega .e-n-menu-dropdown-icon,
.elementor-widget-n-menu.nb-mega .e-n-menu-dropdown-icon:hover,
.elementor-widget-n-menu.nb-mega .e-n-menu-dropdown-icon:focus {
	--nb-ikon: var(--icon-chevron-down);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin: 0; /* Pro adds 5px; the title's 6px gap is Figma's spacing */
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
}

.s-nbh .nb-mega .e-n-menu-dropdown-icon::before {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.s-nbh .nb-mega .e-n-menu-dropdown-icon[aria-expanded="true"]::before {
	transform: rotate(180deg);
}

/* The open/closed glyph spans hold only screen-reader text here; keep them, hide nothing else. */
.elementor-widget-n-menu.nb-mega .e-n-menu-dropdown-icon > span {
	position: absolute;
}

/*
 * Overlay under an open panel (Figma "Overlay – stäng": #092233 at 45%). It is the header's own
 * pseudo-element: the sticky header is a stacking context (z-index 100), so z-index -1 paints it over
 * the page and under the header and panel. A click on it is a click outside the mega-menu, which Pro
 * already answers by closing the panel.
 */
header.elementor-location-header:has(.nb-mega .e-n-menu-dropdown-icon[aria-expanded="true"])::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba(9, 34, 51, 0.45);
	cursor: pointer;
}

.elementor-widget-n-menu.nb-mega .e-n-menu-content > .e-con {
	background: var(--surface-accent);
	box-shadow: 0 12px 32px rgba(9, 34, 51, 0.18); /* Figma Shadow/Dropdown */
}

/* ---------------------------------------------------------------- Panel lists (desktop) */

.elementor .nb-lista {
	flex: 1 1 0;
	min-width: 0;
}

.elementor .nb-lista .elementor-nav-menu--main > .elementor-nav-menu {
	display: block;
	columns: 2;
	column-gap: 40px;
}

.elementor .nb-lista .elementor-nav-menu--main .elementor-nav-menu > li {
	break-inside: avoid;
	border-bottom: 1px solid var(--nb-linje);
}

.elementor .nb-lista .elementor-nav-menu--main .elementor-item {
	--nb-ikon: var(--icon-arrow-right);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	font-family: var(--font-family-primary), sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 27px;
	color: var(--text-secondary-inverted);
}

.elementor .nb-lista .elementor-nav-menu--main .elementor-item:hover,
.elementor .nb-lista .elementor-nav-menu--main .elementor-item:focus-visible {
	color: var(--surface-highlight);
}

.s-nbh .nb-lista .elementor-item::after {
	width: 18px;
	height: 18px;
}

/* "Alla områden": the landing link under a panel's intro. */
.elementor .nb-landning .elementor-nav-menu--main .elementor-item {
	--nb-ikon: var(--icon-arrow-right);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0 0;
	font-family: var(--font-family-primary), sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--text-secondary-inverted);
}

.elementor .nb-landning .elementor-nav-menu--main .elementor-item:hover,
.elementor .nb-landning .elementor-nav-menu--main .elementor-item:focus-visible {
	color: var(--surface-highlight);
}

.s-nbh .nb-landning .elementor-item::after {
	width: 18px;
	height: 18px;
	background: var(--surface-highlight) !important;
}

/* ---------------------------------------------------------------- Icon buttons */

.s-nbh .s-nbh-oppna,
.s-nbh .s-nbo-stang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 0; /* the text stays the accessible name */
}

/* The atomic button darkens its text on hover; these carry only an icon. */
.s-nbh .s-nbh-oppna:hover,
.s-nbh .s-nbh-oppna:focus,
.s-nbh .s-nbo-stang:hover,
.s-nbh .s-nbo-stang:focus {
	color: var(--text-secondary-inverted);
	background: var(--nb-yta);
}

.s-nbh-oppna { --nb-ikon: var(--icon-menu); }
.s-nbo-stang { --nb-ikon: var(--icon-close); }

.s-nbh-oppna::before,
.s-nbo-stang::before {
	width: 20px;
	height: 20px;
}

/* ---------------------------------------------------------------- Mobile menu (off-canvas) */

.nb-oc .e-off-canvas__main {
	background: var(--surface-accent);
	color: var(--text-secondary-inverted);
}

.nb-oc .e-off-canvas__content {
	height: 100%;
	overflow-y: auto;
	/* No scroll anchoring: when a row above opens or closes, the browser would otherwise shift the
	   scroll position to keep something else in place, and the rows jump. */
	overflow-anchor: none;
	padding: 0;
	background: var(--surface-accent);
}

/* The menu's top row (logo and close) stays put while the menu scrolls under it. */
.nb-oc .s-nbo-top {
	position: sticky;
	top: 0;
	z-index: 10; /* Elementor gives every nav-menu list z-index 2; the bar must cover them */
	background: var(--surface-accent);
}

.nb-oc .e-off-canvas__overlay {
	background: transparent;
}

.s-nbh .elementor-widget-search-form.nb-sok--mobil .elementor-search-form__container {
	width: 100%;
	height: 40px;
	min-height: 40px;
}

.elementor-widget-n-accordion.nb-dragspel {
	--n-accordion-title-normal-color: var(--text-secondary-inverted);
	--n-accordion-title-hover-color: var(--text-secondary-inverted);
	--n-accordion-title-active-color: var(--text-secondary-inverted);
	--n-accordion-icon-normal-color: var(--text-secondary-inverted);
	--n-accordion-icon-active-color: var(--text-secondary-inverted);
	/* Figma: 16px under the search field, 24px above "Ställ dig i kön". The space below is padding:
	   Elementor zeroes a widget's bottom margin inside a flex container, so a margin never showed. */
	margin-top: 16px;
	padding-bottom: 24px;
	--n-accordion-padding: 0px;
	--n-accordion-border-width: 0px;
	--n-accordion-item-title-space-between: 0px;
	--n-accordion-item-title-distance-from-content: 0px;
}

/*
 * The divider is an inset shadow, not a border. The accordion animates each item's height to
 * title + content, and a border on the item is outside both: it made the panel land 1px short and
 * then jump when the animation finished.
 */
.elementor-widget-n-accordion.nb-dragspel .e-n-accordion-item {
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 var(--nb-linje);
}

.elementor-widget-n-accordion.nb-dragspel .e-n-accordion-item:last-child:not([open]) {
	box-shadow: none;
}

.elementor-widget-n-accordion.nb-dragspel .e-n-accordion-item-title {
	--nb-ikon: var(--icon-chevron-down);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 61px;
	padding: 16px 0;
	border: 0;
	background: transparent;
	color: var(--text-secondary-inverted);
	cursor: pointer;
	/* Elementor transitions "all" here; nothing on the row should animate, least of all its size. */
	transition: none;
	/* While a row opens, the accordion pins the item at its closed height and the content is already
	   inside: the item is a flex column, so the title shrank to make room (its padding visibly
	   collapsed) and sprang back when the animation released the height. The title never shrinks. */
	flex-shrink: 0;
}

.elementor-widget-n-accordion.nb-dragspel .e-n-accordion-item-title-text {
	color: inherit;
	font-family: var(--font-family-primary), sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

.s-nbh .nb-dragspel .e-n-accordion-item-title::after {
	width: 20px;
	height: 20px;
	transition: transform 0.2s ease;
}

.s-nbh .nb-dragspel .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
	transform: rotate(180deg);
}

.elementor-widget-n-accordion.nb-dragspel .e-n-accordion-item > .e-con {
	--padding-bottom: 20px;
	border: 0;
}

.elementor .nb-lista--mobil .elementor-nav-menu--main > .elementor-nav-menu {
	columns: auto;
}

.elementor .nb-lista--mobil .elementor-nav-menu--main .elementor-nav-menu > li {
	border-bottom: 0;
}

.elementor .nb-lista--mobil .elementor-nav-menu--main .elementor-item {
	padding: 8.75px 0; /* 40px rows, Figma */
	font-size: 15px;
	line-height: 22.5px;
}

.s-nbh .nb-lista--mobil .elementor-item::after {
	display: none;
}

.elementor .nb-verktyg--mobil {
	padding-top: 24px;
}

.elementor .nb-verktyg--mobil .elementor-nav-menu--main .elementor-item {
	padding: 8px 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

.s-nbo-cta {
	height: 43px;
}

/* ---------------------------------------------------------------- Breakpoint */

/*
 * The desktop row needs about 1080px (logo, four items and the button side by side); the kit's
 * tablet breakpoint is 1024px, so the switch is its own media query rather than a variant.
 */
@media (min-width: 1140px) {
	.s-nbh .s-nbh-oppna,
	.s-nbh .elementor-widget-off-canvas.nb-oc {
		display: none;
	}
}

@media (max-width: 1139px) {
	.s-nbh .s-nbh-desk {
		display: none;
	}

	.s-nbh .s-nbh-inner {
		height: 76px;
		padding: 11px 8px 11px 16px;
		max-width: none;
	}

	.s-nbh .s-nbh-logo {
		width: 154px;
	}

	.s-nbh-inner > a:has(.s-nbh-logo),
	.s-nbo-top > a:has(.s-nbo-logo) {
		padding-bottom: 10px;
	}
}

/* ---------------------------------------------------------------- Current page and pressed links */

/*
 * The kit colours a nav item that points at the current page (.elementor-item-active) and a pressed
 * link (:active) with its accent, #0F3C53, which is the header's own background. The design has no
 * current state: the link keeps its default colour, and hover/focus still turn it orange.
 */
.s-nbh .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.s-nbh .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:active {
	color: var(--text-secondary-inverted);
}

.s-nbh .elementor-widget-nav-menu.nb-verktyg .elementor-nav-menu--main .elementor-item.elementor-item-active:is(:hover, :focus-visible),
.s-nbh .elementor-widget-nav-menu.nb-lista .elementor-nav-menu--main .elementor-item.elementor-item-active:is(:hover, :focus-visible),
.s-nbh .elementor-widget-nav-menu.nb-landning .elementor-nav-menu--main .elementor-item.elementor-item-active:is(:hover, :focus-visible) {
	color: var(--surface-highlight);
}