/*
Theme Name:   Proditus
Theme URI:    https://www.proditus.eu
Description:  Glavna prezentacijska stranica tvrtke Proditus d.o.o. Izgled usklađen s Proditus webshopom (boje, tipografija, kartice), raspored s velikim sekcijama preko cijelog ekrana. HR/EN, reference s galerijama, obrasci, uvoz s proditus.eu, poveznica na webshop.
Author:       PRODITUS
Version:      2.10.6
Requires PHP: 7.4
Requires at least: 6.0
Text Domain:  proditus
*/

/* ==========================================================================
   1. Varijable – iste kao u Proditus webshopu
   ========================================================================== */
:root {
	--p-green: #0e9543;
	--p-green-dark: #087a38;
	--p-green-tint: #e7f4ec;
	--p-green-light: #8fd6a8;
	--p-dark: #064a2b;
	--p-dark-2: #076739;
	--p-dark-3: #0a7d3f;
	--p-ink: #13241a;
	--p-text: #44514a;
	--p-muted: #66736b;
	--p-line: #dfe7e2;
	--p-bg: #f4f7f5;
	--p-white: #fff;
	--p-radius: 10px;
	--p-radius-sm: 6px;
	--p-shadow: 0 1px 2px rgba(6, 40, 24, .06), 0 4px 14px rgba(6, 40, 24, .06);
	--p-shadow-hover: 0 2px 4px rgba(6, 40, 24, .08), 0 10px 28px rgba(6, 40, 24, .12);
	--p-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wrap: 1240px;
	--header-h: 64px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   2. Osnova
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.snap { scroll-snap-type: y proximity; }
body {
	margin: 0;
	font-family: var(--p-font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--p-text);
	background: var(--p-white);
	-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--p-dark-3); }
a:hover { color: var(--p-green-dark); }
h1, h2, h3, h4 { color: var(--p-ink); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
::selection { background: var(--p-green); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 860px; }
.screen-reader-text, .skip-link:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; background: #fff; padding: 8px 14px; border-radius: var(--p-radius-sm); }

.eyebrow {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--p-green);
	margin-bottom: .9em;
}

/* Pojavljivanje pri skrolanju */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   3. Gumbi
   ========================================================================== */
.pdt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	min-height: 44px; padding: .7em 1.6em;
	border-radius: var(--p-radius-sm); border: 0;
	font: 600 .95rem/1.2 var(--p-font); letter-spacing: .01em;
	text-decoration: none; cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.pdt-btn svg { width: 1.15em; height: 1.15em; }
