/* ==========================================================================
   04 – RAMME
   --------------------------------------------------------------------------
   Det som står på alle sider: toppstripe, header, kategorimeny,
   brødsmuler, banner og bunntekst. Verdiene er hentet fra 03-ramme.css og
   13-arkiv.css i pluginen kanoncon-design, så siden ser ut som kanoncon.no.
   Markup: header.php, footer.php og template-parts/.
   ========================================================================== */


/* ---- Toppstripe ---------------------------------------------------------
   Mørkeblå stripe øverst med fakta om portalen (ingen kundeløfter).
   Tekstene settes i Utseende → Tilpass → KanonCon B2B. */
.kc-toppstripe {
	background: var(--kc-navy);
	color: var(--kc-white);
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
	font-weight: var(--kc-vekt-halvfet);
}

.kc-toppstripe__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--kc-luft-1) var(--kc-luft-4);
	min-height: var(--kc-toppstripe);
	margin: 0;
	padding-block: var(--kc-luft-1);
	list-style: none;
	white-space: nowrap;
}

.kc-toppstripe__punkt {
	display: inline-flex;
	align-items: center;
	gap: var(--kc-luft-2);
}

/* Prikk i logofargene foran hvert punkt: oransje, grønn, blå. */
.kc-toppstripe__punkt::before {
	content: "";
	width: var(--kc-prikk-liten);
	height: var(--kc-prikk-liten);
	border-radius: var(--kc-r-rund);
	background: var(--kc-orange);
}

.kc-toppstripe__punkt:nth-child(3n + 2)::before { background: var(--kc-green); }
.kc-toppstripe__punkt:nth-child(3n + 3)::before { background: var(--kc-blue); }

@media (max-width: 849px) {
	.kc-toppstripe {
		font-size: var(--kc-tekst-mini);
	}

	.kc-toppstripe__liste {
		gap: var(--kc-luft-1) var(--kc-luft-2);
	}
}


/* ---- Header -------------------------------------------------------------
   Logo – søkefelt (maks 640 px) – firmanavn, konto og handlekurv. */
.kc-header__rad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kc-luft-2) var(--kc-luft-6);
	min-height: var(--kc-header);
	padding-block: var(--kc-luft-2);
}

.kc-header__logo {
	flex: none;
	border-radius: var(--kc-r-md); /* fokusrammen følger denne */
}

.kc-header__logo img,
.kc-header__logo .custom-logo {
	width: auto;
	height: var(--kc-logo);
}

.kc-header__sok {
	flex: 1 1 calc(var(--kc-kort-min) * 2);
	max-width: var(--kc-sok-maks);
}

.kc-header__verktoy {
	display: flex;
	align-items: center;
	gap: var(--kc-luft-1);
	margin-left: auto;
}

.kc-header__firma {
	margin-right: var(--kc-luft-2);
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
	font-weight: var(--kc-vekt-fet);
}

/* Konto- og handlekurvikonene er 26 px, som på kanoncon.no. */
.kc-header__verktoy .kc-ikonknapp svg {
	width: var(--kc-ikon-header);
	height: var(--kc-ikon-header);
}

/* Utlogget header: bare logo og lenke til nettbutikken. */
.kc-header__lenke {
	margin-left: auto;
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
	font-weight: var(--kc-vekt-fet);
	text-decoration: none;
}

/* PC: søkefeltet starter ca. 56 px etter logoen, som på kanoncon.no. */
@media (min-width: 850px) {
	.kc-header__sok {
		margin-left: var(--kc-luft-8);
	}
}

@media (max-width: 849px) {
	/* Søkefeltet får egen linje under logo og ikoner. */
	.kc-header__sok {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

	.kc-header__firma {
		display: none;
	}
}


/* ---- Kategorimeny ------------------------------------------------------
   «Alle kategorier» med ruteikon og en kort strek etter – kategoriene –
   «Mine ordre» helt til høyre. 14 px fet, 3 px strek under valgt kategori.
   Scroller vannrett på smal skjerm. */
.kc-kategorimeny {
	border-top: var(--kc-strek) solid var(--kc-line);
	border-bottom: var(--kc-strek) solid var(--kc-line);
	background: var(--kc-white);
}

.kc-kategorimeny__liste {
	display: flex;
	align-items: stretch;
	gap: 0 var(--kc-luft-4);
	margin: 0;
	padding-block: 0;
	list-style: none;
	overflow-x: auto;
	white-space: nowrap;
}

.kc-kategorimeny__liste a {
	display: flex;
	align-items: center;
	gap: var(--kc-luft-2);
	height: 100%;
	padding: var(--kc-luft-4) 0;
	border-bottom: var(--kc-strek-meny) solid transparent;
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
	font-weight: var(--kc-vekt-fet);
	text-decoration: none;
}

/* Valgt kategori og hover: strek under. WordPress setter current-*-klassene. */
.kc-kategorimeny__liste a:hover,
.kc-kategorimeny__liste .current-menu-item > a,
.kc-kategorimeny__liste .current-menu-ancestor > a,
.kc-kategorimeny__liste .current-product_cat-ancestor > a,
.kc-kategorimeny__liste .kc-valgt > a {
	border-bottom-color: var(--kc-navy);
}

/* «Alle kategorier»: ikon foran, kort loddrett strek etter, ingen strek under. */
.kc-kategorimeny__alle {
	position: relative;
	padding-right: var(--kc-luft-4);
}

.kc-kategorimeny__alle::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: var(--kc-strek);
	height: var(--kc-meny-skille);
	transform: translateY(-50%);
	background: var(--kc-line);
}

