/*
Theme Name: Логопедија
Theme URI: https://logopedija.mk/
Author: м-р Никола Левенски Миљаниќ
Author URI: https://logopedija.mk/
Description: Минимална, брза и пристапна тема за логопедска пракса. Самостојно ја поставува содржината при активација, со GSAP анимации, вграден формулар за закажување и без надворешни зависности.
Version: 1.6.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: logopedija
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready, block-styles, wide-blocks
*/

/* ------------------------------------------------------------------
   1. Фонтови (self-hosted, без надворешни барања / GDPR-safe)
------------------------------------------------------------------ */
@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-display: swap;
	font-weight: 200 900;
	src: url('assets/fonts/literata-cyrillic-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-display: swap;
	font-weight: 200 900;
	src: url('assets/fonts/literata-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Commissioner';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('assets/fonts/commissioner-cyrillic-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Commissioner';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('assets/fonts/commissioner-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   2. Токени
------------------------------------------------------------------ */
:root {
	--ink: #0e2233;
	--ink-70: #42596e;
	--ink-45: #7a8ca0;
	--paper: #ffffff;
	--mist: #ebf0f5;
	--mist-deep: #dde6ee;
	--line: #d7e0e8;
	--signal: #0b4fd8;
	--signal-dark: #0940ae;
	--voice: #0e9e8e;

	--font-display: 'Literata', Georgia, 'Times New Roman', serif;
	--font-text: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
	--step-0: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
	--step-1: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
	--step-2: clamp(1.35rem, 1.24rem + 0.5vw, 1.65rem);
	--step-3: clamp(1.65rem, 1.44rem + 1vw, 2.25rem);
	--step-4: clamp(2rem, 1.63rem + 1.75vw, 3rem);
	--step-5: clamp(2.6rem, 1.75rem + 4vw, 4.75rem);

	--gutter: clamp(1.25rem, 4vw, 3rem);
	--flow: clamp(1.75rem, 3vw, 2.5rem);
	--section: clamp(4.5rem, 9vw, 8.5rem);
	--radius: 6px;
	--rail: 0px;
	--header-h: 72px;
}

@media (min-width: 1160px) {
	:root { --rail: 84px; }
}

/* ------------------------------------------------------------------
   3. Основи
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--step-0);
	font-weight: 380;
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 450;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--signal-dark); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { padding-inline-start: 1.15em; }

:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection { background: var(--voice); color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem; top: -100px;
	z-index: 999;
	background: var(--ink); color: #fff;
	padding: 0.7rem 1.1rem; border-radius: var(--radius);
	text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ------------------------------------------------------------------
   4. Распоред
------------------------------------------------------------------ */
.wrap {
	width: min(100% - (var(--gutter) * 2), 1180px);
	margin-inline: auto;
	padding-inline-start: var(--rail);
}

.measure { max-width: 62ch; }
.measure-tight { max-width: 46ch; }

.section { padding-block: var(--section); position: relative; }
.section--mist { background: var(--mist); }
.section__head { margin-bottom: var(--flow); }
.section__head p { color: var(--ink-70); font-size: var(--step-1); }

.lede { font-size: var(--step-1); color: var(--ink-70); }

.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ------------------------------------------------------------------
   5. Копчиња
------------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font: inherit;
	font-weight: 560;
	font-size: var(--step-0);
	line-height: 1;
	padding: 1.05em 1.6em;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--signal); color: #fff; }
.btn--primary:hover { background: var(--signal-dark); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--ghost svg { color: var(--voice); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

.link-quiet { color: var(--ink); text-decoration: none; }
.link-quiet:hover { color: var(--signal); }

/* ------------------------------------------------------------------
   6. Заглавие
------------------------------------------------------------------ */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-stuck {
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(160%) blur(12px);
	box-shadow: 0 1px 0 var(--line);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-inline-start: var(--gutter);
	width: min(100% - (var(--gutter) * 2), 1400px);
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand__mark { width: 34px; height: 34px; flex: none; color: var(--signal); }
.brand__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; }
.brand__name span { color: var(--ink-45); }
.brand img { max-height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav ul { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav a {
	color: var(--ink-70);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 480;
	padding-block: 0.4rem;
	position: relative;
}
.nav a::after {
	content: '';
	position: absolute;
	left: 0; right: 100%; bottom: 0.15rem;
	height: 1px; background: var(--voice);
	transition: right 0.3s ease;
}
.nav a:hover, .nav .current-menu-item > a, .nav li.is-active > a { color: var(--ink); }
.nav a:hover::after, .nav .current-menu-item > a::after, .nav li.is-active > a::after { right: 0; }

.header-cta { display: inline-flex; align-items: center; gap: 0.5rem; }
.header-cta .btn { padding: 0.75em 1.25em; font-size: 0.925rem; }

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.nav-toggle span {
	display: block;
	width: 17px; height: 1.5px;
	background: var(--ink);
	position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
	content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--paper);
	padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	visibility: hidden;
	opacity: 0;
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { border-bottom: 1px solid var(--line); }
.mobile-nav a {
	display: block;
	padding: 1rem 0;
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--ink);
	text-decoration: none;
}
.mobile-nav__foot { color: var(--ink-70); font-size: var(--step--1); }
.mobile-nav__foot a { display: inline; font-family: var(--font-text); font-size: var(--step-1); }

@media (max-width: 900px) {
	.nav, .header-cta .btn--ghost { display: none; }
	.nav-toggle { display: inline-flex; }
}

/* ------------------------------------------------------------------
   7. Нишката (vertical thread / progress rail)
------------------------------------------------------------------ */
.thread {
	position: fixed;
	left: max(1.25rem, calc((100vw - 1180px) / 2 - 24px));
	top: 0; bottom: 0;
	width: 40px;
	z-index: 50;
	display: none;
	pointer-events: none;
}
@media (min-width: 1160px) {
	.thread { display: block; }
}
.thread__track {
	position: absolute;
	left: 19px; top: 18vh; bottom: 18vh;
	width: 2px;
	background: var(--line);
}
.thread__fill {
	position: absolute;
	left: 0; top: 0; width: 100%; height: 0%;
	background: var(--voice);
	transform-origin: top;
}
.thread__stops {
	position: absolute;
	left: 0; top: 18vh; bottom: 18vh;
	width: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	pointer-events: auto;
}
.thread__stop {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--ink-45);
	font: inherit;
	font-size: 0.75rem;
	white-space: nowrap;
}
.thread__stop i {
	display: block;
	width: 9px; height: 9px;
	margin-left: 15px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: inset 0 0 0 1.5px var(--line);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.thread__stop b {
	font-weight: 450;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.thread__stop:hover b, .thread__stop:focus-visible b { opacity: 1; transform: none; }
.thread__stop.is-active i { box-shadow: inset 0 0 0 5px var(--voice); transform: scale(1.15); }
.thread__stop.is-active { color: var(--ink); }

.progress-bar {
	position: fixed;
	top: 0; left: 0;
	height: 2px; width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: var(--voice);
	z-index: 101;
}
@media (min-width: 1160px) { .progress-bar { display: none; } }

/* ------------------------------------------------------------------
   8. Херој
------------------------------------------------------------------ */
.hero {
	position: relative;
	min-height: min(92svh, 860px);
	padding-top: calc(var(--header-h) + clamp(3rem, 9vh, 7rem));
	padding-bottom: clamp(7rem, 16vh, 11rem);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.hero::before {
	content: '';
	position: absolute;
	inset: -30% -10% auto auto;
	width: 70vw; height: 70vw;
	max-width: 900px; max-height: 900px;
	background: radial-gradient(circle at 60% 40%, rgba(14, 158, 142, 0.1), rgba(11, 79, 216, 0.07) 45%, transparent 68%);
	pointer-events: none;
}
.hero__inner { position: relative; }
.hero h1 { margin-bottom: 0.45em; max-width: 16ch; }
.hero__lede { max-width: 54ch; font-size: var(--step-1); color: var(--ink-70); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.hero__by {
	margin-top: 2.5rem;
	font-size: var(--step--1);
	color: var(--ink-45);
	max-width: 42ch;
	line-height: 1.5;
}
.hero__by strong { color: var(--ink-70); font-weight: 560; }

.wave {
	position: absolute;
	left: 0; right: 0; bottom: clamp(1.5rem, 6vh, 4rem);
	width: 100%;
	height: clamp(70px, 12vh, 130px);
	pointer-events: none;
	overflow: hidden;
}
.wave svg { width: 200%; height: 100%; }
.wave path { fill: none; stroke: var(--voice); stroke-width: 2; stroke-linecap: round; opacity: 0.9; }
.wave path + path { stroke: var(--signal); opacity: 0.22; }

/* Маскирано откривање на насловот */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line-mask > span { display: block; }

/* ------------------------------------------------------------------
   9. Услуги (три публики)
------------------------------------------------------------------ */
.audiences {
	display: grid;
	gap: 1px;
	background: var(--line);
	border-block: 1px solid var(--line);
	margin-top: var(--flow);
}
@media (min-width: 820px) {
	.audiences { grid-template-columns: repeat(3, 1fr); }
}
.audience {
	background: var(--paper);
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.audience h3 { margin: 0; }
.audience__age { font-size: var(--step--1); color: var(--voice); font-weight: 560; letter-spacing: 0.01em; }
.audience p { color: var(--ink-70); margin: 0; }
.audience ul { list-style: none; margin: auto 0 0; padding: 0; }
.audience li {
	padding: 0.55rem 0;
	border-top: 1px solid var(--line);
	font-size: var(--step--1);
	color: var(--ink-70);
}
.audience li:first-child { margin-top: 0.5rem; }

/* ------------------------------------------------------------------
   10. За мене
------------------------------------------------------------------ */
.about { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) {
	.about { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.about__body p { color: var(--ink-70); }
.about__body p:first-of-type { font-size: var(--step-1); color: var(--ink); }

.portrait {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--mist);
	aspect-ratio: 4 / 5;
	display: grid;
	place-items: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__monogram {
	font-family: var(--font-display);
	font-size: clamp(3rem, 8vw, 5rem);
	color: var(--ink-45);
	letter-spacing: -0.03em;
}

.credentials { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.credentials li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.9rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--line);
	font-size: var(--step--1);
	color: var(--ink-70);
	line-height: 1.5;
}
.credentials li::before {
	content: '';
	width: 6px; height: 6px;
	margin-top: 0.55em;
	border-radius: 50%;
	background: var(--voice);
}

/* ------------------------------------------------------------------
   11. Тек на работата (низа чекори)
------------------------------------------------------------------ */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); margin-top: var(--flow); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--mist); padding: clamp(1.5rem, 2.5vw, 2rem); }
.step::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	display: block;
	font-family: var(--font-display);
	font-size: var(--step-2);
	color: var(--ink-45);
	margin-bottom: 0.9rem;
}
.step h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.step p { font-size: var(--step--1); color: var(--ink-70); margin: 0; }

/* ------------------------------------------------------------------
   12. Совети (записи)
------------------------------------------------------------------ */
.posts { margin-top: var(--flow); border-top: 1px solid var(--line); }
.post-row {
	display: grid;
	gap: 0.35rem 2rem;
	padding: clamp(1.4rem, 2.5vw, 2rem) 0;
	border-bottom: 1px solid var(--line);
	align-items: baseline;
}
@media (min-width: 760px) {
	.post-row { grid-template-columns: 8.5rem minmax(0, 1fr); }
}
.post-row time { font-size: var(--step--1); color: var(--ink-45); font-variant-numeric: tabular-nums; }
.post-row h3 { margin: 0 0 0.35rem; font-size: var(--step-2); }
.post-row h3 a { color: var(--ink); text-decoration: none; }
.post-row:hover h3 a { color: var(--signal); }
.post-row p { color: var(--ink-70); margin: 0; font-size: var(--step--1); max-width: 68ch; }

.archive-more { margin-top: var(--flow); }

/* ------------------------------------------------------------------
   13. Прашања (accordion)
------------------------------------------------------------------ */
.faq { margin-top: var(--flow); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	background: none;
	border: 0;
	padding: 1.25rem 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 450;
	color: var(--ink);
	line-height: 1.3;
}
.faq__q i {
	flex: none;
	width: 22px; height: 22px;
	margin-top: 0.2em;
	position: relative;
}
.faq__q i::before, .faq__q i::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1.5px;
	background: var(--voice);
	transition: transform 0.3s ease;
}
.faq__q i::after { transform: rotate(90deg); }
.faq__q[aria-expanded='true'] i::after { transform: rotate(0deg); }
.faq__a { overflow: hidden; height: 0; }
.faq__a > div { padding-bottom: 1.4rem; color: var(--ink-70); max-width: 68ch; }

/* ------------------------------------------------------------------
   14. Контакт и формулар
------------------------------------------------------------------ */
.contact { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.contact__phone {
	font-family: var(--font-display);
	font-size: var(--step-3);
	color: var(--ink);
	text-decoration: none;
	display: inline-block;
	margin-bottom: 0.35rem;
	letter-spacing: -0.02em;
}
.contact__phone:hover { color: var(--signal); }
.contact__meta { list-style: none; margin: 1.75rem 0 0; padding: 0; font-size: var(--step--1); color: var(--ink-70); }
.contact__meta li { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.contact__meta a { color: var(--ink); text-decoration: none; }
.contact__meta a:hover { color: var(--signal); }

.form {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	display: grid;
	gap: 1.1rem;
}
.section--mist .form { border-color: var(--mist-deep); }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--step--1); font-weight: 560; color: var(--ink); }
.field label span { color: var(--ink-45); font-weight: 400; }
.field input, .field textarea, .field select {
	font: inherit;
	font-size: var(--step-0);
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.8rem 0.9rem;
	width: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
	outline: none;
	border-color: var(--signal);
	box-shadow: 0 0 0 3px rgba(11, 79, 216, 0.14);
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: #c0392b; }
.field__error { font-size: var(--step--1); color: #c0392b; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: var(--step--1); color: var(--ink-45); margin: 0; }
.form__note a { color: var(--ink-70); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status {
	font-size: var(--step--1);
	padding: 0.9rem 1rem;
	border-radius: var(--radius);
	display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-ok { background: rgba(14, 158, 142, 0.12); color: #0a6f64; }
.form__status.is-error { background: rgba(192, 57, 43, 0.1); color: #9c2c1f; }

/* ------------------------------------------------------------------
   15. Внатрешни страници и записи
------------------------------------------------------------------ */
.page-head {
	padding-top: calc(var(--header-h) + clamp(3rem, 8vh, 6rem));
	padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-top: 1rem; }
.page-meta { font-size: var(--step--1); color: var(--ink-45); margin-bottom: 1.25rem; }

.entry { max-width: 68ch; }
.entry h2 { font-size: var(--step-3); margin-top: 2em; }
.entry h3 { font-size: var(--step-2); margin-top: 1.8em; }
.entry li { margin-bottom: 0.4em; }
.entry blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 2px solid var(--voice);
	font-family: var(--font-display);
	font-size: var(--step-1);
	color: var(--ink);
}
.entry img, .entry figure { margin: 2rem 0; border-radius: var(--radius); }
.entry figcaption { font-size: var(--step--1); color: var(--ink-45); margin-top: 0.6rem; }
.entry .alignwide { width: min(100%, 1180px); }
.entry a { color: var(--signal); }

.entry-footer {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-size: var(--step--1);
	color: var(--ink-45);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
}
.entry-footer a { color: var(--ink-70); }

.post-nav { display: grid; gap: 1px; background: var(--line); margin-top: 3rem; border-block: 1px solid var(--line); }
@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a { background: var(--paper); padding: 1.5rem; text-decoration: none; display: block; }
.post-nav small { display: block; font-size: var(--step--1); color: var(--ink-45); margin-bottom: 0.35rem; }
.post-nav span { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.post-nav a:hover span { color: var(--signal); }

.pagination { margin-top: var(--flow); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px; height: 42px;
	padding-inline: 0.6rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--ink-70);
	font-size: var(--step--1);
}
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }

.notice-box {
	margin-top: 2.5rem;
	padding: 1.25rem 1.4rem;
	background: var(--mist);
	border-radius: var(--radius);
	font-size: var(--step--1);
	color: var(--ink-70);
}

/* ------------------------------------------------------------------
   16. Подножје
------------------------------------------------------------------ */
.site-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.72);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	font-size: var(--step--1);
}
.site-footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer .brand { color: #fff; }
.site-footer .brand__mark { color: var(--voice); }
.site-footer .brand__name span { color: rgba(255, 255, 255, 0.5); }
.site-footer h2 { font-size: var(--step--1); font-family: var(--font-text); font-weight: 600; color: #fff; letter-spacing: 0.02em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-about { max-width: 38ch; margin-top: 1.1rem; }
.footer-bottom {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	justify-content: space-between;
	color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------------
   17. Анимации: почетна состојба (се гаси ако нема JS/има reduce)
------------------------------------------------------------------ */
.js .anim-in { opacity: 0; }
.js .anim-in--up { transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
	.js .anim-in { opacity: 1 !important; transform: none !important; }
	.wave path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}
.no-js .mobile-nav { display: none; }

/* ------------------------------------------------------------------
   18. Печатење
------------------------------------------------------------------ */
@media print {
	.site-header, .thread, .wave, .mobile-nav, .progress-bar, .form, .site-footer { display: none !important; }
	body { color: #000; }
	.wrap { padding-inline: 0; }
}

/* ------------------------------------------------------------------
   19. Помошни правила за движењето и сидрата
------------------------------------------------------------------ */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.mobile-nav[hidden] { display: none; }
.hero h1 .w { display: inline-block; }
.wave svg { will-change: transform; }
.hero h1 .line-mask > span { will-change: transform; }

/* Блоковски поместувања за содржина создадена во уредувачот */
.entry .wp-block-image img { border-radius: var(--radius); }
.entry .wp-block-quote { margin-left: 0; }
.entry ul, .entry ol { padding-inline-start: 1.25em; }

/* Без JavaScript: менито останува употребливо на мал екран */
.no-js .nav-toggle { display: none; }
@media (max-width: 900px) {
	.no-js .nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; }
	.no-js .nav ul { flex-wrap: wrap; gap: 0.75rem 1.1rem; }
	.no-js .site-header { position: static; height: auto; padding-block: 1rem; background: var(--paper); }
	.no-js .site-header .wrap { flex-wrap: wrap; }
	.no-js .hero { padding-top: clamp(2rem, 6vh, 4rem); }
}

/* ==================================================================
   20. Верзија 1.1 — темно заглавие/подножје, нови делови и движење
================================================================== */

:root { --header-h: 76px; --ink-deep: #0a1a29; }

/* --- Заглавие и мобилно мени во иста боја со подножјето --- */
.site-header { background: var(--ink); color: #fff; }
.site-header.is-stuck {
	background: rgba(14, 34, 51, 0.94);
	backdrop-filter: saturate(150%) blur(14px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	height: 64px;
}
.site-header .brand { color: #fff; }
.site-header .brand__mark { color: var(--voice); }
.site-header .brand__name span { color: rgba(255, 255, 255, 0.45); }
.nav a { color: rgba(255, 255, 255, 0.72); }
.nav a:hover, .nav .current-menu-item > a, .nav li.is-active > a { color: #fff; }
.header-cta .btn--ghost { border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.header-cta .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-toggle { border-color: rgba(255, 255, 255, 0.24); background: transparent; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: #fff; }

.mobile-nav { background: var(--ink); color: #fff; }
.mobile-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.mobile-nav a { color: #fff; }
.mobile-nav__foot { color: rgba(255, 255, 255, 0.6); }
.mobile-nav__foot a { color: #fff; }

@media (min-width: 1160px) { .progress-bar { display: block; } }

.hero { padding-top: calc(var(--header-h) + clamp(3.5rem, 10vh, 7rem)); }

.site-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* --- Позадински елементи --- */
.wrap { position: relative; z-index: 1; }
.section { overflow: hidden; }
.blob {
	position: absolute;
	width: clamp(320px, 42vw, 640px);
	height: clamp(320px, 42vw, 640px);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	filter: blur(10px);
}
.blob--services { right: -12vw; top: 6%; background: radial-gradient(circle, rgba(14, 158, 142, 0.13), transparent 68%); }
.blob--about { left: -14vw; bottom: -12%; background: radial-gradient(circle, rgba(11, 79, 216, 0.13), transparent 68%); }
.blob--contact { right: -10vw; top: -18%; background: radial-gradient(circle, rgba(14, 158, 142, 0.3), transparent 68%); }

.dotgrid {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(var(--line) 1px, transparent 1px);
	background-size: 26px 26px;
	opacity: 0.55;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}

/* --- Публики: акцент при поминување --- */
.audience { position: relative; transition: background-color 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1); }
.audience::after {
	content: '';
	position: absolute;
	left: 0; top: -1px;
	height: 2px; width: 0;
	background: var(--voice);
	transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.audience:hover::after { width: 100%; }
.audience:hover { background: #fcfdfe; }

/* --- Табела на развој --- */
.section--dev { position: relative; }
.devtable { display: grid; gap: 2rem; margin-top: var(--flow); }
@media (min-width: 920px) {
	.devtable { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
}
.devtable__rail {
	position: relative;
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	padding-bottom: 0.75rem;
	-webkit-overflow-scrolling: touch;
}
@media (min-width: 920px) {
	.devtable__rail { flex-direction: column; overflow: visible; padding: 0.25rem 0 0.25rem 1.5rem; }
}
.devtable__progress { display: none; }
@media (min-width: 920px) {
	.devtable__progress { display: block; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--line); }
	.devtable__progress i { display: block; width: 100%; height: 0; background: var(--voice); }
}
.devtable__chip {
	position: relative;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--step--1);
	color: var(--ink-45);
	text-align: left;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.25s ease, background-color 0.25s ease;
}
.devtable__chip:hover { color: var(--ink); }
.devtable__chip.is-active { color: var(--ink); background: var(--mist); font-weight: 600; }
@media (min-width: 920px) {
	.devtable__chip { padding-inline: 0.2rem; }
	.devtable__chip.is-active { background: none; }
	.devtable__chip.is-active::before {
		content: '';
		position: absolute;
		left: -1.85rem; top: 50%;
		width: 9px; height: 9px;
		margin-top: -4.5px;
		border-radius: 50%;
		background: var(--voice);
	}
}
.devtable__panels { position: relative; }
.devtable__panel[hidden] { display: none; }
.devtable__age {
	font-family: var(--font-display);
	font-size: var(--step-3);
	color: var(--ink);
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
}
.devtable__text { color: var(--ink-70); font-size: var(--step-1); max-width: 58ch; }

/* --- Истакната мисла --- */
.quote-section { padding-block: clamp(5rem, 12vw, 9rem); }
.quote-scrub {
	font-family: var(--font-display);
	font-size: clamp(1.55rem, 3.6vw, 3rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0;
	padding: 0;
	border: 0;
	max-width: 17em;
	color: var(--ink);
}
.quote-scrub .qw { color: rgba(14, 34, 51, 0.16); }
.js .quote-scrub { color: inherit; }
.quote-source { margin-top: 1.5rem; color: var(--ink-45); font-size: var(--step--1); }

/* --- Чекори со линија што се црта --- */
.steps { position: relative; padding-top: 2.5rem; background: var(--mist-deep); }
.section--mist .step { background: var(--paper); }
.steps__line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--mist-deep); }
.steps__line i { display: block; height: 100%; width: 0; background: var(--voice); }

/* --- Контакт на темна подлога --- */
.section--ink { background: var(--ink); color: rgba(255, 255, 255, 0.75); position: relative; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .lede { color: rgba(255, 255, 255, 0.72); }
.section--ink .contact { align-items: center; }
.contact-cards {
	display: grid;
	gap: 1px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	overflow: hidden;
}
@media (min-width: 620px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
.contact-card {
	display: grid;
	gap: 0.35rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ink);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.35s ease;
}
.contact-card:hover { background: #15304a; color: inherit; }
.contact-card__icon { color: var(--voice); display: inline-flex; margin-bottom: 0.5rem; }
.contact-card__label { font-size: var(--step--1); color: rgba(255, 255, 255, 0.55); }
.contact-card__value { font-family: var(--font-display); font-size: var(--step-2); color: #fff; letter-spacing: -0.02em; }
.contact-card__note { font-size: var(--step--1); color: rgba(255, 255, 255, 0.55); margin-top: 0.35rem; }

.section--ink .form { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.16); margin-top: 3rem; }
.section--ink .field label { color: #fff; }
.section--ink .field input, .section--ink .field textarea, .section--ink .field select {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}
.section--ink ::placeholder { color: rgba(255, 255, 255, 0.45); }
.field--check { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.field--check input { width: auto; margin-top: 0.35rem; }
.field--check label { font-weight: 400; }

/* --- Панел со квалификации --- */
.panel {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.panel h3 { font-size: var(--step-1); margin-bottom: 0.75rem; }
.panel .credentials { margin-top: 0; }
.about__kicker { font-size: var(--step--1); color: var(--voice); font-weight: 600; margin-bottom: 0.6rem; }
.about__body .lede { margin-bottom: 1.15em; }

/* --- Назад на врвот --- */
.to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	width: 44px; height: 44px;
	border: 0;
	padding: 0;
	background: var(--paper);
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(14, 34, 51, 0.16);
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.to-top__track { stroke: var(--line); }
.to-top__fill { stroke: var(--voice); stroke-dasharray: 126; stroke-dashoffset: 126; }
.to-top i {
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 7px solid var(--ink);
}

/* --- Наслови по редови --- */
.js [data-lines] .line-mask > span { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	.quote-scrub .qw { color: var(--ink) !important; }
	.devtable__progress i, .steps__line i { height: 100% !important; }
}

/* --- Дотерувања 1.1.1 --- */
.progress-bar { top: 0; }
.devtable__chip.is-active::before { left: -1.72rem; }
.devtable__panels { min-height: 320px; }
@media (min-width: 920px) { .devtable__panels { min-height: 240px; } }
.steps { background: transparent; gap: 1.25rem; padding-top: 2.75rem; }
.section--mist .step, .step { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.steps__line { background: var(--line); }
.site-header .custom-logo { filter: brightness(0) invert(1); }
.section--ink .measure-tight { max-width: 34ch; }
.quote-section .wrap { max-width: min(100% - (var(--gutter) * 2), 1180px); }

/* ==================================================================
   21. Верзија 1.2 — боја, илустрации и „Во кабинетот“
================================================================== */

:root {
	--warm: #ef9a45;
	--warm-deep: #a25c19;
	--tint-warm: #fff6ef;
	--tint-teal: #eef8f6;
	--tint-blue: #eff4fe;

	--art-ink: #173047;
	--art-skin: #f0c9a6;
	--art-hair: #33475c;
	--art-blush: rgba(239, 154, 69, 0.35);
	--art-mouth: #c9736b;
	--art-line: #d7e0e8;
	--art-bubble: #ffffff;
	--art-bg: #f4f7fa;
	--art-soft: #e2ebf3;
	--art-accent: var(--voice);
	--art-body: #cddcea;
}

.art--warm { --art-bg: #fff2e4; --art-soft: #ffe1c6; --art-accent: #ef9a45; --art-body: #f3b478; }
.art--teal { --art-bg: #e9f7f4; --art-soft: #cfece6; --art-accent: #0e9e8e; --art-body: #bfe0d9; }
.art--blue { --art-bg: #eef3fe; --art-soft: #d8e4fb; --art-accent: #0b4fd8; --art-body: #c6d6f4; }

.section--warm { background: var(--tint-warm); }
.section--dev { background: var(--tint-teal); }

/* Малку топлина и во насловниот екран */
.hero::after {
	content: '';
	position: absolute;
	left: -12vw; bottom: -25%;
	width: 48vw; height: 48vw;
	background: radial-gradient(circle, rgba(239, 154, 69, 0.16), transparent 68%);
	pointer-events: none;
}

/* --- Публики со своја боја --- */
.audience:nth-child(1) { --accent: var(--warm); }
.audience:nth-child(2) { --accent: var(--voice); }
.audience:nth-child(3) { --accent: var(--signal); }
.audience::after { background: var(--accent, var(--voice)); }
.audience__age { color: var(--accent, var(--voice)); }
.audience li { position: relative; padding-left: 1.15rem; }
.audience li::before {
	content: '';
	position: absolute;
	left: 0; top: 1.05rem;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent, var(--voice));
	opacity: 0.75;
}

/* --- Илустрации --- */
.stage-art, .scene { width: 100%; height: auto; display: block; }
.art-bubble { transform-box: fill-box; transform-origin: center; animation: lgp-pop 0.5s var(--d, 0ms) both cubic-bezier(0.2, 1.15, 0.4, 1); }
@keyframes lgp-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.92); }
	to { opacity: 1; transform: none; }
}
.art-float { transform-box: fill-box; transform-origin: center; animation: lgp-float 6.5s ease-in-out infinite; }
@keyframes lgp-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}
.art-motif { transform-box: fill-box; transform-origin: center; animation: lgp-breathe 5s ease-in-out infinite; }
@keyframes lgp-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}

/* --- Табела на развој: илустрација + текст --- */
.devtable__panel { display: grid; gap: 1.5rem; }
@media (min-width: 760px) {
	.devtable__panel { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 2rem; align-items: start; }
}
.devtable__panels { min-height: 470px; }
@media (min-width: 760px) { .devtable__panels { min-height: 300px; } }
.devtable__chips { margin: 0 0 0.9rem; }
.chip {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-size: var(--step--1);
	font-weight: 600;
}
.chip--warm { background: rgba(239, 154, 69, 0.18); color: var(--warm-deep); }
.chip--teal { background: rgba(14, 158, 142, 0.15); color: #0a6f64; }
.chip--blue { background: rgba(11, 79, 216, 0.12); color: var(--signal-dark); }
.wordbar {
	height: 7px;
	max-width: 280px;
	border-radius: 999px;
	background: rgba(14, 34, 51, 0.09);
	overflow: hidden;
	margin: 0 0 1.1rem;
}
.wordbar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--warm), var(--voice)); }
.devtable__chip.is-active { color: var(--ink); }
.devtable__progress i { background: linear-gradient(180deg, var(--warm), var(--voice)); }

/* --- Во кабинетот --- */
.gallery { display: grid; gap: 1.5rem; margin-top: var(--flow); }
@media (min-width: 780px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery__item {
	margin: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s ease;
}
.gallery__item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(14, 34, 51, 0.1); }
.gallery__media { aspect-ratio: 480 / 330; overflow: hidden; background: var(--mist); }
.gallery__media img, .gallery__media svg {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.gallery__item:hover .gallery__media img, .gallery__item:hover .gallery__media svg { transform: scale(1.04); }
.gallery__item figcaption { padding: 1.3rem 1.4rem 1.5rem; }
.gallery__item h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.gallery__item p { font-size: var(--step--1); color: var(--ink-70); margin: 0; }
.gallery__item:nth-child(1) .scene { --art-bg: #fff2e4; --art-soft: #ffe1c6; --art-accent: #ef9a45; }
.gallery__item:nth-child(2) .scene { --art-bg: #e9f7f4; --art-soft: #cfece6; --art-accent: #0e9e8e; --art-body: #bfe0d9; }
.gallery__item:nth-child(3) .scene { --art-bg: #eef3fe; --art-soft: #d8e4fb; --art-accent: #0b4fd8; --art-body: #c6d6f4; }

/* --- Малку боја во останатите делови --- */
.post-row:hover h3 a { color: var(--signal); }
.faq__q i::before { background: var(--warm); }
.faq__q i::after { background: var(--voice); }
.steps__line i { background: linear-gradient(90deg, var(--warm), var(--voice)); }
.step:nth-child(2)::before { color: var(--warm); }
.step:nth-child(3)::before { color: var(--voice); }
.step:nth-child(4)::before { color: var(--signal); }
.contact-card:nth-child(2) .contact-card__icon { color: var(--warm); }

@media (prefers-reduced-motion: reduce) {
	.art-bubble, .art-float, .art-motif { animation: none !important; }
	.gallery__item, .gallery__media img, .gallery__media svg { transition: none !important; }
}

/* ==================================================================
   22. Верзија 1.3 — проверени информации, табела и повеќе боја
================================================================== */

:root {
	--plum: #6b5bd2;
	--plum-deep: #4a3aa8;
	--tint-plum: #f3f1fd;
}

.art--plum { --art-bg: #f3f1fd; --art-soft: #ded9f8; --art-accent: #6b5bd2; --art-body: #cdc6f2; }
.section--blue { background: var(--tint-blue); }
.section--plum { background: var(--tint-plum); }
.blob--research { left: -12vw; top: -15%; background: radial-gradient(circle, rgba(107, 91, 210, 0.18), transparent 68%); }
.chip--plum { background: rgba(107, 91, 210, 0.14); color: var(--plum-deep); }

/* --- Табела на пресвртници --- */
.table-wrap { margin-top: var(--flow); }
.mtable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	font-size: var(--step--1);
}
.mtable thead th {
	text-align: left;
	background: var(--ink);
	color: #fff;
	font-family: var(--font-text);
	font-weight: 600;
	padding: 0.95rem 1.1rem;
	font-size: var(--step--1);
	letter-spacing: 0.01em;
}
.mtable tbody th, .mtable tbody td {
	padding: 1rem 1.1rem;
	border-top: 1px solid var(--line);
	vertical-align: top;
	color: var(--ink-70);
	line-height: 1.55;
}
.mtable tbody th {
	text-align: left;
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 500;
	color: var(--ink);
	white-space: nowrap;
	border-left: 4px solid var(--row, var(--voice));
}
.mtable__row--warm { --row: var(--warm); }
.mtable__row--teal { --row: var(--voice); }
.mtable__row--blue { --row: var(--signal); }
.mtable__row--plum { --row: var(--plum); }
.mtable__row:nth-child(even) td, .mtable__row:nth-child(even) th { background: rgba(14, 34, 51, 0.02); }
.mtable__flag { color: var(--ink); }
.mtable__flag::before {
	content: '';
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--row, var(--voice));
	margin-right: 0.5rem;
	vertical-align: 0.1em;
}
.mtable__pct {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: rgba(14, 34, 51, 0.06);
	color: var(--ink);
	font-weight: 600;
	white-space: nowrap;
}
.source-note { margin-top: 1.25rem; font-size: var(--step--1); color: var(--ink-45); max-width: 78ch; }

@media (max-width: 860px) {
	.mtable, .mtable tbody, .mtable tbody tr, .mtable tbody th, .mtable tbody td { display: block; width: 100%; }
	.mtable { border: 0; background: none; border-radius: 0; }
	.mtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mtable tbody tr {
		background: var(--paper);
		border: 1px solid var(--line);
		border-left: 4px solid var(--row, var(--voice));
		border-radius: 12px;
		margin-bottom: 0.9rem;
		overflow: hidden;
	}
	.mtable tbody th { border: 0; border-bottom: 1px solid var(--line); background: rgba(14, 34, 51, 0.02); }
	.mtable tbody td { border: 0; padding-top: 0.35rem; }
	.mtable tbody td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.72rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--ink-45);
		margin-bottom: 0.2rem;
	}
	.mtable__row:nth-child(even) td, .mtable__row:nth-child(even) th { background: none; }
	.mtable tbody th { background: rgba(14, 34, 51, 0.03); }
}

/* --- Бројки од истражувањата --- */
.facts { display: grid; gap: 1.25rem; margin-top: var(--flow); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact {
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 3px solid var(--tone, var(--voice));
	border-radius: 14px;
	padding: clamp(1.3rem, 2.5vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.fact--warm { --tone: var(--warm); }
.fact--teal { --tone: var(--voice); }
.fact--blue { --tone: var(--signal); }
.fact--plum { --tone: var(--plum); }
.fact__icon { color: var(--tone, var(--voice)); }
.fact__value {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0.3rem 0 0;
}
.fact__text { color: var(--ink-70); font-size: var(--step--1); margin: 0; }
.fact__source { margin: auto 0 0; padding-top: 0.75rem; font-size: 0.78rem; color: var(--ink-45); border-top: 1px solid var(--line); }

/* --- Табела на развој: без хоризонтално скролање --- */
.devtable__rail { overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.4rem; padding-bottom: 0; }
@media (min-width: 920px) {
	.devtable__rail { display: flex; flex-direction: column; gap: 0.1rem; }
}
.devtable__chip { text-align: center; border: 1px solid transparent; }
@media (min-width: 920px) { .devtable__chip { text-align: left; border-color: transparent; } }
.devtable__chip:not(.is-active) { background: rgba(255, 255, 255, 0.55); }
@media (min-width: 920px) { .devtable__chip:not(.is-active) { background: none; } }
.devtable__chip.is-active { border-color: rgba(14, 158, 142, 0.35); }
@media (min-width: 920px) { .devtable__chip.is-active { border-color: transparent; } }

.devtable__stage { display: flex; flex-direction: column; gap: 1.25rem; }
.devtable__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--line);
	padding-top: 1rem;
}
.devtable__arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	font: inherit;
	font-size: var(--step--1);
	font-weight: 550;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.devtable__arrow:hover { border-color: var(--voice); color: var(--voice); }
.devtable__arrow[disabled] { opacity: 0.4; cursor: default; }
.devtable__arrow:active { transform: translateY(1px); }
.devtable__count { font-size: var(--step--1); color: var(--ink-45); font-variant-numeric: tabular-nums; }
.devtable__count b { color: var(--ink); font-weight: 600; }

/* --- Галерија со четири сцени --- */
@media (min-width: 780px) { .gallery { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.gallery__item:nth-child(4) .scene { --art-bg: #f3f1fd; --art-soft: #ded9f8; --art-accent: #6b5bd2; }

@media (prefers-reduced-motion: reduce) {
	.devtable__arrow { transition: none; }
}

/* ==================================================================
   23. Верзија 1.4 — постоечки сајт: слики во списокот и префрлувач на јазик
================================================================== */

/* --- Ред со запис и слика --- */
.post-row__body { min-width: 0; }
.post-row--media {
	grid-template-columns: 8.5rem minmax(0, 1fr);
	align-items: start;
}
@media (min-width: 760px) {
	.post-row--media { grid-template-columns: 8.5rem 148px minmax(0, 1fr); }
}
.post-row__media {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: var(--mist);
	aspect-ratio: 16 / 11;
	grid-row: span 2;
}
@media (max-width: 759px) {
	.post-row--media { grid-template-columns: 110px minmax(0, 1fr); gap: 0.25rem 1rem; }
	.post-row--media time { grid-column: 2; }
	.post-row--media .post-row__media { grid-column: 1; grid-row: span 2; }
	.post-row--media .post-row__body { grid-column: 2; }
}
.post-row__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.post-row:hover .post-row__media img { transform: scale(1.04); }

/* --- Префрлувач на јазик (TranslatePress / Polylang) --- */
.lang-switch { display: inline-flex; align-items: center; }
.lang-switch ul,
.lang-switch .trp-language-switcher ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.35rem; }
.lang-switch li { margin: 0; }
.lang-switch a,
.lang-switch .trp-ls-shortcode-language a {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 560;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.lang-switch a:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.lang-switch .trp-ls-shortcode-current-language { display: none; }
.lang-switch img { display: inline-block; }
.lang-switch--mobile { margin-bottom: 1rem; }
.lang-switch--mobile a { color: var(--ink); border-color: var(--line); }
.lang-switch--mobile a:hover { color: var(--ink); border-color: var(--ink); background: rgba(14, 34, 51, 0.04); }

/* TranslatePress го исцртува својот плутачки префрлувач — се крие, бидејќи
   темата има свој во заглавието. */
#trp-floater-ls { display: none !important; }

@media (max-width: 900px) {
	.site-header .lang-switch { display: none; }
}

/* --- Поправки 1.4.1 --- */

/* Сидрата кон делови на истата страница ги добиваат WP класите
   `current-menu-item` на насловната. Активниот дел го означува JS. */
.nav .current-menu-item > a { color: rgba(255, 255, 255, 0.72); }
.nav .current-menu-item > a::after { right: 100%; }
.nav a:hover, .nav li.is-active > a { color: #fff; }
.nav a:hover::after, .nav li.is-active > a::after { right: 0; }

/* Телефонот и е-поштата да не се кршат во две линии */
.contact-card__value {
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
	white-space: nowrap;
	overflow-wrap: normal;
}
@media (max-width: 420px) {
	.contact-card__value { font-size: 1.05rem; }
}

/* Малку воздух во подножјето */
.footer-bottom span { max-width: 52ch; }

/* Во картичкиот приказ на табелата, ::before го носи називот на колоната —
   точката во боја мора да се исклучи за да не се преклопуваат. */
@media (max-width: 860px) {
	.mtable__flag::before {
		width: auto;
		height: auto;
		border-radius: 0;
		background: none;
		margin-right: 0;
		vertical-align: baseline;
	}
}

/* Подолгите возрасни групи да се вклопат на мал екран */
@media (max-width: 919px) {
	.devtable__rail { grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); }
	.devtable__chip {
		white-space: normal;
		font-size: 0.78rem;
		line-height: 1.3;
		padding: 0.45rem 0.55rem;
	}
}

/* ==================================================================
   24. Верзија 1.6 — админ лента, префрлувач на јазик
================================================================== */

/* --- Лентата на WordPress не смее да го покрива заглавието --- */
:root { --admin-bar: 0px; }

.site-header { top: var(--admin-bar); }
.progress-bar { top: var(--admin-bar); }
.mobile-nav { padding-top: calc(var(--admin-bar) + var(--header-h) + 2rem); }
[id] { scroll-margin-top: calc(var(--admin-bar) + var(--header-h) + 1rem); }

/* Без JavaScript: стандардните висини на лентата */
.no-js body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.no-js body.admin-bar .site-header { top: 46px; }
}

/* Нишката и копчето за врв исто така се поместуваат */
body.admin-bar .thread { top: var(--admin-bar); }
body.admin-bar .to-top { bottom: clamp(1rem, 3vw, 2rem); }

/* --- Тековниот јазик во префрлувачот --- */
.lang-switch .is-current-language > a,
.lang-switch .trp-ls-shortcode-current-language > a {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}
.lang-switch--mobile .is-current-language > a {
	background: rgba(14, 34, 51, 0.06);
	color: var(--ink);
	border-color: var(--ink);
}
/* Кога темата го исцртува својот префрлувач, тековниот јазик се прикажува. */
.lang-switch .menu .trp-ls-shortcode-current-language { display: inline-flex; }

/* --- Табелата на развој внатре во содржина (потесен простор) --- */
.devtable-embed { margin-block: 2rem; }
.devtable-embed .devtable { grid-template-columns: 1fr; gap: 1.5rem; }
.devtable-embed .devtable__rail {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 0.4rem;
	flex-direction: row;
	padding: 0;
}
.devtable-embed .devtable__progress { display: none; }
.devtable-embed .devtable__chip {
	text-align: center;
	white-space: normal;
	font-size: 0.78rem;
	line-height: 1.3;
	padding: 0.45rem 0.55rem;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.6);
}
.devtable-embed .devtable__chip.is-active {
	background: var(--mist);
	border-color: rgba(14, 158, 142, 0.35);
}
.devtable-embed .devtable__chip.is-active::before { content: none; }
.devtable-embed .devtable__panel { grid-template-columns: 1fr; gap: 1.25rem; }
.devtable-embed .devtable__art { max-width: 420px; }
.devtable-embed .devtable__panels { min-height: 0; }
.devtable-embed .devtable__text { font-size: var(--step-0); max-width: none; }
.devtable-embed .devtable__nav { margin-top: 0.5rem; }

/* Повеќе простор за самата табела во рамките на текстот */
.entry .devtable-embed { max-width: none; }