.pdt-btn:active { transform: translateY(1px); }
.pdt-btn--primary { background: var(--p-green-dark); color: #fff; }
.pdt-btn--primary:hover { background: var(--p-dark-2); color: #fff; }
.pdt-btn--dark { background: var(--p-dark); color: #fff; }
.pdt-btn--dark:hover { background: var(--p-dark-3); color: #fff; }
.pdt-btn--light { background: rgba(255, 255, 255, .88); color: var(--p-ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pdt-btn--light:hover { background: #fff; color: var(--p-dark); }
.pdt-btn--ghost { background: transparent; color: var(--p-ink); box-shadow: inset 0 0 0 1.5px var(--p-line); }
.pdt-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--p-green); color: var(--p-dark); }
.pdt-btn--ghost-white { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.pdt-btn--ghost-white:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pdt-btn--wide { min-width: 240px; }

/* ==========================================================================
   4. Zaglavlje – prozirno preko slike, bijelo pri skrolanju
   ========================================================================== */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 60;
	height: var(--header-h);
	transition: background .3s, box-shadow .3s, color .3s;
	color: var(--p-ink);
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 1px 0 var(--p-line);
}
.admin-bar .site-header { top: var(--ab, 32px); }
body { padding-top: var(--header-h); }
body.has-hero { padding-top: 0; }
.has-hero .site-header:not(.is-solid) { background: transparent; box-shadow: none; color: #fff; }
.has-hero .site-header:not(.is-solid)::before {
	content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
	background: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
}
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(16px, 3vw, 40px); }

.site-logo { display: flex; align-items: center; line-height: 0; flex: none; }
.site-logo img { height: 34px; width: auto; transition: filter .3s; }
.has-hero .site-header:not(.is-solid) .site-logo img { filter: brightness(0) invert(1); }

.site-nav { display: flex; align-items: center; flex: 1; justify-content: space-between; gap: 16px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
#primary-menu { display: flex; gap: 2px; margin: 0 auto; }
#primary-menu li { position: relative; }
#primary-menu a {
	display: block; padding: .45em .95em; border-radius: var(--p-radius-sm);
	color: inherit; text-decoration: none; font-size: .92rem; font-weight: 600;
	transition: background .2s, color .2s;
}
#primary-menu > li > a:hover, #primary-menu > li:focus-within > a { background: rgba(19, 36, 26, .07); }
.has-hero .site-header:not(.is-solid) #primary-menu > li > a:hover { background: rgba(255, 255, 255, .16); }
#primary-menu .current-menu-item > a, #primary-menu .current-menu-ancestor > a { color: var(--p-green-dark); }
.has-hero .site-header:not(.is-solid) #primary-menu > .current-menu-item > a,
.has-hero .site-header:not(.is-solid) #primary-menu > .current-menu-ancestor > a { color: #fff; box-shadow: inset 0 -2px 0 var(--p-green-light); border-radius: 0; }
#primary-menu .menu-item-has-children > a::after { content: ""; display: inline-block; width: .36em; height: .36em; margin-left: .5em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.22em) rotate(45deg); opacity: .7; }
#primary-menu .sub-menu {
	position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px;
	background: #fff; color: var(--p-ink); border-radius: var(--p-radius); box-shadow: var(--p-shadow-hover);
	padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s;
}
#primary-menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
#primary-menu .sub-menu .sub-menu { top: -8px; left: calc(100% + 8px); }
#primary-menu .sub-menu .sub-menu::before { top: 0; bottom: 0; left: -10px; width: 10px; height: auto; right: auto; }
#primary-menu .sub-menu .menu-item-has-children > a::after { transform: translateY(-.1em) rotate(-45deg); }
#primary-menu li:hover > .sub-menu, #primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
#primary-menu .sub-menu a { font-weight: 500; color: var(--p-ink); }
#primary-menu .sub-menu a:hover { background: var(--p-green-tint); color: var(--p-dark); }
/* Trenutna stranica u padajućem izborniku: zelena oznaka s lijeve strane, jasno čitljivo (i preko videa/slike) */
#primary-menu .sub-menu .current-menu-item > a,
#primary-menu .sub-menu .current-menu-ancestor > a,
.has-hero .site-header:not(.is-solid) #primary-menu .sub-menu .current-menu-item > a,
.has-hero .site-header:not(.is-solid) #primary-menu .sub-menu .current-menu-ancestor > a {
	color: var(--p-green-dark); font-weight: 600; background: var(--p-green-tint);
	box-shadow: inset 3px 0 0 var(--p-green); border-radius: 6px;
}

.site-nav__extra { display: flex; align-items: center; gap: 12px; flex: none; }
.icon-link { color: inherit; display: inline-flex; padding: 6px; border-radius: var(--p-radius-sm); }
.icon-link svg { width: 20px; height: 20px; }
.icon-link:hover { color: inherit; background: rgba(19, 36, 26, .07); }
.pdt-btn--shop { background: var(--p-green-dark); color: #fff; min-height: 38px; padding: .5em 1.05em; font-size: .88rem; }
.pdt-btn--shop:hover { background: var(--p-dark-2); color: #fff; }

.lang-switch { display: flex; align-items: center; font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.lang-switch a, .lang-switch span { padding: .35em .5em; border-radius: var(--p-radius-sm); text-decoration: none; color: inherit; opacity: .6; }
.lang-switch a:hover { opacity: 1; }
.lang-switch .is-current { opacity: 1; }

.nav-toggle {
	display: none; align-items: center; gap: .5em;
	background: rgba(19, 36, 26, .07); color: inherit; border: 0; border-radius: var(--p-radius-sm);
	padding: .5em 1em; font: 600 .9rem var(--p-font); cursor: pointer;
}
.has-hero .site-header:not(.is-solid) .nav-toggle { background: rgba(255, 255, 255, .18); }
.nav-close { display: none; }

@media (max-width: 1100px) {
	.nav-toggle { display: inline-flex; }
	.site-nav {
		position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100%);
		background: #fff; color: var(--p-ink); box-shadow: -10px 0 40px rgba(0, 0, 0, .18);
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
		padding: 72px 24px 32px; overflow-y: auto;
		transform: translateX(105%); transition: transform .3s var(--ease); z-index: 70;
	}
	.nav-open .site-nav { transform: none; }
	.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 55; }
	.nav-close { display: block; position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 34px; line-height: 1; cursor: pointer; color: var(--p-ink); padding: 4px 10px; border-radius: var(--p-radius-sm); }
	.nav-close:hover { background: var(--p-bg); }
	#primary-menu { flex-direction: column; margin: 0; gap: 2px; }
	#primary-menu a { padding: .75em .9em; font-size: 1.05rem; color: var(--p-ink) !important; box-shadow: none !important; border-radius: var(--p-radius-sm) !important; }
	#primary-menu > li > a:hover { background: var(--p-bg) !important; }
	#primary-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 0 14px; min-width: 0; display: none; background: none; }
	#primary-menu .sub-menu::before { display: none; }
	#primary-menu li.is-open > .sub-menu { display: block; }
	.site-nav__extra { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--p-line); justify-content: space-between; flex-wrap: wrap; }
	.site-nav__extra .icon-link:hover { background: var(--p-bg); }
}

/* ==========================================================================
   5. Naslovnica – sekcije preko cijelog ekrana
   ========================================================================== */
.panel {
	position: relative; overflow: hidden;
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; align-items: center; justify-content: space-between;
	text-align: center; color: #fff;
	padding: calc(var(--header-h) + 7vh) 24px 9vh;
	scroll-snap-align: start;
	background: var(--p-dark);
}
.panel__bg, .panel__bg img, .panel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__bg { margin: 0; }
.panel::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .08) 32%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .38) 100%);
}
.panel > *:not(.panel__bg):not(.panel__video) { position: relative; z-index: 1; }
.panel__head { max-width: 760px; }
.panel__head h1, .panel__head h2 { color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, .25); }
.panel__head h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); font-weight: 600; letter-spacing: .04em; margin: 0; }
.panel__head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: .01em; margin: 0 0 .3em; }
.panel__sub { font-size: clamp(1.05rem, 2vw, 1.35rem); margin: .25em 0 0; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; opacity: .95; }
.panel__text { font-size: 1.05rem; margin: 0 auto; max-width: 560px; opacity: .95; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
.panel__actions { display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; width: 100%; max-width: 560px; }
.panel__actions .pdt-btn { flex: 1 1 220px; max-width: 264px; }
.panel__cue { position: absolute !important; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; opacity: .8; animation: cue 2s infinite; }
.panel__cue svg { width: 28px; height: 28px; transform: rotate(180deg); }
@keyframes cue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .panel__cue { animation: none; } }

