/* 
Theme Name: Aksell - Avfallsforum Sør
Description: WordPress-tema bygget på Elementor for Avfallsforum Sør
Version: 1.0
Author: Alf Otto Fagermo
Author URI:   https://aksell.no
*/
/* Generelle stiler */

/* =========================================================
   AVFALLSFORUM SØR
   Globalt designsystem
   ========================================================= */

:root {

	/* -----------------------------------------------------
	   FARGER
	   ----------------------------------------------------- */


	/*
	 * Primær blå
	 * Gammel body/background.
	 */
	--afs-blaa-900: #497288;

	/*
	 * Overskriftsblå.
	 * Original h1-h6.
	 */
	--afs-blaa-700: #497c95;

	/*
	 * Navigasjon / footer.
	 */
	--afs-blaa-600: #5d7f99;

	/*
	 * Lys kantfarge brukt rundt navigasjon.
	 */
	--afs-blaa-400: #7192ab;


	/* =====================================================
	   AKSENTFARGE
	   ===================================================== */

	/*
	 * Original hovedaksent.
	 * Brukt på dato, knapper og hover.
	 */
	--afs-cyan: #52b8df;

	/*
	 * Variasjoner som eksisterte i gammel profil.
	 */
	--afs-cyan-light: #53b9e0;
	--afs-cyan-dark: #4fb1d7;
	--afs-cyan-heading: #51b4db;


	/* =====================================================
	   NØYTRALE FARGER
	   ===================================================== */

	--afs-sort: #000000;

	--afs-graa-900: #333333;
	--afs-graa-800: #444444;
	--afs-graa-600: #666666;
	--afs-graa-400: #cccccc;
	--afs-graa-200: #e9e9e9;
	--afs-graa-100: #f5f5f5;

	--afs-hvit: #ffffff;


	/* =====================================================
	   SEMANTISKE FARGER
	   Bruk helst disse i komponentene.
	   ===================================================== */

	--afs-color-primary: var(--afs-blaa-900);
	--afs-color-primary-light: var(--afs-blaa-600);

	--afs-color-accent: var(--afs-cyan);
	--afs-color-accent-hover: var(--afs-cyan-dark);

	--afs-color-heading: var(--afs-blaa-700);

	--afs-color-text: var(--afs-graa-900);
	--afs-color-text-muted: var(--afs-graa-600);

	--afs-color-link: var(--afs-blaa-900);
	--afs-color-link-hover: var(--afs-cyan-dark);

	--afs-color-background: var(--afs-hvit);
	--afs-color-background-alt: var(--afs-graa-100);

	--afs-color-border: var(--afs-graa-400);

	/* Semantiske farger */

	--afs-color-surface: var(--afs-graa-100);
	--afs-color-border: var(--afs-graa-300);


	/* -----------------------------------------------------
	   TYPOGRAFI
	   ----------------------------------------------------- */

	/* TYPOGRAFI */

	--afs-font-body:
		"Raleway",
		Arial,
		sans-serif;

	--afs-font-heading:
		"Open Sans",
		Arial,
		sans-serif;

	--afs-font-menu:
		Helvetica,
		Arial,
		sans-serif;

	--afs-font-submenu:
		"Raleway",
		Arial,
		sans-serif;


	/* Font weights */

	--afs-font-weight-light: 300;
	--afs-font-weight-normal: 400;
	--afs-font-weight-medium: 500;
	--afs-font-weight-semibold: 600;
	--afs-font-weight-bold: 700;


	/* Fluid størrelser */

	--afs-font-xs:
		clamp(0.8rem, 0.78rem + 0.05vw, 0.85rem);

	--afs-font-sm:
		clamp(0.875rem, 0.84rem + 0.1vw, 0.95rem);

	--afs-font-base:
		clamp(1rem, 0.96rem + 0.12vw, 1.125rem);

	--afs-font-lg:
		clamp(1.125rem, 1.05rem + 0.25vw, 1.3rem);

	--afs-font-h4:
		clamp(1.25rem, 1.1rem + 0.45vw, 1.55rem);

	--afs-font-h3:
		clamp(1.5rem, 1.25rem + 0.75vw, 2rem);

	--afs-font-h2:
		clamp(1.85rem, 1.45rem + 1.1vw, 2.65rem);

	--afs-font-h1:
		clamp(2.25rem, 1.7rem + 1.7vw, 3.75rem);


	/* Linjehøyder */

	--afs-line-height-body: 1.65;
	--afs-line-height-heading: 1.2;


	/* -----------------------------------------------------
	   AVSTANDER
	   ----------------------------------------------------- */

	--afs-space-2xs: 0.25rem;
	--afs-space-xs: 0.5rem;
	--afs-space-sm: 0.75rem;
	--afs-space-md: 1rem;
	--afs-space-lg: 1.5rem;
	--afs-space-xl: 2rem;
	--afs-space-2xl: 3rem;
	--afs-space-3xl: clamp(3.5rem, 7vw, 6rem);


	/* -----------------------------------------------------
	   LAYOUT
	   ----------------------------------------------------- */

	--afs-content-width: 1280px;
	--afs-text-width: 760px;

	--afs-page-padding:
		clamp(1rem, 3vw, 2.5rem);


	/* -----------------------------------------------------
	   KANTER / FORM
	   ----------------------------------------------------- */

	--afs-radius-sm: 0.25rem;
	--afs-radius-md: 0.5rem;
	--afs-radius-lg: 0.75rem;

	--afs-border-width: 1px;


	/* -----------------------------------------------------
	   ANIMASJON
	   ----------------------------------------------------- */

	--afs-transition-fast: 160ms ease;
	--afs-transition-normal: 250ms ease;


	/* -----------------------------------------------------
	   SKYGGER
	   ----------------------------------------------------- */

	--afs-shadow-sm:
		0 2px 8px rgb(31 37 41 / 0.08);

	--afs-shadow-md:
		0 8px 24px rgb(31 37 41 / 0.12);
}


