/*
 * Pleria Child: stilovi prema designu Pleria Development.
 *
 * 1. Tokeni (sve vrijednosti iz designa, :root)
 * 2. Osnova i tipografija
 * 3. Gumbi i poveznice
 * 4. Zaglavlje i podnožje
 * 5. Komponente iz designa (kartice radionica, stranica radionice, obrasci, kontakt)
 * 6. Elementor: klase pl-* za containere i widgete
 * 7. Contact Form 7
 * 8. Objave (Novosti) i ostale stranice izvan Elementora
 * 9. Prijelomi (tablet, mobitel)
 */

/* 1. Tokeni ------------------------------------------------------------- */

:root {
	/* Boje */
	--color-petrol: #087b80;
	--color-petrol-deep: #066468;
	--color-turquoise: #6aadb0;
	--color-turquoise-soft: #a9cfd1;
	--color-gold: #ddae59;
	--color-gold-soft: #f4e6c8;
	--color-white-warm: #f5efe6;
	--color-white: #fff;
	--color-paper: #fbf8f3;
	--color-sand: #ede4d5;
	--color-mist: #d9eaea;
	--color-ink: #1f3a3c;
	--color-ink-soft: #4b6567;
	--color-line: #dcd2c1;
	--color-line-strong: #8a9795;
	--color-error: #9b2c2c;

	/* Fontovi */
	--font-heading: "Marcellus", "Georgia", serif;
	--font-body: "Jost", "Helvetica Neue", "Arial", sans-serif;

	/* Veličine fonta */
	--fs-xs: 0.8125rem;
	--fs-s: 0.9375rem;
	--fs-m: 1.0625rem;
	--fs-l: 1.25rem;
	--fs-xl: clamp(1.375rem, 2.2vw, 1.75rem);
	--fs-h2: clamp(1.875rem, 3.4vw, 2.75rem);
	--fs-h1: clamp(2.375rem, 5.2vw, 4rem);
	--fw-regular: 400;
	--fw-medium: 500;
	--lh-tight: 1.15;
	--lh-snug: 1.45;
	--lh-body: 1.65;
	--ls-wide: 0.16em;
	--ls-normal: 0.02em;

	/* Razmaci */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.5rem;
	--space-xl: 4rem;
	--space-section: clamp(3.5rem, 8vw, 7rem);
	--space-hero: clamp(2.5rem, 6vw, 5.5rem);
	--space-page: clamp(1.25rem, 5vw, 3.5rem);
	--gap-card: clamp(1rem, 2.4vw, 2rem);

	/* Dimenzije */
	--container: 77rem;
	--container-narrow: 52rem;
	--measure: 40rem;
	--measure-s: 22rem;
	--card-min: 15.5rem;
	--workshop-min: 20rem;
	--card-media-w: 38%;
	--card-scroll-w: 82%;
	--step-min: 15rem;
	--step-size: 3rem;
	--field-min: 14rem;
	--textarea-h: 9rem;
	--fact-label-w: 4.5rem;
	--logo-h-header: clamp(3.5rem, 8vw, 4.5rem);
	--logo-h-footer: 6.5rem;
	--photo-h-card: 13rem;
	--photo-h-hero: clamp(20rem, 42vw, 34rem);
	--photo-h-wide: clamp(15rem, 34vw, 28rem);
	--photo-h-portrait: clamp(20rem, 40vw, 34rem);
	--btn-h: 3rem;
	--dot: 0.5rem;
	--dot-s: 0.4rem;
	--dot-offset: 0.6rem;
	--bar-w: 1.25rem;
	--bar-h: 0.125rem;
	--bar-gap: 0.3rem;

	/* Oblik */
	--radius-s: 0.5rem;
	--radius-m: 1rem;
	--radius-l: 1.5rem;
	--radius-pill: 62rem;
	--border-w: 1px;
	--border-accent: 0.125rem;
}

