/*
 * Mobilsettet for hele nettstedet (30.10.2026), lastet på alle sider
 * (inc/topp.php).
 *
 *   [data-sveip]    en liste med kort som blir en karusell man sveiper i
 *                   på mobil: kortene står ved siden av hverandre, litt av
 *                   neste kort stikker fram, og prikkene under viser hvor
 *                   man er (assets/topp/mobil.js lager prikkene). På større
 *                   skjermer står listen som den er i seksjonen.
 *                   --sveip-bredde  bredden på hvert kort, 84 % som standard
 *
 * I tillegg gjelder for alle sider på telefon: skjemafelt med minst 16 px
 * tekst, så iPhone ikke zoomer inn når man trykker i dem, og ingen
 * forsinkelse eller grå blink når man trykker på lenker og knapper.
 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

a,
button,
summary,
[role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

@media (max-width: 759px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
	select,
	textarea { font-size: max(16px, 1em) !important; }
}

/* Karusellen */
@media (max-width: 759px) {
	[data-sveip] {
		--sveip-kant: 24px;
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 12px !important;
		margin-inline: calc(-1 * var(--sveip-kant)) !important;
		padding: 4px var(--sveip-kant) 6px !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--sveip-kant);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	[data-sveip]::-webkit-scrollbar { display: none; }

	[data-sveip] > * {
		flex: 0 0 var(--sveip-bredde, 84%) !important;
		width: auto !important;
		min-width: 0;
		max-width: none !important;
		margin: 0 !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

@media (max-width: 640px) {
	[data-sveip] { --sveip-kant: 16px; }
}

/* Prikkene under karusellen. Den aktive blir en strek, og man kan trykke
   på dem. Trykkflaten er større enn prikken */
.sveip-prikker { display: none; }

@media (max-width: 759px) {
	.sveip-prikker {
		display: flex;
		justify-content: center;
		gap: 2px;
		margin-top: 10px;
	}

	.sveip-prikker button {
		display: grid;
		place-items: center;
		width: 22px;
		height: 28px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.sveip-prikker button::before {
		content: '';
		width: 7px;
		height: 7px;
		border-radius: 999px;
		background: #d6d3e3;
		transition: width .3s cubic-bezier(.2, .7, .2, 1), background-color .3s;
	}

	.sveip-prikker button[aria-current="true"]::before { width: 20px; background: #7c3aed; }
	.sveip-prikker button:focus-visible { outline: 2px solid #7c3aed; outline-offset: -2px; border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.sveip-prikker button::before { transition: none; }
}