/**
 * Teaching Funtastic - kategorimeny for butikkarkivet.
 *
 * Mobil (<=767px):  drill-down. Ett niva om gangen, apnet fra en
 *                   KATEGORIER-linje som ligger OVER produktene.
 * Desktop (>=768px): venstrekolonne som for, men undernivaene er
 *                   slatt sammen til et trekkspill.
 *
 * All struktur kommer fra WP-menyen "butikkmeny" (Utseende -> Menyer).
 * Ingen kategorinavn er hardkodet her.
 */

.tf-catnav ul,
.tf-catnav ul.menu {
	list-style: none;
	margin: 0;
	margin-left: 0;
	padding: 0;
}

.tf-catnav li {
	margin: 0;
	position: relative;
}

.tf-catnav .menu-butikkmeny-container {
	/* Containeren ligger na inne i .tf-catnav og skal ikke lenger
	   vaere sin egen kolonne eller flex-child. Overstyrer bade
	   products-archive.css og order:2 i style233.css. */
	width: 100%;
	display: block;
}

/* Skriftstorrelse.
 *
 * style233.css setter .menu-butikkmeny-container li { font-size: 0.6rem }
 * under max-width:1000px - altsa 9.6px. Det stammer fra den gamle,
 * tettpakkede lista der alt skulle fa plass samtidig. Med egne rader
 * blir det for smatt bade a lese og a treffe.
 *
 * Den fila lastes etter denne (den ligger hardkodet i header.php,
 * under wp_head), sa vi kan ikke vinne pa rekkefolge. Derfor hoyere
 * spesifisitet: .tf-catnav foran gir 0,2,1 mot deres 0,1,1.
 * Mediasporet er bevisst identisk, slik at desktop over 1000px
 * beholder storrelsen den allerede har. */
@media only screen and (max-width: 1000px) {

	.tf-catnav .menu-butikkmeny-container li {
		font-size: 0.95rem;
	}
}

/* ------------------------------------------------------------- hierarki
 *
 * Uten forskjell pa nivaene leser menyen som en eneste lang blokk.
 * Toppnivaet skal vaere ankeret man skanner etter; underpunktene skal
 * tydelig hore til over dem. Tre virkemidler, i stigende styrke:
 * vekt, storrelse og versaler.
 *
 * Temaet setter text-transform: uppercase pa hele lista. Vi beholder
 * det pa toppnivaet, men slipper underpunktene ned i vanlig skrivemate
 * - lange navn som "Multiplikation och division" blir betydelig
 * lettere a lese, og forskjellen pa niva blir umiddelbart synlig. */

.tf-catnav__panel ul.menu > li > a {
	font-weight: 700;
}

.tf-catnav__panel ul.sub-menu li > a {
	font-weight: 400;
	font-size: 0.95em;
	text-transform: none;
	letter-spacing: 0;
}