/* =========================================================
   GLOBAL RESET / BODY
   ========================================================= */

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	max-width: 100%;
	overflow-x: clip;

	font-family: var(--afs-font-body);
	font-size: var(--afs-font-base);
	font-weight: var(--afs-font-weight-normal);
	line-height: var(--afs-line-height-body);

	color: var(--afs-color-text);
	background: var(--afs-color-background);

	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}


/* =========================================================
   TYPOGRAFI
   ========================================================= */

:is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--afs-font-heading);
	font-weight: var(--afs-font-weight-normal);
	line-height: var(--afs-line-height-heading);
	color: var(--afs-color-heading);

	text-wrap: balance;
}

h1 {
	font-size: var(--afs-font-h1);
}

h2 {
	font-size: var(--afs-font-h2);
}

h3 {
	font-size: var(--afs-font-h3);
}

h4 {
	font-size: var(--afs-font-h4);
}

p,
li {
	font-family: var(--afs-font-body);
	text-wrap: pretty;
}

strong,
b {
	font-weight: var(--afs-font-weight-semibold);
}


/* =========================================================
   LENKER
   ========================================================= */

a {
	color: var(--afs-color-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;

	transition:
		color var(--afs-transition-fast),
		text-decoration-color var(--afs-transition-fast);

	&:hover {
		color: var(--afs-color-link-hover);
	}

	&:focus-visible {
		outline: 3px solid var(--afs-cyan);
		outline-offset: 3px;
		border-radius: 2px;
	}
}


/* =========================================================
   CTA / BUTTON
   ========================================================= */

.btn,
.cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	min-height: 48px;
	padding: 0.75em 1.4em;

	border: 2px solid transparent;
	border-radius: var(--afs-radius-sm);

	font-size: 1rem;
	font-family: var(--afs-font-body);
	font-weight: var(--afs-font-weight-semibold);
	line-height: 1.2;

	text-align: center;
	text-decoration: none;
	cursor: pointer;

	transition:
		background-color var(--afs-transition-fast),
		border-color var(--afs-transition-fast),
		color var(--afs-transition-fast),
		transform var(--afs-transition-fast);

	&:hover {
		text-decoration: none;
	}

	&:focus-visible {
		outline: 3px solid var(--afs-cyan);
		outline-offset: 3px;
	}

	&:active {
		transform: translateY(1px);
	}
}


/* Primær knapp */

