/*
 * Muuja kontaktinupp. Vaike ruut paremas alanurgas, mis avaneb kaardiks.
 *
 * Kujundus: Figma "sticky popup + alariba" (node 4:465) ja "popup expanded"
 * (node 4:466). Mooodud on failist, mitte pildilt mooodetud:
 *
 *   kokkuvolditud  50x50, ainult foto, 70 px paremast servast
 *   avatud         180x86, foto 64x64 alumises paremas nurgas
 *   nimi           DM Sans 700 14/19, punktis 17,13
 *   kontaktid      DM Sans 400 13/17,7, punktis 17,34
 *   sulgemisrist   12x12, punktis 161,6
 *   taust          #2a6760, teravad nurgad
 *
 * Ankur on ALUMINE PAREM NURK: kast kasvab vasakule ja ules, foto jaab
 * paigale ja kasvab 50 -> 64. Nii ei liigu see, mille peal hiir on.
 *
 * Mobiilivaadet kujundusfailis EI OLE - alla 768 px on koik siin tehtud
 * otsused, mitte kujundaja omad. Vt docs/sticky-kontakt.md.
 *
 * Mobile-first ja isoleeritud: siin ei ole uhtegi reeglit, mis midagi mujal
 * ule kirjutaks. Teema ise on desktop-first.
 */

.tr-k {
	--tr-k-bg: #2a6760;
	--tr-k-fg: #ffffff;

	/*
	 * Kujunduse mooodud. Kokkuvolditud ruut on tapselt foto suurune, seega
	 * tausta ei paista. Puutetundlikul ekraanil on need suuremad - vt
	 * faili lopus olevat (hover: none) plokki.
	 */
	--tr-k-min: 50px;
	--tr-k-w: 180px;
	--tr-k-h: 86px;
	--tr-k-photo: 64px;

	--tr-k-pad-x: 17px;
	--tr-k-pad-y: 13px;

	--tr-k-right: 16px;
	--tr-k-bottom: 16px;

	/*
	 * Alariba korgus. JS mooodab selle ara ja kirjutab siia, kui riba on
	 * alla dokitud (body.tr-campaign-bottom). Ilma ribata jaab 0.
	 */
	--tr-k-bar: 0px;

	--tr-k-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--tr-k-dur: 0.34s;

	/*
	 * Kavatsuse viivitus. Hiir libiseb ule alumise parema nurga ka siis, kui
	 * ta sinna ei taha - kerimisriba ja akna serv on korval. Ilma viivituseta
	 * rebiks kaart end iga sellise moodumise peale lahti.
	 *
	 * Kehtib AINULT hover'iga avamisel: klops, puudutus ja klaviatuurifookus
	 * on selge kavatsus ja peavad toimima kohe. Sulgemine on samuti kohene -
	 * vaartus tuleb siis alusreeglist, mitte hover-olekust.
	 */
	--tr-k-viide: 0s;

	position: fixed;
	right: var(--tr-k-right);
	bottom: calc(var(--tr-k-bar) + var(--tr-k-bottom));
	/* Alla kampaania popupi (100000), ule tavalise sisu. */
	z-index: 99998;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	transition: opacity 0.2s ease, visibility 0.2s ease,
		bottom var(--tr-k-dur) var(--tr-k-ease);
}

.tr-k[hidden] {
	display: none;
}

/*
 * Kampaania popup on modaal ja katab lehe kinni. Kontaktinupp jaaks tema
 * taustakatte alla poolnahtavaks - votame ta selleks ajaks ara. Klass tuleb
 * campaign-popup.php kerimisluku kuljest, JS-i pole vaja.
 */
html.tr-popup-lock .tr-k {
	opacity: 0;
	visibility: hidden;
}

/*
 * Viivitus kehtib ainult siis, kui kaart EI OLE veel lahti ja avajaks on
 * hiir. .is-open valistamine on tahtis: kui kasutaja klopsab ajal, mil hiir
 * on peal, ei tohi lukustamine 0,12 s jarel jarele lonkida.
 */
@media (hover: hover) {
	.tr-k:not(.is-suppressed):not(.is-open):hover {
		--tr-k-viide: 0.12s;
	}
}

/* ------------------------------------------------------------------
 * Kaart
 * ------------------------------------------------------------------ */

.tr-k__card {
	position: relative;
	width: var(--tr-k-min);
	height: var(--tr-k-min);
	background: var(--tr-k-bg);
	/* Kujunduses on nurgad teravad. */
	border-radius: 0;
	/*
	 * Tekst on avanemise ajal hetkeks laiem kui kast, mis alles kasvab.
	 * Ilma selleta paistaks ta kaardi servast valja.
	 */
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(12, 28, 26, 0.28);
	transition:
		width var(--tr-k-dur) var(--tr-k-ease) var(--tr-k-viide),
		height var(--tr-k-dur) var(--tr-k-ease) var(--tr-k-viide);
}

