/* Genereeritud failist assets/src/vaade.css — ära muuda siin, muuda src-faili ja käivita tools/build-css.py */
/* =====================================================================
   HELIX — Kodule / Ärile lüliti
   Liugur ja aktiivne tekst sõltuvad ainult <html> klassist — JS ei mõõda
   midagi, seega on tekst alati keskel ja olek ei saa paigast nihkuda.
   ===================================================================== */

html.hx-view-kodu:not(#hx_) { --hx-accent: var( --hx-accent-kodu, #764452 ); --hx-tint: var( --hx-tint-kodu, #F6F1EA ); }
html.hx-view-ari:not(#hx_)  { --hx-accent: var( --hx-accent-ari, #764452 );  --hx-tint: var( --hx-tint-ari, #EEF2F8 ); }

.hx-switch:not(#hx_) {
	--sw-h:   44px;
	--sw-pad: 4px;

	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	padding: var( --sw-pad );
	border-radius: 999px;
	background: var( --hx-tint, #F6F1EA );
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .06 );
	isolation: isolate;
	font-family: inherit;
	vertical-align: middle;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .4s;
}

.hx-switch--full:not(#hx_) { display: grid; width: 100%; }
.hx-switch--l:not(#hx_)    { --sw-h: 52px; --sw-pad: 5px; }
.hx-switch--sm:not(#hx_)   { --sw-h: 34px; }
.hx-switch--sm:not(#hx_) .hx-switch__btn { padding: 0 12px !important; font-size: 13px !important; }
.hx-switch--sm:not(#hx_) .hx-switch__ico { width: 16px; height: 16px; }

.hx-switch__pill:not(#hx_) {
	position: absolute;
	top: var( --sw-pad );
	bottom: var( --sw-pad );
	left: var( --sw-pad );
	z-index: -1;
	width: calc( 50% - var( --sw-pad ) );
	border-radius: 999px;
	background: var( --hx-accent, #764452 );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, .14 ), inset 0 1px 0 rgba( 255, 255, 255, .18 );
	transition: transform .5s cubic-bezier( .3, 1.3, .5, 1 ), background-color .4s;
}

html.hx-view-ari:not(#hx_) .hx-switch__pill { transform: translateX( 100% ); }

.hx-switch:not(#hx_) .hx-switch__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	height: var( --sw-h );
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: transparent !important;
	box-shadow: none;
	color: var( --helix-ink, #1C1C1C ) !important;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color .3s, opacity .3s;
}

.hx-switch--l:not(#hx_) .hx-switch__btn { font-size: 16px; padding: 0 26px; }

.hx-switch:not(#hx_) .hx-switch__btn:not( [aria-pressed="true"] ):hover { opacity: .7; }

html.hx-view-kodu:not(#hx_) .hx-switch .hx-switch__btn[data-view="kodu"],
html.hx-view-ari:not(#hx_)  .hx-switch .hx-switch__btn[data-view="ari"] { color: #fff !important; }

.hx-switch__ico:not(#hx_) {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	transition: transform .5s cubic-bezier( .3, 1.6, .5, 1 );
}

/* Väike hüpe valitud ikoonil */
html.hx-view-kodu:not(#hx_) .hx-switch__btn[data-view="kodu"] .hx-switch__ico,
html.hx-view-ari:not(#hx_)  .hx-switch__btn[data-view="ari"] .hx-switch__ico { transform: scale( 1.12 ); }

.hx-switch.is-changing:not(#hx_) .hx-switch__btn[aria-pressed="true"] .hx-switch__ico { animation: hx-sw-hop .5s cubic-bezier( .3, 1.6, .5, 1 ); }

@keyframes hx-sw-hop {
	0%   { transform: translateY( 0 ) scale( 1 ); }
	40%  { transform: translateY( -4px ) scale( 1.18 ); }
	100% { transform: translateY( 0 ) scale( 1.12 ); }
}

.hx-switch:not(#hx_) .hx-switch__btn:focus-visible {
	outline: 2px solid var( --hx-accent, #764452 );
	outline-offset: 2px;
}

@media ( max-width: 480px ) {
	.hx-switch:not(#hx_) .hx-switch__btn { padding: 0 16px; font-size: 14px; }
}

/* Sisu vahetus */
.helix-view.hx-view-enter:not(#hx_) { animation: hx-view-in .35s ease both; }

@keyframes hx-view-in {
	from { opacity: 0; transform: translateY( 8px ); }
	to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   Vanad .helix-switch lülitid (materjal, seinapilt, kataloogi pilt)
   Nende JS seab liuguri laiuse ja asukoha ise.
   --------------------------------------------------------------------- */

.helix-switch:not(#hx_) {
	position: relative;
	display: inline-flex;
	align-items: center;
	column-gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: var( --hx-tint, #F6F1EA );
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .06 );
	line-height: 1;
	user-select: none;
	isolation: isolate;
}

.helix-switch__pill:not(#hx_) {
	position: absolute;
	top: 4px;
	left: 0;
	z-index: -1;
	height: calc( 100% - 8px );
	width: 0;
	border-radius: 999px;
	background: var( --hx-accent, #764452 );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, .14 );
	transition: transform .45s cubic-bezier( .3, 1.3, .5, 1 ), width .45s cubic-bezier( .3, 1.3, .5, 1 );
	pointer-events: none;
}

.helix-switch:not( .is-ready ):not(#hx_) .helix-switch__pill { opacity: 0; }

.helix-switch:not(#hx_) .helix-switch__btn {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 12px 22px;
	border: 0;
	border-radius: 999px;
	background: transparent !important;
	box-shadow: none;
	color: var( --helix-ink, #1C1C1C ) !important;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: color .25s;
}

.helix-switch:not(#hx_) .helix-switch__btn.helix-active { color: #fff !important; }

.helix-switch:not(#hx_) .helix-switch__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media ( max-width: 500px ) {

	.helix-switch:not(#hx_) { display: flex; width: 100%; box-sizing: border-box; }

	.helix-switch:not(#hx_) .helix-switch__btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 12px 8px;
		font-size: 14px;
		text-align: center;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hx-switch__pill:not(#hx_),
	.helix-switch__pill:not(#hx_),
	.hx-switch__ico:not(#hx_) { transition: none; }
	.helix-view.hx-view-enter:not(#hx_),
	.hx-switch.is-changing:not(#hx_) .hx-switch__btn[aria-pressed="true"] .hx-switch__ico { animation: none; }
}


/* Lehe taust vaate järgi (Helix -> Päis -> Värvid) */
html.hx-page-bg:not(#hx_) body { transition: background-color .5s ease; }
html.hx-page-bg.hx-view-kodu:not(#hx_) body { background-color: var( --hx-page-kodu, #FBF8F3 ); }
html.hx-page-bg.hx-view-ari:not(#hx_) body  { background-color: var( --hx-page-ari, #F2F5F9 ); }