/* 2. Osnova i tipografija ------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
}

body {
	background: var(--color-white-warm);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-m);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--fw-regular);
	line-height: var(--lh-tight);
	color: var(--color-petrol);
}

p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:active {
	color: inherit;
}

:focus-visible {
	outline: var(--border-accent) solid var(--color-gold);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

.screen-reader-text:focus {
	background: var(--color-paper);
	color: var(--color-ink);
}

/* Raspored stranice (predlošci izvan Elementora) */
.main {
	display: flex;
	flex-direction: column;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--space-page);
}

.container-narrow {
	width: 100%;
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding-inline: var(--space-page);
}

.section {
	display: flex;
	flex-direction: column;
	padding-block: var(--space-section);
}

.section-tight {
	display: flex;
	flex-direction: column;
	padding-top: var(--space-m);
}

.section-tint {
	background: var(--color-sand);
}

.section-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
}

.hero {
	padding-block: var(--space-hero);
}

/* Tipografija */
.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-petrol-deep);
}

.dot-gold {
	flex: none;
	width: var(--dot);
	height: var(--dot);
	border-radius: var(--radius-pill);
	background: var(--color-gold);
}

.title-hero {
	font-size: var(--fs-h1);
}

.title-section {
	font-size: var(--fs-h2);
}

.title-card {
	font-size: var(--fs-xl);
}

.title-small {
	font-size: var(--fs-l);
}

.lead {
	font-size: var(--fs-l);
	line-height: var(--lh-snug);
	color: var(--color-ink-soft);
}

.text-body {
	font-size: var(--fs-m);
	color: var(--color-ink-soft);
}

.text-small {
	font-size: var(--fs-s);
	color: var(--color-ink-soft);
}

.section-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	max-width: var(--measure);
}

.text-block {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	max-width: var(--measure);
}

.list-dots {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	max-width: var(--measure);
}

.list-dots-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-s);
	color: var(--color-ink-soft);
}

.list-dots-item .dot-gold {
	margin-top: var(--dot-offset);
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	font-size: var(--fs-s);
	color: var(--color-ink-soft);
}

.breadcrumb-link {
	color: var(--color-petrol-deep);
	text-decoration: underline;
}

/* 3. Gumbi i poveznice --------------------------------------------------- */

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
}

.button-primary,
.button-secondary,
.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-h);
	padding: 0 var(--space-m);
	border: var(--border-w) solid var(--color-petrol);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-s);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	letter-spacing: var(--ls-normal);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button-primary,
.elementor-widget-button .elementor-button {
	background: var(--color-petrol);
	color: var(--color-white);
}

.button-primary:hover,
.button-primary:focus-visible,
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible {
	background: var(--color-petrol-deep);
	border-color: var(--color-petrol-deep);
	color: var(--color-white);
}

.button-secondary,
.elementor-widget-button.pl-btn-secondary .elementor-button {
	background: transparent;
	color: var(--color-petrol-deep);
}

.button-secondary:hover,
.button-secondary:focus-visible,
.elementor-widget-button.pl-btn-secondary .elementor-button:hover,
.elementor-widget-button.pl-btn-secondary .elementor-button:focus-visible {
	background: var(--color-mist);
	border-color: var(--color-petrol);
	color: var(--color-petrol-deep);
}

.link-arrow,
.elementor-widget-button.pl-link-arrow .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: var(--fs-s);
	font-weight: var(--fw-medium);
	color: var(--color-petrol-deep);
}

.link-arrow:hover,
.link-arrow:focus-visible,
.elementor-widget-button.pl-link-arrow .elementor-button:hover,
.elementor-widget-button.pl-link-arrow .elementor-button:focus-visible {
	background: none;
	color: var(--color-petrol-deep);
	text-decoration: underline;
}

/* 4. Zaglavlje i podnožje ----------------------------------------------- */

.site-header {
	background: var(--color-white-warm);
	border-bottom: var(--border-w) solid var(--color-line);
}

.header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-m);
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-xs) var(--space-page);
}

.brand-link {
	display: flex;
	align-items: center;
	flex: none;
}

.logo-img {
	display: block;
	width: auto;
	height: var(--logo-h-header);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: var(--space-m);
}

.nav-link {
	padding: var(--space-2xs) 0;
	border-bottom: var(--border-accent) solid transparent;
	font-size: var(--fs-s);
	color: var(--color-ink);
}