/*
 * AVATUD OLEK tuleb kolmest kohast ja koik kolm on siin loetletud:
 *
 *   .is-open           JS pani lukku - klopsati fotot voi puudutati ekraani
 *   :focus-within      klaviatuuriga liikuja on nupul
 *   :hover             hiir on peal; ainult seal, kus hover paris olemas on
 *
 * Hover ja focus on puhas CSS. See tahendab, et komponent tootab ka siis,
 * kui JS ei jookse - JS lisab ainult lukustamise ja mooodab alariba korguse.
 *
 * .is-suppressed on JS-i vastumurk: kui kasutaja tombas kaardi kokku ajal, mil
 * hiir on peal voi fookus sees, ei tohi :hover ega :focus-within teda kohe
 * uuesti lahti rebida - seetottu on mahasurumine molema ees. Klass kaob, kui
 * hiir elemendilt lahkub.
 */
.tr-k.is-open .tr-k__card,
.tr-k:not(.is-suppressed):focus-within .tr-k__card {
	width: var(--tr-k-w);
	height: var(--tr-k-h);
}

@media (hover: hover) {
	.tr-k:not(.is-suppressed):hover .tr-k__card {
		width: var(--tr-k-w);
		height: var(--tr-k-h);
	}
}

/* ------------------------------------------------------------------
 * Foto ja avamisnupp
 *
 * Nupp on foto peal ja ainult foto suurune - ka avatud olekus. Nii jaavad
 * e-posti ja telefoni lingid vabaks ning fotole klopsamine tombab kaardi
 * tagasi kokku.
 * ------------------------------------------------------------------ */

.tr-k__toggle {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: block;
	width: var(--tr-k-min);
	height: var(--tr-k-min);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transition:
		width var(--tr-k-dur) var(--tr-k-ease) var(--tr-k-viide),
		height var(--tr-k-dur) var(--tr-k-ease) var(--tr-k-viide);
}

.tr-k.is-open .tr-k__toggle,
.tr-k:not(.is-suppressed):focus-within .tr-k__toggle {
	width: var(--tr-k-photo);
	height: var(--tr-k-photo);
}

@media (hover: hover) {
	.tr-k:not(.is-suppressed):hover .tr-k__toggle {
		width: var(--tr-k-photo);
		height: var(--tr-k-photo);
	}
}

/*
 * Teema globaalne reegel on
 * `button:hover { transform: translateY(4px); background-color: #429289;
 * border: 3px solid #429289 }` ja selle spetsiifilisus on 0,1,1. Uheklassiline
 * selektor kaotaks sellele - sama loks nagu popupi sulgemisnupul. Loetleme
 * seisud eraldi, siis on 0,2,0 ja meie voidame.
 */
.tr-k__toggle:hover,
.tr-k__toggle:focus,
.tr-k__toggle:active,
.tr-k__close:hover,
.tr-k__close:focus,
.tr-k__close:active {
	padding: 0;
	border: 0;
	background: transparent;
	transform: none;
	box-shadow: none;
}

.tr-k__toggle:focus-visible,
.tr-k__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.tr-k__photo {
	display: block;
	width: 100%;
	height: 100%;
	/* Kaader voib olla ukskoik mis kujuga - ruuduks loikab CSS. */
	object-fit: cover;
	object-position: center top;
}

/* ------------------------------------------------------------------
 * Tekstiplokk
 *
 * visibility: hidden, mitte display: none - nii kaovad lingid ka
 * tabuldusjarjekorrast, aga uleminekut saab animeerida.
 * ------------------------------------------------------------------ */

.tr-k__panel {
	/*
	 * Plokk katab kogu kaardi ja tekst tuleb padding'ust. Nii saab
	 * sulgemisrist paikneda kaardi nurga suhtes, nagu kujunduses, mitte
	 * tekstiploki suhtes.
	 *
	 * Kate on foto peal (z-index 3 vs 2) - kujunduses jookseb pikk nimi
	 * fotole ette. Seetottu pointer-events: none, muidu ei saaks fotot
	 * enam klopsata; lingid ja rist votavad selle endale tagasi.
	 */
	position: absolute;
	inset: 0;
	z-index: 3;
	padding: var(--tr-k-pad-y) var(--tr-k-pad-x);
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--tr-k-fg);
	opacity: 0;
	visibility: hidden;
	transform: translateX(6px);
	transition:
		opacity 0.18s ease,
		visibility 0.18s ease,
		transform var(--tr-k-dur) var(--tr-k-ease);
}

