/* Bajo Projekt: what theme.json can't say. Colours, fonts and sizes are theme.json's presets; the block
   styles (.is-style-*) are registered in functions.php. */

:root {
	--bp-tus: var(--wp--preset--color--tus);
	--bp-grafit: var(--wp--preset--color--grafit);
	--bp-beton: var(--wp--preset--color--beton);
	--bp-linija: var(--wp--preset--color--linija);
	--bp-kamen: var(--wp--preset--color--kamen);
	--bp-papir: var(--wp--preset--color--papir);
	--bp-bijela: var(--wp--preset--color--bijela);
	--bp-opeka: var(--wp--preset--color--opeka);
	--bp-opeka-tamna: var(--wp--preset--color--opeka-tamna);
	--bp-opeka-svijetla: var(--wp--preset--color--opeka-svijetla);
	--bp-naslovi: var(--wp--preset--font-family--naslovi);
	--bp-crta: var(--bp-tus);      /* the title block's lines */
	--bp-rub: max(var(--wp--style--root--padding-left, 1.25rem), calc((100vw - var(--wp--style--global--wide-size, 1200px)) / 2));
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:focus-visible { outline: 2px solid var(--bp-opeka); outline-offset: 3px; }
::selection { background: var(--bp-opeka); color: var(--bp-bijela); }
a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------ type */

/* labels in capitals, spaced like the wordmark */
.is-style-oznaka,
.bp-header .wp-block-navigation,
.bp-oznaka {
	font-family: var(--bp-naslovi);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.is-style-oznaka { font-size: 0.75rem !important; line-height: 1.45; }
.is-style-oznaka:not(.has-text-color) { color: var(--bp-beton); }
.is-style-oznaka + :is(h1, h2, h3, h4) { margin-block-start: 0.75rem; }

.is-style-uvod { font-size: var(--wp--preset--font-size--medium); line-height: 1.55; }
.is-style-uvod:not(.has-text-color) { color: var(--bp-tus); }

.is-style-izjava {
	font-family: var(--bp-naslovi);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.is-style-izjava:not(.has-text-color) { color: var(--bp-tus); }

.bp-broj {
	font-family: var(--bp-naslovi);
	font-weight: 300;
	font-size: clamp(3rem, 6vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--bp-opeka);
}

.bp-napomena { border-left: 2px solid var(--bp-opeka); padding-left: 1.1rem; }
.bp-napomena:not(.has-text-color) { color: var(--bp-tus); }

/* ------------------------------------------------------------------ lists */

.is-style-stavke, .is-style-crtice { list-style: none; padding-left: 0 !important; }
.is-style-stavke { counter-reset: bp-stavka; border-top: 1px solid var(--bp-linija); }
.is-style-stavke > li {
	counter-increment: bp-stavka;
	position: relative;
	margin: 0;
	padding: 0.8rem 0 0.85rem 3rem;
	border-bottom: 1px solid var(--bp-linija);
}
.is-style-stavke > li::before {
	content: counter(bp-stavka, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.02rem;
	font: 500 0.75rem/1.4 var(--bp-naslovi);
	letter-spacing: 0.2em;
	color: var(--bp-opeka);
}
.is-style-crtice > li { position: relative; padding-left: 1.6rem; margin: 0.35rem 0; }
.is-style-crtice > li::before { content: "—"; position: absolute; left: 0; color: var(--bp-opeka); }

/* ------------------------------------------------------------------ buttons */

.wp-block-button__link { transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--bp-tus);
	border: 1px solid var(--bp-tus);
	padding: 1rem 1.5rem 0.9rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus) { background: var(--bp-tus); color: var(--bp-papir); }

.wp-block-button.is-style-tekst > .wp-block-button__link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--bp-opeka);
}
.wp-block-button.is-style-tekst > .wp-block-button__link::after { content: "\00a0→"; }
.wp-block-button.is-style-tekst > .wp-block-button__link:is(:hover, :focus) { color: var(--bp-opeka-tamna); text-decoration: underline; }

/* ------------------------------------------------------------------ the title block (sastavnica) */

/* As on a drawing sheet: white fields in an ink frame with lighter hairlines between them (the grid's gap
   shows the group's colour), registration marks at the corners, a small label over each value, the value in
   the heading face. */
.wp-block-group.is-style-sastavnica {
	--bp-list: var(--bp-bijela);   /* the fields */
	--bp-zica: #C4BDB0;            /* the hairlines between them */
	position: relative;
	gap: 1px !important;
	background: var(--bp-zica);
	border: 1.5px solid var(--bp-crta);
	transition: background-color 0.2s, border-color 0.2s;
}
/* the registration marks: an L at each corner, just outside the frame */
.wp-block-group.is-style-sastavnica::before {
	content: "";
	position: absolute;
	inset: -10px;
	pointer-events: none;
	--k: linear-gradient(var(--bp-opeka), var(--bp-opeka));
	background:
		var(--k) left top / 14px 1.5px no-repeat, var(--k) left top / 1.5px 14px no-repeat,
		var(--k) right top / 14px 1.5px no-repeat, var(--k) right top / 1.5px 14px no-repeat,
		var(--k) left bottom / 14px 1.5px no-repeat, var(--k) left bottom / 1.5px 14px no-repeat,
		var(--k) right bottom / 14px 1.5px no-repeat, var(--k) right bottom / 1.5px 14px no-repeat;
}
.is-style-sastavnica > * {
	position: relative;
	margin: 0 !important;
	min-width: 0;
	padding: 0.95rem 1.2rem 1.1rem;
	background: var(--bp-list);
}
.is-style-sastavnica > * > * { margin: 0 !important; }
.is-style-sastavnica > * > .is-style-oznaka {
	font-size: 0.625rem !important;
	letter-spacing: 0.22em;
	margin-bottom: 0.55rem !important;
}
.is-style-sastavnica > * > :not(.is-style-oznaka) {
	font-family: var(--bp-naslovi);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--bp-tus);
}
.is-style-sastavnica > * > :not(.is-style-oznaka) a { color: inherit; text-decoration: none; }
.is-style-sastavnica > * > :not(.is-style-oznaka) a:is(:hover, :focus) { color: var(--bp-opeka); text-decoration: underline; }
.is-style-sastavnica > .bp-puna { grid-column: 1 / -1; }
/* a field whose value is a figure (a year, a count): large and light, in Opeka */
.is-style-sastavnica > .bp-broj-polje > :not(.is-style-oznaka),
.is-style-sastavnica > * > .taxonomy-godina {
	font-size: 2.125rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--bp-opeka);
}

