/**
 * Indholdssider
 *
 * Kontakt, FAQ, handelsbetingelser, om og returret. Se inc-sider.php.
 *
 * Udskilt fra style.css 14. september 2026. Grunden staar i
 * claude/arbejdsdeling.md: to Claude-chats arbejder i den samme mappe, og
 * produktsidens CSS naaede at blive slettet to gange af en samtidig
 * hel-fil-skrivning af style.css. Et omraade i sin egen fil kan ikke rammes
 * af den slags.
 *
 * Filen haenger paa tp-style som afhaengighed og indlaeses KUN paa de sider
 * der bruger den. Tokens, knapper, header og footer bliver i style.css --
 * det er dem der holder siderne ens.
 *
 * @package temporaryplanet
 */

/* ==========================================================================
   Indholdssider
   Kontakt, FAQ, handelsbetingelser, om. Se inc-sider.php.
   ========================================================================== */

.tp-side { padding-block: var(--r5) var(--r6); }

.tp-side-top { margin-bottom: var(--r4); }
.tp-side-titel {
	margin: 0;
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(30px, 4.6vw, 46px); line-height: 1.02;
	text-transform: uppercase; letter-spacing: var(--sp-anton);
	color: var(--ink);
}

/* ETT maal for hele siden, og det staar centreret.
   Laesebredden er det vigtigste her: handelsbetingelserne er 7.000 tegn, og
   i fuld container-bredde bliver linjerne 140 tegn lange og umulige at
   foelge. 68ch er omkring 80 tegn med Barlow -- 653 px maalt.
   Overskrift, brødtekst, kontaktkort og FAQ deler maalet, saa de flugter
   i stedet for at starte tre forskellige steder. */
.tp-side-artikel { --maal: 68ch; }
.tp-side-top,
.tp-side-indhold,
.tp-kontakt,
.tp-faq { max-width: var(--maal); margin-inline: auto; }
.tp-side-indhold > *:first-child { margin-top: 0; }
.tp-side-indhold p,
.tp-side-indhold ul,
.tp-side-indhold ol { color: var(--daempet); }
.tp-side-indhold p { margin: 0 0 var(--r3); }

.tp-side-indhold h2,
.tp-side-indhold h3 {
	margin: var(--r5) 0 var(--r2);
	font-family: var(--font-display); font-weight: 400;
	text-transform: uppercase; letter-spacing: var(--sp-anton);
	color: var(--ink);
}
.tp-side-indhold h2 { font-size: clamp(21px, 2.4vw, 27px); }
.tp-side-indhold h3 { font-size: var(--t-2xl); font-family: var(--font); font-weight: 700; text-transform: none; }
.tp-side-indhold h4 {
	margin: var(--r4) 0 var(--r2);
	font-size: var(--t-l); font-weight: 700; color: var(--ink);
}

.tp-side-indhold ul,
.tp-side-indhold ol { margin: 0 0 var(--r3); padding-left: 1.3em; }
.tp-side-indhold li { margin-bottom: .35rem; }
.tp-side-indhold li::marker { color: var(--messing-dyb); }

.tp-side-indhold a { color: var(--messing); text-decoration: underline; text-underline-offset: 2px; }
.tp-side-indhold a:hover { color: var(--messing-lys); }

.tp-side-indhold strong { color: var(--ink); }
.tp-side-indhold hr { border: 0; border-top: 1px solid var(--kant); margin: var(--r5) 0; }

.tp-side-indhold img {
	display: block; max-width: 100%; height: auto;
	border-radius: var(--radius); margin-block: var(--r3);
}
/* Flere sider har logoet indsat midt i teksten som et 300 px PNG. Det er ikke
   indhold, det er pynt fra Avada-tiden -- men det slettes ikke fra databasen,
   kun holdt i en fornuftig stoerrelse. */
.tp-side-indhold img[src*="logo"] { width: 160px; opacity: .7; }

