/*
Theme Name: 3in1
Theme URI: https://www.3in1.ee
Author: Lauri Vilt
Description: 3in1 OÜ plokiteema. Värvid, kirjatüübid ja vahed on failis theme.json.
Requires at least: 6.6
Requires PHP: 8.0
Version: 0.9.1
License: GNU General Public License v2 or later
Text Domain: 3in1
*/

/* Kõik kujundusväärtused tulevad theme.json-ist. Siia ainult see, mida theme.json ei kata. */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--aktsent);
	outline-offset: 3px;
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline-offset: 2px;
}

/* Eraldusjoon: 1 px, värv Joon (core kasutab vaikimisi 2 px ja poolläbipaistvust). */
.wp-block-separator {
	border: 0;
	border-top: var(--wp--custom--joon) solid currentColor;
	opacity: 1;
}

/* Päis */
.tin1-logo {
	margin: 0;
	line-height: 0;
}

/* Logo kuvasuhe (600×318), et pilt ei nihutaks laadimisel paigutust. */
.tin1-logo img {
	aspect-ratio: 600 / 318;
}

.tin1-pais-nupp .wp-block-button__link {
	padding: 0.625rem 1rem;
	font-size: var(--wp--preset--font-size--vaike);
}

/* Mobiilis (navigatsiooniploki murdepunkt 600 px): logo | nupp | menüünupp paremas servas. */
@media (max-width: 599px) {
	header .wp-block-navigation {
		order: 2;
	}
}

/* Avatud mobiilimenüü: vasakule joondatud, suuremad lingid, sama servavahe kui lehel. */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	padding: var(--wp--preset--spacing--30);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--50);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
	text-align: left;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--pealkiri-3);
}

/* Jalus püsib lühikesel lehel ekraani allservas. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Jalus: lõigud ilma lisavaheta */
footer .wp-block-group p {
	margin: 0;
}

/* Nupp, mis näeb välja nagu link (jalus: „Küpsiste seaded" avab Complianzi riba). */
.tin1-tekstinupp {
	position: static;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--aktsent);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.tin1-tekstinupp:hover {
	color: var(--wp--preset--color--aktsent-tume);
}

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

/* Täislaiuses sektsioonid on vahedeta kohakuti, et taustavärvid ei jätaks valgeid ribasid. */
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
}

/* Kaks järjestikust valget sektsiooni: ülemise alumine vahe piisab, teise ülemine vahe ära. */
.wp-block-post-content > section.alignfull:not(.has-background) + section.alignfull:not(.has-background) {
	padding-top: 0 !important;
}