/* ------------------------------------------------------------------ cards */

/* Mreža kartica: cards side by side, divided by hairlines */
.wp-block-group.is-style-mreza {
	gap: 1px !important;
	background: var(--bp-linija);
	border: 1px solid var(--bp-linija);
}
.is-style-mreza > * {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0 !important;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--bp-bijela);
	transition: background-color 0.15s;
}
.is-style-mreza > * > * { margin: 0 !important; }
.is-style-mreza > * > .bp-dalje { margin-top: auto !important; padding-top: 0.75rem; }
.is-style-mreza > * :is(h2, h3) { font-size: var(--wp--preset--font-size--large); }
/* a heading's link covers the whole card */
.is-style-mreza > * :is(h2, h3) a { color: inherit; text-decoration: none; }
.is-style-mreza > * :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.is-style-mreza > *:has(:is(h2, h3) a):hover { background: var(--bp-papir); }
.is-style-mreza > *:has(:is(h2, h3) a):hover :is(h2, h3) { color: var(--bp-opeka); }

.wp-block-group.is-style-kartica { background: var(--bp-bijela); border: 1px solid var(--bp-linija); padding: clamp(1.5rem, 3vw, 2.25rem); }

/* a reference or a team member: the photo over a title block, framed like it. The frame and its lines
   turn Opeka on hover, and the arrow moves. */
