/*
Theme Name:        Vihjekanal
Theme URI:         https://vihjekanal.ee
Description:       Vihjekanal.ee plokkteema. Sisaldab ainult kujundust; sisu on andmebaasis ja pluginas „Vihjekanal – sisu ja tellimisvorm“.
Version:           1.4.1
Requires at least: 6.6
Requires PHP:      8.1
Tested up to:      6.9
Text Domain:       vihjeliin
Update URI:        false
License:           GPL-2.0-or-later
*/

/* ---------- Üldine ---------- */

:root {
	--vl-raadius: 0.75rem;
	/* Fookus: rooste heledal taustal (4,3–5,2 : 1), kreem navy taustal. */
	--vl-fookus: var(--wp--preset--color--aktsent);
	--vl-navy-tekst: #d9d0c0;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--vl-fookus);
	outline-offset: 2px;
}

[id] {
	scroll-margin-top: 1rem;
}

/* Päis, sisu ja jalus kohakuti (ilma plokkide vahelise tühikuta). */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.vl-sisu--leht {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

/* ---------- Päis ---------- */

.vl-pais {
	background: var(--wp--preset--color--valge);
	border-bottom: 1px solid var(--wp--preset--color--piir);
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
}

.vl-pais .wp-block-site-title {
	margin: 0;
	line-height: 1.1;
}

/*
 * Logo „.vihjekanal“: saidi nimi väiketähtedes (Poppins Bold) ja ees
 * roostevärvi punkt. Punkt on CSS-ring (mitte tekstimärk), et see jääks
 * väikeses suuruses selgeks (min 4 px) ja ekraanilugeja seda ei loeks.
 */
:root {
	--vk-punkt: 0.16em;
	--vk-punkt-min: 4px;
	--vk-punkt-varv: #b4450f;
}

.wp-block-site-title a,
.vl-jalus__logo {
	white-space: nowrap; /* punkt ei tohi jääda eraldi reale */
}

.wp-block-site-title a::before,
.vl-jalus__logo::before {
	content: "";
	display: inline-block;
	width: max(var(--vk-punkt), var(--vk-punkt-min));
	height: max(var(--vk-punkt), var(--vk-punkt-min));
	margin-right: 0.07em;
	border-radius: 50%;
	background: var(--vk-punkt-varv);
	vertical-align: baseline;
}

.vl-jalus__logo {
	--vk-punkt-varv: #e8834a;
	font-family: var(--wp--preset--font-family--logo);
	letter-spacing: -0.03em;
	text-transform: lowercase;
}

.vl-peamenuu .wp-block-navigation__container {
	gap: 0.25rem 1.5rem;
	align-items: center;
}

.vl-peamenuu .wp-block-navigation-item.vl-nav-nupp > a {
	background: var(--wp--preset--color--tume);
	color: var(--wp--preset--color--valge);
	border-radius: 0.5rem;
	padding: 0.55rem 1.1rem;
	font-weight: 600;
	text-decoration: none;
}

.vl-peamenuu .wp-block-navigation-item.vl-nav-nupp > a:hover {
	background: var(--wp--preset--color--tume-2);
	text-decoration: none;
}

/* Mobiilimenüü (avatud ülekate). */
.vl-peamenuu .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--valge);
	color: var(--wp--preset--color--tume);
	padding: 1.25rem;
}

.vl-peamenuu .is-menu-open .wp-block-navigation__container {
	gap: 1.25rem;
	align-items: flex-start;
}

.vl-peamenuu .is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--large);
}

.vl-peamenuu .wp-block-navigation__responsive-container-open,
.vl-peamenuu .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--tume);
	padding: 0.4rem;
}

/* Ilma JavaScriptita: menüünupp ei tööta, seega kuvatakse mobiilis
   menüü lingid kohe päise all. Klass vl-js lisatakse <head>-is. */
@media (max-width: 599px) {
	html:not(.vl-js) .vl-pais__sisu {
		flex-wrap: wrap !important;
	}

	html:not(.vl-js) .vl-peamenuu .wp-block-navigation__responsive-container-open,
	html:not(.vl-js) .vl-peamenuu .wp-block-navigation__responsive-container-close {
		display: none;
	}

	html:not(.vl-js) .vl-peamenuu .wp-block-navigation__responsive-container {
		display: block;
		position: static;
		width: 100%;
		background: transparent;
		padding: 0;
	}

	html:not(.vl-js) .vl-peamenuu .wp-block-navigation__container {
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}
}

/* ---------- Sektsioonid ---------- */

