/* ==========================================================================
   Advantage custom header
   --------------------------------------------------------------------------
   The header itself is a floating BOX, and the mega card drops from it at the
   exact same width and radius, so the two read as one object.

   No black bar. No heading elements anywhere - the markup is only
   div / p / ul / li / a / img.

   Palette sampled from the LIVE advantage.se:
       #8b7a6c  brand taupe  (84 uses on the live homepage)
       #cca78b  warm tan
       #907e5c  olive gold
       #0b0c0d  deep black   (text + active pill only, never a background bar)
       #fef5ed  warm cream   (tab rail wash)
   ========================================================================== */

:root {
	--adv-black:       #0b0c0d;
	--adv-accent:      #8b7a6c;
	--adv-accent-rgb:  139, 122, 108;
	--adv-tan:         #cca78b;
	--adv-gold:        #907e5c;
	--adv-cream:       #fef5ed;
	--adv-card:        #ffffff;
	--adv-ink:         #14161a;
	--adv-ink-soft:    #5c5750;
	--adv-line:        #ece7e1;

	--adv-box-h:       76px;   /* header box height at rest  */
	--adv-box-h-sm:    62px;   /* height once stuck          */
	--adv-gap:         5px;    /* breathing room around the box */
	--adv-radius:      10px;

	--adv-font:        "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--adv-display:     "Kalnia", Georgia, "Times New Roman", serif;

	--adv-ease:        cubic-bezier(0.4, 0, 0.2, 1);
	--adv-speed:       0.32s;
	--adv-z:           9990;
}

/* --------------------------------------------------------------------------
   1. The header box
   -------------------------------------------------------------------------- */

.adv-header {
	position: relative;               /* NOT sticky - it scrolls away with the page */
	z-index: var(--adv-z);
	background: transparent;
	padding: var(--adv-gap) 0;
	transition: padding var(--adv-speed) var(--adv-ease), transform var(--adv-speed) var(--adv-ease);
}


/*
 * Everything inside the header uses border-box. Without this the box's
 * `width` and its horizontal `padding` ADD UP, making the box wider than the
 * viewport and pushing the logo and CTA off both edges.
 */
.adv-header *,
.adv-header *::before,
.adv-header *::after,
.adv-drawer *,
.adv-drawer *::before,
.adv-drawer *::after { box-sizing: border-box; }

/* This is the box. The mega card aligns to it exactly. */
.adv-header__inner {
	position: relative;               /* anchor for the mega card */
	box-sizing: border-box;
	width: min(1320px, 100% - 48px);
	max-width: 100%;
	margin-inline: auto;
	height: var(--adv-box-h);
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 22px;
	background: var(--adv-card);      /* white header box */
	border-radius: var(--adv-radius);
	transition: height var(--adv-speed) var(--adv-ease);
}


.adv-header.is-stuck { padding: 8px 0; }

.adv-header.is-stuck .adv-header__inner { height: var(--adv-box-h-sm); }

.adv-header__left  { flex: 0 0 auto; }
.adv-header__right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* --------------------------------------------------------------------------
   2. Logo  (box is white, so the original dark logo is used as-is)
   -------------------------------------------------------------------------- */

.adv-logo { display: inline-flex; align-items: center; text-decoration: none; }

.adv-logo img {
	display: block;
	height: 36px;
	width: auto;
	transition: height var(--adv-speed) var(--adv-ease);
}
.adv-logo--text {
	font-family: var(--adv-display);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--adv-black);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Top-level navigation
   -------------------------------------------------------------------------- */

.adv-nav { flex: 1 1 auto; min-width: 0; }

.adv-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.adv-item { position: relative; }

.adv-item__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 13px;
	font-family: var(--adv-font);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--adv-black);          /* black menu links */
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s var(--adv-ease);
}

.adv-item:hover > .adv-item__link,
.adv-item--active > .adv-item__link { color: var(--adv-accent); }

/* No underline. Hover/active is indicated by colour alone. */
.adv-item__label { position: relative; }

.adv-item__caret {
	width: 5px;
	height: 5px;
	border-right: 1.3px solid currentColor;
	border-bottom: 1.3px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.3s var(--adv-ease);
	opacity: 0.6;
}

.adv-item:hover > .adv-item__link .adv-item__caret {
	transform: rotate(-135deg) translateY(-1px);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Simple dropdown
   -------------------------------------------------------------------------- */

.adv-dropdown {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	min-width: 190px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--adv-card);
	border: 1px solid var(--adv-line);
	border-radius: var(--adv-radius);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(10px);
	transition:
		opacity    0.28s var(--adv-ease),
		transform  0.28s var(--adv-ease),
		visibility 0.28s var(--adv-ease);
}