.nav-link:hover {
	color: var(--color-petrol-deep);
}

.nav-link-current {
	color: var(--color-petrol-deep);
	border-bottom-color: var(--color-gold);
}

.site-header .nav-toggle {
	display: none;
	align-items: center;
	gap: var(--space-xs);
	min-height: var(--btn-h);
	padding: 0 var(--space-s);
	background: transparent;
	border: var(--border-w) solid var(--color-petrol);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-s);
	font-weight: var(--fw-medium);
	color: var(--color-petrol-deep);
	cursor: pointer;
}

.site-header .nav-toggle:hover,
.site-header .nav-toggle:focus {
	background: var(--color-mist);
	color: var(--color-petrol-deep);
}

.nav-toggle-bars {
	display: flex;
	flex-direction: column;
	gap: var(--bar-gap);
}

.nav-toggle-bar {
	width: var(--bar-w);
	height: var(--bar-h);
	border-radius: var(--radius-pill);
	background: var(--color-petrol-deep);
}

.site-footer {
	background: var(--color-white-warm);
	border-top: var(--border-w) solid var(--color-line);
	padding-block: var(--space-xl) var(--space-m);
}

.footer-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xl) var(--space-l);
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--space-page);
}

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	flex: 1 1 var(--measure-s);
	max-width: var(--measure-s);
}

.logo-img-footer {
	display: block;
	align-self: flex-start;
	width: auto;
	height: var(--logo-h-footer);
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	flex: 0 1 var(--measure-s);
}

.footer-title {
	font-family: var(--font-heading);
	font-size: var(--fs-l);
	color: var(--color-petrol);
}

.footer-link,
.footer-contact p,
.footer-contact a {
	font-size: var(--fs-s);
	color: var(--color-ink-soft);
}

.footer-link:hover,
.footer-contact a:hover {
	color: var(--color-petrol-deep);
	text-decoration: underline;
}

.footer-contact .footer-title {
	font-family: var(--font-heading);
	font-size: var(--fs-l);
	color: var(--color-petrol);
}

.footer-contact .footer-widget,
.footer-contact .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xs);
	width: 100%;
	max-width: var(--container);
	margin: var(--space-xl) auto 0;
	padding: var(--space-m) var(--space-page) 0;
	border-top: var(--border-w) solid var(--color-line);
	font-size: var(--fs-xs);
	color: var(--color-ink-soft);
}

/* 5. Komponente iz designa ----------------------------------------------- */

/* Fotografije: mirne plohe u bojama brenda dok nema pravih fotografija */
.photo {
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: var(--photo-h-card);
	padding: var(--space-s);
	border-radius: var(--radius-m);
	background: var(--color-mist);
	overflow: hidden;
}

/* WordPress avatari (traka administracije, komentari) također imaju klasu "photo". */
img.photo {
	min-height: 0;
	padding: 0;
	background: none;
}

.photo-hero {
	min-height: var(--photo-h-hero);
	border-radius: var(--radius-l);
}

.photo-tone-mist {
	background: var(--color-mist);
}

.photo-tone-sand {
	background: var(--color-sand);
}

.photo-tone-turquoise {
	background: var(--color-turquoise-soft);
}

.photo-tone-gold {
	background: var(--color-gold-soft);
}

.photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-has-img {
	position: relative;
	padding: 0;
}

.photo-has-img .photo-img {
	position: absolute;
	inset: 0;
}

/* Kartica radionice */
.row-workshops {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-card);
}

.card-workshop {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 var(--workshop-min);
	overflow: hidden;
	background: var(--color-paper);
	border: var(--border-w) solid var(--color-line);
	border-radius: var(--radius-m);
}

.card-workshop-media {
	display: flex;
	flex: none;
}

.card-workshop .photo {
	border-radius: 0;
}

.card-workshop-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	flex: 1 1 auto;
	padding: var(--space-m);
}

.card-workshop-body .link-arrow {
	margin-top: auto;
}

.card-workshop-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
}

.card-workshop .title-card a:hover {
	color: var(--color-petrol-deep);
}

.tag-kind {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-petrol-deep);
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-3xs) var(--space-xs);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

