/*
 * LUEL Shop – stilovi teme.
 *
 * Boje, tipografiju i razmake menjaj u Izgled > Editor > Stilovi.
 * Ovde su samo stvari koje editor ne pokriva: stilovi blokova, forme,
 * lepljivo zaglavlje i sitni prelazi.
 */

:root {
	--luel-radius-sm: 8px;
	--luel-radius-md: 12px;
	--luel-radius-lg: 20px;
	--luel-transition: 0.25s cubic-bezier(0, 0, 0.2, 1);
	--luel-hairline: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}

:where(a, button, .wp-block-button__link, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Zaglavlje – lepljivo na svim ekranima
 * --------------------------------------------------------------- */

/*
 * Sticky mora da stoji na omotacu dela sablona. Da je samo na .luel-header,
 * grupa bi otisla zajedno sa <header> elementom cim se on isskroluje.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
 * Zamucenje ide na pseudo-element, ne na sam header.
 * Element sa backdrop-filter postaje "containing block" za sve sto je
 * position: fixed unutar njega, pa bi mobilni meni i fioka korpe bili
 * zarobljeni u visini zaglavlja.
 */
.luel-header {
	position: relative;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: border-color var(--luel-transition);
}

.luel-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Kada backdrop-filter nije podrzan, pozadina mora biti puna. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.luel-header::before {
		background-color: var(--wp--preset--color--base);
	}
}

.luel-header.is-scrolled {
	border-bottom-color: var(--luel-hairline);
}

.luel-header__inner {
	gap: var(--wp--preset--spacing--30);
}

.luel-header__brand .wp-block-site-title {
	font-size: var(--wp--preset--font-size--large);
	white-space: nowrap;
}

.luel-header__brand .wp-block-site-logo img {
	border-radius: 6px;
}

.luel-header__actions {
	gap: var(--wp--preset--spacing--30);
}

/* Sadrzaj ispod lepljivog zaglavlja ne sme da zavrsi ispod njega
   kada se skoci na sidro (#cene, #faq...). */
[id] {
	scroll-margin-top: 6rem;
}

/* ---------------------------------------------------------------
 * Mobilni meni (overlay)
 * --------------------------------------------------------------- */

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.5rem, 6vw, 3rem);
}

/*
 * WordPress podrazumevano boji otvoren meni u belo, pravilom sa pet klasa.
 * Zato se ovde ponavlja isti selektor, da tamna pozadina pobedi.
 */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--base);
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	inline-size: 100%;
	padding-top: clamp(3.5rem, 12vh, 6rem);
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	inline-size: 100%;
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	inline-size: 100%;
	border-block-end: 1px solid var(--luel-hairline);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	inline-size: 100%;
	padding-block: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------
 * Stilovi blokova (biraju se u editoru)
 * --------------------------------------------------------------- */

.is-style-luel-card,
.is-style-luel-card-hover {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--luel-hairline);
	border-radius: var(--luel-radius-lg);
	padding: var(--wp--preset--spacing--50);
}

.is-style-luel-card-hover {
	transition: transform var(--luel-transition), border-color var(--luel-transition), background-color var(--luel-transition);
}

.is-style-luel-card-hover:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 5%, var(--wp--preset--color--surface));
}

.wp-block-button.is-style-luel-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--luel-hairline);
	transition: border-color var(--luel-transition), color var(--luel-transition), background-color var(--luel-transition);
}

.wp-block-button.is-style-luel-outline .wp-block-button__link:hover,
.wp-block-button.is-style-luel-outline .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
}

.is-style-luel-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.is-style-luel-eyebrow::before {
	content: "";
	inline-size: 0.5em;
	block-size: 0.5em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	flex: none;
}

p.is-style-luel-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	max-inline-size: 52ch;
}

ul.is-style-luel-plain {
	list-style: none;
	padding-inline-start: 0;
}

ul.is-style-luel-plain li {
	margin-block-end: 0.6em;
}

ul.is-style-luel-plain a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color var(--luel-transition);
}

