/*
 * FFP2.ee — see, mida theme.json väljendada ei suuda.
 * Kõik värvid ja vahed viitavad theme.json-i tokenitele, et ümberstiliseerimine
 * käiks endiselt ühest kohast.
 */

/* --- Kleepuv päis ------------------------------------------------------- */

/* Positsioonitugi annab juba position:sticky ja z-index:10. Siin ainult viimistlus. */
.ffp2ee-header {
	z-index: 100;
	backdrop-filter: saturate(180%) blur(10px);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent) !important;
	transition: box-shadow var(--wp--custom--transition--base);
}

/* Bränd ja ikoonid hoiavad oma laiust; ainult menüü tohib kokku tõmbuda. */
.ffp2ee-header__brand,
.ffp2ee-header__actions {
	flex-shrink: 0;
}

.ffp2ee-header__brand .wp-block-site-title {
	white-space: nowrap;
}

.ffp2ee-header__nav {
	min-width: 0;
}

/* Vari tekib alles siis, kui lehte on keritud (vt assets/js/header.js). */
.ffp2ee-header.is-scrolled {
	box-shadow: var(--wp--preset--shadow--soft);
}

@media (prefers-reduced-transparency: reduce) {
	.ffp2ee-header {
		backdrop-filter: none;
		background-color: var(--wp--preset--color--base) !important;
	}
}

/* --- Navigatsioon ------------------------------------------------------- */

/* Aktiivse lehe esiletõst. */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* Mobiilis avatav menüü hingab rohkem. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

/* --- Otsing ------------------------------------------------------------- */

.wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.15rem 0.15rem 0.15rem 0.9rem;
	transition: border-color var(--wp--custom--transition--base);
}

.wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary);
}

.wp-block-search .wp-block-search__input {
	border: 0;
	background: transparent;
	outline: none;
}

.wp-block-search .wp-block-search__button {
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.5rem 0.7rem;
	min-width: 0;
}

/* Päises hoiab otsing end tagasi, et logo ja korv mahuksid. */
.ffp2ee-header .wp-block-search {
	max-width: 240px;
}

/* Kokkuklapitud olekus on otsing pelgalt ikoon — raam tekib alles avanedes. */
.ffp2ee-header .wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
	border-color: transparent;
	padding: 0;
}

@media (max-width: 781px) {
	.ffp2ee-header .wp-block-search {
		display: none;
	}
}

/* --- Päise ostukorv: 48px pehmeroheline ring + roheline arvurõngas ------- */

/*
 * Disaini järgi on korv ainus päise tegevusnupp: pehmeroheline (#DCEEE1) ring,
 * tumeroheline (kontrast) korviikoon, roheline arvurõngas paremas ülanurgas.
 */
.ffp2ee-header__actions .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--wp--custom--transition--base);
}

.ffp2ee-header__actions .wc-block-mini-cart__button:hover {
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
}

.ffp2ee-header__actions .wc-block-mini-cart__button svg {
	width: 23px;
	height: 23px;
}

.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 800;
	border: 2px solid var(--wp--preset--color--surface);
}

/* Päise otsingunupp: sama pehmeroheline ring nagu korv (kokkuklapitult). */
.ffp2ee-header__actions .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.ffp2ee-header__actions .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
}