.status-open {
	background: var(--color-mist);
	color: var(--color-petrol-deep);
}

.status-full {
	background: var(--color-gold-soft);
	color: var(--color-ink);
}

.status-dot {
	width: var(--dot-s);
	height: var(--dot-s);
	border-radius: var(--radius-pill);
	background: var(--color-petrol);
}

.status-full .status-dot {
	background: var(--color-gold);
}

.facts {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	margin: 0;
}

.fact {
	display: flex;
	gap: var(--space-xs);
	font-size: var(--fs-s);
}

.fact-label {
	flex: 0 0 var(--fact-label-w);
	font-weight: var(--fw-regular);
	color: var(--color-ink-soft);
}

.fact-value {
	margin: 0;
	color: var(--color-ink);
}

.workshops-empty {
	max-width: var(--measure);
	padding: var(--space-m);
	background: var(--color-paper);
	border: var(--border-w) solid var(--color-line);
	border-radius: var(--radius-m);
	color: var(--color-ink-soft);
}

/* Filter Sve / Radionice / Retreatovi */
.row-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: var(--btn-h);
	padding: 0 var(--space-m);
	background: transparent;
	border: var(--border-w) solid var(--color-line-strong);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-s);
	color: var(--color-ink);
}

.chip:hover {
	border-color: var(--color-petrol);
	color: var(--color-petrol-deep);
}

.chip-active,
.chip-active:hover {
	background: var(--color-petrol);
	border-color: var(--color-petrol);
	color: var(--color-white);
}

/* Stranica radionice */
.workshop-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-xl);
}

.workshop-main {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	flex: 2 1 28rem;
	min-width: 0;
}

.workshop-aside {
	display: flex;
	flex-direction: column;
	flex: 1 1 20rem;
}

.workshop-block,
.workshop-main > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

.workshop-main .wp-block-group > * {
	margin: 0;
}

.workshop-main h2 {
	font-size: var(--fs-xl);
}

.workshop-main > .wp-block-group:first-child h2 {
	font-size: var(--fs-h2);
}

.workshop-main p {
	font-size: var(--fs-m);
	color: var(--color-ink-soft);
}

.workshop-main ul,
.workshop-main ol {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	max-width: var(--measure);
	padding: 0;
	list-style: none;
}

.workshop-main li {
	position: relative;
	padding-left: calc(var(--dot) + var(--space-s));
	color: var(--color-ink-soft);
}

.workshop-main li::before {
	content: "";
	position: absolute;
	top: var(--dot-offset);
	left: 0;
	width: var(--dot);
	height: var(--dot);
	border-radius: var(--radius-pill);
	background: var(--color-gold);
}

.card-facts {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: var(--space-m);
	background: var(--color-paper);
	border: var(--border-w) solid var(--color-line);
	border-radius: var(--radius-m);
}

.fact-block {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding-bottom: var(--space-s);
	border-bottom: var(--border-w) solid var(--color-line);
}

.fact-block-label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-ink-soft);
}

.fact-block-value {
	font-family: var(--font-heading);
	font-size: var(--fs-l);
	color: var(--color-petrol);
}

.fact-block-note {
	font-size: var(--fs-s);
	color: var(--color-ink-soft);
}

.fact-block-status {
	align-self: flex-start;
}

/* Obrasci */
.form-split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-xl);
}

.form-intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	flex: 1 1 20rem;
}

.form-side {
	display: flex;
	flex-direction: column;
	flex: 1.4 1 26rem;
	min-width: 0;
}

.form-card {
	padding: var(--space-l);
	background: var(--color-paper);
	border: var(--border-w) solid var(--color-line);
	border-radius: var(--radius-l);
}

.fields-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
}

.fields-row .field {
	flex: 1 1 var(--field-min);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.field-label {
	font-size: var(--fs-s);
	font-weight: var(--fw-medium);
	color: var(--color-ink);
}

/* Kontakt */
.card-contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	padding: var(--space-m);
	background: var(--color-paper);
	border: var(--border-w) solid var(--color-line);
	border-radius: var(--radius-m);
}

.contact-line {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.contact-label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-ink-soft);
}

.contact-value {
	font-size: var(--fs-m);
	color: var(--color-ink);
}