ul.is-style-luel-plain a:hover {
	color: var(--wp--preset--color--contrast);
}

ul.is-style-luel-check,
ul.is-style-luel-cross {
	list-style: none;
	padding-inline-start: 0;
}

ul.is-style-luel-check li,
ul.is-style-luel-cross li {
	position: relative;
	padding-inline-start: 1.9em;
	margin-block-end: 0.6em;
}

ul.is-style-luel-check li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

ul.is-style-luel-cross li::before {
	content: "✕";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--muted);
}

ul.is-style-luel-cross li {
	color: var(--wp--preset--color--muted);
}

.wp-block-table.is-style-luel-compare table {
	border-collapse: separate;
	border-spacing: 0;
}

.wp-block-table.is-style-luel-compare th,
.wp-block-table.is-style-luel-compare td {
	border: 0;
	border-block-end: 1px solid var(--luel-hairline);
	padding: 1rem 1.25rem;
	vertical-align: top;
}

.wp-block-table.is-style-luel-compare thead th {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	text-align: start;
	color: var(--wp--preset--color--contrast);
}

.wp-block-table.is-style-luel-compare tbody td:first-child {
	color: var(--wp--preset--color--muted);
}

.wp-block-table.is-style-luel-compare tbody tr:last-child td {
	border-block-end: 0;
}

.wp-block-image.is-style-luel-framed img {
	border-radius: var(--luel-radius-lg);
	border: 1px solid var(--luel-hairline);
}

/* ---------------------------------------------------------------
 * Paketi i cene
 *
 * Kartica paketa je fleks kolona, pa dugme uvek stoji na dnu bez
 * obzira na to koliko stavki ima u listi. Istaknuta kartica ne sme
 * da nasledi prigusenu (sivu) boju teksta, jer se na akcentnoj
 * podlozi ne vidi - zato je boja teksta u njoj eksplicitna.
 * --------------------------------------------------------------- */

.wp-block-column.luel-paket {
	display: flex;
	flex-direction: column;
}

/* Lista guta visak visine, pa dugme svake kartice zavrsi na istoj liniji. */
.luel-paket > .luel-paket__lista {
	flex: 1 0 auto;
}

/* Oznaka "Najcesci izbor": puna akcentna podloga, tamno slovo na njoj.
   Boje idu iz palete, pa rade i u svetloj varijaciji teme. */
p.luel-paket__badge {
	display: inline-block;
	margin-block: 0;
	padding: 0.3em 0.9em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
}

p.luel-paket__cena {
	line-height: 1.1;
}

p.luel-paket__period {
	margin-block-start: 0.35rem;
	color: var(--wp--preset--color--muted);
}

.luel-paket--istaknut {
	border-color: var(--wp--preset--color--accent);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 7%, var(--wp--preset--color--surface));
}

/*
 * Zastita od nevidljivog teksta u istaknutoj kartici. Sve sto bi inace
 * ostalo prigušeno dobija punu boju teksta; jedini izuzetak je red sa
 * periodom naplate, koji sme da bude tisi.
 */
.luel-paket--istaknut :is(p, li, h3, h4, strong) {
	color: var(--wp--preset--color--contrast);
}

.luel-paket--istaknut p.luel-paket__badge {
	color: var(--wp--preset--color--accent-ink);
}

.luel-paket--istaknut p.luel-paket__period {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}

/* ---------------------------------------------------------------
 * Detalji (FAQ), citati, tabele, slike
 * --------------------------------------------------------------- */