.adv-item:hover > .adv-dropdown,
.adv-item:focus-within > .adv-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.adv-dropdown__link {
	display: block;
	padding: 9px 20px;
	font-family: var(--adv-font);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.05em;
	white-space: nowrap;
	color: var(--adv-ink);
	text-decoration: none;
	transition: background 0.2s var(--adv-ease), color 0.2s var(--adv-ease);
}

.adv-dropdown__link:hover { background: var(--adv-cream); color: var(--adv-accent); }

/* --------------------------------------------------------------------------
   5. The mega card - same width and radius as the header box
   -------------------------------------------------------------------------- */

.adv-item--mega { position: static; }

.adv-mega {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	right: 0;                          /* matches the header box exactly */
	background: var(--adv-card);
	border: 1px solid var(--adv-line);
	border-radius: var(--adv-radius);
	overflow: hidden;                  /* clips the watermark */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition:
		opacity    0.32s var(--adv-ease),
		transform  0.32s var(--adv-ease),
		visibility 0.32s var(--adv-ease);
}

.adv-item--mega:hover > .adv-mega,
.adv-item--mega:focus-within > .adv-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.adv-mega__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 300px 1fr;
	min-height: 372px;
}

/* ---- Tab rail ---- */

.adv-mega__tabs {
	margin: 0;
	padding: 18px 14px;
	list-style: none;
	background: linear-gradient(180deg, var(--adv-cream) 0%, #fffdfb 100%);
	border-right: 1px solid var(--adv-line);
	max-height: 58vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/*
 * Sized so the longest tab label - "Internationell privaträtt" (25 chars) and
 * "Tvistlösning och process" (24) - fits on ONE line.
 * 25 chars at 11px + 0.03em tracking = ~181px inside a ~229px column.
 */
.adv-mega__tab-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 13px;
	border-radius: 6px;
	font-family: var(--adv-font);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.3;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--adv-ink);
	text-decoration: none;
	transition: background 0.26s var(--adv-ease), color 0.26s var(--adv-ease);
}

.adv-mega__tab-link > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

.adv-mega__tab-link:hover,
.adv-mega__tab-link:focus-visible {
	background: rgba(var(--adv-accent-rgb), 0.13);
	color: var(--adv-accent);
}

.adv-mega__tab.is-active > .adv-mega__tab-link {
	background: var(--adv-black);
	color: #fff;
}

.adv-mega__tab-arrow {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-top: 1.3px solid currentColor;
	border-right: 1.3px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.5;
}

.adv-mega__tab.is-active .adv-mega__tab-arrow { opacity: 1; }

/* ---- Panels ---- */

.adv-mega__panels {
	position: relative;
	padding: 26px 30px;
	max-height: 58vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.adv-mega__panel { display: none; }

.adv-mega__panel.is-active {
	display: block;
	animation: adv-fade-up 0.34s var(--adv-ease) both;
}

.adv-mega__panel--media.is-active {
	display: grid;
	grid-template-columns: 228px 1fr;   /* narrower media = wider link columns */
	gap: 28px;
	align-items: start;
}

@keyframes adv-fade-up {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---- Media ---- */

/* The image IS the link - there is no separate "read more" element. */
.adv-mega__media {
	display: block;
	position: relative;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
}

.adv-mega__media img {
	display: block;
	width: 100%;
	height: 224px;
	object-fit: cover;
	transition: transform 0.6s var(--adv-ease);
}

.adv-mega__media:hover img { transform: scale(1.05); }

/* Background-image replacement for the <img>: identical box (100% x 224px, cover). */
.adv-mega__media .adv-mega__thumb {
	display: block;
	width: 100%;
	height: 224px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.6s var(--adv-ease);
}
.adv-mega__media:hover .adv-mega__thumb { transform: scale(1.05); }

.adv-mega__media-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 26px 14px 12px;
	background: linear-gradient(to top, rgba(11, 12, 13, 0.86) 0%, rgba(11, 12, 13, 0) 100%);
	font-family: var(--adv-display);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
	color: #fff;
}

/* ---- Panel body ---- */

/*
 * A tab with an image but no sub-links shows the image on its own.
 * It is given more room so the panel never looks half-empty.
 */
.adv-mega__panel--media.adv-mega__panel--solo.is-active {
	grid-template-columns: minmax(0, 460px);
	justify-content: start;
}

.adv-mega__panel--solo .adv-mega__media img,
.adv-mega__panel--solo .adv-mega__media .adv-mega__thumb { height: 300px; }

.adv-mega__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px 26px;
	align-content: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* No image means room for three columns. */
.adv-mega__panel:not(.adv-mega__panel--media) .adv-mega__links {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * Sized so the longest label - "Dolda fel i hus och bostadsrätt", 31 chars -
 * fits on ONE line inside a column of this width.
 */
.adv-mega__link {
	display: inline-block;
	position: relative;
	padding: 2px 0;
	font-family: var(--adv-font);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.025em;
	line-height: 1.45;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--adv-ink);
	text-decoration: none;
	transition: color 0.24s var(--adv-ease);
}

.adv-mega__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--adv-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--adv-ease);
}