/* 6. Elementor ----------------------------------------------------------- */

/*
 * Containeri dobivaju klase pl-* (Napredno > CSS klase). Razmaci se postavljaju
 * preko Elementor varijabli, pa vrijednost upisana u panelu i dalje ima prednost.
 */

.elementor-widget-text-editor p + p,
.elementor-widget-text-editor p + ul,
.elementor-widget-text-editor ul + p {
	margin-top: var(--space-s);
}

/* Naslovi po razini */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--font-heading);
	font-weight: var(--fw-regular);
	line-height: var(--lh-tight);
	color: var(--color-petrol);
}

.elementor-widget-heading h1.elementor-heading-title {
	font-size: var(--fs-h1);
}

.elementor-widget-heading h2.elementor-heading-title {
	font-size: var(--fs-h2);
}

.elementor-widget-heading h3.elementor-heading-title {
	font-size: var(--fs-xl);
}

.elementor-widget-heading.pl-title-small .elementor-heading-title {
	font-size: var(--fs-l);
}

.elementor-widget-heading.pl-title-card .elementor-heading-title {
	font-size: var(--fs-xl);
}

/* Nadnaslov sa zlatnom točkom */
.elementor-widget-heading.pl-eyebrow .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-petrol-deep);
}

.elementor-widget-heading.pl-eyebrow .elementor-heading-title::before {
	content: "";
	flex: none;
	width: var(--dot);
	height: var(--dot);
	border-radius: var(--radius-pill);
	background: var(--color-gold);
}

/* Tekst */
.elementor-widget-text-editor {
	font-family: var(--font-body);
	font-size: var(--fs-m);
	line-height: var(--lh-body);
	color: var(--color-ink-soft);
}

.elementor-widget-text-editor a {
	color: var(--color-petrol-deep);
	text-decoration: underline;
}

.elementor-widget-text-editor.pl-lead {
	font-size: var(--fs-l);
	line-height: var(--lh-snug);
}

.elementor-widget-text-editor.pl-list-dots ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	max-width: var(--measure);
	padding: 0;
	list-style: none;
}

.elementor-widget-text-editor.pl-list-dots li {
	position: relative;
	padding-left: calc(var(--dot) + var(--space-s));
}

.elementor-widget-text-editor.pl-list-dots li::before {
	content: "";
	position: absolute;
	top: var(--dot-offset);
	left: 0;
	width: var(--dot);
	height: var(--dot);
	border-radius: var(--radius-pill);
	background: var(--color-gold);
}

/* Sekcije (vanjski containeri) */
.e-con.pl-hero,
.e-con.pl-section {
	--padding-left: var(--space-page);
	--padding-right: var(--space-page);
	--row-gap: var(--space-l);
	--column-gap: var(--space-l);
}

.e-con.pl-hero {
	--padding-top: var(--space-hero);
	--padding-bottom: var(--space-hero);
}

.e-con.pl-section {
	--padding-top: var(--space-section);
	--padding-bottom: var(--space-section);
}

.e-con.pl-section-tight {
	--padding-top: var(--space-m);
	--padding-bottom: 0;
}

.e-con.pl-tint {
	background-color: var(--color-sand);
}

.e-con.pl-narrow > .e-con-inner {
	max-width: calc(var(--container-narrow) - 2 * var(--space-page));
}

/* Dvostupčani raspored: tekst i fotografija */
.e-con.pl-split {
	--row-gap: var(--space-xl);
	--column-gap: var(--space-xl);
}

.e-con.pl-split > .e-con-inner,
.e-con-full.pl-split {
	align-items: center;
}

.e-con.pl-col-text,
.e-con.pl-col-media {
	--width: auto;
	--flex-grow: 1;
	--flex-shrink: 1;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--row-gap: var(--space-m);
	--column-gap: var(--space-m);
}

.e-con.pl-col-text {
	--flex-basis: 26rem;
}

.e-con.pl-col-media {
	--flex-basis: 24rem;
}

.e-con.pl-col-media.pl-col-narrow {
	--flex-basis: 22rem;
}

