/* Bruker variablene øverst i style.css. Mobilbrekkpunkt: 900px (samme tall i navbar.js) */

.navbar { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; background: var(--hand-white); color: var(--hand-black); font-family: var(--hand-font); }
.navbar a { color: inherit; text-decoration: none; }
.navbar ul { list-style: none; margin: 0; padding: 0; }

/* Toppstripe */
.navbar__topbar {
	height: var(--nav-topbar-height);
	background: var(--nav-topbar-bg);
	color: var(--nav-topbar-text);
	font-size: var(--nav-topbar-font-size);
	display: flex; align-items: center; justify-content: center;
	padding: 0 16px;
}
.navbar__topbar a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.navbar__topbar-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hovedlinje */
.navbar__bar {
	height: var(--nav-main-height);
	display: flex; align-items: center;
	padding: 0 var(--nav-pad-right) 0 var(--nav-pad-left);
	background: var(--hand-white);
	border-bottom: 1px solid var(--hand-line);
}
.navbar__logo { display: block; margin-right: var(--nav-logo-gap); flex: none; }
.navbar__logo img { display: block; height: var(--nav-logo-height); width: auto; }

.navbar__nav { flex: 1; display: flex; align-items: center; }
.navbar__list { display: flex; align-items: center; gap: var(--nav-item-gap); }
.navbar .navbar__list--right { margin-left: auto; }

.navbar__link { font-size: var(--nav-font-size); line-height: normal; white-space: nowrap; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.navbar .navbar__link:hover,
.navbar__item.is-open > .navbar__link { text-decoration: underline; }

/* Dropdown-panel */
.navbar__panel {
	display: none;
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--hand-white);
	border-bottom: 1px solid var(--hand-line);
	clip-path: inset(0 0 100% 0);
	opacity: 0;
	transition: clip-path var(--nav-anim-duration) var(--nav-anim-ease),
	            opacity var(--nav-anim-duration) ease;
}
.navbar__panel.is-mounted { display: block; }
.navbar__panel.is-open { clip-path: inset(0 0 0 0); opacity: 1; }
.navbar__panel.is-instant,
.navbar__panel.is-instant .navbar__panel-inner { transition: none; }

.navbar__panel-inner {
	display: grid; grid-template-columns: repeat(5, 1fr);
	transform: translateY(-14px);
	transition: transform var(--nav-anim-duration) var(--nav-anim-ease);
}
.navbar__panel.is-open .navbar__panel-inner { transform: none; }