.adv-mega__link:hover { color: var(--adv-accent); }
.adv-mega__link:hover::after { transform: scaleX(1); }

/*
 * Fourth level. No border-left "afterthought" bracket - each row is prefixed
 * with a short rule in the accent colour that extends on hover, so it reads as
 * a deliberate sub-item rather than leftover indentation.
 */
.adv-mega__sublinks {
	margin: 7px 0 2px;
	padding: 0;
	list-style: none;
}

.adv-mega__sublinks li + li { margin-top: 3px; }

.adv-mega__sublink {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 1px 0;
	font-family: var(--adv-font);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0.09em;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--adv-ink-soft);
	text-decoration: none;
	transition: color 0.24s var(--adv-ease);
}

.adv-mega__sublink::before {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 1px;
	background: var(--adv-accent);
	opacity: 0.5;
	transition: width 0.26s var(--adv-ease), opacity 0.26s var(--adv-ease);
}

.adv-mega__sublink:hover { color: var(--adv-accent); }
.adv-mega__sublink:hover::before { width: 18px; opacity: 1; }

/* Watermark - clipped by the card's overflow:hidden. */
.adv-mega__watermark {
	position: absolute;
	right: 24px;
	bottom: -10px;
	z-index: 0;
	font-family: var(--adv-display);
	font-size: 58px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	color: rgba(11, 12, 13, 0.03);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. CTA in the header box
   -------------------------------------------------------------------------- */

.adv-cta {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid var(--adv-black);
	border-radius: 999px;
	font-family: var(--adv-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	white-space: nowrap;
	color: var(--adv-black);
	text-decoration: none;
	transition: background 0.26s var(--adv-ease), border-color 0.26s var(--adv-ease), color 0.26s var(--adv-ease);
}

.adv-cta:hover {
	background: var(--adv-black);
	border-color: var(--adv-black);
	color: #fff;
}

.adv-cta--block {
	display: block;
	text-align: center;
	background: var(--adv-black);
	color: #fff;
}

/* --------------------------------------------------------------------------
   7. Burger
   -------------------------------------------------------------------------- */

.adv-burger {
	display: none;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--adv-line);
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
}

.adv-burger span {
	display: block;
	width: 18px;
	height: 1.4px;
	margin: 4px auto;
	background: var(--adv-black);
	transition: transform 0.3s var(--adv-ease), opacity 0.3s var(--adv-ease);
}

.adv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.4px) rotate(45deg); }
.adv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.adv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.4px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Mobile drawer
   -------------------------------------------------------------------------- */

.adv-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 89vw);
	z-index: calc(var(--adv-z) + 2);
	display: flex;
	flex-direction: column;
	background: var(--adv-card);
	transform: translateX(100%);
	transition: transform 0.4s var(--adv-ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.adv-drawer.is-open { transform: translateX(0); }

.adv-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	background: var(--adv-cream);
	border-bottom: 1px solid var(--adv-line);
}

.adv-drawer__head .adv-logo img { height: 31px; }

.adv-drawer__close {
	width: 36px;
	height: 36px;
	border: 1px solid var(--adv-line);
	border-radius: 6px;
	background: #fff;
	font-size: 22px;
	line-height: 1;
	color: var(--adv-ink);
	cursor: pointer;
}

.adv-drawer__body { flex: 1 1 auto; padding: 4px 0; }
.adv-drawer__foot { padding: 16px 18px; border-top: 1px solid var(--adv-line); }

.adv-overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--adv-z) + 1);
	background: rgba(11, 12, 13, 0.5);
	opacity: 0;
	transition: opacity 0.35s var(--adv-ease);
}

.adv-overlay.is-visible { opacity: 1; }

.adv-acc__list { margin: 0; padding: 0; list-style: none; }

.adv-acc__row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--adv-line);
}

.adv-acc__link {
	flex: 1 1 auto;
	padding: 13px 18px;
	font-family: var(--adv-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--adv-ink);
	text-decoration: none;
}

.adv-acc__btn {
	flex: 0 0 auto;
	width: 44px;
	border: 0;
	border-left: 1px solid var(--adv-line);
	background: none;
	cursor: pointer;
	position: relative;
}

.adv-acc__btn::before,
.adv-acc__btn::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 1.4px;
	background: var(--adv-accent);
	transform: translate(-50%, -50%);
	transition: transform 0.3s var(--adv-ease), opacity 0.3s var(--adv-ease);
}

.adv-acc__btn::after { transform: translate(-50%, -50%) rotate(90deg); }
.adv-acc__btn[aria-expanded="true"]::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }

