/*
Theme Name: Meridian Advisory
Description: Tema za Meridian Advisory. Klasična PHP tema, sadržaj u blok uređivaču.
Version: 0.1
Requires PHP: 8.0
Text Domain: meridian
*/

/* Fontovi su u temi, ne s Google Fontsa: nema prijenosa IP adrese posjetitelja trećoj strani. */
@font-face { font-family: "Cormorant Garamond"; src: url(assets/fonts/cormorant-garamond-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(assets/fonts/cormorant-garamond-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(assets/fonts/cormorant-garamond-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(assets/fonts/cormorant-garamond-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(assets/fonts/Manrope-VariableFont_wght.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
	--navy: #13203a;
	--navy-2: #1c2c4b;
	--ivory: #f6f3ec;
	--ivory-2: #ece7dc;
	--gold: #a8894f;
	--gold-svijetla: #c9ae78;
	--tinta: #1a2233;
	--siva: #5b6273;
	--crta: #d9d3c5;
	--crta-tamna: rgba(201, 174, 120, .28);
	--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sirina: 1160px;
	--uska: 720px;
	--rub: max(20px, env(safe-area-inset-left, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--ivory);
	color: var(--tinta);
	font: 400 17px/1.7 var(--sans);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.12;
	color: var(--navy);
	text-wrap: balance;
	margin: 0 0 .5em;
}
h1 { font-size: clamp(42px, 6.2vw, 76px); letter-spacing: -.01em; }
h2 { font-size: clamp(32px, 4vw, 48px); }
h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; }
p { margin: 0 0 1.1em; }

.preskoci { position: absolute; left: -9999px; }
.preskoci:focus { left: 16px; top: 16px; z-index: 100; background: var(--ivory); padding: 8px 14px; }

/* Zaglavlje */
.zaglavlje {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(246, 243, 236, .94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--crta);
}
.zaglavlje__unutra {
	max-width: var(--sirina);
	margin: 0 auto;
	padding: 14px var(--rub);
	display: flex;
	align-items: center;
	gap: 28px;
}
.znak { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.znak svg { width: 34px; height: 34px; flex: none; }
.znak__tekst { display: flex; flex-direction: column; line-height: 1; }
.znak__ime { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: .26em; }
.znak__pod { font-size: 9.5px; font-weight: 600; letter-spacing: .62em; color: var(--gold); margin-top: 5px; }
.izbornik { margin-left: auto; }
.izbornik ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.izbornik a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--tinta); padding: 6px 0; border-bottom: 1px solid transparent; }
.izbornik a:hover, .izbornik a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--navy); }
.jezik { display: flex; gap: 2px; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.jezik a, .jezik span { padding: 4px 6px; text-decoration: none; }
.jezik span { color: var(--navy); border-bottom: 1px solid var(--gold); }
.jezik a { color: var(--siva); }
.gumb, .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--navy);
	color: var(--ivory);
	font: 600 14px/1 var(--sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px 26px;
	border-radius: 0;
	border: 1px solid var(--navy);
	transition: background .2s, color .2s;
}
.gumb:hover, .wp-block-button__link:hover { background: transparent; color: var(--navy); }
.gumb::after, .wp-block-button__link::after { content: "→"; font-size: 16px; }
.zaglavlje .gumb { padding: 12px 18px; font-size: 12px; }
.otvori-izbornik { display: none; background: none; border: 1px solid var(--crta); padding: 9px 12px; font: 600 13px var(--sans); color: var(--navy); cursor: pointer; }

/* Sadržaj */
main { display: block; }
.sadrzaj > * { max-width: var(--sirina); margin-left: auto; margin-right: auto; padding-left: var(--rub); padding-right: var(--rub); }

.m-sekcija { padding-block: clamp(64px, 9vw, 120px); }
.m-sekcija + .m-sekcija { border-top: 1px solid var(--crta); }
.m-oznaka {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 18px;
}
.m-uvod { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.6; color: var(--siva); max-width: 62ch; }
.m-uska { max-width: var(--uska); }

/* Uvodni dio na tamnoj podlozi, s meridijanima kao jedinim ukrasom */
.m-hero {
	max-width: none !important;
	background-color: var(--navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23c9ae78' stroke-opacity='.32' stroke-width='1'%3E%3Ccircle cx='300' cy='300' r='280'/%3E%3Cellipse cx='300' cy='300' rx='210' ry='280'/%3E%3Cellipse cx='300' cy='300' rx='140' ry='280'/%3E%3Cellipse cx='300' cy='300' rx='70' ry='280'/%3E%3Cpath d='M300 20v560'/%3E%3Cpath d='M20 300h560' stroke-opacity='.18'/%3E%3Cellipse cx='300' cy='300' rx='280' ry='90' stroke-opacity='.18'/%3E%3Cellipse cx='300' cy='300' rx='280' ry='190' stroke-opacity='.18'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: min(640px, 70vw);
	background-position: right max(-120px, calc(50% - 760px)) center;
	color: var(--ivory);
	padding-block: clamp(90px, 13vw, 170px) clamp(80px, 11vw, 140px);
	padding-left: max(var(--rub), calc((100% - var(--sirina)) / 2 + 20px)) !important;
	padding-right: var(--rub) !important;
}
.m-hero > * { max-width: 760px; }
.m-hero h1 { color: var(--ivory); }
.m-hero h1 em { font-style: italic; color: var(--gold-svijetla); }
.m-hero .m-oznaka { color: var(--gold-svijetla); }
.m-hero p { color: #cfd3dd; font-size: clamp(18px, 1.6vw, 21px); max-width: 56ch; }
.m-hero .wp-block-button__link { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.m-hero .wp-block-button__link:hover { background: transparent; color: var(--gold-svijetla); }
.m-hero--mala { padding-block: clamp(70px, 9vw, 110px) clamp(56px, 7vw, 90px); background-size: min(480px, 60vw); }

/* Kartice usluga */
.m-kartice { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; border-top: 1px solid var(--crta); margin-top: 48px; }
.m-kartice > .wp-block-column { padding: 36px 32px 8px 0; border-right: 1px solid var(--crta); flex-basis: auto !important; }
.m-kartice > .wp-block-column + .wp-block-column { padding-left: 32px; }
.m-kartice > .wp-block-column:last-child { border-right: 0; }
.m-kartice h3 { font-size: 27px; }
.m-kartice p { color: var(--siva); font-size: 16px; }

/* Koraci pristupa: pravi slijed, zato brojevi */
.m-koraci { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: korak; }
.m-koraci li { counter-increment: korak; border-top: 1px solid var(--navy); padding-top: 22px; font-size: 16px; color: var(--siva); }
.m-koraci li::before { content: counter(korak, decimal-leading-zero); display: block; font-family: var(--serif); font-variant-numeric: lining-nums; font-size: 17px; color: var(--gold); letter-spacing: .1em; margin-bottom: 10px; }
.m-koraci strong { display: block; font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }

/* Mreža partnera */
.m-partneri { background: var(--ivory-2); max-width: none !important; padding-left: max(var(--rub), calc((100% - var(--sirina)) / 2 + 20px)) !important; }
.m-partneri__popis { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 12px; max-width: var(--sirina); }
.m-partneri__popis li { border: 1px solid var(--gold); padding: 10px 18px; font-size: 15px; font-weight: 500; color: var(--navy); }

/* Završni poziv */
.m-poziv { text-align: left; }
.m-poziv h2 { max-width: 780px; }
.m-poziv p { max-width: 56ch; color: var(--siva); }

/* Usluge u detalju */
.m-usluga { display: grid !important; grid-template-columns: 5fr 7fr; gap: 56px !important; }
.m-usluga > .wp-block-column { flex-basis: auto !important; }
.m-usluga h2 { font-size: clamp(30px, 3.4vw, 42px); }
.m-usluga .m-broj { font-family: var(--serif); font-variant-numeric: lining-nums; font-size: 18px; color: var(--gold); letter-spacing: .14em; margin-bottom: 10px; }
.m-popis { padding: 0; margin: 0 0 1.4em; list-style: none; }
.m-popis li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--crta); position: relative; font-size: 16px; }
.m-popis li::before { content: ""; position: absolute; left: 0; top: 21px; width: 12px; height: 1px; background: var(--gold); }
.m-napomena { font-size: 15px; color: var(--siva); font-style: italic; }

/* Načela */
.m-nacela { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 !important; margin-top: 40px; border-top: 1px solid var(--crta); }
.m-nacela > .wp-block-column { padding: 30px 32px 10px 0; border-bottom: 1px solid var(--crta); flex-basis: auto !important; }
.m-nacela > .wp-block-column:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--crta); }
.m-nacela h3 { font-size: 26px; }
.m-nacela p { color: var(--siva); font-size: 16px; }

/* Kontakt */
.m-kontakt { display: grid !important; grid-template-columns: 4fr 7fr; gap: 64px !important; }
.m-kontakt > .wp-block-column { flex-basis: auto !important; }
.m-kontakt-podaci { font-size: 16px; color: var(--siva); }
.m-kontakt-podaci strong { display: block; color: var(--navy); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-top: 22px; }

.obrazac { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.obrazac .puno { grid-column: 1 / -1; }
.obrazac label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--navy); margin-bottom: 6px; }
.obrazac label .neobavezno { font-weight: 400; color: var(--siva); }
.obrazac input, .obrazac select, .obrazac textarea {
	width: 100%;
	font: 16px/1.5 var(--sans);
	color: var(--tinta);
	background: #fff;
	border: 1px solid var(--crta);
	border-radius: 0;
	padding: 12px 14px;
}
.obrazac textarea { min-height: 150px; resize: vertical; }
.obrazac input:focus, .obrazac select:focus, .obrazac textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.obrazac .privola { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--siva); font-weight: 400; letter-spacing: 0; }
.obrazac .privola input { width: auto; margin-top: 5px; }
.obrazac button { justify-self: start; cursor: pointer; }
.obrazac .zamka { position: absolute; left: -9999px; }
.poruka { padding: 18px 22px; border-left: 3px solid var(--gold); background: #fff; margin-bottom: 28px; }
.poruka--greska { border-left-color: #a3392f; }

/* Podnožje */
.podnozje { background: var(--navy); color: #c3c8d3; font-size: 15px; }
.podnozje__unutra { max-width: var(--sirina); margin: 0 auto; padding: 64px var(--rub) 40px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.podnozje .znak { color: var(--ivory); }
.podnozje h4 { margin: 0 0 14px; font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-svijetla); }
.podnozje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.podnozje a { text-decoration: none; }
.podnozje a:hover { color: var(--gold-svijetla); }
.podnozje__slogan { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ivory); margin-top: 22px; }
.podnozje__dno { max-width: var(--sirina); margin: 0 auto; padding: 20px var(--rub) 32px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 960px) {
	.m-kartice, .m-koraci { grid-template-columns: 1fr 1fr; }
	.m-kartice > .wp-block-column { border-right: 0; padding: 30px 0 8px !important; border-bottom: 1px solid var(--crta); }
	.m-usluga, .m-kontakt { grid-template-columns: 1fr; gap: 24px !important; }
	.podnozje__unutra { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.otvori-izbornik { display: inline-block; margin-left: auto; }
	.izbornik { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ivory); border-bottom: 1px solid var(--crta); padding: 10px var(--rub) 22px; }
	.izbornik.otvoren { display: block; }
	.izbornik ul { flex-direction: column; gap: 4px; }
	.izbornik a { display: block; padding: 10px 0; font-size: 17px; }
	.zaglavlje .gumb { display: none; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.m-kartice, .m-koraci, .m-nacela, .obrazac { grid-template-columns: 1fr; }
	.m-nacela > .wp-block-column:nth-child(even) { padding-left: 0; border-left: 0; }
	.podnozje__unutra { grid-template-columns: 1fr; }
	.znak__ime { font-size: 18px; }
	.m-hero { background-position: right -180px top 40px; background-size: 420px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }