/*
 * loovl-ukk – FAQ page /ukk/ and /en/faq/ (loovl-ukk-restyling.php). Colors – the theme variables --rp-*,
 * so dark and light themes come by themselves. uusi.css of the theme is printed later in <head> and sets
 * h1–h3 sizes with !important; the tema.js script also writes line-height inline – hence body.rp-uusi
 * and !important on the headings here.
 */

.loovl-ukk {
	max-width: 880px;
	margin: 0 auto;
	padding: 40px 0 70px;
	color: var(--rp-teksti, #cfcfd4);
}

.loovl-ukk *,
.loovl-ukk *::before,
.loovl-ukk *::after {
	box-sizing: border-box;
}

.loovl-ukk [hidden] {
	display: none !important;
}

.loovl-ukk__alku {
	margin-bottom: 28px;
}

body.rp-uusi .loovl-ukk h1.loovl-ukk__otsikko {
	margin: 0 0 12px;
	color: var(--rp-otsikko, #fff) !important;
	font-size: clamp(32px, 2.4vw + 14px, 54px) !important;
	font-weight: 800 !important;
	line-height: 1.06 !important;
	letter-spacing: -.025em !important;
	overflow-wrap: break-word;
	hyphens: auto;
}

.post-content .loovl-ukk p.loovl-ukk__johdanto {
	max-width: 640px;
	margin: 0;
	color: var(--rp-heikko, #8f8f98);
	font-size: 17px;
	line-height: 1.55;
}

/* --- tabs ------------------------------------------------------------------------------- */

.loovl-ukk__valilehdet {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
}

.loovl-ukk button.loovl-ukk__valilehti {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 9px 18px;
	border: 1px solid var(--rp-raja-2, #36363d);
	border-radius: 999px;
	background: var(--rp-pinta, #151518);
	box-shadow: none;
	color: var(--rp-teksti, #cfcfd4);
	font-family: var(--rp-fontti, Montserrat, Arial, sans-serif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.loovl-ukk button.loovl-ukk__valilehti:hover {
	border-color: var(--rp-aksentti, #f6c454);
	color: var(--rp-otsikko, #fff);
}

.loovl-ukk button.loovl-ukk__valilehti[aria-selected="true"] {
	border-color: var(--rp-aksentti, #f6c454);
	background: var(--rp-aksentti, #f6c454);
	color: var(--rp-aksentti-teksti, #151309);
}

.loovl-ukk button.loovl-ukk__valilehti:focus-visible {
	outline: 2px solid var(--rp-korostus, #f6c454);
	outline-offset: 3px;
}

/* --- sections and questions --------------------------------------------------------------- */

.loovl-ukk__osio {
	margin: 0 0 36px;
	scroll-margin-top: 120px; /* sticky header */
}

body.rp-uusi .loovl-ukk h2.loovl-ukk__osio-otsikko {
	margin: 0 0 14px;
	color: var(--rp-otsikko, #fff) !important;
	font-size: clamp(21px, .9vw + 15px, 27px) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

.loovl-ukk__lista {
	overflow: hidden;
	border: 1px solid var(--rp-raja, #26262b);
	border-radius: var(--rp-sade, 12px);
	background: var(--rp-pinta, #151518);
}

.loovl-ukk__kysymys {
	margin: 0;
	scroll-margin-top: 120px;
}

.loovl-ukk__kysymys + .loovl-ukk__kysymys {
	border-top: 1px solid var(--rp-raja, #26262b);
}

.loovl-ukk summary.loovl-ukk__kohta {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	list-style: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

.loovl-ukk summary.loovl-ukk__kohta::-webkit-details-marker {
	display: none;
}

.loovl-ukk summary.loovl-ukk__kohta::marker {
	content: '';
}

.loovl-ukk summary.loovl-ukk__kohta:hover {
	background: var(--rp-pinta-2, #1c1c20);
}

.loovl-ukk summary.loovl-ukk__kohta:focus-visible {
	outline: 2px solid var(--rp-korostus, #f6c454);
	outline-offset: -2px;
}

body.rp-uusi .loovl-ukk h3.loovl-ukk__k {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--rp-otsikko, #fff) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	overflow-wrap: break-word;
}

/* Plus that turns into a minus. */
.loovl-ukk__merkki {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.loovl-ukk__merkki::before,
.loovl-ukk__merkki::after {
	content: '';
	position: absolute;
	top: 8px;
	left: 1px;
	right: 1px;
	height: 2px;
	border-radius: 1px;
	background: var(--rp-korostus, #f6c454);
	transition: transform .2s ease;
}

.loovl-ukk__merkki::after {
	transform: rotate(90deg);
}

.loovl-ukk__kysymys[open] .loovl-ukk__merkki::after {
	transform: rotate(0);
}

.loovl-ukk__vastaus {
	padding: 0 22px 20px;
	font-size: 16px;
	line-height: 1.65;
}

.post-content .loovl-ukk__vastaus p,
.post-content .loovl-ukk__vastaus ol {
	margin: 0 0 12px;
}

.post-content .loovl-ukk__vastaus > :last-child {
	margin-bottom: 0;
}

.loovl-ukk__vastaus strong {
	color: var(--rp-otsikko, #fff);
}

body .loovl-ukk__vastaus a {
	color: var(--rp-korostus, #f6c454);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.post-content .loovl-ukk ol.loovl-ukk__vaiheet {
	padding-left: 22px;
}

.loovl-ukk__vaiheet li {
	margin: 0 0 8px;
	padding-left: 4px;
}

.loovl-ukk__vaiheet li strong {
	display: block;
}

/* --- warranty table (29.10.2026, the client's service table in «Onko elinikäinen takuu…») -----
   dop-stili.css has «table td {width:50%}» and on a phone «table {font-size:12px}», «tbody td {padding … !important}» –
   hence the longer selectors and !important on the phone padding. */

.post-content .loovl-ukk table.loovl-ukk__takuut {
	width: 100%;
	margin: 4px 0 14px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.45;
}

.loovl-ukk table.loovl-ukk__takuut th,
.loovl-ukk table.loovl-ukk__takuut td {
	width: auto;
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--rp-raja, #26262b);
	background: transparent;
	color: var(--rp-teksti, #cfcfd4);
	text-align: left;
	vertical-align: top;
}

.loovl-ukk table.loovl-ukk__takuut th:first-child,
.loovl-ukk table.loovl-ukk__takuut td:first-child {
	padding-left: 0;
}

.loovl-ukk table.loovl-ukk__takuut thead th {
	color: var(--rp-heikko, #8f8f98);
	font-size: 13px;
	font-weight: 600;
	white-space: normal;
}

.loovl-ukk table.loovl-ukk__takuut tbody th {
	color: var(--rp-otsikko, #fff);
	font-weight: 600;
}

.loovl-ukk table.loovl-ukk__takuut tbody tr:last-child > * {
	border-bottom: 0;
}

/* --- button --------------------------------------------------------------------------- */

.loovl-ukk__loppu {
	margin-top: 34px;
	text-align: center;
}

body a.loovl-ukk__nappi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 13px 28px;
	border-radius: 8px;
	background: var(--rp-aksentti, #f6c454);
	box-shadow: 0 14px 30px -16px rgba(246, 196, 84, .8);
	color: var(--rp-aksentti-teksti, #151309) !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	transition: background-color .15s ease;
}

body a.loovl-ukk__nappi:hover,
body a.loovl-ukk__nappi:focus {
	background: var(--rp-aksentti-2, #ffd46f);
	color: var(--rp-aksentti-teksti, #151309) !important;
}

body a.loovl-ukk__nappi:focus-visible {
	outline: 2px solid var(--rp-otsikko, #fff);
	outline-offset: 3px;
}

.loovl-ukk__nappi svg {
	flex: 0 0 auto;
}

/* --- phone ---------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.loovl-ukk {
		padding: 26px 0 50px;
	}

	.loovl-ukk__valilehdet {
		gap: 6px;
		margin-bottom: 20px;
	}

	.loovl-ukk button.loovl-ukk__valilehti {
		padding: 8px 14px;
		font-size: 14px;
	}

	.loovl-ukk summary.loovl-ukk__kohta {
		gap: 14px;
		padding: 16px;
	}

	body.rp-uusi .loovl-ukk h3.loovl-ukk__k {
		font-size: 16px !important;
	}

	.loovl-ukk__vastaus {
		padding: 0 16px 18px;
		font-size: 15px;
	}

	/* warranty table: one card per service, the column name in front of each value */
	.post-content .loovl-ukk table.loovl-ukk__takuut,
	.loovl-ukk table.loovl-ukk__takuut tbody,
	.loovl-ukk table.loovl-ukk__takuut tr,
	.loovl-ukk table.loovl-ukk__takuut th,
	.loovl-ukk table.loovl-ukk__takuut td {
		display: block;
		width: 100%;
	}

	.post-content .loovl-ukk table.loovl-ukk__takuut {
		font-size: 14px;
	}

	.loovl-ukk table.loovl-ukk__takuut thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.loovl-ukk table.loovl-ukk__takuut tr {
		padding: 10px 0;
		border-bottom: 1px solid var(--rp-raja, #26262b);
	}

	.loovl-ukk table.loovl-ukk__takuut tbody tr:last-child {
		border-bottom: 0;
	}

	.loovl-ukk table.loovl-ukk__takuut tbody th,
	.loovl-ukk table.loovl-ukk__takuut tbody td {
		padding: 2px 0 !important;
		border: 0;
	}

	.loovl-ukk table.loovl-ukk__takuut tbody th {
		padding-bottom: 4px !important;
	}

	.loovl-ukk table.loovl-ukk__takuut tbody td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		text-align: right;
	}

	.loovl-ukk table.loovl-ukk__takuut tbody td::before {
		content: attr(data-otsikko);
		color: var(--rp-heikko, #8f8f98);
		text-align: left;
	}

	body a.loovl-ukk__nappi {
		display: flex;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.loovl-ukk__merkki::before,
	.loovl-ukk__merkki::after,
	.loovl-ukk button.loovl-ukk__valilehti,
	.loovl-ukk summary.loovl-ukk__kohta {
		transition: none;
	}
}

@media print {
	.loovl-ukk__valilehdet,
	.loovl-ukk__loppu {
		display: none !important;
	}

	.loovl-ukk [hidden] {
		display: block !important;
	}
}