.adv-acc__sub {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 0;
	overflow: hidden;
	background: var(--adv-cream);
	transition: max-height 0.35s var(--adv-ease);
}

.adv-acc__sub .adv-acc__link { padding-left: 34px; font-size: 11.5px; }
.adv-acc__sub .adv-acc__sub .adv-acc__link { padding-left: 52px; text-transform: none; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

/* Laptops */
@media (max-width: 1400px) {
	.adv-header__inner { gap: 14px; }
	.adv-item__link { padding: 10px 10px; letter-spacing: 0.05em; }
	.adv-mega__panel--media.is-active { grid-template-columns: 210px 1fr; gap: 24px; }
	.adv-mega__panel--media.adv-mega__panel--solo.is-active { grid-template-columns: minmax(0, 400px); }
}

/* Small laptops - the tab rail stays wide enough for the longest label. */
@media (max-width: 1200px) {
	:root { --adv-box-h: 70px; --adv-box-h-sm: 58px; }
	.adv-item__link { padding: 10px 8px; font-size: 13px; letter-spacing: 0.03em; }
	.adv-mega__inner { grid-template-columns: 270px 1fr; min-height: 340px; }
	.adv-mega__panels { padding: 22px 24px; }
	.adv-mega__panel--media.is-active { grid-template-columns: 185px 1fr; gap: 20px; }
	.adv-mega__media img,
	.adv-mega__media .adv-mega__thumb { height: 185px; }
	.adv-mega__panel--solo .adv-mega__media img,
	.adv-mega__panel--solo .adv-mega__media .adv-mega__thumb { height: 250px; }
	.adv-mega__link { font-size: 11px; }
	.adv-mega__panel:not(.adv-mega__panel--media) .adv-mega__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.adv-mega__watermark { font-size: 46px; }
}

/* Tablet and below: inline nav is replaced by the burger + drawer. */
@media (max-width: 1024px) {
	.adv-nav    { display: none; }
	.adv-burger { display: block; }
	.adv-header__inner { width: calc(100% - 28px); padding: 0 16px; gap: 10px; }
}

/* Large phones */
@media (max-width: 767px) {
	:root { --adv-box-h: 66px; --adv-box-h-sm: 58px; --adv-gap: 12px; }
	.adv-logo img { height: 30px; }
	.adv-cta { padding: 9px 16px; font-size: 11px; letter-spacing: 0.03em; }
}

/* Small phones - the CTA lives at the foot of the drawer instead. */
@media (max-width: 560px) {
	:root { --adv-box-h: 60px; --adv-box-h-sm: 54px; --adv-gap: 10px; }
	.adv-logo img { height: 27px; }
	.adv-logo--text { font-size: 18px; letter-spacing: 0.06em; }
	.adv-cta { display: none; }
	.adv-header__inner { width: calc(100% - 20px); padding: 0 12px; border-radius: 8px; }
	.adv-drawer { width: min(340px, 92vw); }
	.adv-acc__link { padding: 12px 16px; font-size: 11.5px; }
	.adv-acc__sub .adv-acc__link { padding-left: 30px; }
	.adv-acc__sub .adv-acc__sub .adv-acc__link { padding-left: 46px; }
}

/* Very small phones */
@media (max-width: 360px) {
	.adv-logo img { height: 24px; }
	.adv-header__inner { padding: 0 10px; }
	.adv-burger { width: 38px; height: 38px; }
}

/* --------------------------------------------------------------------------
   10. Integration + accessibility
   -------------------------------------------------------------------------- */

body.adv-drawer-open { overflow: hidden; }

.elementor-popup-modal { z-index: 10000 !important; }

@media (prefers-reduced-motion: reduce) {
	.adv-header,
	.adv-header__inner,
	.adv-mega,
	.adv-dropdown,
	.adv-drawer,
	.adv-overlay,
	.adv-acc__sub,
	.adv-mega__media img,
	.adv-mega__thumb,
	.adv-item__label::after,
	.adv-mega__link::after {
		transition-duration: 0.01ms !important;
	}
	.adv-mega__panel.is-active { animation: none !important; }
}

/* --------------------------------------------------------------------------
   11. Language switcher — flag + name, as on advantage.se
   -------------------------------------------------------------------------- */

.adv-lang__flag {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-right: 7px;
}

.adv-lang__flag img {
	display: block;
	width: 18px!important;
	height: auto!important;
	border-radius: 2px;
}

.adv-dropdown--lang .adv-dropdown__link {
	display: flex;
	align-items: center;
	gap: 0;
}

/* ==========================================================================
   12. Button reset + refined mobile layout
   --------------------------------------------------------------------------
   hello-elementor / Elementor style bare <button> elements with a dark fill
   and generous padding. That is what turned the burger, the close button and
   the accordion toggles into large black blocks. These rules reset every
   button inside the header and drawer, then restyle them deliberately.
   ========================================================================== */

.adv-header button,
.adv-drawer button {
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	background-color: transparent !important;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	box-shadow: none !important;
	cursor: pointer;
}

/* ---- Burger ---- */

.adv-header .adv-burger {
	display: none;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border: 1px solid rgba(11, 12, 13, 0.16);
	border-radius: 6px;
	transition: border-color 0.25s var(--adv-ease);
}

.adv-header .adv-burger:hover { border-color: var(--adv-accent); }

.adv-header .adv-burger span {
	display: block;
	width: 16px;
	height: 1.3px;
	margin: 3.5px auto;
	background: var(--adv-black);
	border-radius: 1px;
	transition: transform 0.3s var(--adv-ease), opacity 0.3s var(--adv-ease);
}

.adv-header .adv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.8px) rotate(45deg); }
.adv-header .adv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.adv-header .adv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.8px) rotate(-45deg); }