/* Skupine teksta */
.e-con.pl-section-head,
.e-con.pl-text-block,
.e-con.pl-stack {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--row-gap: var(--space-xs);
	--column-gap: var(--space-xs);
	max-width: var(--measure);
}

.e-con.pl-text-block {
	--row-gap: var(--space-s);
}

.e-con.pl-stack {
	--row-gap: var(--space-m);
	max-width: none;
}

.e-con.pl-button-row {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--row-gap: var(--space-s);
	--column-gap: var(--space-s);
}

.e-con.pl-button-row > .elementor-widget {
	width: auto;
}

/* Redovi kartica i koraka */
.e-con.pl-row-cards,
.e-con.pl-row-steps {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--row-gap: var(--gap-card);
	--column-gap: var(--gap-card);
}

.e-con.pl-card-service,
.e-con.pl-card-audience,
.e-con.pl-card-principle,
.e-con.pl-step {
	--width: auto;
	--flex-grow: 1;
	--flex-shrink: 1;
	--flex-basis: var(--card-min);
	--padding-top: var(--space-m);
	--padding-right: var(--space-m);
	--padding-bottom: var(--space-m);
	--padding-left: var(--space-m);
	--row-gap: var(--space-s);
	--column-gap: var(--space-s);
	background-color: var(--color-paper);
	border: var(--border-w) solid var(--color-line);
	border-radius: var(--radius-m);
}

.e-con.pl-card-service {
	--row-gap: var(--space-xs);
}

.e-con.pl-card-service::after {
	content: "";
	order: -1;
	flex: none;
	margin-bottom: calc(var(--space-s) - var(--space-xs));
	width: var(--dot);
	height: var(--dot);
	border-radius: var(--radius-pill);
	background: var(--color-gold);
}

.e-con.pl-card-audience {
	--flex-basis: var(--measure-s);
	--padding-top: var(--space-l);
	--padding-bottom: var(--space-l);
	--row-gap: var(--space-m);
	background-color: var(--color-mist);
	border-color: var(--color-mist);
}

.e-con.pl-card-principle {
	background-color: var(--color-white-warm);
}

.e-con.pl-step {
	--flex-basis: var(--step-min);
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--row-gap: var(--space-xs);
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

.elementor-widget-heading.pl-step-number .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--step-size);
	height: var(--step-size);
	border: var(--border-accent) solid var(--color-gold);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: var(--fs-l);
	color: var(--color-petrol-deep);
}

/* Poziv na kontakt */
.e-con.pl-band-cta {
	--padding-top: var(--space-xl);
	--padding-right: var(--space-l);
	--padding-bottom: var(--space-xl);
	--padding-left: var(--space-l);
	--row-gap: var(--space-m);
	--column-gap: var(--space-m);
	align-items: flex-start;
	background-color: var(--color-mist);
	border-radius: var(--radius-l);
}

.e-con.pl-band-cta > .elementor-widget {
	max-width: var(--measure);
}

/* Citat */
.e-con.pl-quote {
	--padding-top: var(--space-xl);
	--padding-right: var(--space-l);
	--padding-bottom: var(--space-xl);
	--padding-left: var(--space-l);
	--row-gap: var(--space-m);
	align-items: center;
	text-align: center;
	background-color: var(--color-paper);
	border: var(--border-w) solid var(--color-line);
	border-radius: var(--radius-l);
}

.e-con.pl-quote::after {
	content: "";
	order: -1;
	flex: none;
	width: var(--dot);
	height: var(--dot);
	border-radius: var(--radius-pill);
	background: var(--color-gold);
}

.elementor-widget-text-editor.pl-quote-text {
	max-width: var(--container-narrow);
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	line-height: var(--lh-snug);
	color: var(--color-petrol);
}

.elementor-widget-text-editor.pl-quote-author {
	font-size: var(--fs-s);
	letter-spacing: var(--ls-normal);
	color: var(--color-ink-soft);
}

/* Fotografije: zamijeni pozadinsku sliku containera (Stil > Pozadina) */
.e-con.pl-photo {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--min-height: var(--photo-h-card);
	background-color: var(--color-mist);
	background-position: center;
	background-size: cover;
	border-radius: var(--radius-m);
}