.ffp2ee-header__actions .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Avatud olekus: otsinguväli nähtav, nupp rohelisena tavasuuruses. */
.ffp2ee-header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
	width: auto;
	height: auto;
	padding: 0.5rem 0.75rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* --- Nimekirjad ilma täppideta (block style: „Ilma täppideta") ---------- */

.wp-block-list.is-style-ffp2ee-plain-list {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-ffp2ee-plain-list li {
	margin: 0;
}

/* --- Kaart (block style: „Kaart") --------------------------------------- */

.wp-block-group.is-style-ffp2ee-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--40);
	transition: box-shadow var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

/* Kaardid tõusevad hiire all ainult siis, kui neis on link. */
.wp-block-group.is-style-ffp2ee-card:has(a:hover) {
	box-shadow: var(--wp--preset--shadow--medium);
	transform: translateY(-2px);
}

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

/*
 * Ilma selleta jääb sisu ja jaluse vahele wp-site-blocks'i blockGap, mis tumeda
 * sektsiooni (nt CTA) all paistab valge triibuna.
 */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* IBAN ei tohi murduda keset numbrit. */
.ffp2ee-footer__iban {
	white-space: nowrap;
}

/* --- Lingid tumedatel pindadel ----------------------------------------- */

.ffp2ee-footer a,
.ffp2ee-topbar a {
	text-decoration: none;
	transition: color var(--wp--custom--transition--base);
}

.ffp2ee-footer a:hover,
.ffp2ee-topbar a:hover {
	text-decoration: underline;
}

/* --- Ligipääsetavus ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

:where(a, button, input, .wp-block-navigation-item > a):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* --- Esilehe sektsioonide detailid -------------------------------------- */

/* KKK: kokkuvõtte rida rõhutatud, vaikemarker asendatud +/– ikooniga. */
.ffp2ee-faq-item summary {
	font-weight: 800;
	font-size: 1.125rem;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
}

.ffp2ee-faq-item summary::-webkit-details-marker {
	display: none;
}

.ffp2ee-faq-item summary::after {
	content: "+";
	float: right;
	margin-left: 1rem;
	color: var(--wp--preset--color--primary);
	font-weight: 800;
}

.ffp2ee-faq-item[open] summary::after {
	content: "–";
}

/* „Kus kasutada" kaardid: pilt servast servani ümarate ülanurkadega. */
.ffp2ee-usecase {
	overflow: hidden;
}

.ffp2ee-usecase__img {
	margin: 0;
	background-color: var(--wp--preset--color--primary-soft);
}

.ffp2ee-usecase__img img {
	display: block;
	width: 100%;
	border-radius: 0;
}

/* Võrdluskaartide sildid (pill). */
.ffp2ee-badge {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	line-height: 1.3;
}

.ffp2ee-badge--soft {
	background-color: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-dark);
}

/*
 * Valgel kaardil on vaiketekst tume. Ilma selleta pärivad värviklassita
 * pealkirjad/read heleda tooni ja jäävad loetamatuks. Otsesed värviklassid
 * (has-muted-color, has-body-color) jäävad ikka peale, sest need on elemendil
 * endal, mitte päritud.
 */
.wp-block-column.has-base-background-color,
.wp-block-group.has-base-background-color,
.wp-block-details.has-base-background-color {
	color: var(--wp--preset--color--contrast);
}

/* --- Tootekaardid (Product Collection loop) ----------------------------- */

/*
 * Kaardikuju tuleb siit (main.css, alati laetud), sest tooteruudustik esineb
 * ka esilehel (product-spotlight), mitte ainult WooCommerce'i lehtedel. Iga
 * toode on <li>; nii ei pea uue toote lisamisel midagi käsitsi ehitama.
 */
.wp-block-woocommerce-product-template {
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-woocommerce-product-template > li {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	transition: box-shadow var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.wp-block-woocommerce-product-template > li:hover {
	box-shadow: var(--wp--preset--shadow--medium);
	transform: translateY(-2px);
}

/* Pilt servast servani, pehmeroheline taust (nagu disainis). */
.wp-block-woocommerce-product-template > li .wp-block-woocommerce-product-image {
	margin: 0;
	background-color: var(--wp--preset--color--primary-soft);
}

.wp-block-woocommerce-product-template > li .wp-block-woocommerce-product-image img {
	width: 100%;
	border-radius: 0;
}

.wp-block-woocommerce-product-template > li .wp-block-post-title {
	font-weight: 800;
}

.wp-block-woocommerce-product-template > li .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-woocommerce-product-template > li .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Hinna-rea nupp: väiksem pill (disain: 10px 16px, 14px). */
.wp-block-woocommerce-product-template > li .wp-block-woocommerce-product-button .wp-block-button__link,
.wp-block-woocommerce-product-template > li .wc-block-components-product-button .wc-block-components-product-button__button {
	padding: 0.625rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	border-radius: var(--wp--custom--radius--pill);
}

/* --- Kontaktivorm ------------------------------------------------------- */

/* Rämpsupüünis: peidetud inimeste eest, botid täidavad. */
.ffp2ee-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ffp2ee-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.ffp2ee-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.ffp2ee-field input,
.ffp2ee-field textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
	transition: border-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

.ffp2ee-field textarea {
	min-height: 8rem;
	resize: vertical;
}

.ffp2ee-field input:focus,
.ffp2ee-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(46, 158, 91, 0.15);
}

.ffp2ee-form-submit {
	align-self: flex-start;
	margin-top: 0.25rem;
	padding: 0.9375rem 1.875rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base);
}

.ffp2ee-form-submit:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

.ffp2ee-formmsg {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.ffp2ee-formmsg--ok {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-dark);
}

.ffp2ee-formmsg--err {
	border-color: var(--wp--preset--color--danger);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--danger);
}