/* ---- Drawer close ---- */

.adv-drawer .adv-drawer__close {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(11, 12, 13, 0.16);
	border-radius: 6px;
	font-size: 17px;
	color: var(--adv-black);
	transition: border-color 0.25s var(--adv-ease), color 0.25s var(--adv-ease);
}

.adv-drawer .adv-drawer__close:hover { border-color: var(--adv-accent); color: var(--adv-accent); }

/* ---- Accordion +/- toggles ---- */

.adv-drawer .adv-acc__btn {
	position: relative;
	width: 40px;
	flex: 0 0 40px;
	align-self: stretch;
	border: 0;
	border-left: 1px solid var(--adv-line);
	border-radius: 0;
}

.adv-drawer .adv-acc__btn::before,
.adv-drawer .adv-acc__btn::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 1.2px;
	background: var(--adv-accent);
	transform: translate(-50%, -50%);
	transition: transform 0.3s var(--adv-ease), opacity 0.3s var(--adv-ease);
}

.adv-drawer .adv-acc__btn::after { transform: translate(-50%, -50%) rotate(90deg); }
.adv-drawer .adv-acc__btn[aria-expanded="true"]::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }

/* ---- Drawer polish ---- */

.adv-drawer__head {
	padding: 14px 16px;
	background: #fff;
	border-bottom: 1px solid var(--adv-line);
}

.adv-drawer__head .adv-logo img { height: 28px; }

.adv-drawer .adv-acc__row { border-bottom: 1px solid var(--adv-line); }

.adv-drawer .adv-acc__link {
	padding: 13px 16px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--adv-black);
}

.adv-drawer .adv-acc__sub {
	background: #fbf8f5;
	border-top: 1px solid var(--adv-line);
}

.adv-drawer .adv-acc__sub .adv-acc__link {
	padding-left: 30px;
	font-size: 11.5px;
	letter-spacing: 0.07em;
	color: var(--adv-ink-soft);
}

.adv-drawer .adv-acc__sub .adv-acc__sub .adv-acc__link {
	padding-left: 46px;
	font-size: 11px;
	text-transform: none;
	letter-spacing: 0.02em;
}

.adv-drawer .adv-acc__sub .adv-acc__btn::before,
.adv-drawer .adv-acc__sub .adv-acc__btn::after { width: 8px; }

.adv-drawer__foot { padding: 14px 16px; }

.adv-drawer .adv-cta--block {
	padding: 11px 18px;
	font-size: 11.5px;
	letter-spacing: 0.09em;
	background: var(--adv-black) !important;
	border-color: var(--adv-black);
	color: #fff;
}

/* ---- Small screens: tighter header box ---- */

@media (max-width: 1024px) {
	.adv-header .adv-burger { display: block; }
	.adv-header__inner { gap: 8px; }
}

@media (max-width: 600px) {
	.adv-header__inner { padding: 0 12px; }
	.adv-logo img { height: 26px; }
	.adv-header .adv-burger { width: 36px; height: 36px; flex-basis: 36px; }
}

/* ==========================================================================
   13. Drawer close icon — drawn, not a glyph
   --------------------------------------------------------------------------
   The Elementor kit sets `.elementor-kit-5 button { color: #FFFFFF }`, which
   made the &times; glyph render white-on-white and look like an empty box.
   The X is now drawn with two pseudo-element bars, so it cannot be affected
   by inherited font or colour rules.
   ========================================================================== */

.adv-drawer .adv-drawer__close {
	position: relative;
	font-size: 0 !important;      /* hides the &times; character itself */
	line-height: 0;
	color: transparent !important;
	overflow: hidden;
}

.adv-drawer .adv-drawer__close::before,
.adv-drawer .adv-drawer__close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 13px;
	height: 1.4px;
	background: var(--adv-black);
	border-radius: 1px;
	transition: background 0.25s var(--adv-ease);
}