.btn-primary,
.cta-primary {
	background: var(--afs-blaa-900) !important;
	color: var(--afs-hvit) !important;

	&:hover {
		background: var(--afs-cyan) !important;
		color: var(--afs-hvit) !important;
	}
}


/* Sekundær knapp */

.btn-secondary,
.cta-secondary {
	background: transparent;
	border-color: var(--afs-blaa-900) !important;
	color: var(--afs-blaa-900) !important;

	&:hover {
		background: var(--afs-blaa-900);
		color: var(--afs-hvit) !important;
	}
}


/* Aksentknapp */

.btn-accent,
.cta-accent {
	background: var(--afs-cyan) !important;
	color: var(--afs-sort) !important;

	&:hover {
		background: var(--afs-cyan-hover) !important;
		color: var(--afs-hvit) !important;
	}
}


/* Lys knapp på mørk bakgrunn */

.btn-light,
.cta-light {
	background: var(--afs-hvit) !important;
	color: var(--afs-blaa-900) !important;

	&:hover {
		background: var(--afs-cyan) !important;
		color: var(--afs-sort) !important;
	}
}


/* =========================================================
   PÅMELDINGSKNAPP - [pamelding]
   Alternativ visning: lys bakgrunn med mørk kant og tekst,
   inverteres ved hover/fokus. Bygger på .btn.
   ========================================================= */

.afs-pamelding {
	background: var(--afs-hvit) !important;
	border-color: var(--afs-blaa-900) !important;
	color: var(--afs-blaa-900) !important;

	&:hover,
	&:focus-visible {
		background: var(--afs-blaa-900) !important;
		color: var(--afs-hvit) !important;
	}
}

/* Aktiviteten er over: inaktiv, ingen hover */

.afs-pamelding--over,
.afs-pamelding--over:hover {
	background: var(--afs-graa-100) !important;
	border-color: var(--afs-graa-400) !important;
	color: var(--afs-graa-600) !important;
	cursor: default;
	transform: none;
}


/* =========================================================
   NEDLASTINGSKNAPP - [last_ned]
   Bygger på .btn/.btn-primary. Lange navn brytes over flere
   linjer, og ikonet holder seg på høyde med første linje.
   Grid i stedet for flex: raden sentreres i knappens
   min-height (én linje = midtstilt), mens ikon og tekst
   toppjusteres mot hverandre (flere linjer = ikon ved linje 1).
   ========================================================= */

.afs-last-ned {
	--afs-last-ned-line-height: 1.3;

	display: inline-grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	align-content: center;
	justify-content: start;
	gap: var(--afs-space-sm);

	width: fit-content;
	max-width: min(100%, 22rem);

	line-height: var(--afs-last-ned-line-height);
	text-align: left;
	vertical-align: top;
}

.afs-last-ned__ikon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;

	/* Nøyaktig én tekstlinje høy, så ikonet sentreres mot første linje */
	height: calc(var(--afs-last-ned-line-height) * 1em);

	i {
		font-size: 1.25em;
		line-height: 1;
	}

	svg {
		width: 1.25em;
		height: 1.25em;
		fill: currentColor;
	}
}

.afs-last-ned__tekst {
	min-width: 0;
	overflow-wrap: anywhere;
}


/* =========================================================
   CTA-BOKS
   ========================================================= */

.cta-box {
	padding:
		clamp(1.5rem, 4vw, 3rem);

	background: var(--afs-blaa-900);
	color: var(--afs-hvit);

	border-radius: var(--afs-radius-md);

	> :last-child {
		margin-bottom: 0;
	}

	:is(h2, h3, h4) {
		color: var(--afs-hvit);
	}

	a:not(.btn):not(.cta) {
		color: var(--afs-hvit);

		&:hover {
			color: var(--afs-cyan);
		}
	}
}


/* =========================================================
   STANDARD CONTENT CONTAINER
   ========================================================= */

.site-container {
	width: min(
		calc(100% - (var(--afs-page-padding) * 2)),
		var(--afs-content-width)
	);

	margin-inline: auto;
}

.content-text {
	max-width: var(--afs-text-width);
}


/* =========================================================
   SEKSJONER
   ========================================================= */