.wp-block-details {
	border-block-end: 1px solid var(--luel-hairline);
	padding-block: 1.25rem;
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.02em;
	transition: color var(--luel-transition);
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-details[open] summary {
	margin-block-end: 0.75rem;
}

.wp-block-details p {
	color: var(--wp--preset--color--muted);
	max-inline-size: 68ch;
}

.wp-block-image img {
	border-radius: var(--luel-radius-md);
}

/* ---------------------------------------------------------------
 * Forme (pretraga, komentari, WooCommerce polja)
 * --------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--luel-hairline);
	border-radius: var(--luel-radius-md);
	padding: 0.85rem 1rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	inline-size: 100%;
	transition: border-color var(--luel-transition), background-color var(--luel-transition);
}

input::placeholder,
textarea::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--muted) 75%, transparent);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--accent);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 4%, var(--wp--preset--color--surface));
}

/* Tamna tema: sistemske kontrole (kalendar, skrol) prate temu.
   Svetla varijacija ovo menja u svom stilu. */
:root {
	color-scheme: dark;
}

label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	display: inline-block;
	margin-block-end: 0.4rem;
}

.wp-block-search__button,
.wp-block-search .wp-block-search__button {
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	border: 0;
	padding-inline: 1.25rem;
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * Sitnice
 * --------------------------------------------------------------- */

.luel-hairline {
	border-block-start: 1px solid var(--luel-hairline);
}

.luel-noise {
	position: relative;
}

.luel-noise::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--wp--preset--gradient--accent-glow);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------
 * Mobilni ekrani
 *
 * Sve ispod se odnosi samo na telefone i uzi tablet. Ako menjate
 * dizajn u Editoru, ova pravila ostaju i dalje na snazi.
 * --------------------------------------------------------------- */

/* Dugme "Poruci uslugu" u zaglavlju ima smisla tek kada ima mesta.
   Na telefonu isti taj link stoji u meniju i u hero sekciji. */
@media (max-width: 899px) {
	.wp-block-buttons.luel-header__cta {
		display: none;
	}
}

@media (max-width: 781px) {
	/* Blok nosi inline padding, pa je ovde !important jedini nacin. */
	.luel-header {
		padding-top: var(--wp--preset--spacing--20) !important;
		padding-bottom: var(--wp--preset--spacing--20) !important;
	}

	.luel-header__brand .wp-block-site-title {
		font-size: var(--wp--preset--font-size--medium);
	}

	.luel-header__actions {
		gap: var(--wp--preset--spacing--30);
	}

	/* Prelom reda u naslovima je desktop dekoracija. */
	.luel-br-desktop {
		display: none;
	}

	.is-style-luel-card,
	.is-style-luel-card-hover {
		padding: var(--wp--preset--spacing--40);
		border-radius: 16px;
	}

	/* Kartica ne treba da skace pod prstom. */
	.is-style-luel-card-hover:hover {
		transform: none;
	}

	p.is-style-luel-lead {
		font-size: var(--wp--preset--font-size--medium);
	}

	/* Dugmad u sadrzaju idu preko cele sirine, lakse se pogadjaju. */
	main .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	main .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		display: block;
		inline-size: 100%;
	}

	/* Siroke tabele se skroluju u svom okviru, stranica ostaje mirna. */
	.wp-block-table {
		overflow-x: auto;
	}

	.wp-block-table table {
		min-inline-size: 32rem;
	}

	.wp-block-details summary {
		font-size: var(--wp--preset--font-size--large);
	}
}

@media (max-width: 600px) {
	/* Garancije u hero sekciji: uredne dve kolone umesto raspadnutog reda. */
	.luel-hero-facts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}

	.luel-hero-facts > * {
		margin: 0;
	}

	/* Sve sto je u dve ili tri kolone ide jedno ispod drugog. */
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		gap: var(--wp--preset--spacing--40);
	}

	.is-style-luel-eyebrow {
		font-size: 0.75rem;
		letter-spacing: 0.1em;
	}
}