.navbar__card { display: block; min-width: 0; padding: var(--nav-card-pad) var(--nav-card-pad) var(--nav-card-pad-bottom); }
.navbar__card:first-child { border-right: 1px solid var(--hand-line); }
.navbar__card-img { aspect-ratio: var(--nav-card-ratio); overflow: hidden; background: var(--hand-line); }
.navbar__card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.navbar__card-text { margin-top: 12px; font-size: var(--nav-small-font-size); line-height: 16px; }
.navbar__card-title { margin: 0 0 4px; font-weight: 500; text-transform: uppercase; }
.navbar__card-line { display: block; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.navbar__card:hover .navbar__card-title { text-decoration: underline; }

.navbar__all {
	grid-column: auto; grid-row: auto; /* står alltid rett etter siste rute */
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	font-size: var(--nav-small-font-size); text-transform: uppercase;
}

/* Hamburger (skjult på desktop) */
.navbar__burger {
	display: none; margin-left: auto; width: 44px; height: 44px;
	align-items: center; justify-content: center;
	background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.navbar__burger-lines, .navbar__burger-lines::before, .navbar__burger-lines::after {
	display: block; width: 24px; height: 2px; background: currentColor; position: relative;
}
.navbar__burger-lines::before, .navbar__burger-lines::after { content: ""; position: absolute; left: 0; }
.navbar__burger-lines::before { top: -7px; }
.navbar__burger-lines::after { top: 7px; }

@media (max-width: 900px) {
	.navbar__nav { display: none; }
	.navbar__panel { display: none !important; }
	.navbar__burger { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.navbar__panel, .navbar__panel-inner { transition: none; }
}

/* Bytte mellom dropdowns: det nye panelet fader inn over det gamle */
.navbar__panel.is-swap { clip-path: inset(0 0 0 0); transition: opacity 0.25s ease; z-index: 2; }
.navbar__panel.is-leaving { clip-path: inset(0 0 0 0); opacity: 1; transition: none; z-index: 1; }
.navbar__panel.is-swap .navbar__panel-inner,
.navbar__panel.is-leaving .navbar__panel-inner { transform: none !important; transition: none !important; }

/* Rettelser: overstyrer eldre regler */
.navbar .navbar__card { border: 0 !important; }

.navbar .navbar__card-img { position: relative; display: block; width: 100%; height: 0; padding-bottom: calc(2 / 3 * 100%); overflow: hidden; aspect-ratio: auto; }
.navbar .navbar__card-img img { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; max-width: none !important; object-fit: cover; object-position: center; }

.navbar .navbar__all { align-self: start; margin: var(--nav-card-pad) var(--nav-card-pad) 0; aspect-ratio: var(--nav-card-ratio); }

/* ===== Søk ===== */
.navbar__sok-inner {
	max-height: calc(100vh - var(--nav-topbar-height) - var(--nav-main-height) - 40px);
	overflow-y: auto;
	padding: 18px var(--nav-pad-right) 22px var(--nav-pad-left);
	transform: translateY(-14px);
	transition: transform var(--nav-anim-duration) var(--nav-anim-ease);
}
.navbar__sok.is-open .navbar__sok-inner { transform: none; }
.navbar__sok-form {
	display: flex;
	align-items: center;
}
.navbar__sok-form input {
	font-weight: 300;
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--hand-font);
	font-size: var(--nav-sok-str);
	color: var(--hand-black);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.navbar__sok-form input::-webkit-search-cancel-button { display: none; }
.navbar__sok-lukk { padding: 8px; border: 0; background: none; color: inherit; cursor: pointer; }
.navbar__sok.er-sokende .navbar__sok-resultat { opacity: 0.5; }
.navbar__sok-resultat { transition: opacity 0.2s ease; }
.navbar__sok-resultat:not(:empty) { padding-top: 24px; padding-bottom: 6px; }

.navbar__sok-tittel {
	margin: 0 0 10px;
	font-size: var(--nav-small-font-size);
	font-weight: 500;
	text-transform: uppercase;
	opacity: 0.5;
}
.navbar__sok-produkter {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
}
.navbar__sok-produkt { display: block; min-width: 0; }
.navbar__sok-bilde {
	display: block;
	aspect-ratio: 1 / 1;
	padding: 10%;
	background: var(--grid-farge-produkt, #fafafa);
}
.navbar__sok-bilde img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.navbar__sok-navn,
.navbar__sok-under {
	display: block;
	margin-top: 8px;
	font-size: var(--nav-small-font-size);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.navbar__sok-under { margin-top: 2px; opacity: 0.5; }
.navbar__sok-produkt:hover .navbar__sok-navn { text-decoration: underline; text-underline-offset: 0.2em; }

.navbar__sok-lister {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 24px 20px;
	margin-top: 28px;
}
.navbar__sok-gruppe--produkt + .navbar__sok-lister { margin-top: 32px; }
.navbar__sok-lister:first-child { margin-top: 0; }
.navbar__sok-lister li { margin: 0 0 6px; font-size: 15px; }
.navbar__sok-lister a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.navbar__sok-alle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 30px;
	font-size: var(--nav-small-font-size);
	text-transform: uppercase;
}
.navbar__sok-alle:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.navbar__sok-tom { margin: 0; font-size: 15px; opacity: 0.6; }
@media (max-width: 1100px) {
	.navbar__sok-produkter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Mobilmeny (hamburger, ≤ 900 px) =====
   Dekker hele skjermen i dus hvit (--mm-bakgrunn). Navbaren ligger over, med X for å lukke. */
.navbar__topbar,
.navbar__bar { position: relative; z-index: 2; }

.mobilmeny { display: none; }
@media (max-width: 900px) {
	.mobilmeny.er-montert { display: block; }
}
.mobilmeny {
	position: fixed;
	inset: 0;
	z-index: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--nav-topbar-height) + var(--nav-main-height));
	background: var(--mm-bakgrunn, rgba(255, 255, 255, 0.9));
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	opacity: 0;
	transition: opacity 0.4s var(--nav-anim-ease);
}
.mobilmeny.er-apen { opacity: 1; }
html.mobilmeny-apen { overflow: hidden; } /* bare html: på body flyttet den navbaren (og X-en) ut av syne */

.mobilmeny__innhold {
	padding: 22px var(--nav-pad-right) 64px var(--nav-pad-left);
}

/* Søk: felt rett i listen, grå «Søk» på en tynn strek */
.mobilmeny__sok { padding: 10px 0 17px; } /* like mye luft over (fra Merker) og under (til skillestreken) */
.mobilmeny__sok input {
	width: 100%;
	height: 42px;
	padding: 0;
	border: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--hand-font);
	font-size: 18px; /* minst 16 px hindrer at iPhone zoomer inn */
	color: var(--hand-black);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Kategoriene */
.mobilmeny__liste { margin-top: 6px !important; }
.mobilmeny__liste--right {
	margin-top: 0 !important;
	padding-top: 22px !important;
	border-top: 1px solid rgba(0, 0, 0, 0.27); /* skillet mellom de to delene av menyen */
}
.mobilmeny__punkt {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s var(--nav-anim-ease), transform 0.45s var(--nav-anim-ease);
}
.mobilmeny.er-apen .mobilmeny__punkt { opacity: 1; transform: none; }
.mobilmeny.er-apen .mobilmeny__punkt:nth-child(2) { transition-delay: 0.04s; }
.mobilmeny.er-apen .mobilmeny__punkt:nth-child(3) { transition-delay: 0.08s; }
.mobilmeny.er-apen .mobilmeny__punkt:nth-child(4) { transition-delay: 0.12s; }
.mobilmeny.er-apen .mobilmeny__punkt:nth-child(5) { transition-delay: 0.16s; }
.mobilmeny.er-apen .mobilmeny__punkt:nth-child(n+6) { transition-delay: 0.2s; }

.mobilmeny__rad {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mobilmeny__lenke {
	flex: none;                                  /* bare ordet (+ litt buffer) er klikkbart */
	padding: 7px var(--mm-buffer, 24px) 7px 0;
	font-size: var(--mm-str-stor, 28px);
	line-height: 1.15;
}
.mobilmeny__liste--right .mobilmeny__lenke {
	padding: 6px var(--mm-buffer, 24px) 6px 0;
	font-size: var(--mm-str-liten, 18px);
}

/* + som blir –. Trykkflaten strekker seg et stykke til venstre for tegnet (buffer). */
.mobilmeny__apne {
	position: relative;
	flex: none;
	width: var(--mm-pluss-flate, 84px);
	height: 48px;
	margin-right: -14px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.mobilmeny__apne span::before,
.mobilmeny__apne span::after {
	content: "";
	position: absolute;
	left: calc(100% - 21px);
	top: 50%;
	width: 14px;
	height: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.3s var(--nav-anim-ease);
}
.mobilmeny__apne span::after { transform: translate(-50%, -50%) rotate(90deg); }
.mobilmeny__apne[aria-expanded="true"] span::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Underpunktene glir ut */
.mobilmeny__under {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s var(--nav-anim-ease);
}
.mobilmeny__under > .mm-karusell {
	min-height: 0;
	overflow: hidden;
}
.mobilmeny__punkt.er-apen .mobilmeny__under { grid-template-rows: 1fr; }
/* Karusell: rutene fra dropdownen, én av gangen, samme format som på PC */
.mm-karusell__spor {
	display: flex;
	gap: 10px;
	margin-top: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.mm-karusell__spor::-webkit-scrollbar { display: none; }
.mm-kort {
	flex: 0 0 var(--mm-kort-bredde, min(52%, 200px)); /* liten, så neste rute titter frem */
	scroll-snap-align: start;
	min-width: 0;
}
.mm-kort__bilde {
	display: block;
	aspect-ratio: var(--nav-card-ratio);
	overflow: hidden;
	background: var(--hand-line);
}
.mm-kort__bilde img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-kort__tekst {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	line-height: 15px;
}
.mm-kort__tittel { display: block; margin-bottom: 4px; font-weight: 500; text-transform: uppercase; }
.mm-kort__linje { display: block; text-transform: capitalize; }
.mm-karusell__prikker {
	display: flex;
	gap: 4px;
	margin-top: 10px;
}
.mm-karusell__prikker span {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--hand-black);
	opacity: 0.2;
	transition: opacity 0.3s ease;
}
.mm-karusell__prikker span.er-aktiv { opacity: 0.8; }
.mm-alle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 16px;
	font-size: 12px;
	text-transform: uppercase;
}

/* Hamburger blir X når menyen er åpen */
.navbar__burger-lines,
.navbar__burger-lines::before,
.navbar__burger-lines::after {
	height: 1.5px;
	transition: transform 0.35s var(--nav-anim-ease), top 0.35s var(--nav-anim-ease), background 0.2s ease;
}
.navbar__burger[aria-expanded="true"] .navbar__burger-lines { background: transparent; }
.navbar__burger[aria-expanded="true"] .navbar__burger-lines::before { top: 0; transform: rotate(45deg); }
.navbar__burger[aria-expanded="true"] .navbar__burger-lines::after { top: 0; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.mobilmeny, .mobilmeny__punkt, .mobilmeny__under { transition: none; }
}

/* Når mobilmenyen er åpen: den sorte nyhetsbrev-stripa skjules, menyen starter rett under logoen */
html.mobilmeny-apen .navbar__topbar { display: none; }
html.mobilmeny-apen .mobilmeny {
	padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--nav-main-height));
}

.mobilmeny__sok input::placeholder { color: rgba(0, 0, 0, 0.35); opacity: 1; }
.mobilmeny__sok input::-webkit-search-cancel-button { display: none; }

/* Når mobilmenyen er åpen: linjen med logo og X ligger fast øverst, over menyen */
html.mobilmeny-apen .navbar__bar {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 3;
	background: transparent;
	border-bottom-color: transparent;
}
.navbar__burger { position: relative; z-index: 3; }
.navbar__burger[aria-expanded="true"] .navbar__burger-lines::before,
.navbar__burger[aria-expanded="true"] .navbar__burger-lines::after { width: 22px; height: 1.5px; }

/* Bilder med hvit bakgrunn (logoer o.l.) i dropdownene: det hvite blir borte og bakgrunnen viser */
.navbar__card-img,
.navbar .navbar__card-img,
.mm-kort__bilde { background: transparent !important; }
.navbar__card-img img,
.mm-kort__bilde img { mix-blend-mode: multiply; }

/* Mobilmenyen fyller hele høyden, så tom flate under Profil kan trykkes for å lukke */
.mobilmeny__innhold {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.mobilmeny__lukk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: center;
	margin-top: auto;
	padding: 40px 20px 8px;
	border: 0;
	background: none;
	color: var(--hand-black);
	font-family: var(--hand-font);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.45;
	cursor: pointer;
}
.mobilmeny__lukk:hover { opacity: 0.8; }

/* +-tegnene står på samme loddrette linje som midten av hamburgeren/X-en.
   Hamburgeren står der den står (på linje med kanten av bildene), +-ene er flyttet inn. */
.mobilmeny__apne { margin-right: 0; }
.mobilmeny__apne span::before,
.mobilmeny__apne span::after { left: calc(100% - 22px); } /* 22 px = halve hamburger-knappen */

/* Den sorte nyhetsbrev-stripa vises bare på PC. Fra hamburger-størrelsen og ned er den borte,
   og navbaren starter helt øverst. (Nyhetsbrevet finnes i footeren.) */
@media (max-width: 900px) {
	.navbar__topbar { display: none; }
	.mobilmeny { padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--nav-main-height)); }
}