.tp-side-indhold table {
	width: 100%; border-collapse: collapse; margin: 0 0 var(--r4);
	font-size: var(--t-m);
}
.tp-side-indhold th,
.tp-side-indhold td {
	padding: .55rem .7rem; text-align: left;
	border-bottom: 1px solid var(--kant); color: var(--daempet);
}
.tp-side-indhold th { color: var(--ink); font-weight: 700; }

/* --- Kontaktsiden ------------------------------------------------------- */

/* auto-fit og ikke repeat(3): kortene staar nu i laesespalten paa 653 px,
   ikke i hele containeren, saa tre faste spalter ville give 206 px hver og
   knække overskrifterne. Under 180 px pr. kort falder de selv i én spalte. */
.tp-kontakt {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--r3); margin-bottom: var(--r5);
}
@media (max-width: 819px) { .tp-kontakt { grid-template-columns: 1fr; } }

.tp-kontakt-kort {
	padding: var(--r3);
	background: var(--flade); border: 1px solid var(--kant);
	border-radius: var(--radius);
	display: flex; flex-direction: column; align-items: flex-start; gap: var(--r2);
}
.tp-kontakt-kort h2 {
	margin: 0;
	font-size: var(--t-xs); font-weight: 700;
	letter-spacing: var(--sp-mikro); text-transform: uppercase; color: var(--messing);
}
.tp-kontakt-kort p { margin: 0; color: var(--daempet); }
.tp-kontakt-kort .tp-knap { margin-top: auto; }
/* To klasser og ikke én: .tp-kontakt-kort p er (0,2,0), saa en bar klasse
   taber uanset raekkefoelge. Samme fejl har kostet tid nok i dette tema. */
/* Adressen staar i 14 px som kortenes oevrige noter. 17 px gav 200 px
   tekst i et kort med 174 px indvendigt, og word-break knækkede den midt i
   ordet: "kontakt@temporarypla / net.dk". En adresse skal kunne laeses. */
.tp-kontakt-kort .tp-kontakt-mail {
	font-size: var(--t-s); color: var(--ink);
	white-space: nowrap; overflow-wrap: normal;
}
a.tp-kontakt-knap { width: 100%; justify-content: center; text-align: center; }
.tp-kontakt-cvr { font-variant-numeric: tabular-nums; }
.tp-kontakt-note { font-size: var(--t-s); color: var(--svag); }
.tp-kontakt-sociale { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--r3); }
.tp-kontakt-sociale a { color: var(--messing); }
.tp-kontakt-sociale a:hover { color: var(--messing-lys); }

/* --- FAQ ----------------------------------------------------------------
   <details> og ikke JavaScript: browseren kan folde selv, det virker uden
   scripts, og soegemaskiner laeser indholdet uanset om det staar aabent.
   ------------------------------------------------------------------------ */