/* Ekrani ispod 380px (stariji iPhone SE i slicni). */
@media (max-width: 380px) {
	.luel-header__brand .wp-block-site-title {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Sigurne zone na telefonima sa zarezom, bez gubitka globalnog paddinga. */
@supports (padding: max(0px)) {
	.luel-header.has-global-padding {
		padding-left: max(var(--wp--style--root--padding-left), env(safe-area-inset-left));
		padding-right: max(var(--wp--style--root--padding-right), env(safe-area-inset-right));
	}
}

/* ---------------------------------------------------------------
 * HubSpot forme (newsletter, upit)
 *
 * HubSpot svoje forme salje sa belom pozadinom i svojim dugmetom,
 * pa ih ovde uklapamo u tamnu temu. Pokriveni su oba ugradna koda:
 * stariji (.hbspt-form) i noviji (.hs-form-frame). Ako HubSpot
 * promeni imena klasa, dovoljno je dopisati novi kontejner u liste.
 * --------------------------------------------------------------- */

.hbspt-form,
.hs-form-frame {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	max-inline-size: 34rem;
	margin-inline: auto;
}

/* Bela pozadina zivi na HubSpotovim omotacima, ne na poljima. */
.hbspt-form div,
.hbspt-form form,
.hbspt-form fieldset,
.hs-form-frame div,
.hs-form-frame form,
.hs-form-frame fieldset {
	background-color: transparent;
	border-color: var(--luel-hairline);
}

.hbspt-form label,
.hs-form-frame label {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: 0.4rem;
}

.hbspt-form p,
.hbspt-form .hs-richtext,
.hs-form-frame p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Zvezdica obaveznog polja u akcentu, ne u crvenom. */
.hbspt-form .hs-form-required,
.hs-form-frame .hs-form-required {
	color: var(--wp--preset--color--accent);
}

/* Polja - ista pravila kao ostala polja na sajtu. */
.hbspt-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.hbspt-form select,
.hbspt-form textarea,
.hs-form-frame input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.hs-form-frame select,
.hs-form-frame textarea {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--luel-hairline);
	border-radius: var(--luel-radius-md);
	padding: 0.85rem 1rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	inline-size: 100%;
	box-shadow: none;
	transition: border-color var(--luel-transition), background-color var(--luel-transition);
}

.hbspt-form input::placeholder,
.hbspt-form textarea::placeholder,
.hs-form-frame input::placeholder,
.hs-form-frame textarea::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--muted) 75%, transparent);
}

.hbspt-form input:focus,
.hbspt-form textarea:focus,
.hs-form-frame input:focus,
.hs-form-frame textarea:focus {
	border-color: var(--wp--preset--color--accent);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 4%, var(--wp--preset--color--surface));
	outline: none;
}

/* Kvadratic za saglasnost. */
.hbspt-form input[type="checkbox"],
.hbspt-form input[type="radio"],
.hs-form-frame input[type="checkbox"],
.hs-form-frame input[type="radio"] {
	accent-color: var(--wp--preset--color--accent);
	inline-size: auto;
	margin-inline-end: 0.5rem;
}

/* Dugme - isto kao ostala dugmad na sajtu. */
.hbspt-form input[type="submit"],
.hbspt-form .hs-button,
.hbspt-form button[type="submit"],
.hs-form-frame input[type="submit"],
.hs-form-frame .hs-button,
.hs-form-frame button[type="submit"] {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	border: 0;
	border-radius: 999px;
	padding: 0.9rem 1.75rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	inline-size: auto;
	transition: background-color var(--luel-transition), transform var(--luel-transition);
}

.hbspt-form input[type="submit"]:hover,
.hbspt-form .hs-button:hover,
.hbspt-form button[type="submit"]:hover,
.hs-form-frame input[type="submit"]:hover,
.hs-form-frame .hs-button:hover,
.hs-form-frame button[type="submit"]:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 85%, #FFFFFF);
	transform: translateY(-2px);
}

/* Poruke o gresci. */
.hbspt-form .hs-error-msg,
.hbspt-form .hs-error-msgs,
.hbspt-form .hs_error_rollup,
.hs-form-frame .hs-error-msg,
.hs-form-frame .hs-error-msgs {
	color: var(--wp--preset--color--danger);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
	padding-inline-start: 0;
}

/* HubSpot potpis se na besplatnom planu ne sklanja, ali sme da bude tisi. */
.hbspt-form .hs-form__virality-link,
.hs-form-frame .hs-form__virality-link {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	opacity: 0.6;
}