/* =========================================================================
   Zmart Nav Overlay 1.0.0
   Återanvändbar fullskärmsmeny. Kundoberoende.

   ANPASSNING PER PROJEKT
   Ändra endast (a) tokenblocket nedan och (b) brytpunkten i §7.
   ========================================================================= */

.zmart-nav {
	--_bg:            var(--zmart-nav-bg, #0d2c54);
	--_bg-panel:      var(--zmart-nav-bg-panel, var(--zmart-nav-bg, #0d2c54));
	--_text:          var(--zmart-nav-text, #ffffff);
	--_text-muted:    var(--zmart-nav-text-muted, rgba(255, 255, 255, 0.72));
	--_accent:        var(--zmart-nav-accent, #e0a020);
	--_rule:          var(--zmart-nav-rule, rgba(255, 255, 255, 0.16));
	--_backdrop:      var(--zmart-nav-backdrop, rgba(6, 18, 35, 0.6));

	--_font:          var(--zmart-nav-font, inherit);
	--_size-link:     var(--zmart-nav-size-link, clamp(1.375rem, 1rem + 2vw, 2rem));
	--_size-sub:      var(--zmart-nav-size-sub, 1.0625rem);
	--_weight-link:   var(--zmart-nav-weight-link, 600);

	--_gap:           var(--zmart-nav-gap, 0.25rem);
	--_pad-inline:    var(--zmart-nav-pad-inline, clamp(1.25rem, 5vw, 2.5rem));
	--_pad-block:     var(--zmart-nav-pad-block, clamp(1rem, 3vw, 1.75rem));
	--_tap:           var(--zmart-nav-tap, 3rem);

	--_sub-indent:    var(--zmart-nav-sub-indent, 2rem);
	--_sub-rule:      var(--zmart-nav-sub-rule-width, 2px);

	--_radius:        var(--zmart-nav-radius, 0.5rem);
	--_speed:         var(--zmart-nav-speed, 260ms);
	--_ease:          var(--zmart-nav-ease, cubic-bezier(0.22, 1, 0.36, 1));
	--_z:             var(--zmart-nav-z, 100000);

	font-family: var(--_font);
}

/* Progressive enhancement: utan JS finns inget data-zmart-ready. */
.zmart-nav:not([data-zmart-ready]) .zmart-nav__toggle,
.zmart-nav:not([data-zmart-ready]) .zmart-nav__backdrop,
.zmart-nav:not([data-zmart-ready]) .zmart-nav__bar {
	display: none;
}

/* 3. Toggle */
.zmart-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: var(--_tap);
	min-width: var(--_tap);
	padding-inline: 0.5rem;
	background: none;
	border: 0;
	border-radius: var(--_radius);
	color: currentColor;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.zmart-nav__burger { display: grid; gap: 5px; width: 26px; }

.zmart-nav__burger > span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--_speed) var(--_ease), opacity var(--_speed) var(--_ease);
}

.zmart-nav__toggle-text { font-size: 0.9375rem; font-weight: 600; }

.zmart-nav.is-open .zmart-nav__burger > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zmart-nav.is-open .zmart-nav__burger > span:nth-child(2) { opacity: 0; }
.zmart-nav.is-open .zmart-nav__burger > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 4. Overlay + panel */
.zmart-nav[data-zmart-ready] .zmart-nav__overlay {
	position: fixed;
	inset: 0;
	z-index: var(--_z);
	display: grid;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--_speed) var(--_ease), visibility 0s linear var(--_speed);
}

.zmart-nav[data-zmart-ready].is-open .zmart-nav__overlay {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.zmart-nav__backdrop { position: absolute; inset: 0; background: var(--_backdrop); }

.zmart-nav[data-zmart-ready] .zmart-nav__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--_pad-block);
	inline-size: min(100%, var(--zmart-nav-panel-width, 100%));
	margin-inline-start: auto;
	block-size: 100dvh;
	padding-block: var(--_pad-block);
	padding-inline: var(--_pad-inline);
	overflow: hidden;
	background: var(--_bg-panel);
	color: var(--_text);
	transform: translateY(-1rem);
	transition: transform var(--_speed) var(--_ease);
}

.zmart-nav[data-zmart-ready].is-open .zmart-nav__panel { transform: none; }

@supports not (block-size: 100dvh) {
	.zmart-nav[data-zmart-ready] .zmart-nav__panel { block-size: 100vh; }
}

/* 5. Stängknapp */
.zmart-nav__bar { display: flex; justify-content: flex-end; flex: 0 0 auto; }

.zmart-nav__close {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--_tap);
	padding-inline: 0.5rem;
	background: none;
	border: 0;
	border-radius: var(--_radius);
	color: inherit;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.zmart-nav__close-icon { position: relative; inline-size: 20px; block-size: 20px; }

.zmart-nav__close-icon::before,
.zmart-nav__close-icon::after {
	content: "";
	position: absolute;
	inset-block-start: 9px;
	inset-inline-start: 0;
	inline-size: 20px;
	block-size: 2px;
	border-radius: 2px;
	background: currentColor;
}

.zmart-nav__close-icon::before { transform: rotate(45deg); }
.zmart-nav__close-icon::after  { transform: rotate(-45deg); }

/* 6. Menylistan
   Endast NAVIGERINGEN scrollar. Stängknapp, CTA och metablock ligger utanför
   scrollytan och är därför alltid nåbara, oavsett hur många menypunkter som
   tillkommer. min-block-size: 0 krävs — ett flex-barn krymper annars inte
   under sitt innehålls storlek och scrollytan uppstår aldrig. */
.zmart-nav__nav {
	flex: 1 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Mycket låg vy (telefon i liggande läge): då ryms inte ens ramverket.
   Låt hela panelen scrolla i stället för att klippa CTA:n. */
@media (max-height: 26rem) {
	.zmart-nav[data-zmart-ready] .zmart-nav__panel { overflow-y: auto; }
	.zmart-nav__nav { overflow: visible; }
}

.zmart-nav__list,
.zmart-nav__list ul { margin: 0; padding: 0; list-style: none; }

.zmart-nav__list { display: flex; flex-direction: column; gap: var(--_gap); }

.zmart-nav__list > li + li { border-block-start: 1px solid var(--_rule); }

.zmart-nav__list a {
	display: flex;
	align-items: center;
	min-height: var(--_tap);
	padding-block: 0.5rem;
	color: inherit;
	font-size: var(--_size-link);
	font-weight: var(--_weight-link);
	line-height: 1.2;
	text-decoration: none;
	text-wrap: balance;
}

.zmart-nav__list a:hover .zmart-nav__link-text,
.zmart-nav__list a:focus-visible .zmart-nav__link-text {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Dragspel.
   Hopfällningen gäller ENDAST när JS är igång (data-zmart-ready). Utan JS är
   undermenyn synlig och expanderaknappen döld — undersidor ska aldrig bli
   oåtkomliga för att ett script uteblev. */
.zmart-nav__row { display: flex; align-items: center; gap: 0.5rem; }
.zmart-nav__row > a { flex: 1 1 auto; }

.zmart-nav:not([data-zmart-ready]) .zmart-nav__expand { display: none; }

.zmart-nav__expand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--_tap);
	min-height: var(--_tap);
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--_radius);
	color: inherit;
	cursor: pointer;
}