.tr-k.is-open .tr-k__panel,
.tr-k:not(.is-suppressed):focus-within .tr-k__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	/* Tekst tuleb alles siis, kui kastil on juba ruumi. */
	transition-delay: calc(var(--tr-k-viide) + 0.1s);
}

@media (hover: hover) {
	.tr-k:not(.is-suppressed):hover .tr-k__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: calc(var(--tr-k-viide) + 0.1s);
	}
}

.tr-k__name {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 19px;
	white-space: nowrap;
}

.tr-k__link {
	display: block;
	pointer-events: auto;
	color: var(--tr-k-fg);
	font-size: 13px;
	font-weight: 400;
	line-height: 17.7px;
	text-decoration: none;
	white-space: nowrap;
}

.tr-k__link:hover,
.tr-k__link:focus-visible {
	color: var(--tr-k-fg);
	text-decoration: underline;
}

/*
 * Teema annab style.css-is koigile mailto/tel linkidele alla 992 px
 * `display: inline-flex; min-height: 44px` - puutesihtmargi parandus
 * mobiilirunmast. Siin see aga lohuks kaardi katki: kaardi korgus on
 * fikseeritud ja kaks 44 px rida ei mahu 86 px sisse. Hiireaknas, mis on
 * lihtsalt kitsaks tommatud, ei ole 44 px ka vaja.
 *
 * Votame reegli komponendi sees maha ja anname puuteseadmel teadlikult
 * tagasi - koos sellele vastava kaardikorgusega. Atribuudiselektor on
 * vajalik: teema oma on 0,1,1 ja klass uksi kaotaks talle.
 */
.tr-k__link[href^="mailto:"],
.tr-k__link[href^="tel:"] {
	display: block;
	min-height: 0;
}

/* Esimene link algab kujunduse jargi 34 px kaardi ulaservast. */
.tr-k__link:first-of-type {
	margin-top: 2px;
}

/* ------------------------------------------------------------------
 * Sulgemisrist
 * ------------------------------------------------------------------ */

/*
 * Kujunduses on rist 12x12 punktis 161,6 ehk 7 px paremast ja 6 px ulemisest
 * servast. Nupp ise on suurem kui rist, et sellesse saaks pihta - ja kuna
 * glyyf on nupu keskel, annavad 26x24 nupp nurgas tapselt need 7 ja 6 px:
 * (26-12)/2 = 7 ja (24-12)/2 = 6. Nii ei ole vaja negatiivseid nihkeid,
 * mida kaardi overflow: hidden ara loikaks.
 */
.tr-k__close {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 24px;
	pointer-events: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--tr-k-fg);
	cursor: pointer;
	opacity: 0.85;
}

.tr-k__close:hover {
	opacity: 1;
}

.tr-k__close svg {
	display: block;
	width: 12px;
	height: 12px;
}

/* ------------------------------------------------------------------
 * Lauaarvuti: kujunduse kaugused servadest
 *
 * Kitsas aknas hoiab nupp servadest 16 px, muidu jaaks ta liiga aarde.
 * 1440 px kujunduses on 70 px paremalt ja 21 px alariba kohal.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
	.tr-k {
		--tr-k-right: 70px;
		--tr-k-bottom: 21px;
	}
}

/* ------------------------------------------------------------------
 * Puutetundlik ekraan
 *
 * Hover'it ei ole, avamine kaib puudutusega. Lingid vajavad suuremat
 * sihtmarki kui 13 px tekstirida ja seetottu on kaart korgem kui
 * kujunduses. Mobiilivaadet kujundusfailis EI OLE - need on minu numbrid.
 *
 * NB: see plokk peab jaama lauaarvuti ploki JARELE. Puutetahvel on korraga
 * "hover: none" ja "min-width: 768px" - kui jarjekord oleks vastupidine,
 * saaks ta 86 px korguse, kuhu 32 px lingid ara ei mahu.
 * ------------------------------------------------------------------ */

@media (hover: none) {
	.tr-k {
		--tr-k-min: 56px;
		--tr-k-w: 200px;
		/* 13 + 19 (nimi) + 2 + 44 + 44 + 13 = 135, umardatud 136. */
		--tr-k-h: 136px;
		--tr-k-right: 16px;
		--tr-k-bottom: 16px;
	}

	.tr-k__link[href^="mailto:"],
	.tr-k__link[href^="tel:"] {
		display: flex;
		align-items: center;
		min-height: 44px;
		line-height: 18px;
	}

	/*
	 * Sormega tuleb ristist pihta saada. 44x44 nurgas viib glyyfi 16 px
	 * servadest sissepoole - see ei ole enam kujunduse 7/6, aga
	 * puutesihtmark on siin tahtsam kui piksel.
	 */
	.tr-k__close {
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tr-k,
	.tr-k__card,
	.tr-k__toggle,
	.tr-k__panel {
		transition: none;
	}
}