.vl-sektsioon {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.vl-sisu > .wp-block-post-content > * + * {
	margin-block-start: 0;
}

/* Kitsamad tekstiplokid joondatakse laia sisuala vasakusse serva (päise logoga kohakuti). */
.vl-sektsioon.is-layout-constrained > :where(:not(.alignwide):not(.alignfull)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

.vl-sektsioon--valge {
	background: var(--wp--preset--color--valge);
}

.vl-sektsioon--paring {
	background: var(--wp--preset--color--sinine-hele);
}

.vl-sektsioon > h2 {
	margin-top: 0;
}

.vl-sissejuhatus {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--tekst-nork);
}

.vl-markus {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--tekst-nork);
}

/* Avalõik: Deep Navy, kreemjas tekst, pööratud nupud. */
.vl-avaloik {
	background: var(--wp--preset--color--tume);
	color: var(--wp--preset--color--taust);
	--vl-fookus: var(--wp--preset--color--taust);
}

.vl-avaloik h1 {
	margin-top: 0;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--taust);
}

.vl-avaloik :where(h2, h3, h4, a:not(.wp-block-button__link)) {
	color: var(--wp--preset--color--taust);
}

.vl-avaloik .vl-sissejuhatus {
	color: var(--wp--preset--color--taust);
}

.vl-avaloik .vl-markus {
	color: var(--vl-navy-tekst);
}

.vl-avaloik .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--taust);
	border-color: var(--wp--preset--color--taust);
	color: var(--wp--preset--color--tume);
}

.vl-avaloik .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--valge);
	border-color: var(--wp--preset--color--valge);
	color: var(--wp--preset--color--tume);
}

.vl-avaloik .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--taust);
	border-color: var(--wp--preset--color--taust);
}

.vl-avaloik .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--tume-2);
	color: var(--wp--preset--color--taust);
}

/* Teisene nupp */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--tume);
	border: 2px solid var(--wp--preset--color--tume);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--valge);
	color: var(--wp--preset--color--tume);
}

/* Kaardid */
.vl-kaardid {
	gap: 1.5rem;
}

.vl-kaart,
.vl-pakett {
	background: var(--wp--preset--color--valge);
	border: 1px solid var(--wp--preset--color--piir);
	border-radius: var(--vl-raadius);
	padding: 1.5rem 1.75rem;
}

.vl-sektsioon--valge .vl-kaart {
	background: var(--wp--preset--color--taust);
}

.vl-kaart > :first-child {
	margin-top: 0;
}

/* ---------- Paketid ---------- */

.vl-paketid {
	margin-top: var(--wp--preset--spacing--50);
}

.vl-pakett {
	padding: 2rem;
	position: relative;
}

.vl-pakett.is-esile {
	border: 2px solid var(--wp--preset--color--tume);
}

.vl-pakett__nimi {
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--tume);
}

.vl-pakett__alapealkiri {
	color: var(--wp--preset--color--tume-2);
	font-weight: 600;
}

.vl-pakett__sisu ul {
	padding-left: 1.25rem;
}

.vl-pakett__sisu li::marker,
.vl-linnukesed li::marker {
	color: var(--wp--preset--color--tume);
}

.vl-pakett__sisu li + li,
.vl-linnukesed li + li {
	margin-top: 0.35rem;
}

.vl-pakett__jalus {
	border-top: 1px solid var(--wp--preset--color--piir);
	padding-top: 1.25rem;
	margin-top: 1rem;
}

.vl-pakett__hind {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--tume);
	margin: 0;
}

.vl-pakett__markus {
	color: var(--wp--preset--color--tekst-nork);
	font-size: var(--wp--preset--font-size--small);
	margin: 0.25rem 0 1rem;
}

.vl-pakett__nupp {
	margin: 0;
}

.vl-pakett__nupp .wp-block-button__link {
	display: block;
	text-align: center;
}

/* Võrdlustabel */
.vl-vordlus-pealkiri {
	margin-top: var(--wp--preset--spacing--60) !important;
}

.wp-block-table.vl-vordlus table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--valge);
	border: 1px solid var(--wp--preset--color--piir);
}

.wp-block-table.vl-vordlus th,
.wp-block-table.vl-vordlus td {
	border: 1px solid var(--wp--preset--color--piir);
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table.vl-vordlus thead th {
	background: var(--wp--preset--color--tume);
	color: var(--wp--preset--color--valge);
	border-color: var(--wp--preset--color--tume);
}

.wp-block-table.vl-vordlus tbody th {
	font-weight: 600;
	color: var(--wp--preset--color--tume);
	background: var(--wp--preset--color--taust);
}

.wp-block-table.vl-vordlus thead {
	border-bottom: 0;
}

/* Kitsal ekraanil: paketipõhised plokid (sama sisu, vt plugin). */
.vl-vordlus-pakett {
	background: var(--wp--preset--color--valge);
	border: 1px solid var(--wp--preset--color--piir);
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.vl-vordlus-pakett__nimi {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--tume);
}

.vl-vordlus-pakett__rida {
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--piir);
}