.tf-catnav__panel li > a:hover,
.tf-catnav__panel li > a:focus {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- rader */

.tf-catnav__panel li > a {
	display: block;
	padding: 0.85rem 3rem 0.85rem 0.25rem;
	line-height: 1.3;
	text-decoration: none;
}

.tf-catnav__panel li.tf-catnav__parent > a {
	padding-right: 3.25rem;
}

/* Chevron / utvidknapp */
.tf-catnav__into {
	position: absolute;
	top: 0;
	right: 0;
	width: 3rem;
	height: 2.9rem;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tf-catnav__into::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.1rem;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(-45deg);
	transition: transform 0.15s ease;
}

.tf-catnav__into:focus-visible {
	outline: 2px solid #333;
	outline-offset: -2px;
}

/* Toppen av et undernniva - vises bare i drill-down pa mobil */
.tf-catnav__head,
.tf-catnav__all {
	display: none;
}

.tf-catnav__back {
	display: block;
	width: 100%;
	padding: 0.85rem 0.25rem 0.85rem 1.5rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: pointer;
	position: relative;
	opacity: 0.75;
}

.tf-catnav__back::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.25rem;
	width: 0.5rem;
	height: 0.5rem;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

.tf-catnav__all > a {
	font-weight: 700;
}

/* ------------------------------------------------------------ MOBIL */

@media only screen and (max-width: 767px) {

	.tf-catnav {
		/* Loyfter hele komponenten opp OVER produktlista.
		   .menu-butikkmeny-container hadde order:2 og havnet nederst. */
		order: -1;
		width: 100%;
		margin: 0 0 1.5rem;
	}

	.tf-catnav__toggle {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		width: 100%;
		padding: 0.9rem 0.5rem;
		border: 0;
		border-top: 1px solid #e6e6e6;
		border-bottom: 1px solid #e6e6e6;
		background: #f7f7f7;
		color: inherit;
		font: inherit;
		font-weight: 700;
		text-transform: uppercase;
		text-align: left;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	/* Hamburger som blir til kryss nar panelet er apent */
	.tf-catnav__toggle-icon {
		position: relative;
		flex: 0 0 auto;
		width: 1.1rem;
		height: 0.75rem;
	}

	.tf-catnav__toggle-icon::before,
	.tf-catnav__toggle-icon::after,
	.tf-catnav__toggle-icon > span {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
		transition: transform 0.15s ease, opacity 0.15s ease;
	}

	.tf-catnav__toggle-icon::before { top: 0; }
	.tf-catnav__toggle-icon > span   { top: 50%; margin-top: -1px; }
	.tf-catnav__toggle-icon::after  { bottom: 0; }

	.tf-catnav.is-open .tf-catnav__toggle-icon::before {
		top: 50%;
		margin-top: -1px;
		transform: rotate(45deg);
	}

	.tf-catnav.is-open .tf-catnav__toggle-icon > span {
		opacity: 0;
	}

	.tf-catnav.is-open .tf-catnav__toggle-icon::after {
		bottom: auto;
		top: 50%;
		margin-top: -1px;
		transform: rotate(-45deg);
	}

	.tf-catnav__panel {
		display: none;
	}

	.tf-catnav.is-open .tf-catnav__panel {
		display: block;
	}

	.tf-catnav__panel li {
		border-bottom: 1px solid #ececec;
	}

	/* Drill-down: bare ett niva synlig om gangen.
	   Undernivaet ligger nestet INNE i forelder-lista, sa vi kan ikke
	   bare skjule forelderen - da forsvinner barnet med. I stedet
	   skjules alle sosken, og punktet vi gikk inn i blir staende som
	   en gjennomsiktig beholder rundt neste niva. */
	.tf-catnav__panel ul.sub-menu {
		display: none;
	}

	.tf-catnav__panel ul.is-drilled > li {
		display: none;
	}

	.tf-catnav__panel ul.is-drilled > li.is-path {
		display: block;
		border-bottom: 0;
	}

	.tf-catnav__panel ul.is-drilled > li.is-path > a,
	.tf-catnav__panel ul.is-drilled > li.is-path > .tf-catnav__into {
		display: none;
	}

	.tf-catnav__panel li.is-path > ul.sub-menu {
		display: block;
		animation: tf-catnav-slide 0.18s ease;
	}

	.tf-catnav__head,
	.tf-catnav__all {
		display: block;
	}

	.tf-catnav__head {
		border-bottom: 1px solid #ececec;
	}

	/* Chevron skal alltid peke innover pa mobil */
	.tf-catnav.is-open .tf-catnav__into::after {
		transform: translateY(-50%) rotate(-45deg);
	}
}

@keyframes tf-catnav-slide {
	from { transform: translateX(12px); opacity: 0.4; }
	to   { transform: translateX(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.tf-catnav__panel ul.sub-menu.is-active { animation: none; }
	.tf-catnav__into::after { transition: none; }
}

/* ---------------------------------------------------------- DESKTOP */

@media only screen and (min-width: 768px) {

	.tf-catnav {
		width: 24%;
		display: inline-block;
		vertical-align: top;
	}

	.tf-catnav__toggle {
		display: none;
	}

	.tf-catnav__panel {
		display: block !important;
	}

	/* Skillelinje pa HVER rad, ogsa underpunktene. Toppnivaet far en
	   litt kraftigere strek enn barna, sa nivaene fortsatt kan skilles
	   fra hverandre uten at det blir to konkurrerende systemer. */
	.tf-catnav__panel ul.menu > li {
		border-bottom: 1px solid #e2e2e2;
	}

	.tf-catnav__panel ul.menu > li:last-child {
		border-bottom: 0;
	}

	.tf-catnav__panel ul.sub-menu > li {
		border-bottom: 1px solid #efefef;
	}

	.tf-catnav__panel ul.sub-menu > li:last-child {
		border-bottom: 0;
	}

	/* Apen gren far en svak flate. Barna ligger inne i samme <li>,
	   sa hele gruppa tones - det er den som binder dem sammen na som
	   den loddrette skinna er borte. */
	.tf-catnav__panel ul.menu > li.is-expanded {
		background: #fafafa;
	}

	/* Trekkspill: undernivaene er lukket til de apnes.
	   Innrykk uten skinne - radlinjene gjor jobben, og strek pluss
	   skinne samtidig ble for mye strukturpynt. */
	.tf-catnav__panel ul.sub-menu {
		display: none;
		margin: 0;
		padding-left: 0.85rem;
	}

	.tf-catnav__panel ul.sub-menu.is-expanded {
		display: block;
	}

	.tf-catnav__panel ul.sub-menu li > a {
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

	.tf-catnav__panel ul.menu > li > a {
		padding-top: 0.55rem;
		padding-bottom: 0.55rem;
	}

	.tf-catnav__into {
		height: 1.9rem;
		width: 2.25rem;
	}

	.tf-catnav__into::after {
		right: 0.9rem;
		transform: translateY(-65%) rotate(45deg);
	}

	.tf-catnav__into[aria-expanded="true"]::after {
		transform: translateY(-35%) rotate(-135deg);
	}
}