/* Skjemaer (WPForms Lite) i samme stil som medlemskatalogen. Lastes bare på sider med skjema.
   Farger og mål settes via WPForms sine egne CSS-variabler; resten er små tillegg. */

.wpforms-container.wpforms-container-full {
	--wpforms-field-border-radius: 12px;
	--wpforms-field-border-size: 1px;
	--wpforms-field-border-color: #6b6b75;
	--wpforms-field-background-color: #ffffff;
	--wpforms-field-text-color: #222222;
	--wpforms-field-size-input-height: 52px;
	--wpforms-field-size-font-size: 17px;
	--wpforms-field-size-padding-h: 16px;
	--wpforms-field-size-checkbox-size: 20px;
	--wpforms-label-color: #222222;
	--wpforms-label-sublabel-color: #45454d;
	--wpforms-label-error-color: #b3261e;
	--wpforms-label-size-font-size: 16px;
	--wpforms-label-size-sublabel-font-size: 15px;
	--wpforms-button-background-color: #222222;
	--wpforms-button-background-color-alt: #222222;
	--wpforms-button-text-color: #ffffff;
	--wpforms-button-text-color-alt: #ffffff;
	--wpforms-button-border-color: #222222;
	--wpforms-button-border-radius: 999px;
	--wpforms-button-size-height: 52px;
	--wpforms-button-size-padding-h: 28px;
	--wpforms-button-size-font-size: 17px;
	--pk-ease: cubic-bezier(0.23, 1, 0.32, 1);
	margin-block: 1.5rem 2.5rem;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
	font-weight: 600;
}

/* WPForms orddeler med bindestrek (hyphens: auto); det blir stygt på norsk i smale kolonner. */
div.wpforms-container-full .wpforms-form .wpforms-field-description,
div.wpforms-container-full .wpforms-form label,
div.wpforms-container-full .wpforms-form li {
	hyphens: manual;
}

div.wpforms-container-full .wpforms-form .wpforms-field-description {
	font-size: .95rem;
	line-height: 1.5;
	color: #45454d;
	margin-top: .45rem;
}

div.wpforms-container-full .wpforms-form .wpforms-field-description a {
	color: #222;
	text-underline-offset: 3px;
}

div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form textarea {
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

div.wpforms-container-full .wpforms-form textarea {
	min-height: 160px;
	line-height: 1.5;
	padding-block: 12px;
}

/* Tydelig fokus (WCAG 2.4.7/2.4.13): samme mørke ring som i katalogen. */
div.wpforms-container-full .wpforms-form input:focus-visible,
div.wpforms-container-full .wpforms-form textarea:focus-visible {
	outline: 3px solid #222;
	outline-offset: 2px;
	box-shadow: none;
}

div.wpforms-container-full .wpforms-form button[type="submit"] {
	font-weight: 600;
	transition: transform 160ms var(--pk-ease), background-color 160ms ease;
}

div.wpforms-container-full .wpforms-form button[type="submit"]:hover {
	background-color: #000;
}

div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible {
	outline: 3px solid #222;
	outline-offset: 3px;
}

div.wpforms-container-full .wpforms-form button[type="submit"]:active {
	transform: scale(0.97);
}

div.wpforms-container-full .wpforms-form label.wpforms-error,
div.wpforms-container-full .wpforms-form em.wpforms-error {
	font-size: .95rem;
	font-weight: 600;
}

div.wpforms-container-full .wpforms-confirmation-container-full {
	padding: 1.25rem 1.5rem;
	background: #e3f1e7;
	border: 1px solid #1b5131;
	border-radius: 12px;
	color: #1b5131;
}

div.wpforms-container-full .wpforms-confirmation-container-full p:last-child {
	margin-bottom: 0;
}

/* ---------- Innmelding ---------- */

/* Boksen rundt skjemaet styres av WPForms sine containervariabler (de har høyere spesifisitet enn klasser). */
div.wpforms-container-full.pk-skjema {
	--wpforms-container-padding: clamp(1.25rem, 4vw, 2.5rem);
	--wpforms-background-color: #f2f3f5;
	--wpforms-container-border-style: solid;
	--wpforms-container-border-width: 1px;
	--wpforms-container-border-color: #c9c9d2;
	--wpforms-container-border-radius: 16px;
	max-width: 820px;
	margin-inline: 0;
}

div.wpforms-container-full.pk-skjema .wpforms-form .wpforms-field-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.25rem;
}

div.wpforms-container-full.pk-skjema .wpforms-form .wpforms-field {
	grid-column: 1 / -1;
	padding: 0 0 1.4rem;
}

div.wpforms-container-full.pk-skjema .wpforms-form .wpforms-field.pk-halv {
	grid-column: auto;
}

div.wpforms-container-full.pk-skjema .wpforms-form textarea.wpforms-field-large {
	height: 180px;
}

/* Medlemskap som klikkbare kort. Ekte radioknapper, hele kortet er etiketten. */
div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
}

div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li {
	position: relative;
	align-items: stretch;
	padding: 0;
	background: #fff;
	border: 1px solid #6b6b75;
	border-radius: 12px;
	transition: border-color 160ms ease, background-color 160ms ease, box-shadow 200ms var(--pk-ease), transform 200ms var(--pk-ease);
}

div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li input {
	position: absolute;
	left: 1rem;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
}

div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li input + label {
	display: flex;
	align-items: center;
	flex: 1;
	min-height: 60px;
	margin: 0;
	padding: .9rem 1rem .9rem 3rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li:has(input:checked) {
	border-color: #222;
	box-shadow: inset 0 0 0 1px #222;
}

div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li:has(input:focus-visible) {
	outline: 3px solid #222;
	outline-offset: 2px;
}

div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li:active {
	transform: scale(0.98);
}

/* Hover (bare med mus): kortet løftes litt, får lys flate og mørk kant – tydelig at det kan velges. */
@media (hover: hover) and (pointer: fine) {
	div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li:hover {
		border-color: #222;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px rgba(0, 0, 0, .10);
		transform: translateY(-2px);
	}

	div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li:not(:has(input:checked)):hover {
		background: #fafafb;
	}

	div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li:has(input:checked):hover {
		box-shadow: inset 0 0 0 1px #222, 0 6px 16px rgba(0, 0, 0, .10);
	}

	div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li:hover input {
		--wpforms-field-border-color: #222222;
	}

	div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li:active {
		transform: scale(0.98);
	}
}

div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-checkbox.pk-samtykke ul li input + label {
	font-weight: 600;
}

div.wpforms-container-full.pk-skjema .wpforms-form .wpforms-recaptcha-container {
	padding: 0 0 1.25rem;
}

@media (max-width: 640px) {
	div.wpforms-container-full.pk-skjema .wpforms-form .wpforms-field-container,
	div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul {
		grid-template-columns: minmax(0, 1fr);
	}

	div.wpforms-container-full.pk-skjema .wpforms-form button[type="submit"] {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	div.wpforms-container-full .wpforms-form button[type="submit"]:active,
	div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li:active,
	div.wpforms-container-full.pk-skjema .wpforms-field.wpforms-field-radio.pk-valg ul li:hover {
		transform: none;
	}
}