.vl-vordlus-pakett__rida dt {
	color: var(--wp--preset--color--tume);
	font-size: var(--wp--preset--font-size--small);
}

/* Kuu-/aastamakse valik */
.vl-hinnastus {
	margin-top: var(--wp--preset--spacing--50);
}

.vl-hinnastus .vl-paketid {
	margin-top: 0;
}

.vl-periood__silt {
	font-weight: 600;
	color: var(--wp--preset--color--tume);
	margin-bottom: 0.5rem;
	padding: 0;
}

.vl-periood__valikud {
	background: var(--wp--preset--color--valge);
	border: 1px solid var(--wp--preset--color--piir);
	border-radius: 999px;
	padding: 0.25rem;
	gap: 0.25rem;
}

.vl-periood__nupp {
	border: 0;
	border-radius: 999px;
	padding: 0.55rem 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--tume);
	line-height: 1.3;
}

.vl-periood__raadio:checked + .vl-periood__nupp {
	background: var(--wp--preset--color--tume);
	color: var(--wp--preset--color--valge);
}

.vl-periood__raadio:focus-visible + .vl-periood__nupp {
	outline: 3px solid var(--vl-fookus);
	outline-offset: 2px;
}

.vl-hind__periood {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--tekst-nork);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.vl-hind__summa {
	color: var(--wp--preset--color--tume);
	line-height: 1.2;
}

.vl-hind__arv {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.vl-hind__uhik {
	font-weight: 600;
}

.vl-hind__vordlus {
	color: var(--wp--preset--color--tekst-nork);
	font-size: var(--wp--preset--font-size--small);
}

.vl-hind__saast {
	display: inline-block;
	background: var(--wp--preset--color--aktsent-hele);
	color: var(--wp--preset--color--tume);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	border-radius: 0.375rem;
	padding: 0.2rem 0.6rem;
}

.vl-hind .vl-pakett__nupp {
	margin-top: 1rem;
}

.vl-pakett__esile {
	display: inline-block;
	background: var(--wp--preset--color--tume);
	color: var(--wp--preset--color--valge);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	border-radius: 999px;
	padding: 0.15rem 0.75rem;
	margin: 0 0 0.75rem;
}

.vl-hinnastus__km {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--tekst-nork);
	margin-top: 1rem;
}

/* Vormi arveldusperiood, seadistuse andmed ja tellimissoovi selgitus */
.vl-vorm__vali--periood legend,
.vl-vorm__seadistus > legend {
	color: var(--wp--preset--color--tume);
}

.vl-vorm__seadistus {
	background: var(--wp--preset--color--taust);
	border: 1px solid var(--wp--preset--color--piir) !important;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem 1.25rem !important;
}

.vl-vorm__seadistus > legend {
	padding: 0 0.35rem !important;
}

.vl-vorm .vl-vorm__raadio input[type="radio"] {
	accent-color: var(--wp--preset--color--tume);
}

.vl-vorm__vali--periood.has-viga .vl-vorm__raadiod {
	outline: 2px solid #a1271b;
	outline-offset: 4px;
	border-radius: 0.25rem;
}

.vl-vorm__selgitus {
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--tekst-nork);
}

.vl-vorm__selgitus + .vl-vorm__nupp {
	margin-top: 0.75rem;
}

/* 404 */
.vl-leht404 h1 {
	margin-top: 0;
}

/* ---------- Sammud ---------- */

.vl-sammud {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: vl-samm;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1.25rem;
}

.vl-sammud > li {
	counter-increment: vl-samm;
	background: var(--wp--preset--color--taust);
	border: 1px solid var(--wp--preset--color--piir);
	border-radius: var(--vl-raadius);
	padding: 1.5rem;
	color: var(--wp--preset--color--tekst-nork);
}

.vl-sammud > li::before {
	content: counter(vl-samm);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--tume);
	color: var(--wp--preset--color--valge);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.vl-sammud > li strong {
	display: inline-block;
	color: var(--wp--preset--color--tume);
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 0.35rem;
}

/* ---------- KKK ---------- */

.vl-kkk .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--piir);
	padding: 0;
	margin: 0;
}