.bp-kartica {
	--bp-crta: var(--bp-tus);
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 2px solid var(--bp-crta);
	background: var(--bp-bijela);
	transition: border-color 0.2s;
}
.bp-kartica > * { margin: 0 !important; }
.bp-kartica > .is-style-sastavnica { flex: 1; border-width: 2px 0 0; align-content: stretch; }  /* rows fill the card: no line colour shows below */
.bp-kartica > .is-style-sastavnica::before { content: none; }  /* the card is the frame */
.bp-kartica :is(.wp-block-post-featured-image, .wp-block-image) { overflow: hidden; }
.bp-kartica :is(.wp-block-post-featured-image, .wp-block-image) img { display: block; width: 100%; transition: transform 0.4s ease; }
/* in a card the fields are smaller: the card is the drawing, small */
.bp-kartica .is-style-sastavnica > * { padding: 0.8rem 1.1rem 0.9rem; }
.bp-kartica .is-style-sastavnica > * > .is-style-oznaka { margin-bottom: 0.35rem !important; }
.bp-kartica .is-style-sastavnica > * > :not(.is-style-oznaka) { font-size: 1rem; }
.bp-kartica .bp-puna { padding-block: 1rem 1.1rem; }
.bp-kartica .bp-puna > :not(.is-style-oznaka):not(.bp-mjesto) { font-size: 1.25rem; font-weight: 600; line-height: 1.2; padding-right: 2rem; }
.bp-kartica .bp-puna > .bp-mjesto { margin-top: 0.3rem !important; font: 400 0.875rem/1.4 var(--wp--preset--font-family--tekst); letter-spacing: 0; color: var(--bp-beton); }
/* a reference: the role takes the room it needs, the year a narrow field beside it */
.bp-reference .bp-kartica > .is-style-sastavnica { grid-template-columns: minmax(0, 1fr) auto; }
.bp-reference .bp-kartica > .is-style-sastavnica > :last-child { min-width: 6rem; }
.bp-kartica .is-style-sastavnica > * > .taxonomy-godina { font-size: 1.5rem; }
.bp-kartica .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bp-kartica .bp-puna:has(.wp-block-post-title a)::after {
	content: "→";
	position: absolute;
	right: 1.1rem;
	bottom: 0.95rem;
	font: 400 1.25rem/1 var(--bp-naslovi);
	color: var(--bp-tus);
	transition: transform 0.2s, color 0.2s;
}
.bp-kartica:has(.wp-block-post-title a):hover { --bp-crta: var(--bp-opeka); }
.bp-kartica:has(.wp-block-post-title a):hover .is-style-sastavnica { --bp-zica: var(--bp-opeka-svijetla); }
.bp-kartica:has(.wp-block-post-title a):hover img { transform: scale(1.03); }
.bp-kartica:has(.wp-block-post-title a):hover .wp-block-post-title a { color: var(--bp-opeka); }
.bp-kartica:has(.wp-block-post-title a):hover .bp-puna::after { color: var(--bp-opeka); transform: translateX(4px); }

/* a service's icon: thin lines like the drawings, one Opeka detail */
.wp-block-image.is-style-ikona { margin: 0 0 0.35rem !important; }
.wp-block-image.is-style-ikona img { width: 56px; height: 56px; }
.is-style-mreza > * > .is-style-ikona { margin-bottom: 0.4rem !important; }

/* Mozaik: a reference's photos, the first large; each opens full size (the lightbox) */
.wp-block-gallery.has-nested-images.is-style-mozaik {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.5rem, 1vw, 0.75rem);
}
.wp-block-gallery.has-nested-images.is-style-mozaik figure.wp-block-image {
	width: auto !important;
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.wp-block-gallery.has-nested-images.is-style-mozaik figure.wp-block-image:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.wp-block-gallery.has-nested-images.is-style-mozaik figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.wp-block-gallery.has-nested-images.is-style-mozaik figure.wp-block-image:hover img { transform: scale(1.03); }

.is-style-portret img { filter: grayscale(1) contrast(1.04); }

.wp-block-query-pagination { font-family: var(--bp-naslovi); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8125rem; }

/* ------------------------------------------------------------------ sections */

/* full-width sections and the template parts sit edge to edge: no block gap between them */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block: 0; }


.bp-crta { border-top: 1px solid var(--bp-linija); padding-top: clamp(2rem, 4vw, 3rem); }
.bp-crta:first-child { border-top: 0; padding-top: 0; }  /* the section above has its own edge */
.bp-split > .wp-block-column:first-child :is(h2, h3) { font-size: var(--wp--preset--font-size--large); line-height: 1.2; }
.bp-split > .wp-block-column:first-child .bp-broj + :is(h2, h3) { margin-top: 1rem; }

/* page head: the stamp's brush ring, faint, behind the title */
.bp-glava { position: relative; overflow: hidden; border-bottom: 1px solid var(--bp-linija); }
.bp-glava::after {
	content: "";
	position: absolute;
	top: -12%;
	right: calc(var(--bp-rub) - 220px);
	width: min(620px, 80vw);
	aspect-ratio: 1005.5 / 1033;
	background: url(../img/pecat-crni.svg) center / contain no-repeat;
	opacity: 0.06;
	pointer-events: none;
}
.bp-glava > * { position: relative; z-index: 1; }