/* Ruudustik: 1 veerg mobiilis, 2 või 3 veergu laiemal ekraanil. Sisu ilma kaartideta. */
.tin1-ruudustik {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.tin1-ruudustik.tin1-ruudustik > * {
	margin-block: 0;
}

@media (min-width: 700px) {
	.tin1-ruudustik--2,
	.tin1-ruudustik--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.tin1-ruudustik--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Iga ruudustiku element algab peenikese joonega (teenused). */
.tin1-ruudustik--jooned > * {
	border-top: var(--wp--custom--joon) solid var(--wp--preset--color--joon);
	padding-top: var(--wp--preset--spacing--30);
}

.tin1-ruudustik h3 a {
	color: inherit;
	text-decoration-color: var(--wp--preset--color--aktsent);
	text-underline-offset: 0.2em;
}

.tin1-ruudustik h3 a:hover {
	color: var(--wp--preset--color--aktsent);
}

/* Probleemide loend: 2 veergu laiemal ekraanil. */
.tin1-kaks-veergu {
	padding-left: 1.25em;
}

.tin1-kaks-veergu li {
	margin-block-end: var(--wp--preset--spacing--20);
	break-inside: avoid;
}


@media (min-width: 700px) {
	.tin1-kaks-veergu {
		columns: 2;
		column-gap: var(--wp--preset--spacing--50);
	}
}

/* Loendite täpid aktsentvärvis. */
.wp-block-list li::marker {
	color: var(--wp--preset--color--aktsent);
}

.wp-block-list li + li {
	margin-top: var(--wp--preset--spacing--10);
}

/* Kaks osa: vasakul pealkiri ja põhifaktid, paremal sisu (teenuste leht). */
.tin1-kaks-osa {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

.tin1-kaks-osa.tin1-kaks-osa > * {
	margin-block: 0;
	min-width: 0; /* laiad skeemid ei veni veergu laiemaks */
}

@media (min-width: 900px) {
	.tin1-kaks-osa {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	/* Kontakt: vorm laiemas veerus vasakul, kontaktandmed paremal. */
	.tin1-kaks-osa--vastupidi {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

/* Klientide nimed reas. */
.tin1-kliendid.tin1-kliendid > p {
	margin: 0;
	font-family: var(--wp--preset--font-family--pealkiri);
	font-weight: 600;
}

/* Tabelid (küpsiste loetelu): peenikesed jooned, väike kiri. Kitsal ekraanil keritav, sõnu ei poolitata. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table,
.wp-block-table table.has-fixed-layout {
	table-layout: auto;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--vaike);
	word-break: normal;
	overflow-wrap: normal;
}

.wp-block-table table {
	min-width: 34rem;
}

.wp-block-table th,
.wp-block-table td,
.wp-block-table .has-fixed-layout th,
.wp-block-table .has-fixed-layout td {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: manual;
}

.wp-block-table td:first-child,
.wp-block-table td:last-child {
	white-space: nowrap;
}

.wp-block-table th,
.wp-block-table td {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) var(--wp--preset--spacing--10) 0;
	border: 0;
	border-bottom: var(--wp--custom--joon) solid var(--wp--preset--color--joon);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	border-bottom-color: var(--wp--preset--color--hall);
}

/* ---------- Kontaktivorm (Contact Form 7) ---------- */

.wpcf7-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.tin1-vorm-rida label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-weight: 600;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--wp--preset--color--hall);
	border-radius: var(--wp--custom--raadius);
	background: var(--wp--preset--color--paber);
	color: var(--wp--preset--color--tindisinine);
	font: inherit;
}

.wpcf7-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--aktsent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--aktsent);
}

/* Nõusoleku märkeruut ja tekst ühel real. */
.tin1-vorm-noustumine .wpcf7-list-item {
	margin: 0;
}

.tin1-vorm-noustumine label {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	align-items: flex-start;
	font-weight: 400;
}

.tin1-vorm-noustumine input[type="checkbox"] {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.05em;
	flex: none;
	accent-color: var(--wp--preset--color--aktsent);
}

/* Saatmisnupp nagu teised nupud. */
.wpcf7-form .wpcf7-submit {
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: var(--wp--custom--raadius);
	background: var(--wp--preset--color--aktsent);
	color: var(--wp--preset--color--paber);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.wpcf7-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--aktsent-tume);
}

.wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Honeypot: ekraanilt eemal, aga mitte display:none (mõned robotid jätavad peidetud välja vahele). */
.tin1-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wpcf7-form {
	position: relative;
}

/* Veateated ja kinnitus */
.wpcf7-not-valid-tip {
	margin-top: var(--wp--preset--spacing--10);
	color: #B3261E;
	font-size: var(--wp--preset--font-size--vaike);
}

.wpcf7-form .wpcf7-not-valid.wpcf7-not-valid {
	border-color: #B3261E;
}

.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--raadius);
}

/* ---------- Hero: tekst vasakul, skeem paremal ---------- */

.tin1-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	align-items: center;
}

.tin1-hero.tin1-hero > * {
	margin-block: 0;
}

@media (min-width: 960px) {
	.tin1-hero {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

/* Kaks osa, vertikaalselt keskel (probleemi loend + skeem). */
.tin1-kaks-osa--keskel {
	align-items: center;
}

/* ---------- Skeemid (inline SVG, värvid theme.json-ist) ---------- */

.tin1-skeem {
	margin: 0;
}

.tin1-skeem svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.tin1-skeem--hero {
	max-width: 30rem;
}

.tin1-skeem--pudelikael {
	max-width: 22rem;
	margin-inline: auto;
}

/* Protsessikaart on lai: kitsal ekraanil keritav, et kiri jääks loetavaks. */
.tin1-skeem--keritav {
	overflow-x: auto;
}

.tin1-skeem--keritav svg {
	min-width: 36rem;
}

.tin1-skeem text {
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 15px;
	fill: var(--wp--preset--color--tindisinine);
}

.tin1-skeem .s-silt {
	font-size: 14px;
	fill: var(--wp--preset--color--hall);
}

.tin1-skeem .s-tekst--paks {
	font-weight: 600;
}

.tin1-skeem .s-kast {
	fill: var(--wp--preset--color--paber);
	stroke: var(--wp--preset--color--hall);
	stroke-width: 1.25;
}

.tin1-skeem .s-kast--aktsent {
	stroke: var(--wp--preset--color--aktsent);
	stroke-width: 2;
}

.tin1-skeem .s-rada {
	fill: var(--wp--preset--color--paber);
	stroke: var(--wp--preset--color--joon);
	stroke-width: 1;
}

.tin1-skeem .s-sass {
	fill: none;
	stroke: var(--wp--preset--color--hall);
	stroke-width: 1.25;
	stroke-dasharray: 4 4;
}

.tin1-skeem .s-voog {
	stroke: var(--wp--preset--color--aktsent);
	stroke-width: 2;
}

.tin1-skeem .s-voog-ohuke {
	fill: none;
	stroke: var(--wp--preset--color--aktsent);
	stroke-width: 1.5;
}

.tin1-skeem .s-voog-katkend {
	stroke-dasharray: 5 4;
}

.tin1-skeem .s-joon-hall {
	stroke: var(--wp--preset--color--hall);
	stroke-width: 1.25;
}

.tin1-skeem .s-nool {
	fill: var(--wp--preset--color--aktsent);
}

.tin1-skeem .s-nool-hall {
	fill: var(--wp--preset--color--hall);
}

.tin1-skeem .s-solm {
	fill: var(--wp--preset--color--aktsent);
}

/* Logo roosa ainult kitsaskohtade märkimiseks (graafika, mitte tekst). */
.tin1-skeem .s-roosa-tapp {
	fill: #ED2D5D;
}

.tin1-skeem .s-ring-roosa {
	fill: var(--wp--preset--color--paber);
	stroke: #ED2D5D;
	stroke-width: 2.5;
}

.tin1-skeem .s-tapp-tekst {
	fill: #ffffff;
	font-size: 13px;
	font-weight: 700;
}

/* ---------- Protsessijoon ---------- */
/*
 * Iga samm on oma plokk; sõlm (::before) ja joonelõik järgmise sammuni (::after)
 * on CSS-is, nii et sammude tekste saab Gutenbergis muuta.
 * Mobiilis püstjoon vasakul, laiemal ekraanil rõhtjoon üleval.
 */
.tin1-protsess {
	--solm: 0.875rem;
	--solm-y: 0.35em;
	--vahe: var(--wp--preset--spacing--30);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vahe);
	counter-reset: samm;
}

.tin1-protsess.tin1-protsess > * {
	position: relative;
	margin-block: 0;
	padding-left: calc(var(--solm) + var(--wp--preset--spacing--20));
	counter-increment: samm;
}

.tin1-protsess > * > :first-child {
	margin-top: 0;
}

.tin1-protsess > *::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--solm-y);
	width: var(--solm);
	height: var(--solm);
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--wp--preset--color--aktsent);
}

