/* CSS Document */

/* =========================================================
   REGELVERK
========================================================= */

.regelverk-section {
	position: relative;

	padding: 80px 0 105px;
}

.regelverk-container {
	max-width: 1320px;
}


/* =========================================================
   OVERSKRIFT
========================================================= */

.regelverk-heading {
	max-width: 780px;

	margin: 0 auto 55px;

	text-align: center;
}

.regelverk-heading-label {
	display: block;

	margin-bottom: 8px;

	color: #FF2D75;

	font-size: 10px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .13em;
}

.regelverk-heading h2 {
	margin: 0;

	color: #FFFFFF;

	font-family: "Outfit", sans-serif;
	font-size: clamp(42px, 5vw, 64px);
	font-weight: 850;
	line-height: 1.04;
	letter-spacing: -.04em;
}

.regelverk-heading .pinkline {
	margin-right: auto;
	margin-left: auto;
}

.regelverk-heading p {
	max-width: 650px;

	margin: 23px auto 0;

	color: rgba(255,255,255,.56);

	font-size: 15px;
	line-height: 1.65;
}


/* =========================================================
   ACCORDION
========================================================= */

.regelverk-accordion {
	display: grid;

	gap: 13px;
}


/* =========================================================
   ITEM
========================================================= */

.regelverk-item {
	--regelverk-color: #FF2D75;

	position: relative;

	overflow: hidden;

	border:
		1px solid rgba(255,255,255,.09);

	border-radius: 20px;

	background:
		linear-gradient(
			135deg,
			color-mix(
				in srgb,
				var(--regelverk-color) 5%,
				transparent
			),
			rgba(255,255,255,.025)
		),
		rgba(255,255,255,.025);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.035),
		0 16px 45px rgba(0,0,0,.13);

	transition:
		border-color .25s ease,
		background .25s ease,
		box-shadow .25s ease,
		transform .25s ease;
}

.regelverk-item:hover {
	transform: translateY(-2px);

	border-color:
		color-mix(
			in srgb,
			var(--regelverk-color) 32%,
			transparent
		);

	box-shadow:
		0 22px 55px rgba(0,0,0,.18);
}


/* =========================================================
   FARGER
========================================================= */

.regelverk-item-pink {
	--regelverk-color: #FF2D75;
}

.regelverk-item-cyan {
	--regelverk-color: #00E5FF;
}

.regelverk-item-yellow {
	--regelverk-color: #FFD200;
}

.regelverk-item-purple {
	--regelverk-color: #7A3AFF;
}


/* =========================================================
   HEADER
========================================================= */

.regelverk-header {
	margin: 0;
}

.regelverk-toggle {
	position: relative;

	display: grid;
	grid-template-columns:
		auto minmax(0,1fr) auto;

	align-items: center;

	gap: 17px;

	width: 100%;

	padding: 19px 20px;

	border: 0;

	background: transparent;

	text-align: left;

	cursor: pointer;
}


/* =========================================================
   IKON
========================================================= */

.regelverk-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	border:
		1px solid
		color-mix(
			in srgb,
			var(--regelverk-color) 28%,
			transparent
		);

	border-radius: 14px;

	background:
		color-mix(
			in srgb,
			var(--regelverk-color) 11%,
			transparent
		);

	color: var(--regelverk-color);

	font-size: 17px;

	transition:
		transform .25s ease,
		background .25s ease;
}

.regelverk-toggle:not(.collapsed)
.regelverk-icon {
	transform: scale(1.05);

	background:
		color-mix(
			in srgb,
			var(--regelverk-color) 17%,
			transparent
		);
}


/* =========================================================
   TITLER
========================================================= */

.regelverk-title {
	min-width: 0;
}

.regelverk-title small {
	display: block;

	margin-bottom: 3px;

	color: var(--regelverk-color);

	font-size: 9px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .10em;
}

.regelverk-title strong {
	display: block;

	color: #FFFFFF;

	font-family: "Outfit", sans-serif;
	font-size: 20px;
	font-weight: 760;
	line-height: 1.2;
	letter-spacing: -.018em;
}


/* =========================================================
   PIL
========================================================= */

.regelverk-arrow {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border: 1px solid rgba(255,255,255,.09);
	border-radius: 50%;

	background: rgba(255,255,255,.035);

	color: rgba(255,255,255,.63);

	font-size: 11px;
}

.regelverk-arrow i {
	transition: transform .27s ease;
}