.adv-drawer .adv-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.adv-drawer .adv-drawer__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.adv-drawer .adv-drawer__close:hover::before,
.adv-drawer .adv-drawer__close:hover::after { background: var(--adv-accent); }

/* Same safeguard for the burger bars and accordion marks. */
.adv-header .adv-burger span { background: var(--adv-black) !important; }
.adv-drawer .adv-acc__btn::before,
.adv-drawer .adv-acc__btn::after { background: var(--adv-accent) !important; }

/* ==========================================================================
   14. Top-level menu link colour
   --------------------------------------------------------------------------
   The Elementor kit declares `.elementor-kit-5 a { color:#8B7A6C }`, which
   scores (0,1,1) and outranks the plain `.adv-item__link` rule (0,1,0) above.
   Prefixing with `.adv-header` scores (0,2,0) and wins — no !important needed.
   ========================================================================== */

.adv-header .adv-item__link { color: var(--adv-black); }

.adv-header .adv-item:hover > .adv-item__link,
.adv-header .adv-item--active > .adv-item__link,
.adv-header .adv-item__link:hover,
.adv-header .adv-item__link:focus-visible { color: var(--adv-accent); }

/* ==========================================================================
   15. Header search
   --------------------------------------------------------------------------
   Sits where the phone CTA used to, and reuses the CTA's pill shape so the
   right-hand side of the header box is unchanged at a glance.

   Selectors are prefixed with `.adv-search` (0,2,0) because the Elementor kit
   styles bare `input` and `a` elements at (0,1,1) and would otherwise repaint
   the field and the suggestions. `!important` is used only where the kit
   itself uses it - see section 12.
   ========================================================================== */

.adv-search {
	position: relative;
	flex: 0 1 200px;
	min-width: 0;
}

.adv-search__form {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	margin: 0;
	padding: 0 14px 0 5px;
	background: var(--adv-card);
	border: 1px solid rgba(11, 12, 13, 0.18);
	border-radius: 999px;
	transition: border-color 0.25s var(--adv-ease), box-shadow 0.25s var(--adv-ease);
}

.adv-search__form:focus-within {
	border-color: var(--adv-black);
	box-shadow: 0 0 0 3px rgba(var(--adv-accent-rgb), 0.13);
}

/* ---- The magnifier, which is also the submit button ---- */

.adv-search .adv-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 999px;
	color: var(--adv-ink-soft);
	transition: color 0.25s var(--adv-ease);
}

.adv-search .adv-search__submit:hover,
.adv-search__form:focus-within .adv-search__submit { color: var(--adv-black); }

.adv-search .adv-search__glyph { display: block; }

/* ---- The field ---- */

.adv-search .adv-search__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0;
	font-family: var(--adv-font);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--adv-black) !important;
	-webkit-appearance: none;
	appearance: none;
}

.adv-search .adv-search__input::placeholder {
	color: var(--adv-ink-soft);
	opacity: 1;
}

/* WebKit's own clear cross would sit on top of the pill's edge. */
.adv-search .adv-search__input::-webkit-search-decoration,
.adv-search .adv-search__input::-webkit-search-cancel-button,
.adv-search .adv-search__input::-webkit-search-results-button {
	-webkit-appearance: none;
	display: none;
}

/* ---- Suggestions ---- */

.adv-search__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 30;                       /* above the mega card */
	width: min(420px, 84vw);
	max-height: min(70vh, 470px);
	padding: 6px;
	background: var(--adv-card);
	border: 1px solid var(--adv-line);
	border-radius: var(--adv-radius);
	box-shadow: 0 18px 44px rgba(11, 12, 13, 0.13);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.adv-search__panel[hidden] { display: none; }

.adv-search .adv-search__opt {
	display: block;
	padding: 10px 12px;
	border-radius: 7px;
	text-decoration: none;
	transition: background 0.2s var(--adv-ease);
}

.adv-search .adv-search__opt + .adv-search__opt { margin-top: 2px; }

.adv-search .adv-search__opt:hover,
.adv-search .adv-search__opt.is-active { background: var(--adv-cream); }

.adv-search .adv-search__opt-title {
	display: block;
	font-family: var(--adv-font);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--adv-black);
}

.adv-search .adv-search__opt-text {
	display: block;
	margin-top: 4px;
	font-family: var(--adv-font);
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--adv-ink-soft);
}

.adv-search .adv-search__opt-type {
	display: inline-block;
	margin-top: 7px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(var(--adv-accent-rgb), 0.12);
	font-family: var(--adv-font);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--adv-accent);
}

.adv-search .adv-search__opt mark {
	padding: 0 1px;
	border-radius: 2px;
	background: rgba(var(--adv-accent-rgb), 0.24);
	color: inherit;
}

