/*
 * Vihjekanali plokkide minimaalne struktuur. See töötab ka teise teemaga;
 * välimuse (värvid, kirjad, raamid) annab Vihjekanali teema.
 */
.vl-paketid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1.5rem;
}
.vl-pakett {
	display: flex;
	flex-direction: column;
	border: 1px solid currentColor;
	padding: 1.5rem;
}
.vl-pakett__sisu { flex: 1; }
.vl-pakett__nimi,
.vl-pakett__alapealkiri { margin: 0 0 .5rem; }

.vl-vorm { position: relative; }
.vl-vorm__valjad { display: grid; gap: 1rem; }
.vl-vorm__vali label { display: block; font-weight: 600; margin-bottom: .25rem; }
.vl-vorm__vali input,
.vl-vorm__vali select,
.vl-vorm__vali textarea { width: 100%; box-sizing: border-box; font: inherit; }
.vl-vorm__viga { margin: .25rem 0; }
.vl-vorm__vihje { margin: 0 0 .25rem; }

.vl-jalus__veerud {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 2rem;
}
.vl-jalus p { margin: 0 0 .35rem; }
.vl-haldaja-markus { border: 1px dashed currentColor; padding: .5rem 1rem; font-size: .875rem; }

/* Ekraanilugejale mõeldud tekst. */
.vl-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Kuu-/aastamakse valik töötab ilma JavaScriptita (raadionupud + :has).
 * Kui brauser :has-i ei toeta, valikut ei kuvata ja näidatakse mõlemad
 * hinnad koos perioodi nimetusega.
 */
.vl-periood {
	display: none;
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
	min-width: 0;
}
.vl-periood__valikud { display: inline-flex; flex-wrap: wrap; }
.vl-periood__raadio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.vl-periood__nupp { cursor: pointer; padding: .5rem 1rem; border: 1px solid currentColor; }
.vl-periood__raadio:checked + .vl-periood__nupp { font-weight: 700; }
.vl-periood__raadio:focus-visible + .vl-periood__nupp { outline: 3px solid; outline-offset: 2px; }

@supports selector(:has(*)) {
	.vl-periood { display: block; }
	.vl-hinnastus:has(.vl-periood__raadio[value="kuu"]:checked) [data-periood="aasta"],
	.vl-hinnastus:has(.vl-periood__raadio[value="aasta"]:checked) [data-periood="kuu"] {
		display: none;
	}
	.vl-hinnastus.has-periood [data-periood] .vl-hind__periood { display: none; }
}

.vl-hind + .vl-hind { margin-top: 1rem; }
.vl-hind p { margin: 0 0 .25rem; }
.vl-vorm__raadiod { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.vl-vorm__raadio { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.vl-vorm__vali--periood { border: 0; padding: 0; margin: 0; min-width: 0; }
.vl-vorm__vali--periood legend { font-weight: 600; margin-bottom: .25rem; padding: 0; }
.vl-vorm .vl-vorm__raadio input[type="radio"] {
	width: 1.15rem;
	height: 1.15rem;
	min-height: 0;
	padding: 0;
	margin: 0;
	accent-color: currentColor;
}

/*
 * Tellimisvorm: ühekordse tasuga paketi (nt Vihjekanal Start) valimisel
 * peidetakse arveldusperiood ja näidatakse seadistuse välju – ilma
 * JavaScriptita. Brauseris, mis :has-i ei toeta, on mõlemad nähtavad.
 */
.vl-vorm__seadistus { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1rem; }
.vl-vorm__seadistus > legend { font-weight: 600; margin-bottom: .5rem; padding: 0; }
@supports selector(:has(*)) {
	.vl-vorm__vorm:has(#vl-pakett option[data-tyyp="uhekordne"]:checked) .vl-vorm__vali--periood { display: none; }
	.vl-vorm__vorm:not(:has(#vl-pakett option[data-tyyp="uhekordne"]:checked)) .vl-vorm__seadistus { display: none; }
}

/*
 * Võrdlustabel „Kes mida teeb“: arvutis tabel, kuni 767 px laiusel samast
 * tabelist koostatud paketipõhised plokid (includes/vordlus.php). Teine
 * vaade on display:none, seega ekraanilugeja ei loe sisu topelt.
 * Tabel peidetakse ainult siis, kui plokid koostati (klass vl-vordlus--plokid);
 * muidu jääb tabel nähtavaks ja külgsuunas keritavaks.
 */
.vl-vordlus-plokid { display: none; }
@media (max-width: 47.9375rem) {
	.wp-block-table.vl-vordlus.vl-vordlus--plokid { display: none; }
	.vl-vordlus-plokid { display: grid; gap: 1rem; }
	.wp-block-table.vl-vordlus:not(.vl-vordlus--plokid) { overflow-x: auto; }
	.wp-block-table.vl-vordlus:not(.vl-vordlus--plokid) table { min-width: 36rem; }
}
.vl-vordlus-pakett { min-width: 0; }
.vl-vordlus-pakett__nimi { margin: 0 0 .75rem; }
.vl-vordlus-pakett__loend { margin: 0; display: grid; gap: .75rem; }
.vl-vordlus-pakett__rida { min-width: 0; }
.vl-vordlus-pakett__rida dt { font-weight: 600; }
.vl-vordlus-pakett__rida dd { margin: .125rem 0 0; overflow-wrap: break-word; }