.section {
	padding-block: var(--afs-space-3xl);

	&.section-light {
		background: var(--afs-graa-100);
	}

	&.section-blue {
		background: var(--afs-blaa-900);
		color: var(--afs-hvit);

		:is(h1, h2, h3, h4) {
			color: var(--afs-hvit);
		}
	}
}


/* =========================================================
   RESPONSIVE MEDIA
   ========================================================= */

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}




.forsidekarusell .swiper-slide {
		@media (min-width: 1024px) {
		height: 420px;
	}
	@media (min-width: 768px) {
		height: 500px;
	}
@media (max-width: 767px) {
		height: 250px;
	}
}


.skip-to-content {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 99999;
  text-decoration: none;
  width: max-content;
  min-width: 128px;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  color: var(--afs-hvit) !important;
  padding-block-start: 8px;
  padding-block-end: 8px;
  padding-inline-start: 24px;
  padding-inline-end: 24px;
  border-radius: 29px;
  background-color: var(--afs-blaa-900);
  transition: top 0.25s ease;
}

/* Kun synlig når brukeren tabber seg dit */
.skip-to-content:focus {
  top: 20px;
  outline: var(--afs-graa-100) solid 4px;
}


/* =========================================================
   VISUELT SKJULT (kun for skjermlesere)
   ========================================================= */

.afs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* =========================================================
   BRØDSMULER - [aks_breadcrumbs]
   ========================================================= */

.aks-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--afs-space-2xs);

	a,
	.current,
	.aks-home-icon,
	.aks-breadcrumb-separator {
		display: inline-flex;
		align-items: center;
	}

	svg {
		display: block;
	}

	/* Samme farger som menyen. "nav"-prefikset gir nok spesifisitet til å slå Elementor sine lenkefarger */
	&:is(nav) a {
		color: var(--afs-color-link);

		&:hover,
		&:focus-visible {
			color: var(--afs-color-link-hover);
		}
	}

	.current {
		color: var(--afs-color-text-muted);
	}
}


/* =========================================================
   HENDELSER
   ========================================================= */

.afs-hendelser-tom {
	color: var(--afs-color-text-muted);
}

.afs-hendelser {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Rutenettvisning - brukes av [hendelser] og [hendelser_alle] */

[data-afs-visning="grid"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--afs-space-lg);
}

.afs-hendelse-kort {
	position: relative;

	@media (min-width: 1024px) {
  width: 300px;
}
@media (max-width: 1023px) {
width: 100%;
}

	background: var(--afs-color-background);
	border-radius: var(--afs-radius-lg);

	transition: box-shadow var(--afs-transition-normal);

	&:has(.afs-hendelse-kort__les-mer):hover {
		box-shadow: var(--afs-shadow-md);
	}

	article {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
}

.page-aktiviteter .afs-hendelse-kort {
  background: var(--afs-color-background-alt);
}

.afs-hendelse-kort__bilde {
	display: block;
	width: 100%;
	height: 180px !important;
	object-fit: cover;
	border-radius: var(--afs-radius-lg) var(--afs-radius-lg) 0 0 !important;
}

.afs-hendelse-kort__innhold {
	display: flex;
	flex-direction: column;
	gap: var(--afs-space-sm);
	flex: 1;

	padding: var(--afs-space-lg);
}

.afs-hendelse-kort__dato {
	margin: 0;
	font-weight: var(--afs-font-weight-semibold);
	color: var(--afs-color-heading);
}

.afs-hendelse-kort__tittel {
	margin: 0;
	font-size: var(--afs-font-h4) !important;
}

.afs-hendelse-kort__ingress {
	margin: 0;
	color: var(--afs-color-text-muted);

	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

.afs-hendelse-kort__cta {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--afs-space-sm);
	flex-wrap: wrap;
}

.afs-hendelse-kort__les-mer {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;

	font-weight: var(--afs-font-weight-semibold);
	color: var(--afs-color-link);

	/* Strekker klikkflaten til hele kortet (UU: hele boksen skal være trykkbar) */
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	&:hover {
		color: var(--afs-color-link-hover);
		text-decoration: underline;
	}

	&:focus-visible {
		outline: none;
	}

	&:focus-visible::after {
		outline: 3px solid var(--afs-cyan);
		outline-offset: 2px;
		border-radius: var(--afs-radius-lg);
	}
}

.afs-hendelse-kort__pamelding {
	/* Skal fanges før den usynlige klikkflaten til "Les mer" (::after over) */
	position: relative;
	z-index: 1;
}

/* Forside: fast boks med bilde, bånd og hover-avsløring - [hendelser context="forside"] */

.afs-hendelse-kort--forside {
	overflow: hidden;
	height: 220px;

	article {
		position: relative;
	}
}

.afs-hendelse-kort--forside .afs-hendelse-kort__bilde {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
}

.afs-hendelse-kort__band {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: var(--afs-space-sm) var(--afs-space-md);

	background: rgba(0, 0, 0, 0.55);
	color: var(--afs-hvit);

	font-weight: var(--afs-font-weight-semibold);
	text-align: center;

	border-radius: var(--afs-radius-lg) var(--afs-radius-lg) 0 0;

	transition: opacity var(--afs-transition-normal);
}

.afs-hendelse-kort__hover {
	position: absolute;
	inset: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--afs-space-sm);
	padding: var(--afs-space-lg);

	background: rgba(20, 20, 20, 0.92);
	color: var(--afs-hvit);

	opacity: 0;
	pointer-events: none;
	transition: opacity var(--afs-transition-normal);

	.afs-hendelse-kort__dato,
	.afs-hendelse-kort__tittel {
		color: inherit;
	}

	.afs-hendelse-kort__ingress {
		color: rgba(255, 255, 255, 0.8);
	}

	a {
		pointer-events: auto;
	}
}

