/*
Theme Name: Expert Auto
Theme URI: https://auto-servis-expert.rs
Author: Auto Servis Expert
Author URI: https://auto-servis-expert.rs
Description: Custom WordPress tema za Auto Servis Expert — editorijalni redizajn. Specijalizovan servis za Peugeot i Citroën vozila. Asimetrične kompozicije, offset frame borderi, bento hairline gridovi, tanka (weight-100) hero tipografija, 0 radius/senki.
Version: 3.2.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: expert-auto
Tags: automotive, business, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   DESIGN TOKENI v3.0 — editorijalni pravac (_design_2)
   0 radius · 0 senki · 0 gradijenata · čisto kompozicijom i 2px borderima
   ========================================================================== */
:root {
	/* BREND BOJE */
	--red-500: #ed1c24;
	--red-600: #c9151c;
	--orange-500: #f96c26;

	/* NAVY */
	--navy-900: #091124;
	--navy-800: #141c2e;

	/* SIVE */
	--gray-500: #848992;
	--gray-600: #606668;

	/* OSNOVE */
	--white: #ffffff;
	--black: #000000;

	/* SEMANTIC */
	--color-brand: var(--red-500);
	--color-accent: var(--orange-500);
	--color-bg-dark: var(--navy-900);
	--color-bg-dark-alt: var(--navy-800);
	--color-surface: var(--white);
	--color-heading-dark: var(--navy-800);
	--color-heading-light: var(--white);
	--color-text-on-dark: var(--gray-500);
	--color-text-on-light: var(--gray-600);
	--color-border-dark: var(--navy-900);
	--color-border-light: rgba(255, 255, 255, .12);
	--color-hairline: rgba(9, 17, 36, .1);
	--color-bg-light-alt: #f7f7f7;

	/* TIPOGRAFIJA — Roboto throughout */
	--font-body: 'Roboto', Arial, Tahoma, sans-serif;
	--font-display: 'Roboto', Arial, Tahoma, sans-serif;

	/* TEŽINE */
	--fw-thin: 100;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-black: 900;

	/* LETTER-SPACING */
	--tracking-normal: 0;
	--tracking-wide: 5px;
	--tracking-wider: 7px;
	--tracking-widest: 10px;

	/* VELIČINE FONTA */
	--fs-hero: 64px;
	--fs-h1: 52px;
	--fs-h2: 34px;
	--fs-h3: 24px;
	--fs-h4: 19px;
	--fs-body: 16px;
	--fs-small: 14px;

	/* SPACING */
	--space-1: 5px;
	--space-2: 10px;
	--space-3: 15px;
	--space-4: 20px;
	--space-5: 30px;
	--space-6: 40px;
	--space-7: 50px;
	--space-8: 70px;
	--space-9: 90px;
	--space-10: 110px;

	/* RADIUS — uvek 0, deo jezika brenda */
	--radius-none: 0px;

	/* BORDER — debeli 2px su osnova kompozicije */
	--border-thick: 2px;
	--border-thin: 1px;

	/* LAYOUT */
	--container-max: 1320px;
	--container-narrow: 1100px;
	--header-height: 67px;

	/* Z-INDEX — header iznad overlay-a da toggle (X) uvek bude klikabilan */
	--z-header: 300;
	--z-mobile-menu: 200;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
* {
	box-sizing: border-box;
}

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

body {
	font-family: var(--font-body);
	color: var(--color-text-on-light);
	background: #fff;
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

a {
	color: var(--color-brand);
	text-decoration: none;
	transition: color .2s ease;
}

a:hover {
	color: var(--orange-500);
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	margin: 0 0 var(--space-3);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}

p {
	margin: 0 0 var(--space-3);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 32px;
}

.container-narrow {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 0 32px;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
/* Tanki (weight-100) naslovi za hero i page headere — industrijski feel */
.display-thin {
	font-weight: var(--fw-thin);
	letter-spacing: 2px;
	line-height: 1.1;
}

.eyebrow {
	color: var(--color-brand);
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 16px;
	font-weight: var(--fw-regular);
}

.eyebrow--wide {
	letter-spacing: var(--tracking-wider);
	font-size: 14px;
	font-weight: var(--fw-light);
}

.eyebrow--light {
	color: var(--color-brand);
}

.section-heading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-heading-dark);
}

.section-heading::before,
.section-heading::after {
	content: "";
	flex: 0 0 60px;
	height: 1px;
	background: var(--color-hairline);
}

.section-heading--light {
	color: var(--color-brand);
}

/* ==========================================================================
   BUTTONS — solid/bordered, sharp, uppercase, wide tracking
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	padding: 14px 26px;
	border: var(--border-thick) solid transparent;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	border-radius: var(--radius-none);
	line-height: 1;
	text-decoration: none;
}

.btn--sm { font-size: 12px; padding: 10px 20px; }
.btn--md { font-size: 13px; padding: 14px 30px; }
.btn--lg { font-size: 15px; padding: 18px 38px; letter-spacing: 1.5px; }

.btn--primary {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: #fff;
}

.btn--primary:hover {
	background: var(--navy-900);
	border-color: var(--navy-900);
	color: #fff;
}

.btn--dark {
	background: var(--navy-900);
	border-color: var(--navy-900);
	color: #fff;
}

.btn--dark:hover {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: #fff;
}

.btn--outline {
	background: transparent;
	border-color: var(--navy-900);
	color: var(--navy-900);
}

.btn--outline:hover {
	background: var(--navy-900);
	color: #fff;
}

.btn--outline-light {
	background: transparent;
	border-color: var(--color-border-light);
	color: #fff;
}

.btn--outline-light:hover {
	background: #fff;
	color: var(--navy-900);
	border-color: #fff;
}

/* Text link sa strelicom (editorijalni stil) */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-brand);
	font-size: 12.5px;
	font-weight: var(--fw-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: gap .2s ease, color .2s ease;
}