.adv-search .adv-search__note {
	margin: 0;
	padding: 15px 12px;
	font-family: var(--adv-font);
	font-size: 12px;
	line-height: 1.5;
	color: var(--adv-ink-soft);
}

.adv-search .adv-search__all {
	display: block;
	margin-top: 4px;
	padding: 12px;
	border-top: 1px solid var(--adv-line);
	font-family: var(--adv-font);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--adv-accent);
	transition: color 0.25s var(--adv-ease);
}

.adv-search .adv-search__all:hover { color: var(--adv-black); }

/* ---- In the mobile drawer ---- */

.adv-drawer__search {
	padding: 14px 16px;
	border-bottom: 1px solid var(--adv-line);
}

.adv-search--drawer { flex: none; }

.adv-search--drawer .adv-search__form {
	height: 42px;
	border-radius: 8px;
}

/*
 * The drawer is itself a scrolling column, so the suggestions are laid out in
 * the flow rather than floated over it - a floating panel would be clipped by
 * the drawer's own overflow.
 */
.adv-search--drawer .adv-search__panel {
	position: static;
	width: auto;
	max-height: none;
	margin-top: 10px;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--adv-line);
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.adv-search--drawer .adv-search__opt { padding: 11px 4px; border-radius: 0; }
.adv-search--drawer .adv-search__all { text-align: left; padding-left: 4px; }

/* ---- Responsive ---- */

@media (max-width: 1400px) {
	.adv-search { flex-basis: 176px; }
}

@media (max-width: 1200px) {
	.adv-search { flex-basis: 148px; }
	.adv-search__form { height: 36px; }
	.adv-search .adv-search__submit { flex-basis: 28px; width: 28px; height: 28px; }
	.adv-search .adv-search__input { font-size: 12px; }
}

/* The inline nav is gone below this, so the field can breathe again. */
@media (max-width: 1024px) {
	.adv-search { flex-basis: 230px; }
}

@media (max-width: 767px) {
	.adv-search { flex-basis: 190px; }
}

/*
 * Phones: the header box has room for the magnifier only. Tapping it opens the
 * drawer and focuses the full-width field there (advantage-search.js), so the
 * search is never more than one tap away.
 */