.panel--hero .panel__head { margin-top: 4vh; }

/* Uvodni tekst */
.intro-band { background: var(--p-white); padding: clamp(64px, 11vh, 120px) 0; scroll-snap-align: start; }
.intro-band__inner { max-width: 940px; margin: 0 auto; text-align: center; }
.intro-band__text, .intro-band__text p { font-size: clamp(1.1rem, 1.9vw, 1.42rem); line-height: 1.6; color: var(--p-ink); font-weight: 400; }
.intro-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 1.4em; }

/* Webshop sekcija – isti stil kao hero webshopa */
.panel--shop {
	background:
		radial-gradient(1200px 400px at 85% -10%, rgba(14, 149, 67, .45), transparent 60%),
		linear-gradient(120deg, var(--p-dark) 0%, var(--p-dark-2) 55%, var(--p-dark-3) 100%);
	justify-content: center; gap: 36px; min-height: 80vh; min-height: 80svh;
}
.panel--shop::after {
	inset: 0 -60px 0 auto; width: 55%;
	background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: 46px 30px; transform: skewX(-14deg);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.panel--shop .eyebrow { color: var(--p-green-light); }
.panel--shop .panel__text { opacity: .82; }

/* Klijenti – beskonačna traka */
.clients { background: var(--p-bg); padding: clamp(56px, 9vh, 96px) 0; overflow: hidden; scroll-snap-align: start; }
.clients .section-head { text-align: center; margin-bottom: 36px; }
.marquee { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 20px; width: max-content; animation: marquee 60s linear infinite; list-style: none; margin: 0; padding: 0; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track li { flex: none; width: 180px; height: 104px; background: #fff; border-radius: var(--p-radius); box-shadow: var(--p-shadow); display: grid; place-items: center; padding: 16px 22px; }
.marquee__track img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.marquee__track li:hover img { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .marquee__track li[aria-hidden] { display: none; } }

.section-head { margin-bottom: 28px; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; }
.section-head p { color: var(--p-muted); margin: .4em 0 0; }

/* ==========================================================================
   6. Unutarnje stranice – zaglavna slika (kao hero webshopa)
   ========================================================================== */
.page-hero {
	position: relative; overflow: hidden; color: #fff;
	min-height: 58vh; min-height: 58svh;
	display: flex; align-items: flex-end;
	background: var(--p-dark);
	padding: calc(var(--header-h) + 48px) 0 56px;
}
.page-hero__bg, .page-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .08) 35%, rgba(0, 0, 0, .62)); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--p-green-light); }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 0; max-width: 18em; text-shadow: 0 1px 20px rgba(0, 0, 0, .2); }
.page-hero p { color: rgba(255, 255, 255, .86); font-size: 1.1rem; max-width: 40em; margin: .6em 0 0; }