.link-arrow:hover {
	gap: 12px;
	color: var(--color-brand);
}

/* ==========================================================================
   PHONE CTA — 2px bordered box
   ========================================================================== */
.phone-cta {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 16px 36px;
	border: var(--border-thick) solid var(--navy-900);
	color: var(--navy-900);
	background: #fff;
	text-decoration: none;
	border-radius: var(--radius-none);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.phone-cta--dark {
	border-color: var(--color-border-light);
	color: #fff;
	background: transparent;
}

.phone-cta:hover {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: #fff;
}

.phone-cta__label {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: var(--fw-bold);
	opacity: .7;
}

.phone-cta__number {
	font-size: 22px;
	font-weight: var(--fw-black);
	letter-spacing: 1px;
}

/* ==========================================================================
   HEADER — sticky solid navy
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--color-bg-dark);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.site-header__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 18px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.site-header__logo img {
	height: 32px;
	cursor: pointer;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: nowrap;
}

/* wp_nav_menu generiše <ul> unutar <nav> — mora da bude horizontalan */
.site-header__nav ul,
.site-header__nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: nowrap;
}

.site-header__nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__nav a {
	color: #fff;
	font-size: 12px;
	font-weight: var(--fw-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	padding-bottom: 6px;
	position: relative;
	display: inline-block;
}

/* Underline animacija na nav link */
.site-header__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--color-brand);
	transition: width .2s ease;
}

.site-header__nav a:hover::after,
.site-header__nav .current-menu-item > a::after,
.site-header__nav .current_page_item > a::after,
.site-header__nav .current-menu-parent > a::after {
	width: 100%;
}

.site-header__nav a:hover,
.site-header__nav .current-menu-item > a,
.site-header__nav .current_page_item > a,
.site-header__nav .current-menu-parent > a {
	color: var(--color-brand);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.site-header__phone {
	color: #fff;
	font-size: 13px;
	font-weight: var(--fw-bold);
	letter-spacing: .5px;
	white-space: nowrap;
}

.site-header__phone:hover {
	color: var(--color-brand);
}

/* Mobile toggle */
.site-header__toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	width: 40px;
	height: 40px;
	z-index: 10;
	justify-content: center;
	align-items: center;
}

.site-header__toggle span {
	display: block;
	width: 26px;
	height: 2px;
	background: #fff;
	transition: transform .4s cubic-bezier(.68, -.55, .27, 1.55), opacity .25s ease, width .3s ease;
	transform-origin: center;
}

.site-header__toggle.active span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.site-header__toggle.active span:nth-child(2) {
	opacity: 0;
	width: 0;
}
.site-header__toggle.active span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* Mobile overlay menu */
.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: var(--color-bg-dark);
	z-index: var(--z-mobile-menu);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-5);
	padding: var(--space-8);
	opacity: 0;
	transform: translateX(100%);
	pointer-events: none;
	transition: opacity .4s cubic-bezier(.22, 1, .36, 1), transform .4s cubic-bezier(.22, 1, .36, 1);
}