.e-con.pl-photo-hero {
	--min-height: var(--photo-h-hero);
	border-radius: var(--radius-l);
}

.e-con.pl-photo-wide {
	--min-height: var(--photo-h-wide);
	border-radius: var(--radius-l);
}

.e-con.pl-photo-portrait {
	--min-height: var(--photo-h-portrait);
	border-radius: var(--radius-l);
}

.e-con.pl-tone-sand {
	background-color: var(--color-sand);
}

.e-con.pl-tone-turquoise {
	background-color: var(--color-turquoise-soft);
}

.e-con.pl-tone-gold {
	background-color: var(--color-gold-soft);
}

/* Kontakt i obrazac */
.e-con.pl-form-split {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--row-gap: var(--space-xl);
	--column-gap: var(--space-xl);
	align-items: flex-start;
}

.e-con.pl-form-intro,
.e-con.pl-form-side {
	--width: auto;
	--flex-grow: 1;
	--flex-shrink: 1;
	--flex-basis: 20rem;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--row-gap: var(--space-m);
}

.e-con.pl-form-side {
	--flex-grow: 1.4;
	--flex-basis: 26rem;
}

.e-con.pl-form-card {
	--padding-top: var(--space-l);
	--padding-right: var(--space-l);
	--padding-bottom: var(--space-l);
	--padding-left: var(--space-l);
	background-color: var(--color-paper);
	border: var(--border-w) solid var(--color-line);
	border-radius: var(--radius-l);
}

.e-con.pl-card-contact {
	--padding-top: var(--space-m);
	--padding-right: var(--space-m);
	--padding-bottom: var(--space-m);
	--padding-left: var(--space-m);
	--row-gap: var(--space-m);
	background-color: var(--color-paper);
	border: var(--border-w) solid var(--color-line);
	border-radius: var(--radius-m);
}

.e-con.pl-contact-line {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--row-gap: var(--space-3xs);
}

.elementor-widget-heading.pl-contact-label .elementor-heading-title {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-ink-soft);
}

.elementor-widget-text-editor.pl-contact-value {
	color: var(--color-ink);
}

.elementor-widget-text-editor.pl-contact-value a,
.elementor-widget-text-editor a.link-email {
	color: var(--color-petrol-deep);
	text-decoration: underline;
}

/* 7. Contact Form 7 ------------------------------------------------------ */

.wpcf7 form {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7 .field-input {
	width: 100%;
	min-height: var(--btn-h);
	padding: var(--space-xs) var(--space-s);
	background: var(--color-white);
	border: var(--border-w) solid var(--color-line-strong);
	border-radius: var(--radius-s);
	font-family: var(--font-body);
	font-size: var(--fs-m);
	line-height: var(--lh-snug);
	color: var(--color-ink);
}

.wpcf7 .field-input:focus {
	border-color: var(--color-petrol);
	outline: var(--border-accent) solid var(--color-mist);
	outline-offset: 0;
}

.wpcf7 .field-input-multiline {
	height: var(--textarea-h);
	min-height: var(--textarea-h);
	resize: vertical;
}

.wpcf7 .field-input-readonly,
.wpcf7 .field-input[readonly] {
	background: var(--color-sand);
}

.wpcf7 .wpcf7-submit.button-primary {
	align-self: flex-start;
	padding: 0 var(--space-m);
}

.wpcf7 .wpcf7-submit.button-primary:hover,
.wpcf7 .wpcf7-submit.button-primary:focus {
	background: var(--color-petrol-deep);
	border-color: var(--color-petrol-deep);
	color: var(--color-white);
}

.wpcf7 .form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
}

.wpcf7 .wpcf7-spinner {
	margin: 0;
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: var(--space-3xs);
	font-size: var(--fs-s);
	color: var(--color-error);
}

.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: var(--space-xs) var(--space-s);
	border: var(--border-w) solid var(--color-line);
	border-radius: var(--radius-s);
	background: var(--color-white);
	font-size: var(--fs-s);
	color: var(--color-ink);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--color-petrol);
	background: var(--color-mist);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--color-gold);
	background: var(--color-gold-soft);
}