.kc-kategorimeny__liste .kc-kategorimeny__alle > a {
	border-bottom-color: transparent;
}

.kc-kategorimeny__alle svg {
	width: var(--kc-ikon-liten);
	height: var(--kc-ikon-liten);
}

.kc-kategorimeny__ordre {
	margin-left: auto;
}

/* Undermenyer vises ikke i denne linjen. */
.kc-kategorimeny__liste .sub-menu {
	display: none;
}


/* ---- Brødsmuler ------------------------------------------------------- */
.kc-smuler,
.woocommerce-breadcrumb {
	padding-block: var(--kc-luft-2);
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
	color: var(--kc-ink-muted);
}

.kc-smuler a,
.woocommerce-breadcrumb a {
	color: var(--kc-ink-muted);
	text-decoration: none;
}

.kc-smuler a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--kc-ink);
	text-decoration: underline;
}


/* ---- Banner ------------------------------------------------------------
   Mørkeblått banner øverst på kategori-, søke- og butikksiden, og
   velkomsten på forsiden. Antall varer i 12 px over tittelen. */
.kc-banner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--kc-luft-1);
	min-height: calc(var(--kc-header) * 1.8);
	padding: var(--kc-luft-6) var(--kc-luft-4);
	border-radius: var(--kc-r-lg);
	background: var(--kc-bannergradient);
	color: var(--kc-white);
}

.kc-banner h1 {
	color: var(--kc-white);
	text-shadow: var(--kc-skygge-tekst);
}

.kc-banner__antall {
	order: 1;
	font-size: var(--kc-tekst-mini);
	line-height: var(--kc-lh-mini);
	font-weight: var(--kc-vekt-fet);
	color: var(--kc-ink-muted-mork);
}

.kc-banner__tekst {
	order: 2;
	margin: var(--kc-luft-2) 0 0;
	max-width: var(--kc-sok-maks);
	font-size: var(--kc-tekst-body);
	color: var(--kc-ink-muted-mork);
}

@media (min-width: 850px) {
	.kc-banner {
		padding: var(--kc-luft-8) calc(var(--kc-luft-8) + var(--kc-luft-2));
	}

	/* PC: antallet står over tittelen. */
	.kc-banner__antall {
		order: -1;
	}
}


/* ---- Hovedinnhold ------------------------------------------------------ */
.kc-hoved {
	padding-bottom: var(--kc-luft-8);
}

/* Sidetittel på sider uten banner (kasse, Min konto, innlogging). */
.kc-sidetittel {
	margin: var(--kc-luft-8) 0 var(--kc-luft-6);
}


/* ---- Seksjonstittel ----------------------------------------------------
   «Nytt i katalogen»  ·····  «Se alle →». Som kc-tittel på kanoncon.no. */
.kc-seksjonstittel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kc-luft-4);
	margin: 0 0 var(--kc-luft-4);
	padding-top: var(--kc-luft-2);
}

.kc-seksjonstittel h2 {
	flex: 1 1 auto;
	min-width: 0;
}

.kc-seksjonstittel a {
	flex: none;
	font-size: var(--kc-tekst-liten);
	font-weight: var(--kc-vekt-fet);
	text-decoration: none;
	white-space: nowrap;
}

.kc-seksjonstittel a::after {
	content: " →";
}

.kc-seksjonstittel a:hover {
	text-decoration: underline;
	text-underline-offset: var(--kc-understrek-luft);
}

@media (min-width: 850px) {
	.kc-seksjonstittel {
		margin-bottom: var(--kc-luft-6);
	}

	.kc-seksjonstittel a {
		font-size: var(--kc-tekst-body);
	}
}


/* ---- Bunntekst ---------------------------------------------------------
   Mørkeblå. Kolonneoverskrifter i Peace Sans (hvit), lenker i dempet lys
   tekst som blir hvite og understreket ved hover. */
.kc-bunn {
	margin-top: var(--kc-luft-8);
	background: var(--kc-navy);
	color: var(--kc-ink-muted-mork);
}

.kc-bunn__kolonner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--kc-kort-min) * 1.2), 1fr));
	gap: var(--kc-luft-6);
	padding-block: var(--kc-luft-8) var(--kc-luft-6);
}

.kc-bunn__kolonne {
	display: flex;
	flex-direction: column;
	gap: var(--kc-luft-2);
	font-size: var(--kc-tekst-body);
	line-height: var(--kc-fot-lenke);
}

.kc-bunn__kolonne h2 {
	margin-bottom: var(--kc-luft-1);
	font-size: var(--kc-tekst-h3);
	line-height: var(--kc-lh-h3);
	color: var(--kc-white);
}

.kc-bunn__kolonne ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kc-bunn__kolonne li a {
	display: inline-block;
	padding: var(--kc-luft-1) 0;
}

.kc-bunn a {
	color: var(--kc-ink-muted-mork);
	text-decoration: none;
}

.kc-bunn a:hover {
	color: var(--kc-white);
	text-decoration: underline;
	text-underline-offset: var(--kc-understrek-luft);
}

.kc-bunn__linje {
	padding-block: var(--kc-luft-4) var(--kc-luft-6);
	border-top: var(--kc-strek) solid var(--kc-strek-mork);
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
	color: var(--kc-ink-muted-mork);
}