/* ==========================================================================
   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 14px;
	font-family: var(--adv-font);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.09em;
	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: 12px;
	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); }

.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 { 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 11px; letter-spacing: 0.06em; }
	.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: 11.5px; 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 { height: 185px; }
	.adv-mega__panel--solo .adv-mega__media img { 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-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;
	height: auto;
	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); }