.afs-hendelse-kort--forside:hover .afs-hendelse-kort__hover,
.afs-hendelse-kort--forside:focus-within .afs-hendelse-kort__hover {
	opacity: 1;
}

.afs-hendelse-kort--forside:hover .afs-hendelse-kort__band,
.afs-hendelse-kort--forside:focus-within .afs-hendelse-kort__band {
	opacity: 0;
}

.afs-hendelse-kort--forside .afs-hendelse-kort__les-mer:focus-visible::after {
	outline-offset: -3px;
}

/* Listevisning - kun i [hendelser_alle] */

[data-afs-visning="liste"] {
	display: none;
	flex-direction: column;
	gap: var(--afs-space-md);
}

.afs-hendelse-rad {
	article {
		display: flex;
		align-items: center;
		gap: var(--afs-space-lg);
		flex-wrap: wrap;

		padding: var(--afs-space-md) var(--afs-space-lg);

		background: var(--afs-color-background-alt);
		border-radius: var(--afs-radius-md);
	}
}

.afs-hendelse-rad__bilde {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: var(--afs-radius-md);
	overflow: hidden;

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.afs-hendelse-rad__info {
	flex: 1;
}

.afs-hendelse-rad__kategori {
	display: inline-block;
	margin-bottom: var(--afs-space-2xs);
	padding: 0.2em 0.75em;

	background: var(--afs-color-primary);
	color: var(--afs-hvit);

	font-size: var(--afs-font-xs);
	font-weight: var(--afs-font-weight-semibold);
	border-radius: var(--afs-radius-sm);
}

.afs-hendelse-rad__tittel {
	margin: 0;
	font-size: var(--afs-font-lg);
}

.afs-hendelse-rad__dato {
	margin: var(--afs-space-2xs) 0 0;
	color: var(--afs-color-text-muted);
}

.afs-hendelse-rad__cta {
	display: flex;
	align-items: center;
	gap: var(--afs-space-md);
	flex-wrap: wrap;
	margin-left: auto;
}

.afs-hendelse-rad__les-mer {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;

	font-weight: var(--afs-font-weight-semibold);
	color: var(--afs-color-link);

	&:hover {
		color: var(--afs-color-link-hover);
		text-decoration: underline;
	}
}

@media (max-width: 640px) {

	.afs-hendelse-rad article {
		flex-direction: column;
		align-items: flex-start;
	}

	.afs-hendelse-rad__cta {
		margin-left: 0;
	}
}

/* Verktøy: visningsvalg (rutenett/liste) - [hendelser_alle] */

.afs-hendelser-side {
	display: flex;
	flex-direction: column;
	gap: var(--afs-space-lg);
}

.afs-hendelser-verktoy {
	display: flex;
	justify-content: flex-end;
}

.afs-hendelser-visningsvalg {
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: var(--afs-border-width) solid var(--afs-color-border);
	border-radius: var(--afs-radius-sm);
	overflow: hidden;
}

.afs-hendelser-visningsknapp {
	position: relative;
	background: var(--afs-color-surface);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 1em;

	font-size: var(--afs-font-sm);
	font-weight: var(--afs-font-weight-medium);
	color: var(--afs-color-text);
	cursor: pointer;

	transition:
		background-color var(--afs-transition-fast),
		color var(--afs-transition-fast);

	input {
		position: absolute;
		inset: 0;
		margin: 0;
		opacity: 0;
		cursor: pointer;
	}

	&:hover {
		background: var(--afs-color-cyan);
		text-decoration: underline;
	}
}

.afs-hendelser-visningsvalg:has(input[value="grid"]:checked) label:first-of-type,
.afs-hendelser-visningsvalg:has(input[value="liste"]:checked) label:last-of-type {
	background: var(--afs-color-primary);
	color: var(--afs-hvit);
}

.afs-hendelser-visningsknapp input:focus-visible ~ span {
	outline: 3px solid var(--afs-cyan);
	outline-offset: 2px;
	border-radius: var(--afs-radius-sm);
}

/* Vis liste- ell. rutenett-varianten avhengig av valgt radioknapp */

.afs-hendelser-side:has(input[value="liste"]:checked) [data-afs-visning="grid"] {
	display: none;
}

.afs-hendelser-side:has(input[value="liste"]:checked) [data-afs-visning="liste"],
.afs-hendelser-side--liste [data-afs-visning="liste"] {
	display: flex;
}

/* Tidligere hendelser - kollapset innhold ([hendelser_alle]) */

.afs-hendelser-tidligere {
	padding-top: var(--afs-space-lg);
	border-top: var(--afs-border-width) solid var(--afs-color-border);
}

.afs-hendelser-tidligere__knapp {
	margin-bottom: var(--afs-space-md);

	font-weight: var(--afs-font-weight-semibold);
	color: var(--afs-color-heading);
	cursor: pointer;

	&:focus-visible {
		outline: 3px solid var(--afs-cyan);
		outline-offset: 3px;
	}
}

.afs-hendelser-tidligere[open] .afs-hendelser-tidligere__knapp {
	margin-bottom: var(--afs-space-md);
}

.aktivitetsinfo li:first-of-type .elementor-icon-list-text {
	margin-right: -9px;
}

/* [kommende_aktivitet] - ment for mørk bakgrunn, derfor lyse farger */
.afs-kommende-aktivitet__lenke {
	color: var(--afs-hvit) !important;
	text-decoration: underline !important;

	&:hover,
	&:focus-visible {
		color: var(--afs-graa-400) !important;
		text-decoration: none !important;
	}
}


/* =========================================================
   MEDLEMSLOGOER – FADE INN VED SCROLL
   Animerer selve loop-elementet (opacity 0 -> 1) uavhengig av
   lenkens egen hover-opacity (0.8 -> 1), så de to ikke ganges
   sammen. Faller trygt tilbake til ingen animasjon i nettlesere
   uten støtte for scroll-drevne animasjoner / sibling-index().
   ========================================================= */

@supports (animation-timeline: view()) {

	.medlemmer-grid .e-loop-item {
		animation-name: afs-medlem-fade-inn;
		animation-duration: auto;
		animation-fill-mode: both;
		animation-timing-function: ease-out;
		animation-timeline: view();
		animation-range: entry 0% cover 35%;
	}

	@supports (animation-delay: calc(sibling-index() * 1ms)) {
		.medlemmer-grid .e-loop-item {
			animation-delay: calc((sibling-index() - 1) * 80ms);
		}
	}
}

@keyframes afs-medlem-fade-inn {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

footer a {
	color: var(--afs-hvit) !important;
	text-decoration-color: var(--afs-hvit) !important;
}

footer a:hover {
	text-decoration: underline;
color: var(--afs-graa-100)  !important;
	text-decoration-color: var(--afs-graa-100)  !important;
}