.page-head { padding: 56px 0 8px; }
.page-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; }

.section { padding: clamp(56px, 9vh, 104px) 0; }
.section--soft { background: var(--p-bg); }
.section + .section--soft, .section--soft + .section { border-top: 0; }

.card { background: #fff; border-radius: var(--p-radius); box-shadow: var(--p-shadow); padding: clamp(22px, 3vw, 36px); }

.entry-content { font-size: 1.02rem; }
.entry-content h2 { font-size: 1.6rem; margin-top: 1.4em; }
.entry-content h2:first-child, .entry-content h3:first-child { margin-top: 0; }
.entry-content h3 { font-size: 1.15rem; margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin: .35em 0; }
.legal { padding: 8px 0 80px; }
.legal .card { padding: clamp(24px, 4vw, 48px); }

/* Kartice / pločice (Usluge) */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tile {
	position: relative; display: block; overflow: hidden; border-radius: var(--p-radius);
	aspect-ratio: 16 / 10; color: #fff; text-decoration: none; box-shadow: var(--p-shadow);
	isolation: isolate;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); z-index: -1; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 35%, rgba(0, 0, 0, .72)); }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tile__label { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 600; line-height: 1.2; }
.tile__arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--p-dark); display: grid; place-items: center; transition: transform .3s var(--ease), background .3s; }
.tile__arrow svg { width: 22px; height: 22px; }
a.tile:hover img { transform: scale(1.05); }
a.tile:hover .tile__arrow { transform: translateX(4px); background: #fff; }
a.tile:hover { color: #fff; }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } }

/* ==========================================================================
   7. Reference
   ========================================================================== */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.tabs a { display: inline-block; padding: .55em 1.15em; border-radius: 999px; background: #fff; color: var(--p-ink); text-decoration: none; font-weight: 600; font-size: .9rem; box-shadow: inset 0 0 0 1.5px var(--p-line); transition: .2s; }
.tabs a:hover { box-shadow: inset 0 0 0 1.5px var(--p-green); color: var(--p-dark); }
.tabs a.is-active { background: var(--p-dark); color: #fff; box-shadow: none; }

.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 1020px) { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ref-grid { grid-template-columns: 1fr; } }
.ref-card { background: #fff; border-radius: var(--p-radius); box-shadow: var(--p-shadow); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s var(--ease); }
.ref-card:hover { box-shadow: var(--p-shadow-hover); transform: translateY(-3px); }
.ref-card__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--p-bg); cursor: zoom-in; overflow: hidden; }
.ref-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ref-card:hover .ref-card__media img { transform: scale(1.04); }
.ref-card__count { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .62); color: #fff; font-size: .78rem; font-weight: 600; padding: .35em .7em; border-radius: 999px; backdrop-filter: blur(4px); }
.ref-card__count svg { width: 14px; height: 14px; }
.ref-card__body { padding: 20px 22px 24px; }
.ref-card__tip { display: inline-block; margin: 0 0 .7em; padding: .28em .7em .26em; border-radius: 99px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; background: var(--p-green-tint); color: var(--p-green-dark); }
.ref-card__tip--hibrid { background: #fff3d6; color: #8a5a00; }
.ref-card__tip--offgrid { background: #e3eefb; color: #1d4f8c; }
.ref-card__title { font-size: 1.05rem; line-height: 1.3; margin: 0 0 .45em; }
.ref-card__desc, .ref-card__desc p { font-size: .93rem; color: var(--p-muted); margin: 0; line-height: 1.55; }
.refs__more { text-align: center; margin-top: 44px; }

/* Pojedinačna referenca – slider */
.refs--single { padding-top: 32px; padding-bottom: 64px; }
.ref { max-width: 1000px; margin: 0 auto 40px; }
.ref__text { text-align: center; max-width: 720px; margin: 24px auto 0; }
.ref__title { font-size: 1.5rem; }
.gallery__stage { position: relative; aspect-ratio: 16/9; background: var(--p-bg); overflow: hidden; border-radius: var(--p-radius); }
.gallery__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; cursor: zoom-in; }
.gallery__slide.is-active { opacity: 1; z-index: 1; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__slide.is-portrait { background: #222 var(--blur) center/cover no-repeat; }
.gallery__slide.is-portrait::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(18px) brightness(.7); -webkit-backdrop-filter: blur(18px) brightness(.7); }
.gallery__slide.is-portrait img { position: relative; object-fit: contain; }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: var(--p-ink); cursor: pointer; display: grid; place-items: center; }
.gallery__nav svg { width: 24px; height: 24px; }
.gallery__nav--prev { left: 14px; } .gallery__nav--next { right: 14px; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; }
.gallery__thumb { flex: 0 0 110px; height: 74px; padding: 0; border: 0; cursor: pointer; opacity: .6; background: none; border-radius: var(--p-radius-sm); overflow: hidden; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active, .gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { outline: 2px solid var(--p-green); outline-offset: -2px; }

/* ==========================================================================
   8. O nama
   ========================================================================== */
.about { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.about__text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.about__text > p:first-of-type strong, .about__text > p:nth-of-type(1) { color: var(--p-ink); }
.about__text ol { list-style: none; padding: 0; margin: 1.6em 0; counter-reset: pr; display: grid; gap: 10px; }
.about__text ol li { counter-increment: pr; position: relative; background: var(--p-bg); border-radius: var(--p-radius); padding: 14px 18px 14px 62px; margin: 0; color: var(--p-ink); font-weight: 500; }
.about__text ol li::before { content: counter(pr); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 8px; background: var(--p-green-dark); color: #fff; font-weight: 700; font-size: .9rem; display: grid; place-items: center; }
.about__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: sticky; top: calc(var(--header-h) + 24px); }
.about__photos figure { margin: 0; border-radius: var(--p-radius); overflow: hidden; box-shadow: var(--p-shadow); }
.about__photos figure:first-child { grid-column: 1 / -1; }
.about__photos figure:first-child img { aspect-ratio: 16/10; }
.about__photos img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.iso { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(24px, 6vw, 80px); }
.iso img { width: 128px; height: 128px; object-fit: contain; }
.wide-img { border-radius: var(--p-radius); overflow: hidden; box-shadow: var(--p-shadow); }
.wide-img img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.director { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; overflow: hidden; padding: 0; }
.director__photo { margin: 0; position: relative; min-height: 100%; }
.director__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 90% 35%; min-height: 420px; } /* osoba je na desnoj strani fotografije */
.director__body { padding: clamp(24px, 4vw, 48px); }
.director__name { font-size: 1.6rem; margin: 0; }
.director__role { color: var(--p-green-dark); font-weight: 600; margin: .2em 0 1.2em; }
.director__bio { margin: 0; padding: 0; list-style: none; }
.director__bio li { position: relative; padding: 0 0 .8em 26px; font-size: .95rem; }
.director__bio li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--p-green); box-shadow: 0 0 0 4px var(--p-green-tint); }
.join { max-width: 760px; margin: 0 auto; }
@media (max-width: 900px) {
	.about, .director { grid-template-columns: 1fr; }
	.about__photos { position: static; }
	.director__photo img { min-height: 0; aspect-ratio: 4/3; }
}

/* ==========================================================================
   9. Kontakt
   ========================================================================== */
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -48px; position: relative; z-index: 2; }
.info-card { background: #fff; border-radius: var(--p-radius); box-shadow: var(--p-shadow-hover); padding: 24px; display: flex; gap: 16px; align-items: flex-start; color: var(--p-ink); text-decoration: none; }
a.info-card:hover { color: var(--p-ink); box-shadow: 0 0 0 2px var(--p-green), var(--p-shadow-hover); }
.info-card__icon { flex: none; width: 46px; height: 46px; border-radius: 10px; background: var(--p-green-tint); color: var(--p-green-dark); display: grid; place-items: center; }
.info-card__icon svg { width: 22px; height: 22px; }
.info-card strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--p-muted); margin-bottom: .2em; }
.info-card span { font-weight: 600; line-height: 1.45; }
.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.company dl { margin: 0; display: grid; grid-template-columns: minmax(0, 6.2em) 1fr; gap: .6em 1.2em; font-size: .95rem; } /* uži stupac oznaka: duge oznake idu u dva reda */
.company dd a[href^="tel:"] { white-space: nowrap; } /* broj telefona uvijek u jednom redu */
.company dt { color: var(--p-muted); font-weight: 500; }
.company dd { margin: 0; color: var(--p-ink); font-weight: 500; }
.company h2 { font-size: 1.25rem; }
@media (max-width: 900px) {
	.info-cards { grid-template-columns: 1fr; margin-top: -32px; }
	.contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. Obrasci (kao webshop)
   ========================================================================== */
.pdt-form__title { font-size: 1.4rem; margin-bottom: .8em; }
.pdt-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.pdt-form__field { margin: 0 0 16px; }
.pdt-form__field--poruka { grid-column: 1 / -1; }
.pdt-form label { display: block; font-size: .85rem; font-weight: 600; color: var(--p-ink); margin-bottom: 6px; }
.pdt-form input, .pdt-form textarea {
	width: 100%; font: inherit; font-size: 1rem; padding: .7em .85em;
	border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: var(--p-bg);
	transition: border-color .2s, background .2s, box-shadow .2s;
}
.pdt-form input:focus, .pdt-form textarea:focus { outline: 0; border-color: var(--p-green); background: #fff; box-shadow: 0 0 0 3px var(--p-green-tint); }
.pdt-form .pdt-btn { min-width: 200px; }
.pdt-form__privacy { font-size: .82rem; color: var(--p-muted); }
.pdt-form__hp { position: absolute; left: -9999px; }
.pdt-form__notice { padding: .9em 1.1em; border-radius: var(--p-radius-sm); font-weight: 500; }
.pdt-form__notice.is-ok { background: var(--p-green-tint); color: var(--p-dark); }
.pdt-form__notice.is-err { background: #fdeeee; color: #8a1c1c; }
@media (max-width: 520px) { .pdt-form__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   11. Podnožje (kao webshop)
   ========================================================================== */
.eu-band { background: #fff; border-top: 1px solid var(--p-line); padding: 26px 0; }
.eu-band .wrap { display: flex; align-items: center; justify-content: center; gap: 24px 40px; flex-wrap: wrap; }
.eu-band img { height: 50px; width: auto; }
.eu-band p { flex: 0 1 360px; font-size: .75rem; line-height: 1.45; margin: 0; color: var(--p-muted); }

.site-footer { background: var(--p-dark); color: rgba(255, 255, 255, .72); padding: 56px 0 0; position: relative; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #9fdcb5; }
.p-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.p-footer h3 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 1.1em; }
.p-footer p { font-size: .92rem; margin: 0 0 .6em; }
.p-footer ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.p-footer li { margin: 0 0 .6em; display: flex; gap: 10px; align-items: flex-start; }
.p-footer li svg { margin-top: .3em; color: var(--p-green-light); }
.p-footer__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: 1em; }
.p-footer__social { display: flex; gap: 10px; margin-top: 1.2em; }
.p-footer__social a { width: 38px; height: 38px; border-radius: 8px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.p-footer__social a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.p-footer__social svg { width: 18px; height: 18px; }
.p-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6em 1.5em; font-size: .82rem; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
@media (max-width: 860px) { .p-footer { grid-template-columns: 1fr; gap: 28px; } }

.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; background: var(--p-dark); color: #fff; display: grid; place-items: center; box-shadow: var(--p-shadow-hover); opacity: 0; pointer-events: none; transition: opacity .25s, background .2s; }
.to-top svg { width: 24px; height: 24px; }
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { color: #fff; background: var(--p-dark-3); }

/* Kolačići */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 980px; margin: 0 auto; background: #fff; border-radius: var(--p-radius); box-shadow: 0 10px 40px rgba(6, 40, 24, .22); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; font-size: .88rem; }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; flex: 1 1 420px; }
.cookie-bar__actions { display: flex; gap: 10px; }
.cookie-bar .pdt-btn { min-height: 40px; padding: .5em 1.2em; font-size: .88rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6, 20, 13, .95); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 4px; }
.lightbox__title { position: absolute; top: 18px; left: 24px; right: 80px; color: #fff; font-weight: 600; margin: 0; font-size: 1rem; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .08); border: 0; color: #fff; cursor: pointer; padding: 10px; border-radius: 50%; display: grid; place-items: center; }
.lightbox button:hover { background: rgba(255, 255, 255, .18); }
.lightbox button svg { width: 32px; height: 32px; }
.lightbox__close { top: 12px; right: 16px; font-size: 32px; line-height: 1; width: 52px; height: 52px; }
.lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #cfe3d6; font-size: .85rem; margin: 0; }

body.no-scroll { overflow: hidden; }

/* Ostalo */
.post-item { padding: 18px 0; border-bottom: 1px solid var(--p-line); }
.lightbox button[hidden] { display: none; }

/* ---------- Čitljivost naslova preko videa/slike (v2.1) ----------
   Mekana tamna "aureola" iza teksta + dvoslojna sjena slova: tekst je čitljiv
   i na svijetlim kadrovima (nebo, more, bijeli krovovi), a ostatak videa ostaje vidljiv. */
.panel__head { position: relative; isolation: isolate; }
.panel__head::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	inset: -70% -40%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .42), rgba(0, 0, 0, .26) 45%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, 0)); /* neutralno sivo, bez primjese boje */
}
.panel__head h1, .panel__head h2, .panel__sub, .panel__text {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 24px rgba(0, 0, 0, .35), 0 2px 40px rgba(0, 0, 0, .25);
}
.panel--hero .panel__head h1 { font-weight: 700; }
.panel--hero .panel__sub { font-weight: 600; }
.panel--hero::after {
	background: linear-gradient(rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .15) 38%, rgba(0, 0, 0, .05) 60%, rgba(0, 0, 0, .40) 100%);
}
.panel--shop .panel__head::before { display: none; }

/* ---------- Naslov PRODITUS / FUTURE IS NOW u fontu loga (v2.2) ----------
   Logo koristi široki geometrijski font (tip Eurostile/Microgramma Extended).
   Najbliži besplatni: Michroma (SIL OFL), lokalno u temi – bez Google Fonts poziva. */
@font-face {
	font-family: "Michroma";
	src: url("assets/fonts/michroma-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
.panel--hero .panel__head h1,
.panel--hero .panel__sub {
	font-family: "Michroma", var(--p-font);
	font-weight: 700;
	font-synthesis: weight;
}
.panel--hero .panel__head h1 { font-size: clamp(2rem, 5.6vw, 4.6rem); letter-spacing: .14em; margin-right: -.14em; }
.panel--hero .panel__sub { font-size: clamp(.85rem, 1.6vw, 1.15rem); letter-spacing: .32em; margin: .7em -.32em 0 0; }
/* Michroma postoji samo u jednoj debljini – "bold" se dobiva obrubom slova iste boje. */
.panel--hero .panel__head h1 { -webkit-text-stroke: .04em #fff; }
.panel--hero .panel__sub { -webkit-text-stroke: .035em #fff; }
/* FUTURE IS NOW – normalna debljina (v2.2.1) */
.panel--hero .panel__sub { font-weight: 400; -webkit-text-stroke: 0; }

/* Prijavljeni korisnik: WordPress traka na vrhu (v2.2.2) – zaglavlje i ladica izbornika idu ispod nje (JS postavlja --ab). */
@media (max-width: 1100px) {
	.admin-bar .site-nav { top: var(--ab, 0px); }
}

/* ==========================================================================
   Animacija naslova na naslovnici (v2.3)
   1) slova PRODITUS ulaze jedno za drugim (odozdo, iz zamućenja)
   2) zelena linija se iscrta ispod naslova
   3) FUTURE IS NOW se "skupi" iz širokog razmaka
   4) mekani zeleni sjaj iza naslova pojača se i utiša svakih 10 s
   Isključeno kad korisnik ima uključeno "smanji animacije".
   ========================================================================== */
.hero-title { position: relative; display: inline-block; white-space: nowrap; }
.hero-title__ch {
	display: inline-block;
	opacity: 0;
	transform: translate3d(0, .45em, 0) scale(.96);
	filter: blur(10px);
	backface-visibility: hidden;
	/* Svako slovo cijelo vrijeme na svom sloju: inače preglednik dok ulaze sljedeća slova
	   spaja/razdvaja slojeve već ušlih slova i ona se pomaknu za djelić piksela ("poskakuju"). */
	will-change: transform, opacity, filter;
	animation: heroLetter 1s var(--ease) forwards;
	animation-delay: calc(.25s + var(--i) * .075s);
}
/* Kraj ostaje na "translate3d(0,0,0) scale(1)" (ne "none"), da preglednik na kraju ne prebaci slova na drugi način iscrtavanja – to je davalo mali "trzaj". */
@keyframes heroLetter { to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } }
/* Dok se font loga ne učita, animacije naslova čekaju (inače slova usred animacije promijene širinu i poskoče). */
.pdt-fonts-wait .hero-anim, .pdt-fonts-wait .hero-anim *, .pdt-fonts-wait .hero-actions { animation-play-state: paused !important; }

/* Zeleni sjaj (varijanta 3): mekani zeleni sjaj iza slova polako se pojača i utiša, svakih 10 s (sjaj traje 5 s, zatim 5 s mirno).
   (Prijašnji odsjaj preko slova – heroShine – uklonjen.) */
.panel--hero .hero-title {
	--hero-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 24px rgba(0, 0, 0, .35), 0 2px 40px rgba(0, 0, 0, .25);
	animation: heroGlow 10s ease-in-out 2.1s infinite;
}
@keyframes heroGlow {
	0%, 50%, 100% { text-shadow: var(--hero-shadow); }
	25% { text-shadow: var(--hero-shadow), 0 0 18px rgba(14, 149, 67, .85), 0 0 42px rgba(14, 149, 67, .55); }
}


.hero-line {
	display: block; position: relative; height: 3px; width: 0; margin: .55em auto .1em;
	border-radius: 3px;
	/* bijela linija (stalno), zelena se "ulijeva" u nju u ritmu sjaja naslova */
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 20%, #fff 50%, rgba(255, 255, 255, .95) 80%, transparent);
	box-shadow: 0 0 10px rgba(255, 255, 255, .35);
	animation: heroLine .9s var(--ease) 1.05s forwards;
}
@keyframes heroLine { to { width: min(260px, 50%); } }
.hero-line::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	background: linear-gradient(90deg, transparent, var(--p-green) 20%, var(--p-green-light) 50%, var(--p-green) 80%, transparent);
	box-shadow: 0 0 14px rgba(14, 149, 67, .7);
	transform: scaleX(0); opacity: 0;
	animation: heroLineFill 10s ease-in-out 2.1s infinite; /* isti ritam kao sjaj naslova (heroGlow) */
}
@keyframes heroLineFill {
	0% { transform: scaleX(0); opacity: 1; }
	25% { transform: scaleX(1); opacity: 1; }
	50%, 100% { transform: scaleX(1); opacity: 0; }
}

.panel--hero .hero-sub { opacity: 0; animation: heroSub 1.2s var(--ease) 1.35s forwards; }
@keyframes heroSub {
	from { opacity: 0; letter-spacing: .9em; filter: blur(4px); }
	to { opacity: .95; letter-spacing: .32em; filter: blur(0); }
}

.hero-actions { opacity: 0; transform: translateY(16px); animation: heroUp .8s var(--ease) 2s forwards; }
@keyframes heroUp { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.hero-title__ch, .panel--hero .hero-sub, .hero-actions { opacity: 1; transform: none; filter: none; animation: none; }
	.panel--hero .hero-sub { opacity: .95; }
	.hero-line { width: min(260px, 50%); animation: none; }
	.hero-line::after { animation: none; }
	.panel--hero .hero-title { animation: none; }
}

/* Naslovna traka: na mobitelu kraći naziv podkategorije ("Reference · Industrijske") */
.eb-short { display: none; }
@media (max-width: 767px) { .eyebrow__sub .eb-full { display: none; } .eyebrow__sub .eb-short { display: inline; } }

/* Naslovna traka na mobitelu: font prema širini ekrana, da duge riječi ("ELEKTROINSTALACIJE") stanu u jedan red */
@media (max-width: 767px) {
	.page-hero h1 { font-size: clamp(1.45rem, 7.6vw, 2.4rem); overflow-wrap: break-word; hyphens: manual; }
}