.zmart-nav__chevron {
	inline-size: 0.6875rem;
	block-size: 0.6875rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--_speed) var(--_ease);
}

/* Direkt barn-scoping: chevronen sitter i .zmart-nav__row som ar ett direkt
   barn till .zmart-nav__item. Utan > skulle en expanderad foralder vanda
   PILARNA pa alla sina barn, som da pekade upp fast de var stangda. */
.zmart-nav__item.is-expanded > .zmart-nav__row .zmart-nav__chevron {
	transform: translateY(0.1em) rotate(-135deg);
}

/* grid-template-rows animerar till innehållets verkliga höjd — inga
   max-height-gissningar som spricker när en undersida tillkommer. */
.zmart-nav[data-zmart-ready] .zmart-nav__item > .zmart-nav__sub-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--_speed) var(--_ease);
}

.zmart-nav[data-zmart-ready] .zmart-nav__item.is-expanded > .zmart-nav__sub-wrap {
	grid-template-rows: 1fr;
}

.zmart-nav[data-zmart-ready] .zmart-nav__sub-wrap > .zmart-nav__sub { overflow: hidden; }

/* Specificitet (0,2,0): komponentens stilmall laddas fore temats pa vissa
   Divi-sajter, och (0,1,0) forlorar da mot temaregler. Samma slutsats som
   race.zmartkund.se kom fram till 2026-07-31, nu inbyggd i komponenten. */
.zmart-nav .zmart-nav__sub {
	display: flex;
	flex-direction: column;
	padding-inline-start: var(--_sub-indent);
	border-inline-start: var(--_sub-rule) solid var(--_rule);
}

.zmart-nav__sub li:last-child a { margin-block-end: 0.5rem; }

.zmart-nav__sub a {
	font-size: var(--_size-sub);
	font-weight: 500;
	color: var(--_text-muted);
	min-height: 2.75rem;
}

/* Tillgängligt namn på expanderaknappen. Utan detta hör en
   skärmläsaranvändare bara "knapp, knapp, knapp". */
.zmart-nav__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.zmart-nav__list .current-menu-item > a,
.zmart-nav__list .current-menu-item > .zmart-nav__row > a,
.zmart-nav__list .current-menu-ancestor > a,
.zmart-nav__list .current-menu-ancestor > .zmart-nav__row > a { color: var(--_accent); }

