/* =========================================================================
   RED — fini sloj dizajna
   Sve što blok editor ne ume sam: zrno papira, vodeni žig amblema,
   reveal animacije, hover/focus stanja, forma, editorijalni detalji.
   Dizajn tokeni žive u theme.json — ovde se koriste njihove CSS promenljive.
   ========================================================================= */

:root {
	--red--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--red--rule: 1px solid rgba(176, 141, 87, 0.55);
	--red--rule-soft: 1px solid rgba(176, 141, 87, 0.3);
}

/* Glatko klizanje do sidra, sa prostorom za lepljivo zaglavlje. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(4.5rem + 1rem);
}

::selection {
	background: var(--wp--preset--color--oxblood);
	color: var(--wp--preset--color--parchment);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Bez podrazumevanog razmaka između zaglavlja, sadržaja i podnožja —
   sekcije same nose svoj vertikalni ritam. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
   Fokus — vidljiv, topao, dosledan
   ------------------------------------------------------------------------- */

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--bronze);
	outline-offset: 3px;
	border-radius: 2px;
}

.wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--parchment);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Zrno papira (feTurbulence šum) — samo tamne sekcije, vrlo suptilno
   ------------------------------------------------------------------------- */

.red-grain {
	position: relative;
	isolation: isolate;
}

.red-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.055;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-size: 180px 180px;
}

/* -------------------------------------------------------------------------
   Vodeni žig amblema — bronza na 5–6%, uvek diskretno
   ------------------------------------------------------------------------- */

.red-watermark {
	position: relative;
	overflow: hidden;
}

.red-watermark::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	right: -6rem;
	width: min(46rem, 85vw);
	aspect-ratio: 38 / 35;
	transform: translateY(-50%);
	pointer-events: none;
	background-image: url("../img/logo-mono.png");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.06;
}

/* -------------------------------------------------------------------------
   Zaglavlje — lepljivo, tamno, sa bronzanom linijom
   ------------------------------------------------------------------------- */

.red-header {
	position: sticky;
	top: 0;
	z-index: 60;
	border-bottom: var(--red--rule-soft);
	transition: box-shadow 0.35s var(--red--ease), background-color 0.35s var(--red--ease);
}

.admin-bar .red-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.red-header.is-scrolled {
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.65);
}

/* Logotip u zaglavlju */
.red-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--wp--preset--color--parchment);
}

.red-brand svg,
.red-brand img {
	display: block;
	height: 2.9rem;
	width: auto;
	color: var(--wp--preset--color--bronze);
}

.red-brand .red-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 640;
	font-size: 1.45rem;
	letter-spacing: 0.16em;
	line-height: 1;
	transform: translateY(0.05em);
}

.red-brand:hover .red-brand__name {
	color: var(--wp--preset--color--bronze);
	transition: color 0.35s var(--red--ease);
}

/* Navigacija: podvlaka koja izraste ispod stavke */
.red-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
}

.red-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--bronze);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s var(--red--ease);
}

.red-header .wp-block-navigation-item__content:hover::after,
.red-header .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

.red-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--bronze);
}

/* „Pridruži se" u navigaciji — diskretno uokvireno kao poziv */
.red-nav-cta .wp-block-navigation-item__content {
	border: 1px solid rgba(176, 141, 87, 0.55);
	border-radius: 2px;
	padding: 0.45rem 1rem;
	transition: border-color 0.3s var(--red--ease), background-color 0.3s var(--red--ease);
}

.red-nav-cta .wp-block-navigation-item__content::after {
	display: none;
}

.red-nav-cta .wp-block-navigation-item__content:hover {
	border-color: var(--wp--preset--color--bronze);
	background: rgba(176, 141, 87, 0.12);
}

/* Hero: sadržaj vertikalno centriran unutar min-visine */
.red-hero.is-layout-constrained {
	align-content: center;
}

/* Mobilni meni preko celog ekrana — tamna pozadina već ide iz bloka */
.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: 6rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 540;
}

/* -------------------------------------------------------------------------
   Editorijalni detalji
   ------------------------------------------------------------------------- */

/* Uvodni pasus u hero sekcijama: kraća linija (38rem), ali poravnata sa
   levom ivicom sadržajne kolone od 74rem — i na vrlo širokim ekranima. */
