/* TeoriTolk – forespørselsskjema.
   Bygger på designsystemet i temaet: hvit kortflate, blå tekst, gul knapp.
   html body-prefikset trengs fordi temaets egen stil lastes etter denne. */

html body .ttf-wrap{
	--ttf-kant:var(--tt-border,#DCE4EB);
	--ttf-radius:var(--tt-radius,14px);
	--ttf-ink:var(--wp--preset--color--ink,#13283f);
	--ttf-dempet:var(--wp--preset--color--ink-soft,#566270);
	--ttf-flate:var(--wp--preset--color--surface-alt,#EEF3F6);
	--ttf-feil:#A3121B;
	max-width:46rem;
	margin-left:0;
	color:var(--ttf-ink);
}

html body .ttf-skjema{
	background:#fff;
	border:1px solid var(--ttf-kant);
	border-radius:var(--ttf-radius);
	padding:clamp(1.25rem,3vw,2.25rem);
}

html body .ttf-wrap [hidden]{ display:none !important; }

html body .ttf-ingress{ font-size:1.05rem; line-height:1.55; margin:0 0 .6rem; }
html body .ttf-paakrevd-merknad{ font-size:.95rem; color:var(--ttf-dempet); margin:0 0 1.6rem; }

/* --- Seksjoner --- */
html body .ttf-seksjon{
	border:0;
	border-top:1px solid var(--ttf-kant);
	margin:0 0 1.8rem;
	padding:1.6rem 0 0;
	min-width:0;
}
html body .ttf-seksjon:first-of-type{ border-top:0; padding-top:0; }
html body .ttf-seksjon__tittel{
	font-weight:700;
	font-size:clamp(1.1rem,.9rem + .5vw,1.3rem);
	line-height:1.3;
	padding:0;
	margin:0 0 .35rem;
}
html body .ttf-seksjon__intro{
	margin:0 0 1.1rem;
	color:var(--ttf-dempet);
	font-size:.97rem;
	line-height:1.5;
	max-width:60ch;
}

html body .ttf-felter{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:1.1rem 1.25rem;
}
html body .ttf-felt{ grid-column:1 / -1; min-width:0; }
html body .ttf-felt--text,
html body .ttf-felt--email,
html body .ttf-felt--tel,
html body .ttf-felt--date,
html body .ttf-felt--time,
html body .ttf-felt--select{ grid-column:span 1; }
html body .ttf-felt--smal{ grid-column:span 1; max-width:12rem; }

@media (max-width:640px){
	html body .ttf-felter{ grid-template-columns:1fr; }
	html body .ttf-felt,
	html body .ttf-felt--smal{ grid-column:1 / -1; max-width:none; }
}

/* --- Etiketter, hjelp og feil --- */
html body .ttf-label{
	display:block;
	font-weight:600;
	line-height:1.35;
	margin:0 0 .3rem;
	padding:0;
}
html body .ttf-stjerne{ color:var(--ttf-feil); }
html body .ttf-hjelp{
	margin:0 0 .4rem;
	font-size:.9rem;
	line-height:1.45;
	color:var(--ttf-dempet);
}
html body .ttf-feil{
	margin:0 0 .4rem;
	font-size:.92rem;
	font-weight:600;
	color:var(--ttf-feil);
}

/* --- Kontroller --- */
html body .ttf-skjema input[type=text],
html body .ttf-skjema input[type=email],
html body .ttf-skjema input[type=tel],
html body .ttf-skjema input[type=date],
html body .ttf-skjema input[type=time],
html body .ttf-skjema input[type=file],
html body .ttf-skjema select,
html body .ttf-skjema textarea{
	width:100%;
	max-width:100%;
	font:inherit;
	font-size:1rem;
	line-height:1.4;
	padding:.72rem .85rem;
	border:1px solid var(--ttf-kant);
	border-radius:10px;
	background:#fff;
	color:var(--ttf-ink);
	box-sizing:border-box;
}
html body .ttf-skjema textarea{ min-height:7.5rem; resize:vertical; }
html body .ttf-skjema input:focus-visible,
html body .ttf-skjema select:focus-visible,
html body .ttf-skjema textarea:focus-visible,
html body .ttf-skjema button:focus-visible,
html body .ttf-wrap a:focus-visible{
	outline:3px solid var(--ttf-ink);
	outline-offset:2px;
}
html body .ttf-felt--feil input,
html body .ttf-felt--feil select,
html body .ttf-felt--feil textarea{ border-color:var(--ttf-feil); }

/* --- Radiogrupper og avkryssing --- */
html body .ttf-gruppe{ border:0; padding:0; margin:0; min-width:0; }
html body .ttf-gruppe > .ttf-label{ padding:0; }
html body .ttf-valg{ display:grid; gap:.1rem; margin-top:.2rem; }
html body .ttf-valg__rad,
html body .ttf-avkryss{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:.65rem;
	align-items:start;
	padding:.5rem .6rem;
	border-radius:9px;
	line-height:1.45;
	cursor:pointer;
}
html body .ttf-valg__rad:hover,
html body .ttf-avkryss:hover{ background:var(--ttf-flate); }
html body .ttf-valg__rad input,
html body .ttf-avkryss input{
	width:1.15rem;
	height:1.15rem;
	margin:.18rem 0 0;
	flex:none;
	accent-color:var(--ttf-ink);
}
html body .ttf-avkryss{ align-items:start; }
html body .ttf-personvern{ display:inline-block; margin-top:.2rem; }

/* --- Feilboks og kvittering --- */
html body .ttf-feilboks{
	border:1px solid var(--ttf-feil);
	border-left-width:6px;
	border-radius:var(--ttf-radius);
	background:#FDF4F4;
	padding:1.1rem 1.25rem;
	margin:0 0 1.4rem;
}
html body .ttf-feilboks__tittel{ margin:0 0 .3rem; font-size:1.1rem; }
html body .ttf-feilboks ul{ margin:.5rem 0 0 1.1rem; }
html body .ttf-feilboks li{ margin-bottom:.25rem; }
html body .ttf-feilboks a{ color:var(--ttf-feil); }

html body .ttf-kvittering{
	background:#fff;
	border:1px solid var(--ttf-kant);
	border-left:6px solid var(--ttf-ink);
	border-radius:var(--ttf-radius);
	padding:clamp(1.25rem,3vw,2rem);
	max-width:46rem;
}
html body .ttf-kvittering__tittel{ margin:0 0 .5rem; }
html body .ttf-kvittering__ref{
	background:var(--ttf-flate);
	border-radius:10px;
	padding:.7rem .9rem;
	display:inline-block;
	margin:.4rem 0 1rem;
}
html body .ttf-kvittering__ref strong{ font-size:1.1rem; letter-spacing:.02em; }

/* --- Knapp --- */
html body .ttf-send{ margin:1.8rem 0 0; }
html body .ttf-knapp{
	font:inherit;
	font-weight:700;
	font-size:1.02rem;
	background:var(--wp--preset--color--accent,#f4d74a);
	color:var(--ttf-ink);
	border:1px solid rgba(19,40,63,.14);
	border-radius:999px;
	padding:.85rem 1.8rem;
	cursor:pointer;
}
html body .ttf-knapp:hover{ background:var(--wp--preset--color--accent-soft,#f7e9a8); }

/* --- Honningkrukke --- */
html body .ttf-hp{
	position:absolute !important;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}