/* 8. Objave i stranice izvan Elementora --------------------------------- */

.site-main {
	width: 100%;
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: var(--space-section) var(--space-page);
}

.site-main .page-header {
	margin-bottom: var(--space-l);
}

.site-main .entry-title {
	font-size: var(--fs-h1);
}

.site-main .page-content > * + * {
	margin-top: var(--space-s);
}

.site-main .page-content h2 {
	margin-top: var(--space-l);
	font-size: var(--fs-h2);
}

.site-main .page-content h3 {
	margin-top: var(--space-m);
	font-size: var(--fs-xl);
}

.site-main .page-content p,
.site-main .page-content li {
	color: var(--color-ink-soft);
}

.site-main .page-content ul {
	padding-left: var(--space-m);
	list-style: disc;
}

.site-main .page-content a {
	color: var(--color-petrol-deep);
	text-decoration: underline;
}

.site-main .post-tags,
.site-main .comments-area {
	display: none;
}

/* 9. Prijelomi ----------------------------------------------------------- */

/* Navigacija se sažima na tabletu i mobitelu */
@media (max-width: 1100px) {
	.site-header .nav-toggle {
		display: inline-flex;
	}

	.nav-links {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: var(--space-s);
	}

	.nav-links-open {
		display: flex;
	}

	.nav-link {
		padding: var(--space-s) 0;
		border-bottom: var(--border-w) solid var(--color-line);
	}

	.nav-link-current {
		border-bottom-color: var(--color-gold);
	}

	.nav-cta {
		margin-top: var(--space-s);
	}

	.workshop-aside {
		order: -1;
	}
}

/* Tablet: kartice radionica postaju vodoravne */
@media (min-width: 641px) and (max-width: 1100px) {
	.row-workshops .card-workshop {
		flex-direction: row;
		flex-basis: 100%;
	}

	.row-workshops .card-workshop-media {
		flex-basis: var(--card-media-w);
	}

	.row-workshops .card-workshop .photo {
		min-height: 100%;
	}

	.e-con.pl-band-cta {
		--padding-top: var(--space-l);
		--padding-bottom: var(--space-l);
	}
}

/* Mobitel: namjerno složen raspored */
@media (max-width: 640px) {
	.e-con.pl-split,
	.e-con.pl-form-split,
	.workshop-layout,
	.form-split {
		--row-gap: var(--space-l);
		--column-gap: var(--space-l);
		gap: var(--space-l);
	}

	.e-con.pl-button-row {
		--flex-direction: column;
		flex-direction: column;
	}

	.e-con.pl-button-row > .elementor-widget,
	.e-con.pl-button-row .elementor-button {
		width: 100%;
	}

	.e-con.pl-band-cta {
		--padding-top: var(--space-l);
		--padding-right: var(--space-m);
		--padding-bottom: var(--space-l);
		--padding-left: var(--space-m);
	}

	.e-con.pl-band-cta > .elementor-widget-button,
	.e-con.pl-band-cta .elementor-button {
		width: 100%;
	}

	/* Kartica usluge: točka lijevo od teksta */
	.e-con.pl-card-service {
		position: relative;
		--padding-left: calc(var(--space-m) + var(--dot) + var(--space-s));
		--row-gap: var(--space-xs);
	}

	.e-con.pl-card-service::after {
		position: absolute;
		top: calc(var(--space-m) + var(--dot-offset) + 0.15rem);
		left: var(--space-m);
	}

	.row-scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(var(--space-page) * -1);
		padding: 0 var(--space-page) var(--space-s);
	}

	.row-scroll .card-workshop {
		flex: 0 0 var(--card-scroll-w);
		scroll-snap-align: start;
	}

	.form-card {
		padding: var(--space-m);
	}

	.e-con.pl-form-card {
		--padding-top: var(--space-m);
		--padding-right: var(--space-m);
		--padding-bottom: var(--space-m);
		--padding-left: var(--space-m);
	}

	.wpcf7 .wpcf7-submit.button-primary {
		align-self: stretch;
		width: 100%;
	}

	.footer-bottom {
		flex-direction: column;
	}

	.fields-row .field {
		flex-basis: 100%;
	}
}