.tin1-protsess > *:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(var(--solm) / 2 - 1px);
	top: calc(var(--solm-y) + var(--solm));
	bottom: calc(-1 * var(--vahe) - var(--solm-y));
	width: 2px;
	background: var(--wp--preset--color--joon);
	transform-origin: top;
}

/* Nummerdatud sammud (koostöö käik): suurem sõlm, number sees. */
.tin1-protsess--nummerdatud {
	--solm: 2.25rem;
	--solm-y: 0px;
}

.tin1-protsess--nummerdatud > *::before {
	content: counter(samm);
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--paber);
	border: 2px solid var(--wp--preset--color--aktsent);
	color: var(--wp--preset--color--aktsent);
	font-size: var(--wp--preset--font-size--vaike);
	font-weight: 600;
	line-height: 1;
}

.tin1-protsess--nummerdatud > * > :first-child {
	line-height: var(--solm);
}

/* Rõhtne joon: kolm sammu alates 600 px, nummerdatud (5 sammu) alates 1000 px. */
@media (min-width: 600px) {
	.tin1-protsess:not(.tin1-protsess--nummerdatud) {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.tin1-protsess:not(.tin1-protsess--nummerdatud).tin1-protsess > * {
		padding-left: 0;
		padding-top: calc(var(--solm) + var(--wp--preset--spacing--20));
	}

	.tin1-protsess:not(.tin1-protsess--nummerdatud) > *::before {
		top: 0;
	}

	.tin1-protsess:not(.tin1-protsess--nummerdatud) > *:not(:last-child)::after {
		top: calc(var(--solm) / 2 - 1px);
		left: var(--solm);
		right: calc(-1 * var(--vahe));
		bottom: auto;
		width: auto;
		height: 2px;
		transform-origin: left;
	}
}

@media (min-width: 1000px) {
	.tin1-protsess--nummerdatud {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.tin1-protsess--nummerdatud.tin1-protsess > * {
		padding-left: 0;
		padding-top: calc(var(--solm) + var(--wp--preset--spacing--30));
	}

	.tin1-protsess--nummerdatud > *::before {
		top: 0;
	}

	.tin1-protsess--nummerdatud > *:not(:last-child)::after {
		top: calc(var(--solm) / 2 - 1px);
		left: var(--solm);
		right: calc(-1 * var(--vahe));
		bottom: auto;
		width: auto;
		height: 2px;
		transform-origin: left;
	}
}

/* Ainus liikumine lehel: avalehe esimese vaate joon joonistub üks kord (kokku ~1,2 s). */
@media (prefers-reduced-motion: no-preference) {
	.tin1-protsess--animeeritud > *:not(:last-child)::after {
		animation: tin1-joon 0.6s ease-out both;
	}

	.tin1-protsess--animeeritud > :nth-child(2)::after {
		animation-delay: 0.6s;
	}
}

@keyframes tin1-joon {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}