/* the home page's opening: the site photo across the full width, the text on Tuš's gradient over its left
   side, the stamp's brush ring over the photo */
.wp-block-cover.bp-uvod { margin-block: 0; padding-block: clamp(4rem, 9vw, 7.5rem); border-bottom: 1px solid var(--bp-tus); }
.bp-uvod > .wp-block-cover__inner-container { z-index: 2; }
.bp-uvod::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 50%;
	right: calc(var(--bp-rub) - 60px);
	width: min(520px, 42vw);
	aspect-ratio: 1005.5 / 1033;
	transform: translateY(-50%);
	background: url(../img/pecat-bijeli.svg) center / contain no-repeat;
	opacity: 0.4;
	pointer-events: none;
}
.bp-uvod h1 { font-size: clamp(2.75rem, 5.5vw, 4.75rem); color: var(--bp-papir); }
.bp-uvod p { color: var(--bp-linija); }
.bp-uvod p.is-style-uvod { color: var(--bp-papir); }
.bp-uvod .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--bp-papir); border-color: var(--bp-papir); }
.bp-uvod .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus) { background: var(--bp-papir); color: var(--bp-tus); }

/* dark sections (Tuš): light text, lighter accent, title blocks in Grafit lines */
.has-tus-background-color { --bp-crta: var(--bp-grafit); }
.has-tus-background-color :is(h1, h2, h3, h4, .is-style-izjava, .is-style-uvod):not(.has-text-color) { color: var(--bp-papir); }
.has-tus-background-color .is-style-oznaka:not(.has-text-color) { color: var(--bp-linija); }
.has-tus-background-color a:not(.wp-element-button) { color: var(--bp-opeka-svijetla); }
.has-tus-background-color .is-style-mreza { background: var(--bp-grafit); border-color: var(--bp-grafit); }
.has-tus-background-color .is-style-mreza > * { background: var(--bp-tus); }
.has-tus-background-color .is-style-mreza > *:has(:is(h2, h3) a):hover { background: #222; }
.has-tus-background-color .is-style-sastavnica > * > :not(.is-style-oznaka) { color: var(--bp-papir); }
.has-tus-background-color .is-style-sastavnica { --bp-list: var(--bp-tus); --bp-zica: var(--bp-grafit); }
.has-tus-background-color .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--bp-papir); border-color: var(--bp-papir); }
.has-tus-background-color .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus) { background: var(--bp-papir); color: var(--bp-tus); }
.has-tus-background-color .wp-block-button.is-style-tekst > .wp-block-button__link { color: var(--bp-opeka-svijetla); }

/* ------------------------------------------------------------------ drawing details */

/* Nacrt: a section drawn on a sheet: a faint grid and the level mark (±0,00) at the content's right edge.
   The section is its own stacking context, so the details lie over its colour, under its content.
   Rulers are kept for the page heads and the home page's opening, so they mark where a page starts.
   The rulers and the mark are content/crtez.py's SVGs, in Tuš on light grounds and Papir on dark ones. */
.is-style-nacrt {
	--bp-mreza-crta: rgba(23, 23, 23, 0.045);
	--bp-kota: url(../img/crtez/kota-tamno.svg);
	position: relative;
	isolation: isolate;
}
.has-tus-background-color.is-style-nacrt {
	--bp-mreza-crta: rgba(247, 245, 240, 0.04);
	--bp-kota: url(../img/crtez/kota-svijetlo.svg);
}
.is-style-nacrt { --sloj-kota: var(--bp-kota) right var(--bp-rub) bottom 1.25rem / 150px 40px no-repeat; }
@media (max-width: 781px) {
	.is-style-nacrt { --sloj-kota: none; }   /* it would sit on the last line of text */
}
.is-style-nacrt::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		var(--sloj-kota),
		linear-gradient(var(--bp-mreza-crta) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, var(--bp-mreza-crta) 1px, transparent 1px) 0 0 / 24px 24px;
}