.regelverk-toggle:not(.collapsed)
.regelverk-arrow {
	border-color:
		color-mix(
			in srgb,
			var(--regelverk-color) 30%,
			transparent
		);

	color: var(--regelverk-color);
}

.regelverk-toggle:not(.collapsed)
.regelverk-arrow i {
	transform: rotate(180deg);
}


/* =========================================================
   BODY
========================================================= */

.regelverk-body {
	padding:
		4px 24px 25px
		85px;

	border-top:
		1px solid rgba(255,255,255,.065);

	color: rgba(255,255,255,.60);

	font-size: 14px;
	line-height: 1.65;
}

.regelverk-lead {
	margin-top: 19px;

	color: rgba(255,255,255,.82);

	font-size: 15px;
	font-weight: 520;
}


/* =========================================================
   LISTER
========================================================= */

.regelverk-list {
	display: grid;

	gap: 9px;

	margin: 20px 0 0;
	padding: 0;

	list-style: none;
}

.regelverk-list li {
	position: relative;

	padding:
		12px 15px
		12px 42px;

	border:
		1px solid rgba(255,255,255,.065);

	border-radius: 12px;

	background:
		rgba(255,255,255,.023);
}

.regelverk-list li::before {
	content: "✓";

	position: absolute;

	top: 12px;
	left: 15px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	border-radius: 50%;

	background:
		color-mix(
			in srgb,
			var(--regelverk-color) 13%,
			transparent
		);

	color:
		var(--regelverk-color);

	font-size: 9px;
	font-weight: 900;
}


/* =========================================================
   SPILLETID
========================================================= */

.regelverk-time-list {
	display: grid;

	gap: 7px;

	margin-top: 19px;
}

.regelverk-time-row {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	padding: 11px 14px;

	border:
		1px solid rgba(255,255,255,.065);

	border-radius: 11px;

	background:
		rgba(255,255,255,.023);
}

.regelverk-time-row span {
	color: rgba(255,255,255,.67);

	font-size: 13px;
}

.regelverk-time-row strong {
	color: #FFFFFF;

	font-size: 13px;
	font-weight: 700;

	white-space: nowrap;
}


/* =========================================================
   KLASSEOVERSKRIFT
========================================================= */

.regelverk-group-heading {
	margin:
		55px 0
		19px;

	padding-left: 3px;
}

.regelverk-group-heading > span {
	display: block;

	margin-bottom: 5px;

	color: #A57AFF;

	font-size: 9px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: .11em;
}

.regelverk-group-heading h3 {
	margin: 0 0 6px;

	color: #FFFFFF;

	font-size: 29px;
	font-weight: 800;
	letter-spacing: -.025em;
}

.regelverk-group-heading p {
	margin: 0;

	color: rgba(255,255,255,.47);

	font-size: 13px;
}


/* =========================================================
   KLASSETEKST
========================================================= */

.regelverk-class-text {
	margin-top: 19px;

	color: rgba(255,255,255,.63);

	font-size: 14px;
	line-height: 1.68;
}

.regelverk-empty {
	margin: 19px 0 0;

	color: rgba(255,255,255,.40);
}


/* =========================================================
   KNAPPER
========================================================= */

.regelverk-actions {
	display: flex;
	flex-wrap: wrap;

	gap: 10px;

	margin-top: 23px;
}


/* =========================================================
   TABLET / MOBIL
========================================================= */

@media (max-width: 767px) {

	.regelverk-section {
		padding:
			58px 0 78px;
	}

	.regelverk-heading {
		margin-bottom: 38px;

		text-align: left;
	}

	.regelverk-heading .pinkline {
		margin-right: 0;
		margin-left: 0;
	}

	.regelverk-heading p {
		margin-left: 0;
	}

	.regelverk-toggle {
		gap: 13px;

		padding:
			16px 15px;
	}

	.regelverk-icon {
		width: 43px;
		height: 43px;

		border-radius: 12px;
	}

	.regelverk-title strong {
		font-size: 17px;
	}

	.regelverk-arrow {
		width: 34px;
		height: 34px;
	}

	.regelverk-body {
		padding:
			3px 16px 21px;
	}

	.regelverk-lead {
		margin-top: 17px;
	}

	.regelverk-time-row {
		align-items: flex-start;
		flex-direction: column;

		gap: 2px;
	}

	.regelverk-actions .btn {
		width: 100%;
	}

}