.is-layout-constrained > .red-lead {
	max-width: 38rem;
	margin-left: max(calc((100% - 74rem) / 2), 0px) !important;
}

/* Nadnaslov sekcije: sitne verzalke sa bronzanom crticom */
.red-kicker {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bronze);
}

.red-kicker::before {
	content: "";
	width: 2.25rem;
	height: 1px;
	background: var(--wp--preset--color--bronze);
	opacity: 0.8;
	flex: none;
}

/* Na svetlim podlogama bronza pada ispod AA kontrasta — koristi tamniju nijansu */
.has-parchment-background-color .red-kicker,
.has-parchment-2-background-color .red-kicker,
.has-parchment-background-color .red-num,
.has-parchment-2-background-color .red-num,
.has-parchment-background-color .red-soon,
.has-parchment-2-background-color .red-soon,
.has-parchment-background-color .red-placeholder p,
.has-parchment-2-background-color .red-placeholder p {
	color: #7e6135;
}

/* Redni broj vrednosti — veliki serifni broj, bronza */
.red-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	font-style: italic;
	color: var(--wp--preset--color--bronze);
	line-height: 1;
}

/* Bronzane linije kao ivice sekcija */
.red-rule-top { border-top: var(--red--rule-soft); }
.red-rule-bottom { border-bottom: var(--red--rule-soft); }

/* Inicijal (drop cap) */
p.has-drop-cap::first-letter {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--oxblood);
	font-size: 5.2em;
	padding-right: 0.08em;
	margin-top: 0.05em;
}

/* -------------------------------------------------------------------------
   Fotografije — ujednačen, topao editorijalni tretman
   ------------------------------------------------------------------------- */

.red-photo img {
	border-radius: 3px;
	filter: sepia(0.06) saturate(0.88) contrast(1.04);
	box-shadow: 0 1px 2px rgba(23, 19, 15, 0.16), 0 18px 44px -18px rgba(23, 19, 15, 0.38);
}

/* Fotografija sa bronzanim paspartuom */
.red-photo--frame img {
	outline: 1px solid rgba(176, 141, 87, 0.45);
	outline-offset: 6px;
}

/* -------------------------------------------------------------------------
   Kartice akcija (na tamnoj podlozi)
   ------------------------------------------------------------------------- */

.red-card {
	border: 1px solid rgba(176, 141, 87, 0.26);
	border-radius: 3px;
	overflow: hidden;
	transition: transform 0.4s var(--red--ease), border-color 0.4s var(--red--ease), box-shadow 0.4s var(--red--ease);
}

.red-card:hover,
.red-card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(176, 141, 87, 0.6);
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6);
}

.red-card .red-photo img {
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.6s var(--red--ease), filter 0.6s var(--red--ease);
}

.red-card:hover .red-photo img {
	transform: scale(1.025);
	filter: sepia(0.02) saturate(1) contrast(1.05);
}

/* Naslov kartice kao link preko cele kartice */
.red-card h3 a {
	text-decoration: none;
	color: inherit;
}

.red-card h3 a:hover {
	color: var(--wp--preset--color--bronze);
}

/* -------------------------------------------------------------------------
   Jasno označeni čuvari mesta (placeholder) za sadržaj koji stiže
   ------------------------------------------------------------------------- */

.red-placeholder {
	display: grid;
	place-items: center;
	text-align: center;
	padding: 2rem 1.5rem;
	border: 1px dashed rgba(176, 141, 87, 0.65);
	border-radius: 3px;
	background:
		repeating-linear-gradient(-45deg, transparent 0 14px, rgba(176, 141, 87, 0.05) 14px 15px);
	color: inherit;
}

.red-placeholder p {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bronze);
}

.red-ratio-32 { aspect-ratio: 3 / 2; }
.red-ratio-43 { aspect-ratio: 4 / 3; }
.red-ratio-45 { aspect-ratio: 4 / 5; }
.red-ratio-169 { aspect-ratio: 16 / 9; }

/* -------------------------------------------------------------------------
   Dugmad — prelazi i „okvir" varijanta na tamnom
   ------------------------------------------------------------------------- */