/* the page heads: the grid, and a ruler along their foot */
.bp-glava {
	background:
		linear-gradient(rgba(23, 23, 23, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, rgba(23, 23, 23, 0.04) 1px, transparent 1px) 0 0 / 24px 24px;
}
.bp-glava::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	background: url(../img/crtez/ravnalo-gore-tamno.svg) left bottom / 2400px 30px no-repeat;
	pointer-events: none;
}
/* the home page's opening: a ruler along its foot */
.bp-uvod::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	background: url(../img/crtez/ravnalo-gore-svijetlo.svg) left bottom / 2400px 30px no-repeat;
	pointer-events: none;
}

/* ------------------------------------------------------------------ header */

/* Never transform, filter or backdrop-filter the header itself: it would become the containing block of the
   navigation's position: fixed phone menu, which would then open inside the header strip. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.bp-header { position: relative; background: var(--bp-papir); border-bottom: 1px solid var(--bp-linija); transition: box-shadow 0.3s; }
.bp-header .wp-block-site-logo img { width: clamp(170px, 18vw, 220px); height: auto; }
.bp-header .wp-block-navigation { font-size: 0.8125rem; }

/* top-level links: an Opeka rule draws in from the left on hover; the current page keeps a Tuš one */
.bp-header .wp-block-navigation-item__content { transition: color 0.2s; }
.bp-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { position: relative; padding: 0.45rem 0 0.35rem; }
.bp-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--bp-opeka);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-header .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :has(> .wp-block-navigation-item__content:focus-visible)) > .wp-block-navigation-item__content { color: var(--bp-opeka); }
.bp-header .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :has(> .wp-block-navigation-item__content:focus-visible)) > .wp-block-navigation-item__content::after { transform: scaleX(1); transform-origin: left center; }
.bp-header .wp-block-navigation__container > :is(.current-menu-item, .wp-block-navigation-item:has(.current-menu-item)) > .wp-block-navigation-item__content::after,
body.single-referenca .bp-header .wp-block-navigation__container > .wp-block-navigation-item:has(> a[href$="/reference/"]) > .wp-block-navigation-item__content::after {
	background: var(--bp-tus);
	transform: scaleX(1);
}
.bp-header .wp-block-navigation__submenu-icon svg { transition: transform 0.25s; }
.bp-header .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); }

/* the services' dropdown: fades in and settles, an Opeka edge on top; its items get a sliding Opeka mark */
.bp-header .wp-block-navigation__submenu-container {
	min-width: 250px !important;
	padding: 0.6rem 0 !important;
	background: var(--bp-bijela) !important;
	border: 1px solid var(--bp-linija) !important;
	border-top: 2px solid var(--bp-opeka) !important;
	box-shadow: 0 22px 44px -24px rgba(23, 23, 23, 0.35);
	transform: translateY(8px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.bp-header .has-child:not(.open-on-click):is(:hover, :focus-within) > .wp-block-navigation__submenu-container { transform: translateY(0); }
/* as specific as WordPress's own padding rule for these items, which would otherwise win */
.bp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding: 0.7rem 1.4rem;
	border: 0;
	transition: color 0.2s, padding-left 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 1.5px;
	background: var(--bp-opeka);
	transition: width 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus) { color: var(--bp-opeka); padding-left: 2.1rem; }
.bp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus)::before { width: 1.2rem; }
.bp-header .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { color: var(--bp-opeka); }