.tp-faq { border-top: 1px solid var(--kant); }
.tp-faq-punkt { border-bottom: 1px solid var(--kant); }
.tp-faq-punkt summary {
	list-style: none; cursor: pointer;
	padding: var(--r3) 2.2rem var(--r3) 0;
	position: relative;
	font-size: var(--t-l); font-weight: 700; color: var(--ink);
}
.tp-faq-punkt summary::-webkit-details-marker { display: none; }
.tp-faq-punkt summary::after {
	content: ""; position: absolute; right: .5rem; top: 50%;
	width: .45em; height: .45em; font-size: var(--t-l);
	border-right: 2px solid var(--messing); border-bottom: 2px solid var(--messing);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .15s ease;
}
.tp-faq-punkt[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.tp-faq-punkt summary:hover { color: var(--messing); }
.tp-faq-svar { padding: 0 0 var(--r3); }
.tp-faq-svar > *:last-child { margin-bottom: 0; }
.tp-faq-svar p, .tp-faq-svar li { color: var(--daempet); }
.tp-faq-svar ul { margin: 0 0 var(--r3); padding-left: 1.3em; }
.tp-faq-svar li::marker { color: var(--messing-dyb); }
.tp-faq-svar a { color: var(--messing); text-decoration: underline; text-underline-offset: 2px; }
.tp-faq-fod { margin-top: var(--r4); font-size: var(--t-s); color: var(--svag); }
.tp-faq-fod a { color: var(--messing); }

/* --------------------------------------------------------------------------
   Tabeller i politikkerne
   Cookiepolitikken har to skemaer med navn, formaal, levetid og afsender.
   En cookieliste SKAL kunne laeses -- det er den del af politikken folk
   faktisk slaar op i -- og en tabel paa 320 px skal derfor kunne rulles
   vandret i stedet for at klemme "woocommerce_items_in_cart" ned i en
   soejle paa fyrre pixels.
   -------------------------------------------------------------------------- */

.tp-side-indhold .tp-tabel {
	width: 100%; border-collapse: collapse;
	margin: var(--r3) 0 var(--r4);
	font-size: var(--t-s);
}
.tp-side-indhold .tp-tabel th,
.tp-side-indhold .tp-tabel td {
	text-align: left; vertical-align: top;
	padding: var(--r2) var(--r3) var(--r2) 0;
	border-bottom: 1px solid var(--kant);
}
.tp-side-indhold .tp-tabel th {
	font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--sp-meta);
	color: var(--messing); font-weight: 700;
	border-bottom-color: var(--kant-staerk);
	/* "Sat af" braekkede til to linjer, fordi soejlen blev klemt af de lange
	   cookienavne. Overskrifterne braekker ikke; Formaal-soejlen tager slacken. */
	white-space: nowrap;
}
.tp-side-indhold .tp-tabel td { color: var(--daempet); }
/* Et cookienavn er et navn: "woocommerce_ca / rt_hash" over to linjer er
   ikke til at slaa op. break-all braekkede midt i ordet, saa navnet staar
   samlet -- og paa smal skaerm ruller tabellen i stedet (se nedenfor). */
.tp-side-indhold .tp-tabel code {
	font-size: .92em; color: var(--ink); white-space: nowrap;
}
.tp-side-indhold .tp-tabel tr > :last-child { padding-right: 0; }

@media (max-width: 559px) {
	/* Vandret rulning frem for sammenklemte soejler. Beholderen er tabellen
	   selv gjort til en blok -- en wrapper ville kraeve markup i teksten. */
	.tp-side-indhold .tp-tabel { display: block; overflow-x: auto; white-space: nowrap; }
	.tp-side-indhold .tp-tabel td { white-space: normal; min-width: 11rem; }
}

/* --------------------------------------------------------------------------
   Standardfortrydelsesformularen og opdateringsdatoen
   Formularen er lovens egen ordlyd og skal kunne skilles fra husets tekst,
   ellers laeser den som endnu et afsnit betingelser. En ramme og en lidt
   mindre skrift er nok; den skal ikke ligne en formular man kan skrive i,
   for det kan man ikke -- den skal kopieres eller printes.
   -------------------------------------------------------------------------- */

.tp-side-indhold .tp-formular {
	border: 1px solid var(--kant);
	border-radius: var(--radius);
	padding: var(--r4);
	margin: var(--r3) 0 var(--r4);
	background: var(--flade);
	font-size: var(--t-s);
}
.tp-side-indhold .tp-formular p { margin: 0 0 var(--r3); }
.tp-side-indhold .tp-formular p:last-child { margin-bottom: 0; }
/* En tom linje at skrive paa. Uden min-height ville afsnittet kollapse. */
.tp-side-indhold .tp-formular-linje {
	min-height: 3.5rem;
	border-bottom: 1px solid var(--kant-staerk);
}

.tp-side-indhold .tp-side-opdateret {
	margin-top: var(--r5);
	padding-top: var(--r3);
	border-top: 1px solid var(--kant);
	font-size: var(--t-s);
	color: var(--svag);
}