.zmart-nav[data-zmart-ready] .zmart-nav__list > li {
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity var(--_speed) var(--_ease), transform var(--_speed) var(--_ease);
}

.zmart-nav[data-zmart-ready].is-open .zmart-nav__list > li { opacity: 1; transform: none; }

.zmart-nav.is-open .zmart-nav__list > li:nth-child(1) { transition-delay: 60ms; }
.zmart-nav.is-open .zmart-nav__list > li:nth-child(2) { transition-delay: 100ms; }
.zmart-nav.is-open .zmart-nav__list > li:nth-child(3) { transition-delay: 140ms; }
.zmart-nav.is-open .zmart-nav__list > li:nth-child(4) { transition-delay: 180ms; }
.zmart-nav.is-open .zmart-nav__list > li:nth-child(5) { transition-delay: 220ms; }
.zmart-nav.is-open .zmart-nav__list > li:nth-child(6) { transition-delay: 260ms; }
.zmart-nav.is-open .zmart-nav__list > li:nth-child(n + 7) { transition-delay: 300ms; }

.zmart-nav__actions { flex: 0 0 auto; }

.zmart-nav__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--_tap);
	padding: 0.75rem 1.5rem;
	border-radius: var(--_radius);
	background: var(--_accent);
	color: var(--zmart-nav-cta-text, #0d2c54);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
}

.zmart-nav__meta {
	flex: 0 0 auto;
	padding-block-start: var(--_pad-block);
	border-block-start: 1px solid var(--_rule);
	color: var(--_text-muted);
	font-size: 0.9375rem;
}

.zmart-nav__meta a { color: inherit; }

/* 7. Brytpunkt — EN rad att ändra per projekt. Måste matcha BREAKPOINT i JS. */
@media (min-width: 80rem) {
	.zmart-nav { display: none; }
}

/* 8. Fokus */
.zmart-nav :focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

/* 9. Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.zmart-nav *,
	.zmart-nav *::before,
	.zmart-nav *::after {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
		animation-duration: 1ms !important;
	}

	.zmart-nav[data-zmart-ready] .zmart-nav__panel { transform: none; }
	.zmart-nav[data-zmart-ready] .zmart-nav__list > li { opacity: 1; transform: none; }
}

/* 10. Scroll lock — sätts på <html> av JS. */
.zmart-nav-lock,
.zmart-nav-lock body { overflow: hidden; }

/* 11. Divi-suppression — ENDA Divi-beroende blocket.
   body #page-container ger specificitet (1,1,1) och slår temats egen
   temats egna .et_mobile_nav_menu-regler.
   Brytpunkten ar projektspecifik. Satt den i temats CSS eller via filter.
   På en icke-Divi-sajt kan hela blocket raderas. */
@media (max-width: 79.9375rem) {
	/* Endast Divis GENERERADE dropdown döljs. Själva hamburgaren lämnas kvar —
	   i adopt-läge är den komponentens avtryckare. Döljs den här försvinner
	   även möjligheten att öppna menyn. */
	body #page-container ul.et_mobile_menu {
		display: none !important;
	}
}

/* 12. Övertagen avtryckare (adopt-läge)
   Divi renderar hamburgaren som ett tomt <span> utan tabindex, role eller
   aria. Komponenten uppgraderar den i JS; här ges den bara en synlig
   fokusmarkering, eftersom den ligger utanför .zmart-nav och därför inte
   nås av fokusregeln i §8. */
[data-zmart-nav-adopted]:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
	border-radius: 3px;
}

[data-zmart-nav-adopted] {
	cursor: pointer;
}


/* 13. Sok i menyn (Travel Zmart) - drivs av pluginet zmart-sok. */
.zmart-nav__search { padding: 0 0 1.1rem; flex: 0 0 auto; }
.zmart-nav__search-form { display: flex; align-items: center; gap: 0.6rem; border: 2px solid rgba(0,0,0,.14); border-radius: 10px; padding: 0.7rem 0.9rem; background: #fff; }
.zmart-nav__search-form:focus-within { border-color: #415321; }
.zmart-nav__search-icon { flex: 0 0 auto; width: 20px; height: 20px; color: #415321; }
.zmart-nav__search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: inherit; padding: 0; min-height: 24px; }
.zmart-nav__search-input::placeholder { opacity: .6; }
.zmart-nav__search-submit { flex: 0 0 auto; border: 0; border-radius: 8px; background: #415321; color: #fff; font: inherit; font-size: .9rem; padding: 0.5rem 0.9rem; cursor: pointer; min-height: 44px; min-width: 44px; }
.zmart-nav__search-submit:hover { background: #33421a; }