@media (max-width: 560px) {
	.adv-search--header { flex: 0 0 38px; }

	.adv-search--header .adv-search__form {
		width: 38px;
		height: 38px;
		padding: 0;
		justify-content: center;
		border-radius: 8px;
		border-color: rgba(11, 12, 13, 0.16);
	}

	.adv-search--header .adv-search__input { display: none; }
	.adv-search--header .adv-search__panel { display: none !important; }
	.adv-search--header .adv-search__form:focus-within { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
	.adv-search__form,
	.adv-search .adv-search__opt,
	.adv-search .adv-search__submit,
	.adv-search .adv-search__all { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   16. Adaptive fit — the header can never overlap itself
   --------------------------------------------------------------------------
   THE BUG THIS FIXES
   The inline menu is `white-space: nowrap` inside a box with visible
   overflow, and `justify-content: center`. The moment the labels need more
   room than is left between the logo and the search box, the list spills out
   of BOTH sides and paints straight over them - the logo on the left, the
   language switcher over the search field on the right.

   Fixed breakpoints cannot catch this, because how much room the menu needs
   is not a function of the viewport: it depends on how many items the
   WordPress menu has, how long the labels are (Swedish labels are longer
   than English ones, and Polylang adds a "SVENSKA / ENGLISH" item), whether
   Poppins has loaded yet or a fallback is still in use, and on the font
   metrics of the machine - macOS renders the same string measurably wider
   than Windows, which is why the live site breaks on a Mac at a width where
   it looks fine on a PC.

   So the breakpoint is MEASURED, not guessed: advantage-header.js compares
   what the menu actually needs against the space actually left for it, and
   walks down these steps until it fits:

       1. is-tight        tighter item padding, smaller search box
       2. is-search-mini  the search collapses to its magnifier
       3. is-compact      the inline menu gives way to the burger + drawer

   Every step is reversible, and the whole walk happens inside one frame, so
   nothing flickers.
   ========================================================================== */

/* ---- Safety net: no JS, no overlap -------------------------------------- */
/*
 * `.adv-fit` is added by the script before its first measurement. Until then
 * - and for ever, on the rare visit where the script never runs, or where an
 * optimisation plugin holds it back - the menu is allowed to WRAP instead of
 * spilling out of its box, and the box grows to hold it.
 *
 * Wrapping is chosen over shrinking the items, because every label stays
 * readable in full and the drop-downs, which are pure CSS, keep working. A
 * two-line header is not the intended design, but it is a complete and usable
 * one, which an overlapping header is not.
 *
 * With the script running - which is every normal visit - this state is never
 * painted: advantage-header.js sits at the foot of the body and adds
 * `.adv-fit` before the browser's first paint.
 */
.adv-header:not(.adv-fit) .adv-header__inner {
	height: auto;
	min-height: var(--adv-box-h);
	padding-top: 8px;
	padding-bottom: 8px;
}

.adv-header:not(.adv-fit) .adv-nav__list {
	flex-wrap: wrap;
	row-gap: 2px;
}

.adv-header:not(.adv-fit) .adv-item,
.adv-header.adv-fit .adv-item { flex: 0 0 auto; }

/* The logo can never push the rest of the header off its own box either. */
.adv-header__left { min-width: 0; }
.adv-logo         { max-width: 100%; min-width: 0; }
.adv-logo img     { max-width: 100%; }

/* ---- Step 1: tight ------------------------------------------------------ */
/*
 * Two-class selectors (0,2,0) so these beat the plain single-class rules
 * inside the width media queries above, whatever the viewport happens to be.
 */
.adv-header.is-tight .adv-header__inner { gap: 12px; }

.adv-header.is-tight .adv-item__link {
	padding: 10px 9px;
	font-size: 13px;
	letter-spacing: 0.04em;
}

.adv-header.is-tight .adv-nav__list { gap: 0; }

.adv-header.is-tight .adv-search      { flex-basis: 152px; }
.adv-header.is-tight .adv-search__form { height: 36px; }

.adv-header.is-tight .adv-search .adv-search__submit {
	flex-basis: 28px;
	width: 28px;
	height: 28px;
}

.adv-header.is-tight .adv-search .adv-search__input { font-size: 12px; }

/* ---- Step 2: the search folds down to its magnifier --------------------- */
/*
 * Identical to the phone treatment further up, so the control the visitor
 * meets is the same one at every size: tapping it opens the drawer, which
 * holds the full-width field (advantage-search.js).
 */
.adv-header.is-search-mini .adv-search--header { flex: 0 0 38px; }

.adv-header.is-search-mini .adv-search--header .adv-search__form {
	width: 38px;
	height: 38px;
	padding: 0;
	justify-content: center;
	border-radius: 8px;
	border-color: rgba(11, 12, 13, 0.16);
}

.adv-header.is-search-mini .adv-search--header .adv-search__input  { display: none; }
.adv-header.is-search-mini .adv-search--header .adv-search__panel  { display: none !important; }
.adv-header.is-search-mini .adv-search--header .adv-search__form:focus-within { box-shadow: none; }

/* ---- Step 3: one size down --------------------------------------------- */
/*
 * Only reached when shedding spacing and folding the search away were still
 * not enough. A menu one point smaller is easier to read than no menu at all,
 * which is what the next step down - the burger - amounts to on a desktop.
 */
.adv-header.is-smaller .adv-item__link {
	padding: 10px 7px;
	font-size: 12px;
	letter-spacing: 0.02em;
}

.adv-header.is-smaller .adv-nav__list { gap: 0; }

/* ---- Step 4: compact - burger and drawer -------------------------------- */

.adv-header.is-compact .adv-nav    { display: none; }
.adv-header.is-compact .adv-burger { display: block; }

.adv-header.is-compact .adv-header__inner { gap: 12px; }

/* The inline menu is gone, so the field can breathe again. */
.adv-header.is-compact .adv-search--header { flex: 0 1 230px; }

/* A long text logo ellipsises rather than shoving the burger off the edge. */
.adv-header.is-compact .adv-header__left { flex: 0 1 auto; }

.adv-header.is-compact .adv-logo--text {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * Phones keep the magnifier-only search even in compact mode - `is-compact`
 * must not undo the 560px rule, so it is restated at a higher specificity.
 */
@media (max-width: 560px) {
	.adv-header.is-compact .adv-search--header { flex: 0 0 38px; }
}

/* ==========================================================================
   17. Edge-of-screen safety
   --------------------------------------------------------------------------
   Notched iPhones in landscape, and any browser whose UI eats into the
   viewport, put content under the rounded corner. `env()` is ignored by
   browsers that do not support it, so this costs nothing elsewhere.
   ========================================================================== */

@supports (padding: env(safe-area-inset-left)) {
	/*
	 * Inset the whole header box rather than its inner padding, so the
	 * padding tuned at each breakpoint is left alone. `.is-stuck` is
	 * restated because it sets `padding` as a shorthand, which would
	 * otherwise reset these two sides to zero on scroll.
	 */
	.adv-header,
	.adv-header.is-stuck {
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}

	.adv-drawer {
		padding-right: env(safe-area-inset-right);
		padding-bottom: env(safe-area-inset-bottom);
	}
}

/* Short, wide viewports - a phone on its side - must still scroll the menu. */
@media (max-height: 480px) {
	.adv-drawer      { overflow-y: auto; }
	.adv-drawer__head { position: sticky; top: 0; z-index: 2; }
}