/*
 * Sidfot: the footer from the 2026-11 Figma design (NB/Footer v2 + mobil). The atomic containers
 * carry their own layout as local styles; this file styles the nav-menu widgets inside them, which
 * take no tokens, and the measure the kit has no token for. Hook classes: nb-fot (every footer
 * nav-menu), nb-fot-kontakt, nb-fot-lista, nb-fot-rad; s-nbf* are the template's local style classes.
 */

.s-nbf {
	--nb-fot-linje: rgba(255, 255, 255, 0.15); /* Figma, no token */
	--nb-ikon: none;
	color: var(--text-primary-inverted);
	font-family: var(--font-family-primary), sans-serif;
}

/* Same measure as the header: 1170px of content plus the gutter. */
.s-nbf .s-nbf-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(1170px + 2 * var(--space-gutter));
	padding-inline: var(--space-gutter);
}

@media (max-width: 767px) {
	.s-nbf .s-nbf-inner {
		padding-inline: 16px; /* Figma mobile */
	}
}

.s-nbf-symbol {
	display: block;
	height: auto;
}

/* ---------------------------------------------------------------- Shared nav-menu reset */

.elementor .nb-fot .elementor-nav-menu--dropdown,
.elementor .nb-fot .elementor-menu-toggle {
	display: none;
}

/* Elementor's clearfix pseudo-elements become flex items and take a gap of their own. */
.elementor .nb-fot .elementor-nav-menu--main .elementor-nav-menu::before,
.elementor .nb-fot .elementor-nav-menu--main .elementor-nav-menu::after {
	content: none;
	display: none;
}

.elementor .nb-fot .elementor-nav-menu--main .elementor-item {
	padding: 0;
	font-family: var(--font-family-primary), sans-serif;
	font-weight: 400;
	color: var(--text-primary-inverted);
}

/* Hover and keyboard focus turn orange, as in the header. Icons follow (they are currentColor). */
.s-nbf .elementor-widget-nav-menu.nb-fot .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible),
.s-nbf .elementor-widget-nav-menu.nb-fot .elementor-nav-menu--main .elementor-item.elementor-item-active:is(:hover, :focus-visible) {
	color: var(--surface-highlight);
}

/* Icons: menu items carry ikon-<name> as their CSS class. */
.s-nbf .nb-fot .elementor-item::before {
	content: "";
	display: block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	/* !important: Elementor's nav-menu pointer rules own and hide these pseudo-elements. */
	background: currentColor !important;
	opacity: 1 !important;
	position: static;
	transform: none;
	-webkit-mask: var(--nb-ikon) center / contain no-repeat;
	mask: var(--nb-ikon) center / contain no-repeat;
}

.s-nbf .nb-fot .menu-item:not([class*="ikon-"]) > .elementor-item::before {
	content: none;
	display: none;
}

.s-nbf .nb-fot .ikon-phone { --nb-ikon: var(--icon-phone); }
.s-nbf .nb-fot .ikon-mail { --nb-ikon: var(--icon-mail); }
.s-nbf .nb-fot .ikon-wrench { --nb-ikon: var(--icon-wrench); }
.s-nbf .nb-fot .ikon-arrow-right { --nb-ikon: var(--icon-arrow-right); }
.s-nbf .nb-fot .ikon-user-circle { --nb-ikon: var(--icon-user-circle); }

/* ---------------------------------------------------------------- Contact (phone, e-mail) */

.elementor .nb-fot-kontakt .elementor-nav-menu--main > .elementor-nav-menu {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.elementor .nb-fot-kontakt .elementor-nav-menu--main .elementor-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------- Link lists (Om oss, Kundservice) */

.elementor .nb-fot-lista {
	width: 100%;
}

.elementor .nb-fot-lista .elementor-nav-menu--main > .elementor-nav-menu {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

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

.elementor .nb-fot-lista .elementor-nav-menu--main .elementor-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	font-size: 15px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------- Bottom row (juridik, externa) */

.s-nbf .nb-fot-rad {
	flex: 0 0 auto; /* content-sized; never shrink below its links */
}

.elementor .nb-fot-rad .elementor-nav-menu--main > .elementor-nav-menu {
	display: flex;
	flex-wrap: nowrap; /* the widget is content-sized; wrapping would let it shrink to one word */
	white-space: nowrap;
	align-items: center;
	gap: 12px;
}

.elementor .nb-fot-rad .elementor-nav-menu--main .elementor-item {
	font-size: 14px;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* Figma separates the links with a middle dot at half opacity. */
.elementor .nb-fot-rad .elementor-nav-menu--main .elementor-nav-menu > li + li::before {
	content: "·";
	margin-inline-end: 12px;
	font-size: 14px;
	line-height: 1.2;
	opacity: 0.5;
}

.elementor .nb-fot-rad .elementor-nav-menu--main .elementor-nav-menu > li {
	display: flex;
	align-items: center;
}

@media (max-width: 767px) {
	.elementor .nb-fot-rad .elementor-nav-menu--main > .elementor-nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.elementor .nb-fot-rad .elementor-nav-menu--main .elementor-nav-menu > li + li::before {
		content: none;
	}
}

/* ---------------------------------------------------------------- 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 disappears on the footer's background. The design
 * has no current state: the link keeps its default colour.
 */
.s-nbf .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.s-nbf .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:active {
	color: var(--text-primary-inverted);
}