.vl-kkk .wp-block-details:first-child {
	border-top: 1px solid var(--wp--preset--color--piir);
}

.vl-kkk summary {
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--wp--preset--color--tume);
	padding: 1.1rem 2.5rem 1.1rem 0;
	position: relative;
	font-size: var(--wp--preset--font-size--large);
}

.vl-kkk summary::-webkit-details-marker {
	display: none;
}

.vl-kkk summary::after {
	content: "+";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--aktsent);
}

.vl-kkk details[open] > summary::after {
	content: "−";
}

.vl-kkk details > :not(summary) {
	margin-top: 0;
	padding-bottom: 1.1rem;
}

/* ---------- Pakkumisvorm ---------- */

.vl-vorm {
	background: var(--wp--preset--color--valge);
	border: 1px solid var(--wp--preset--color--piir);
	border-radius: var(--vl-raadius);
	padding: clamp(1.25rem, 4vw, 2.25rem);
	margin-top: var(--wp--preset--spacing--40);
}

.vl-vorm__hoiatus {
	background: var(--wp--preset--color--aktsent-hele);
	border-left: 4px solid var(--wp--preset--color--aktsent);
	padding: 0.9rem 1.1rem;
	margin: 0 0 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--tekst);
	border-radius: 0 0.375rem 0.375rem 0;
}

.vl-vorm__kohustuslik,
.vl-vorm__vihje {
	color: var(--wp--preset--color--tekst-nork);
	font-size: var(--wp--preset--font-size--small);
}

.vl-vorm__kohustuslik {
	margin: 0 0 1rem;
}

@media (min-width: 40rem) {
	.vl-vorm__valjad {
		grid-template-columns: 1fr 1fr;
	}
	.vl-vorm__vali--pakett,
	.vl-vorm__vali--periood,
	.vl-vorm__seadistus,
	.vl-vorm__vali--lisainfo {
		grid-column: 1 / -1;
	}
}

.vl-vorm__vali label {
	color: var(--wp--preset--color--tume);
}

.vl-vorm__tarn {
	color: var(--wp--preset--color--tekst-nork);
}

.vl-vorm__vali input,
.vl-vorm__vali select,
.vl-vorm__vali textarea {
	border: 1px solid var(--wp--preset--color--valjapiir);
	border-radius: 0.375rem;
	padding: 0.7rem 0.8rem;
	background: var(--wp--preset--color--valge);
	color: var(--wp--preset--color--tekst);
	min-height: 2.875rem;
}

.vl-vorm__vali input:focus-visible,
.vl-vorm__vali select:focus-visible,
.vl-vorm__vali textarea:focus-visible {
	border-color: var(--wp--preset--color--tume);
}

.vl-vorm__vali.has-viga input,
.vl-vorm__vali.has-viga select,
.vl-vorm__vali.has-viga textarea {
	border: 2px solid #a1271b;
}

.vl-vorm__viga {
	color: #a1271b;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.vl-vorm__nupp {
	margin-top: 1.5rem;
}

.vl-vorm__teade {
	border-radius: 0.375rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	border: 2px solid;
}

.vl-vorm__teade p {
	margin: 0;
	font-weight: 600;
}

.vl-vorm__teade ul {
	margin: 0.5rem 0 0;
}

.vl-vorm__teade--edu {
	border-color: #1d6b3a;
	background: #e8f0e3;
	color: #1d6b3a;
}

.vl-vorm__teade--viga {
	border-color: #a1271b;
	background: #f8e7e1;
	color: #a1271b;
}

.vl-vorm__teade--viga a {
	color: #a1271b;
}

/* ---------- Jalus ---------- */

.vl-jalus-ala {
	background: var(--wp--preset--color--tume);
	color: var(--vl-navy-tekst);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
	--vl-fookus: var(--wp--preset--color--taust);
}

.vl-jalus-ala a {
	color: var(--wp--preset--color--valge);
}

.vl-jalus__logo {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--wp--preset--color--valge);
}

.vl-jalus__pealkiri {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--vl-navy-tekst);
	margin: 0 0 0.75rem;
}

.vl-jalus__silt {
	display: inline-block;
	min-width: 4.5rem;
}

.vl-jalus__alumine {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	justify-content: space-between;
	border-top: 1px solid rgba(246, 239, 227, 0.25);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.vl-haldaja-markus {
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Mobiil ---------- */

@media (max-width: 600px) {
	.vl-pais .wp-block-site-title {
		font-size: 1.3rem;
	}
	.vl-avaloik .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.vl-avaloik .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
	.vl-pakett {
		padding: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}