/* Navbaren følger gridet: på store skjermer (iMac o.l.) blir den ikke bredere enn innholdet.
   Logoen står på linje med venstre bildekant, menyen til høyre på linje med høyre kant. */
:root {
  /* % = bredden uten rullefelt, som gridet */
  --nav-kant-ekstra: max(0px, calc((100% - var(--grid-maks) - 2 * var(--grid-sidemarg)) / 2));
}
@media (min-width: 901px) {
  .navbar__bar {
    padding-left: calc(var(--nav-kant-ekstra) + var(--nav-pad-left));
    padding-right: calc(var(--nav-kant-ekstra) + var(--nav-pad-right));
  }
  .navbar__panel-inner,
  .navbar__sok-inner {
    margin-inline: var(--nav-kant-ekstra);
  }
}

/* ===== Søk i mobilmenyen: når man skriver, glir resten av menyen bort og treffene kommer under ===== */
.mobilmeny.er-sokende .mobilmeny__punkt:not(.mobilmeny__punkt--sok),
.mobilmeny.er-sokende .mobilmeny__liste--right { display: none; }
.mobilmeny.er-sokende .mobilmeny__liste { margin-top: 0 !important; }

.mm-resultat { transition: opacity 0.2s ease; }
.mm-resultat.laster { opacity: 0.5; }
.mm-resultat__gruppe { margin-top: 22px; }
.mm-resultat__tittel {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.45;
}
.mm-resultat li { margin: 0; }
.mm-resultat li > a { display: block; padding: 5px 0; font-size: 18px; }
.mm-resultat__produkt {
	display: flex !important;
	align-items: center;
	gap: 12px;
}
.mm-resultat__bilde {
	flex: none;
	width: 52px;
	height: 52px;
	padding: 5px;
	background: var(--grid-farge-produkt, #fafafa);
}
.mm-resultat__bilde img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mm-resultat__navn,
.mm-resultat__under { display: block; font-size: 15px; line-height: 1.3; }
.mm-resultat__under { font-size: 13px; opacity: 0.5; }
.mm-resultat__tom { margin: 18px 0 0; font-size: 15px; opacity: 0.6; }
.mm-resultat .mm-alle { margin-top: 22px; }

/* Hover på bildene i dropdownen: samme lyse flate og «Les mer» som rutene i gridet */
.navbar__card-img { position: relative; }
.navbar__card-hover {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--grid-hover-farge, rgba(242, 242, 240, 0.6));
	opacity: 0;
	transition: opacity var(--grid-hover-varighet, 0.5s) var(--nav-anim-ease);
	pointer-events: none;
}
.navbar__card-hover span {
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	font-size: var(--nav-small-font-size);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hand-black);
	transform: translateY(6px);
	transition: transform var(--grid-hover-varighet, 0.5s) var(--nav-anim-ease);
}
@media (hover: hover) and (pointer: fine) {
	a.navbar__card:hover .navbar__card-hover { opacity: 1; }
	a.navbar__card:hover .navbar__card-hover span { transform: none; }
}

/* Strek under «View all» og tekstlenkene i dropdownen når musen er over */
.navbar__all span,
.navbar__card-title,
.mm-alle span {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: text-decoration-color 0.25s ease;
}
.navbar__all:hover span,
a.navbar__card:hover .navbar__card-title,
.mm-alle:hover span {
	text-decoration-color: currentColor;
}

/* ===== OBJECT etc: navbar som i Figma =====
   Tallene er Figma-målene på 1366 px og skalerer med skjermen (--obj-enhet ligger i style.css). */
.navbar__topbar { display: none; }               /* ingen nyhetsbrev-stripe i Figma */
.navbar__bar { border-bottom: 0; }
.navbar__logo { font-size: var(--nav-logo-str); line-height: normal; font-weight: 400; color: var(--hand-black); }
.navbar .navbar__link { color: var(--nav-lenke-farge); transition: color 0.2s ease; }
.navbar .navbar__link:hover,
.navbar .navbar__item.is-open > .navbar__link,
.navbar .navbar__link[aria-current="page"] { color: var(--hand-black); text-decoration: none; }