.mobile-menu.open {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

.mobile-menu a {
	color: #fff;
	font-size: 28px;
	font-weight: var(--fw-thin);
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: color .25s ease, transform .25s ease;
	opacity: 0;
	transform: translateX(30px);
}

/* Stagger animacija linkova pri otvaranju menija */
.mobile-menu.open a {
	animation: mobile-menu-item-in .5s cubic-bezier(.22, 1, .36, 1) forwards;
}

.mobile-menu.open a:nth-child(1) { animation-delay: .12s; }
.mobile-menu.open a:nth-child(2) { animation-delay: .17s; }
.mobile-menu.open a:nth-child(3) { animation-delay: .22s; }
.mobile-menu.open a:nth-child(4) { animation-delay: .27s; }
.mobile-menu.open a:nth-child(5) { animation-delay: .32s; }
.mobile-menu.open a:nth-child(6) { animation-delay: .37s; }

@keyframes mobile-menu-item-in {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible {
	color: var(--color-brand);
	transform: translateX(8px);
}

.mobile-menu__phone {
	margin-top: var(--space-5);
	color: var(--gray-500);
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* ==========================================================================
   HERO — asymmetric split sa offset frame borderom
   ========================================================================== */
.hero {
	background: var(--color-bg-dark);
	overflow: hidden;
}

.hero__grid {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 110px 32px 130px;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 60px;
	align-items: center;
}

.hero__text {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.hero__eyebrow {
	color: var(--color-brand);
	font-size: 14px;
	letter-spacing: var(--tracking-wider);
	font-weight: var(--fw-light);
}

.hero__title {
	color: #fff;
	font-weight: var(--fw-thin);
	font-size: var(--fs-hero);
	line-height: 1.1;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0;
}

.hero__text p {
	color: var(--gray-500);
	max-width: 440px;
	font-size: var(--fs-body);
	line-height: 1.75;
	margin: 0;
}

.hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* Offset frame — ključni editorijalni motiv */
.offset-frame {
	position: relative;
}

.offset-frame::before {
	content: "";
	position: absolute;
	top: -18px;
	right: -18px;
	bottom: 18px;
	left: 18px;
	border: var(--border-thick) solid var(--color-brand);
	z-index: 0;
}

/* alternate offset smer */
.offset-frame--bl::before {
	top: 18px;
	right: 18px;
	bottom: -18px;
	left: -18px;
}

.offset-frame__media {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.offset-frame--bl .offset-frame__media {
	aspect-ratio: 5 / 4;
}

.offset-frame__media img,
.offset-frame__media .image-slot {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Image-slot placeholder */
.image-slot {
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .02) 12px, rgba(255, 255, 255, .04) 12px, rgba(255, 255, 255, .04) 24px),
		var(--navy-800);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gray-500);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	padding: 20px;
	border: 1px dashed rgba(255, 255, 255, .1);
}

.image-slot--light {
	background:
		repeating-linear-gradient(45deg, rgba(0, 0, 0, .015), rgba(0, 0, 0, .015) 12px, rgba(0, 0, 0, .03) 12px, rgba(0, 0, 0, .03) 24px),
		#eef0f4;
	color: #9aa0a6;
	border-color: rgba(0, 0, 0, .08);
}

/* ==========================================================================
   STATS — floating kartica koja overlap-uje hero (2px solid border)
   ========================================================================== */
.stats-section {
	background: #fff;
	padding: 0 32px;
	position: relative;
}

.stats-card {
	max-width: 1100px;
	margin: -64px auto 0;
	background: #fff;
	border: var(--border-thick) solid var(--color-heading-dark);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	position: relative;
	z-index: 2;
}

.stat {
	padding: 36px 24px;
	text-align: center;
	border-left: 1px solid var(--color-hairline);
}

.stat:first-child {
	border-left: none;
}

.stat__number {
	color: var(--color-brand);
	font-size: 44px;
	font-weight: var(--fw-black);
	line-height: 1;
}

.stat__label {
	color: var(--color-text-on-light);
	font-size: 12.5px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-top: 10px;
}

/* ==========================================================================
   SEKCIJE — opšti pattern
   ========================================================================== */
.section {
	padding: var(--space-9) 32px;
}

.section--dark {
	background: var(--color-bg-dark);
	color: var(--color-text-on-dark);
}

.section--dark-alt {
	background: var(--color-bg-dark-alt);
	color: var(--color-text-on-dark);
}

.section--light {
	background: #fff;
}

.section--light-alt {
	background: var(--color-bg-light-alt);
}

.section__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.section__inner--center {
	text-align: center;
}

.section__inner--narrow {
	max-width: 820px;
}

/* ==========================================================================
   INTRO BLOCK (Zašto Expert?)
   ========================================================================== */
.intro-block h2 {
	color: var(--color-heading-dark);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 22px;
}

.intro-block p {
	color: var(--color-text-on-light);
	font-size: var(--fs-body);
	line-height: 1.8;
	margin: 0;
}

/* ==========================================================================
   BENTO FEATURES — 4 ćelije, prva i poslednja span 2, 1px hairline podele
   ========================================================================== */
.bento {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--color-hairline);
	border: 1px solid var(--color-hairline);
}

.bento__cell {
	background: #fff;
	padding: 36px 28px;
}

.bento__cell--span-2 {
	grid-column: span 2;
}

.icon-feature {
	text-align: left;
}

.icon-feature__icon {
	width: 56px;
	height: 56px;
	margin-bottom: var(--space-4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-feature__icon img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.icon-feature__title {
	font-size: var(--fs-h4);
	color: var(--color-heading-dark);
	text-transform: uppercase;
	font-weight: var(--fw-bold);
	margin: 0 0 10px;
}

.icon-feature__desc {
	color: var(--color-text-on-light);
	font-size: var(--fs-small);
	line-height: 1.65;
	margin: 0;
}

/* ==========================================================================
   SERVICES BENTO — asymmetric, sa gradient overlay i text na slici
   ========================================================================== */
.services-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	gap: 20px;
}

.service-tile {
	position: relative;
	background: #fff;
	border: 1px solid var(--color-hairline);
	overflow: hidden;
	transition: border-color .2s ease;
}

.service-tile:hover {
	border-color: var(--color-brand);
}

.service-tile__media {
	position: absolute;
	inset: 0;
}

.service-tile__media img,
.service-tile__media .image-slot--light {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-tile__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(9, 17, 36, .88) 0%, rgba(9, 17, 36, .15) 55%, transparent 100%);
}

.service-tile__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px;
}

.service-tile__title {
	font-size: 18px;
	color: #fff;
	text-transform: uppercase;
	font-weight: var(--fw-bold);
	margin: 0 0 8px;
}

.service-tile__desc {
	color: var(--gray-500);
	font-size: 13.5px;
	line-height: 1.55;
	margin: 0 0 14px;
	max-width: 340px;
}

.service-tile__link {
	color: var(--color-brand);
	font-size: 12.5px;
	font-weight: var(--fw-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.service-tile__link:hover {
	color: #fff;
}

/* Span helperi za bento pozicije */
.span-2 { grid-column: span 2; }
.row-2  { grid-row: span 2; }

/* ==========================================================================
   USLUGE GRID (klasične kartice za services page)
   ========================================================================== */
.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.service-card {
	background: #fff;
	border: 1px solid var(--color-hairline);
	display: flex;
	flex-direction: column;
	transition: border-color .2s ease;
}

.service-card:hover {
	border-color: var(--color-brand);
}

.service-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.service-card__media img,
.service-card__media .image-slot--light {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-card__body {
	padding: 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.service-card__title {
	font-size: 19px;
	color: var(--color-heading-dark);
	text-transform: uppercase;
	font-weight: var(--fw-bold);
	margin: 0 0 12px;
}

.service-card__title a {
	color: inherit;
}

.service-card__title a:hover {
	color: var(--color-brand);
}

.service-card__desc {
	color: var(--color-text-on-light);
	font-size: var(--fs-small);
	line-height: 1.65;
	margin: 0 0 var(--space-5);
	flex: 1;
}

.service-card__action {
	align-self: flex-start;
}

/* ==========================================================================
   ABOUT TEASER — split sa offset frame
   ========================================================================== */
.split {
	max-width: var(--container-narrow);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.split__title {
	font-size: var(--fs-h2);
	color: var(--color-heading-dark);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	margin: 0 0 20px;
	line-height: 1.2;
}

.split__text {
	color: var(--color-text-on-light);
	font-size: var(--fs-body);
	line-height: 1.8;
	margin: 0 0 28px;
}

/* ==========================================================================
   TESTIMONIALS — hairline podeljene ćelije na dark sekciji
   ========================================================================== */
.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, .12);
}

.testimonial {
	background: var(--color-bg-dark);
	padding: 32px;
}

.testimonial__quote {
	color: var(--gray-500);
	font-size: 15px;
	line-height: 1.75;
	margin: 0 0 var(--space-5);
	font-style: italic;
}

.testimonial__name {
	color: #fff;
	font-size: 13px;
	font-weight: var(--fw-bold);
	letter-spacing: .5px;
}

/* ==========================================================================
   FAQ — two columns
   ========================================================================== */
.faq {
	max-width: 980px;
	margin: 0 auto;
	columns: 2;
	column-gap: 48px;
}

.faq__item {
	border-bottom: 1px solid var(--color-hairline);
	padding: 16px 0;
	break-inside: avoid;
}

.faq__summary {
	color: var(--color-heading-dark);
	font-weight: var(--fw-bold);
	font-size: 15.5px;
	cursor: pointer;
	list-style: none;
}

.faq__summary::-webkit-details-marker {
	color: var(--color-brand);
}

.faq__answer {
	color: var(--color-text-on-light);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 12px 0 0;
}

/* ==========================================================================
   FINAL CTA — diagonalni crveni clip-path
   ========================================================================== */
.cta-final {
	position: relative;
	background: var(--color-bg-dark);
	padding: 100px 32px;
	overflow: hidden;
}

.cta-final__diagonal {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 45%;
	background: var(--color-brand);
	clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);
	opacity: .9;
}

.cta-final__inner {
	position: relative;
	max-width: var(--container-max);
	margin: 0 auto;
}

.cta-final__content {
	max-width: 600px;
}

.cta-final h2 {
	color: #fff;
	font-size: 36px;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 18px;
	line-height: 1.2;
}

.cta-final p {
	color: var(--gray-500);
	font-size: var(--fs-body);
	line-height: 1.75;
	margin: 0 0 32px;
}

.cta-final__actions {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}

/* ==========================================================================
   PAGE HEADER (unutrašnje strane) — tanki weight-100 naslov
   ========================================================================== */
.page-header {
	background: var(--color-bg-dark);
	padding: 110px 32px 70px;
}

.page-header__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.page-header--center .page-header__inner {
	max-width: 1240px;
	text-align: left;
}

.page-header__eyebrow {
	color: var(--color-brand);
	font-size: 14px;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.page-header__title {
	color: #fff;
	font-size: var(--fs-h1);
	font-weight: var(--fw-thin);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0;
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.kontakt-grid {
	max-width: var(--container-narrow);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
}

.kontakt-info h3 {
	color: var(--color-heading-dark);
	font-size: 22px;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	margin: 0 0 20px;
}

.kontakt-info p {
	color: var(--color-text-on-light);
	font-size: var(--fs-body);
	line-height: 1.8;
	margin: 0 0 30px;
}

.kontakt-map .offset-frame__media {
	aspect-ratio: 5 / 4;
}

.kontakt-map iframe,
.kontakt-map img,
.kontakt-map .image-slot--light {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* ==========================================================================
   ZAKAZIVANJE — booking
   ========================================================================== */
.booking-intro {
	text-align: center;
	margin-bottom: 36px;
}

.booking-intro p {
	color: var(--color-text-on-light);
	max-width: 560px;
	margin: 0 auto;
	font-size: var(--fs-body);
	line-height: 1.7;
}

.booking-wrap {
	display: flex;
	justify-content: center;
}

.booking-alternative {
	text-align: center;
	margin-top: var(--space-8);
}

.booking-alternative p {
	color: var(--color-text-on-light);
	font-size: var(--fs-small);
	margin: 0 0 16px;
}

#amelia-frontend-booking,
.ameliacb-frontend {
	max-width: 100% !important;
}

/* ==========================================================================
   FOOTER — 3-col grid
   ========================================================================== */
.site-footer {
	background: var(--color-bg-dark);
}

.site-footer__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 60px 32px;
	display: grid;
	grid-template-columns: 1fr 1.4fr auto;
	gap: 48px;
	align-items: start;
}

.site-footer__social {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.site-footer__social a {
	color: var(--gray-500);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: var(--fw-bold);
}

.site-footer__social a:hover {
	color: var(--color-brand);
}

.site-footer__about {
	color: var(--gray-500);
	line-height: 1.75;
	font-size: 15px;
	margin: 0;
}

.site-footer__logo img {
	height: 60px;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	text-align: center;
	padding: 22px;
}

.site-footer__bottom p {
	color: var(--gray-500);
	font-size: 13px;
	margin: 0;
}

.site-footer__bottom a {
	color: var(--gray-500);
}

.site-footer__bottom a:hover {
	color: var(--color-brand);
}

/* ==========================================================================
   SINGLE USLUGA
   ========================================================================== */
.usluga-single {
	background: #fff;
	padding: var(--space-9) 32px;
}

.usluga-single__inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
}

.usluga-single__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--space-4);
	font-size: 13px;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.usluga-single__title {
	color: var(--color-heading-dark);
	font-size: var(--fs-h1);
	font-weight: var(--fw-thin);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 var(--space-5);
}

.usluga-single__content {
	color: var(--color-text-on-light);
	font-size: var(--fs-body);
	line-height: 1.8;
}

.usluga-single__cta {
	margin-top: var(--space-6);
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
}

/* ==========================================================================
   INDEX/BLOG fallback
   ========================================================================== */
.pagination,
.nav-links {
	text-align: center;
	margin-top: var(--space-7);
}

.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-block;
	padding: 10px 16px;
	margin: 0 4px;
	border: 1px solid var(--color-hairline);
	color: var(--color-heading-dark);
	font-weight: var(--fw-bold);
	transition: all .2s ease;
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current,
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: #fff;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.hero__grid {
		grid-template-columns: 1fr;
		gap: var(--space-7);
		padding-top: 90px;
		padding-bottom: 100px;
	}

	.offset-frame__media {
		aspect-ratio: 5 / 4;
	}

	.services-bento {
		grid-template-columns: repeat(2, 1fr);
	}

	.span-2 { grid-column: span 2; }
	.row-2  { grid-row: span 1; }

	.bento {
		grid-template-columns: repeat(2, 1fr);
	}

	.bento__cell--span-2 {
		grid-column: span 2;
	}
}

@media (max-width: 860px) {
	.site-header__toggle {
		display: flex;
	}

	.site-header__nav,
	.site-header__actions .site-header__phone,
	.site-header__actions .btn {
		display: none;
	}

	.hero__title {
		font-size: 44px;
	}

	.split {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.testimonials-grid {
		grid-template-columns: 1fr;
	}

	.kontakt-grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.cta-final__diagonal {
		width: 100%;
		clip-path: polygon(0 80%, 100% 50%, 100% 100%, 0 100%);
	}

	:root {
		--space-9: 70px;
		--space-10: 90px;
	}
}

@media (max-width: 600px) {
	.faq {
		columns: 1;
	}

	.stats-card {
		grid-template-columns: 1fr;
		margin-top: -40px;
	}

	.stat {
		border-left: none;
		border-bottom: 1px solid var(--color-hairline);
	}

	.stat:last-child {
		border-bottom: none;
	}

	.services-bento {
		grid-template-columns: 1fr;
		grid-auto-rows: 200px;
	}

	.span-2,
	.bento__cell--span-2 {
		grid-column: span 1;
	}

	.bento {
		grid-template-columns: 1fr;
	}

	.hero__title {
		font-size: 36px;
		letter-spacing: 1px;
	}

	.page-header__title {
		font-size: 40px;
	}

	.section {
		padding: var(--space-9) 24px;
	}

	.cta-final__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cta-final__actions .btn,
	.cta-final__actions .phone-cta {
		width: 100%;
	}
}

/* ==========================================================================
   PRISTUPAČNOST
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   WP CORE
   ========================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.aligncenter { display: block; margin: var(--space-4) auto; }
.alignleft { float: left; margin: 0 var(--space-4) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-4); }
.sticky { border-left: var(--border-thick) solid var(--color-brand); }
.wp-caption { max-width: 100%; }
.wp-caption-text {
	font-size: var(--fs-small);
	color: var(--gray-500);
	font-style: italic;
	text-align: center;
	margin-top: var(--space-2);
}