/* the button: its arrow moves on hover */
.bp-header-cta .wp-block-button__link::after { content: "→"; display: inline-block; margin-left: 0.7em; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bp-header-cta .wp-block-button__link:is(:hover, :focus)::after { transform: translateX(4px); }

/* the menu's own copy of the button: only in the phone menu */
.bp-header .wp-block-navigation__responsive-container:not(.is-menu-open) .bp-nav-cta { display: none; }

/* scrolled: the header tightens and lifts off the page, and an Opeka rule along its foot shows how far
   down the page you are. Scroll-driven, no script; browsers without it keep the plain header. */
@supports (animation-timeline: scroll()) {
	.bp-header { animation: bp-zbij linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
	.bp-header .wp-block-site-logo img { animation: bp-zbij-logo linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
	.bp-header::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 2px;
		background: var(--bp-opeka);
		transform-origin: left center;
		animation: bp-napredak linear both;
		animation-timeline: scroll(root);
	}
	@keyframes bp-zbij { to { padding-top: 0.5rem; padding-bottom: 0.5rem; box-shadow: 0 12px 30px -22px rgba(23, 23, 23, 0.45); } }
	@keyframes bp-zbij-logo { to { width: clamp(150px, 15vw, 185px); } }
	@keyframes bp-napredak { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* the phone menu: large numbered items in title-block rows, sliding in one after another, the button last */
.bp-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;   /* the header's nav is right-aligned; its phone menu isn't */
	background: var(--bp-papir) !important;
	color: var(--bp-tus) !important;   /* WordPress gives the panel black */
	padding: 1.25rem var(--wp--style--root--padding-right) 2rem var(--wp--style--root--padding-left);
	text-align: left;
}
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { gap: 0; padding-top: 4rem; align-items: stretch; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { counter-reset: bp-izbornik; gap: 0; width: 100%; align-items: stretch; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	counter-increment: bp-izbornik;
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	align-items: baseline;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--bp-linija);
	font-size: 1.125rem;
	animation: bp-ulaz 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item::before {
	content: counter(bp-izbornik, decimal-leading-zero);
	font-size: 0.6875rem;
	letter-spacing: 0.15em;
	color: var(--bp-opeka);
}
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child { border-top: 1px solid var(--bp-tus); }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { content: none; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--bp-opeka); }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	grid-column: 2;
	min-width: 0 !important;
	margin: 0.4rem 0 0;
	border: 0 !important;
	box-shadow: none;
	transform: none;
	background: none !important;
	padding: 0 !important;
	gap: 0.15rem;
	align-items: flex-start !important;
}
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { font-size: 0.8125rem; color: var(--bp-beton); }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 0.35rem 0; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::before { content: none; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .bp-nav-cta { display: block; border: 0; padding-top: 1.75rem; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .bp-nav-cta::before { content: none; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .bp-nav-cta > .wp-block-navigation-item__content {
	display: block;
	padding: 1.05rem 1.5rem 0.95rem;
	background: var(--bp-opeka);
	color: var(--bp-bijela);
	text-align: center;
}
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.04s; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.08s; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.12s; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.16s; }
.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.2s; }
@keyframes bp-ulaz { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* five items, the logo and a button don't fit below 1024 px: the menu opens from the icon there */
@media (min-width: 600px) and (max-width: 1023px) {
	.bp-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.bp-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.bp-header .wp-block-navigation__responsive-container-close:not(.always-shown) { display: flex; }
	.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; }
	.bp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: stretch; }
}
@media (max-width: 1199px) { .bp-header .bp-header-cta { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.bp-header *, .bp-header *::before, .bp-header *::after { transition: none !important; animation: none !important; }
	.bp-header, .bp-header::after { animation: none !important; }
	.bp-header::after { display: none; }
}

/* ------------------------------------------------------------------ footer */

.bp-footer .wp-block-site-logo img { filter: brightness(0) invert(1); width: 200px; height: auto; }
.bp-footer a:not(.wp-element-button) { color: var(--bp-papir); text-decoration: none; }
.bp-footer a:not(.wp-element-button):is(:hover, :focus) { color: var(--bp-opeka-svijetla); text-decoration: underline; }
.bp-footer .is-style-oznaka:not(.has-text-color) { color: var(--bp-opeka-svijetla); }
.bp-footer p { margin: 0; }
.bp-footer .wp-block-site-logo + p { margin-top: 1.25rem; }
.bp-footer .is-style-oznaka + p { margin-top: 0.6rem; }
.bp-footer .wp-block-separator { border-color: var(--bp-grafit); opacity: 1; }

@media (max-width: 781px) {
	.bp-suradnja { padding-block: 2rem !important; }
	.bp-suradnja > .wp-block-columns { gap: 1rem; }
	/* the text covers the whole photo here: an even veil instead of the sideways gradient */
	.bp-uvod .wp-block-cover__background { background: linear-gradient(180deg, rgba(23, 23, 23, 0.9), rgba(23, 23, 23, 0.74)) !important; }
	.bp-uvod::after { width: 70vw; top: auto; bottom: -22vw; right: -24vw; transform: none; opacity: 0.22; }  /* clear of the text */
}
@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.is-style-mozaik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-block-gallery.has-nested-images.is-style-mozaik figure.wp-block-image:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
	/* an even count leaves the last photo alone in its row after the first: it takes the row */
	.wp-block-gallery.has-nested-images.is-style-mozaik figure.wp-block-image:last-child:nth-child(even) { grid-column: span 2; aspect-ratio: 8 / 3; }
}