.wp-block-button__link {
	transition: background-color 0.3s var(--red--ease), color 0.3s var(--red--ease),
		border-color 0.3s var(--red--ease), transform 0.3s var(--red--ease),
		box-shadow 0.3s var(--red--ease);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -12px rgba(110, 26, 32, 0.55);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* „Okvir" stil: providno dugme sa tankim okvirom */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(242, 235, 221, 0.55);
	color: var(--wp--preset--color--parchment);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--parchment);
	background: rgba(242, 235, 221, 0.08);
	box-shadow: none;
}

/* Okvir varijanta na svetloj podlozi */
.has-parchment-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-parchment-2-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(23, 19, 15, 0.45);
	color: var(--wp--preset--color--ink);
}

.has-parchment-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-parchment-2-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink);
	background: rgba(23, 19, 15, 0.05);
}

/* -------------------------------------------------------------------------
   Kontakt forma
   ------------------------------------------------------------------------- */

.red-form label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
}

.red-form input[type="text"],
.red-form input[type="email"],
.red-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	margin-bottom: 1.4rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: rgba(255, 253, 248, 0.7);
	border: 1px solid rgba(23, 19, 15, 0.28);
	border-radius: 2px;
	transition: border-color 0.25s var(--red--ease), box-shadow 0.25s var(--red--ease);
}

.red-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.red-form input:focus,
.red-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--bronze);
	box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.25);
}

.red-form button[type="submit"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--parchment);
	background: var(--wp--preset--color--crimson);
	border: none;
	border-radius: 2px;
	padding: 0.9rem 1.9rem;
	cursor: pointer;
	transition: background-color 0.3s var(--red--ease), transform 0.3s var(--red--ease),
		box-shadow 0.3s var(--red--ease);
}

.red-form button[type="submit"]:hover {
	background: var(--wp--preset--color--oxblood);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -12px rgba(110, 26, 32, 0.55);
}

/* Honeypot polje — nevidljivo za ljude, primamljivo za botove */
.red-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Statusna poruka posle slanja (ubacuje je red.js) */
.red-notice {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	border-radius: 2px;
	font-weight: 600;
}

.red-notice--ok {
	border: 1px solid rgba(176, 141, 87, 0.6);
	background: rgba(176, 141, 87, 0.12);
}

.red-notice--err {
	border: 1px solid rgba(193, 39, 45, 0.5);
	background: rgba(193, 39, 45, 0.08);
}

/* -------------------------------------------------------------------------
   Reveal animacije — tek kad je JS tu; poštuje prefers-reduced-motion
   ------------------------------------------------------------------------- */

html.js .red-reveal,
html.js .red-stagger > * {
	opacity: 0;
	translate: 0 26px;
	transition: opacity 0.7s var(--red--ease), translate 0.7s var(--red--ease);
	transition-delay: calc(var(--red-i, 0) * 70ms);
}

html.js .red-reveal.is-visible,
html.js .red-stagger.is-visible > * {
	opacity: 1;
	translate: 0 0;
}

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

	html.js .red-reveal,
	html.js .red-stagger > * {
		opacity: 1;
		translate: none;
		transition: none;
	}

	.wp-block-button__link:hover,
	.red-card:hover,
	.red-card:hover .red-photo img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Sitnice
   ------------------------------------------------------------------------- */

/* Tabela sadržaja i ostali dugi elementi nikad ne guraju stranicu u stranu */
img, svg, video {
	max-width: 100%;
	height: auto;
}

/* Linkovi u tekstu na tamnim podlogama — bronza umesto tamnocrvene */
.has-ink-background-color :is(p, li, figcaption) a,
.has-ink-2-background-color :is(p, li, figcaption) a,
.has-ember-gradient-background :is(p, li, figcaption) a {
	color: var(--wp--preset--color--bronze);
}

.has-ink-background-color :is(p, li, figcaption) a:hover,
.has-ink-2-background-color :is(p, li, figcaption) a:hover,
.has-ember-gradient-background :is(p, li, figcaption) a:hover {
	color: var(--wp--preset--color--parchment);
}

/* Footer linkovi */
.red-footer :is(p, li) a,
.red-footer a {
	color: inherit;
	text-decoration: none;
}

.red-footer a:hover {
	color: var(--wp--preset--color--bronze);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* Oznaka „uskoro" pored mreža koje još nemaju adresu */
.red-soon {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bronze);
	border: 1px dashed rgba(176, 141, 87, 0.5);
	border-radius: 2px;
	padding: 0.15rem 0.5rem;
	white-space: nowrap;
}