/*
Theme Name: SuperSajtovi
Theme URI: https://www.supersajtovi.rs/
Description: Child theme for supersajtovi.rs. Design system lives in theme.json (Pravac C). No page builder, core blocks plus ACF.
Author: Nerder
Template: twentytwentyfive
Version: 1.1.28
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: supersajtovi
*/

/* Design tokens live in theme.json. Keep this file for the few things theme.json cannot express. */

/* Lime is an accent only. It never carries body text and never sits behind white text. */
.wp-element-button,
.wp-block-button__link {
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Weight follows the artboard: lime buttons are 800 (theme.json's default button),
   outline buttons 700 (theme.json's outline variation), and a button filled with any
   other colour 700, like the blue Sva pitanja. */
.wp-block-button__link.has-background:not(.has-limun-background-color) { font-weight: 700; }

/* The artboard's .wrap is 1200px with 48px gutters, so its rows measure 1104px. wideSize
   stays 1200px; the gutter goes inside every wide row of a full-width band, header
   included. Narrower screens already have the 24px root padding outside the row. */
.alignfull.is-layout-constrained > .alignwide {
	box-sizing: border-box;
	padding-inline: 48px;
}
@media (max-width: 1247px) {
	.alignfull.is-layout-constrained > .alignwide { padding-inline: 24px; }
}
@media (max-width: 781px) {
	.alignfull.is-layout-constrained > .alignwide { padding-inline: 0; }
}

/* Site header, parts/header.html. Dark in all three artboards: the blue band, a
   reversed logo, white nav, white phone, lime button. theme.json rounds every group,
   and the band runs edge to edge. */
.wp-block-group.ss-zaglavlje {
	border-radius: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.ss-zaglavlje .ss-zaglavlje__red { gap: 1rem 2.5rem; }
.ss-zaglavlje .ss-zaglavlje__akcije { gap: 1.25rem; }

.ss-zaglavlje .wp-block-site-logo img { display: block; height: auto; }

/* Core forces nav links to color: inherit, so the colour is set on the nav itself.
   The mobile overlay takes its colours from the block's overlay attributes. */
.ss-zaglavlje .wp-block-navigation {
	gap: 2rem;
	color: rgba(255, 255, 255, .88);
}

/* Active item is lime text, as on the Usluga and Clanak artboards. Top level only:
   submenus open on white, where lime would not read. */
.ss-zaglavlje .wp-block-navigation :not(.wp-block-navigation__submenu-container) > .current-menu-item > .wp-block-navigation-item__content,
.ss-zaglavlje .wp-block-navigation :not(.wp-block-navigation__submenu-container) > .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--limun);
}

.ss-zaglavlje .ss-zaglavlje__telefon {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	white-space: nowrap;
}
.ss-zaglavlje .ss-zaglavlje__telefon a {
	color: var(--wp--preset--color--bela);
	text-decoration: none;
}
.ss-zaglavlje .ss-zaglavlje__telefon a:hover { text-decoration: underline; }

.ss-zaglavlje .wp-block-button__link { white-space: nowrap; }

/* Site footer, parts/footer.html, from the artboard: near-black ground, the reversed
   logo with the address, three link columns and a copyright row. */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

.wp-block-group.ss-podnozje {
	border-radius: 0;
	background: #0B1216;
	color: #8A97A0;
}
.ss-podnozje .ss-podnozje__kolone {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 38px;
}
.ss-podnozje .ss-podnozje__kolone > *,
.ss-podnozje .ss-podnozje__kolona > * { margin-block: 0; }

.ss-podnozje .ss-podnozje__kolona > .ss-podnozje__logo { margin-bottom: 18px; }
.ss-podnozje .ss-podnozje__logo img { display: block; height: auto; }

.ss-podnozje .ss-podnozje__adresa {
	font-size: .9375rem;
	line-height: 1.65;
	color: #8A97A0;
}
.ss-podnozje .ss-podnozje__adresa a {
	color: inherit;
	text-decoration: none;
}
.ss-podnozje .ss-podnozje__adresa a:hover { color: var(--wp--preset--color--bela); }

.ss-podnozje .ss-podnozje__kolona > .ss-podnozje__naslov {
	margin-bottom: 15px;
	font-family: var(--wp--preset--font-family--telo);
	font-size: .78125rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--limun);
}

.wp-block-list.ss-podnozje__linkovi {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9375rem;
}
.ss-podnozje__linkovi li { margin: 0; }
.ss-podnozje__linkovi a {
	color: #B2BEC5;
	text-decoration: none;
}
.ss-podnozje__linkovi a:hover { color: var(--wp--preset--color--bela); }

.ss-podnozje .ss-podnozje__autorska {
	margin-block: 0;
	padding-top: 22px;
	border-top: 1px solid #232D34;
	font-size: .875rem;
	color: #6C7982;
}

@media (max-width: 781px) {
	.ss-podnozje .ss-podnozje__kolone { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
	.ss-podnozje .ss-podnozje__kolone > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.ss-podnozje .ss-podnozje__kolone { grid-template-columns: 1fr; }
}

/* Long-form pages (sta-je-digitalni-marketing is 17k characters) need a comfortable measure. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: 68ch;
}


/* ─────────────────────────────────────────────────────────────────────────
   Components rendered by inc/shortcodes.php.
   Everything below reads from the theme.json tokens, so changing a colour
   or a spacing step in theme.json changes it here too.
   ───────────────────────────────────────────────────────────────────────── */

:root {
	--ss-radius: 6px;
	--ss-card: 0 2px 4px rgba(20, 23, 26, .04), 0 8px 20px rgba(20, 23, 26, .08);
	--ss-card-hover: 0 4px 8px rgba(20, 23, 26, .05), 0 16px 36px rgba(20, 23, 26, .10);
}

/* Service cards on the homepage */
.ss-usluga-kartica {
	background: var(--wp--preset--color--bela);
	border: 1px solid var(--wp--preset--color--ivica);
	border-radius: var(--ss-radius);
	padding: var(--wp--preset--spacing--40);
	box-shadow: 0 1px 2px rgba(20, 23, 26, .04), 0 2px 8px rgba(20, 23, 26, .06);
	transition: box-shadow .18s ease, transform .18s ease;
}
.ss-usluga-kartica:hover {
	box-shadow: var(--ss-card);
	transform: translateY(-2px);
}
.ss-usluga-kartica h3 { margin-top: 0; }

/* Service card icons. Page 9 puts an ss-ikona--* class on each card; the glyph lives
   here as a data URI so the page content stays plain text. 44px circle, 21px glyph
   stroked in --blue, 17px above the heading. */
.ss-usluga-kartica[class*="ss-ikona--"]::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 17px;
	border-radius: 50%;
	background-color: #E8F1F6;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 21px 21px;
}
/* browser window */
.ss-usluga-kartica.ss-ikona--sajt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005A87' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='16' rx='2'/%3E%3Cpath d='M2.5 8.5h19'/%3E%3Cpath d='M5.6 6.25h.01M8.1 6.25h.01'/%3E%3C/svg%3E"); }
/* magnifier with a rising arrow */
.ss-usluga-kartica.ss-ikona--seo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005A87' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M15.6 15.6L21 21'/%3E%3Cpath d='M7 13.2l2.4-2.4 2 2 3-3'/%3E%3Cpath d='M12.2 9.8h2.2V12'/%3E%3C/svg%3E"); }
/* megaphone */
.ss-usluga-kartica.ss-ikona--oglasi::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005A87' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4h3.5l8.5 4.5v-13L7 10z'/%3E%3Cpath d='M7 14l1.3 5h2.4l-1.1-4.3'/%3E%3Cpath d='M18.5 9.5a3.5 3.5 0 0 1 0 5'/%3E%3C/svg%3E"); }
/* linked nodes */
.ss-usluga-kartica.ss-ikona--mreze::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005A87' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='M8.2 10.9l7.6-3.8M8.2 13.1l7.6 3.8'/%3E%3C/svg%3E"); }
/* document with lines */
.ss-usluga-kartica.ss-ikona--tekst::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005A87' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 11h6M9 14.5h6M9 18h4'/%3E%3C/svg%3E"); }
/* pen nib */
.ss-usluga-kartica.ss-ikona--dizajn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005A87' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5L6 11l2-7h8l2 7z'/%3E%3Cpath d='M12 21.5v-8.2'/%3E%3Ccircle cx='12' cy='11.5' r='1.8'/%3E%3C/svg%3E"); }
/* server stack */
.ss-usluga-kartica.ss-ikona--hosting::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005A87' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='17' height='7' rx='1.5'/%3E%3Cpath d='M7 7h.01M10.5 7h.01M7 17h.01M10.5 17h.01'/%3E%3C/svg%3E"); }
/* camera */
.ss-usluga-kartica.ss-ikona--foto::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005A87' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 6.5L10 4h4l1.5 2.5'/%3E%3Crect x='2.5' y='6.5' width='19' height='13.5' rx='2'/%3E%3Ccircle cx='12' cy='13.2' r='3.6'/%3E%3C/svg%3E"); }

/* Reasons panel. Page 9 wraps the Zasto izabrati nas heading and its list in
   .ss-razlozi. It sits inside the content column, so it is a contained blue panel with
   the items numbered 01 upward as cards. Five items wrap two to a row; an odd last
   one takes the full row. */
.wp-block-group.ss-razlozi {
	margin-block: var(--wp--preset--spacing--50);
	padding: 48px clamp(1.5rem, 5vw, 48px);
	border-radius: 10px;
	background: var(--wp--preset--color--plava);
}
.ss-razlozi h2 {
	margin-top: 0;
	color: var(--wp--preset--color--bela);
}
.ss-razlozi .wp-block-list {
	counter-reset: razlog;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ss-razlozi .wp-block-list > li {
	counter-increment: razlog;
	margin: 0;
	padding: 22px 20px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--ss-radius);
	background: rgba(255, 255, 255, .07);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--bela);
}
.ss-razlozi .wp-block-list > li::before {
	content: counter(razlog, decimal-leading-zero);
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--naslovi);
	font-size: .875rem;
	font-weight: 700;
	color: var(--wp--preset--color--limun);
}
.ss-razlozi .wp-block-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 600px) {
	.ss-razlozi .wp-block-list { grid-template-columns: 1fr; }
}

/* ── Pricing ───────────────────────────────────────────────────────────── */

.ss-cenovnik__naslov { text-align: center; margin-bottom: var(--wp--preset--spacing--50); }
.ss-cenovnik__naslov:has(+ .ss-cenovnik__uvod) { margin-bottom: 14px; }

/* Optional lead paragraph, printed only when the shortcode gets uvod. */
.ss-cenovnik__uvod {
	max-width: 620px;
	margin: 0 auto 44px;
	font-size: 1.125rem;
	text-align: center;
}

.ss-cenovnik__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

/* border-box: with height 100%, content-box padding pushed each card 82px past its
   grid track and over whatever came next. Grey on a white band, as on the artboard. */
.ss-paket {
	box-sizing: border-box;
	position: relative;
	background: var(--wp--preset--color--siva-svetla);
	border-radius: var(--ss-radius);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	height: 100%;
}

/* STANDARD is the blue card. It rises 12px above the row and grows by the same, so its
   foot stays level with the others. */
.ss-paket--istaknut {
	margin-top: -12px;
	height: calc(100% + 12px);
	padding: 34px 26px;
	background: var(--wp--preset--color--plava);
	box-shadow: 0 18px 40px -18px rgba(0, 90, 135, .55);
}
.ss-paket--istaknut .ss-paket__naziv,
.ss-paket--istaknut .ss-paket__cena { color: var(--wp--preset--color--bela); }
.ss-paket--istaknut .ss-paket__napomena,
.ss-paket--istaknut .ss-paket__opis,
.ss-paket--istaknut .ss-paket__stavka { color: #CBE2EF; }
.ss-paket--istaknut .ss-paket__stavka span { color: var(--wp--preset--color--limun); }

.ss-paket__badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 13px;
	border-radius: 100px;
	background: var(--wp--preset--color--limun);
	color: var(--wp--preset--color--crna);
	font-size: .71875rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ss-paket__naziv {
	font-family: var(--wp--preset--font-family--naslovi);
	font-size: 1.25rem;
	margin: 0;
}

.ss-paket__cena {
	font-family: var(--wp--preset--font-family--naslovi);
	font-size: 2rem;
	font-weight: 700;
	color: var(--wp--preset--color--plava);
	line-height: 1.1;
	margin: 0;
	overflow-wrap: anywhere;
}

.ss-paket__napomena {
	display: block;
	font-family: var(--wp--preset--font-family--telo);
	font-size: .8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--siva-srednja);
	margin-top: .2rem;
}

.ss-paket__opis { font-size: .9375rem; color: var(--wp--preset--color--siva-srednja); margin: 0; }

.ss-paket__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ss-paket__stavka { font-size: .9375rem; display: flex; gap: .5rem; align-items: baseline; }
.ss-paket__stavka span { color: var(--wp--preset--color--plava); font-weight: 700; }
.ss-paket__stavka--ne { color: var(--wp--preset--color--siva-srednja); }
.ss-paket__stavka--ne span { color: var(--wp--preset--color--siva-srednja); font-weight: 400; }

/* The link's wrapper takes the auto margin, so the button sits on the card's foot. */
.ss-paket__akcija { margin-top: auto; padding-top: .5rem; }
.ss-paket .ss-paket__cta {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 13px 0;
	border: 1.5px solid var(--wp--preset--color--ivica);
	border-radius: var(--ss-radius);
	background: var(--wp--preset--color--bela);
	box-shadow: none;
	color: var(--wp--preset--color--plava);
	font-size: .96875rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}
.ss-paket .ss-paket__cta:hover { border-color: var(--wp--preset--color--plava); }
/* On the blue card the button is lime, as the artboard's STANDARD. */
.ss-paket--istaknut .ss-paket__cta {
	padding: 14px 0;
	border-color: var(--wp--preset--color--limun);
	background: var(--wp--preset--color--limun);
	color: var(--wp--preset--color--crna);
	font-weight: 800;
}
.ss-paket--istaknut .ss-paket__cta:hover { border-color: var(--wp--preset--color--limun); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.ss-faq { max-width: 760px; margin-inline: auto; }
.ss-faq__naslov { margin-bottom: var(--wp--preset--spacing--40); }

.ss-faq__stavka {
	background: var(--wp--preset--color--bela);
	border: 1px solid var(--wp--preset--color--ivica);
	border-radius: var(--ss-radius);
	margin-bottom: .6rem;
	overflow: hidden;
}

.ss-faq__pitanje {
	cursor: pointer;
	padding: 1rem 1.15rem;
	font-family: var(--wp--preset--font-family--naslovi);
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
}
.ss-faq__pitanje::-webkit-details-marker { display: none; }
.ss-faq__pitanje::after {
	content: "+";
	color: var(--wp--preset--color--plava);
	font-size: 1.35rem;
	line-height: 1;
	flex: none;
}
.ss-faq__stavka[open] .ss-faq__pitanje::after { content: "\2212"; }
.ss-faq__stavka[open] .ss-faq__pitanje { border-bottom: 1px solid var(--wp--preset--color--ivica); }
.ss-faq__pitanje:focus-visible { outline: 2px solid var(--wp--preset--color--plava); outline-offset: -2px; }

.ss-faq__odgovor { padding: 1rem 1.15rem; font-size: .9375rem; }
.ss-faq__odgovor > :first-child { margin-top: 0; }
.ss-faq__odgovor > :last-child { margin-bottom: 0; }

/* ── Portfolio ─────────────────────────────────────────────────────────── */

.ss-portfolio {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--50);
}

.ss-projekat {
	background: var(--wp--preset--color--bela);
	border: 1px solid var(--wp--preset--color--ivica);
	border-radius: var(--ss-radius);
	overflow: hidden;
	box-shadow: var(--ss-card);
	display: flex;
	flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease;
}
.ss-projekat:hover { box-shadow: var(--ss-card-hover); transform: translateY(-2px); }

.ss-projekat__slika img { display: block; width: 100%; height: 190px; object-fit: cover; }
.ss-projekat__telo { padding: var(--wp--preset--spacing--40); display: flex; flex-direction: column; gap: .5rem; }
.ss-projekat__naziv { font-size: 1.125rem; margin: 0; }

.ss-projekat__paket {
	align-self: flex-start;
	background: var(--wp--preset--color--plava-svetla);
	color: var(--wp--preset--color--plava);
	font-size: .75rem;
	font-weight: 600;
	padding: .2rem .55rem;
	border-radius: 999px;
}

.ss-projekat__opis { font-size: .9375rem; color: var(--wp--preset--color--siva-srednja); margin: 0; }

.ss-projekat__tehnologije { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ss-projekat__tehnologije li {
	font-size: .75rem;
	color: var(--wp--preset--color--siva-srednja);
	border: 1px solid var(--wp--preset--color--ivica);
	border-radius: 4px;
	padding: .15rem .45rem;
}

/* The link's wrapper takes the auto margin, so the link sits on the card's foot. */
.ss-projekat__akcija { margin-top: auto; }
.ss-projekat__link { font-size: .9375rem; font-weight: 600; }

/* -- Front page, templates/front-page.html ------------------------------------ */

/* Full-width bands are square; theme.json rounds every group. */
.wp-block-group.ss-sekcija { border-radius: 0; }

/* Body copy on the blue bands. */
.ss-svetli-tekst { color: #B9D3E2; }
.ss-hero .ss-svetli-tekst { max-width: 540px; }

/* Hero eyebrow: a translucent pill with a lime dot. */
.ss-hero .ss-hero__oznaka {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 100px;
	background: rgba(255, 255, 255, .1);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .02em;
	color: var(--wp--preset--color--bela);
}
.ss-hero .ss-hero__oznaka::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--limun);
}

/* Hero rhythm from the artboard: pill 24px, H1 22px, lead 32px, buttons 34px. */
.ss-hero h1 + .ss-svetli-tekst { margin-block-start: 22px; }
.ss-hero .ss-svetli-tekst + .wp-block-buttons { margin-block-start: 32px; }

/* Outline button reversed for a blue background. */
.wp-block-buttons > .wp-block-button.is-style-outline.ss-dugme-svetlo > .wp-block-button__link {
	color: var(--wp--preset--color--bela);
	border-color: rgba(255, 255, 255, .32);
	border-width: 1.5px;
}

/* Hero stat strip. The third figure takes lime from its block colour. */
.ss-hero .ss-hero__statistike {
	gap: 1.25rem 2.125rem;
	margin-block-start: 2.125rem;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.ss-hero .ss-stat > * { margin-block: 0; }
.ss-hero .ss-stat__broj {
	font-family: var(--wp--preset--font-family--naslovi);
	font-size: 1.8125rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--bela);
}
.ss-hero .ss-stat .ss-stat__opis {
	margin-block-start: 3px;
	font-size: .90625rem;
	color: #9FC0D3;
}

/* Browser frame around the hero image. Capped at the image's 760px so it never
   stretches past its source. */
.wp-block-group.ss-okvir {
	max-width: 760px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .5);
}
.wp-block-group.ss-okvir > * { margin-block: 0; }
.ss-okvir .ss-okvir__traka {
	display: flex;
	align-items: center;
	padding: 9px 13px;
	background: #0C2F44;
	font-size: .71875rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, .42);
}
/* Three window dots from one element: the red dot and two shadows. */
.ss-okvir .ss-okvir__traka::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 46px;
	border-radius: 50%;
	background: #FF5F57;
	box-shadow: 15px 0 0 #FEBC2E, 30px 0 0 #28C840;
}
.ss-okvir .wp-block-image { margin: 0; }
.ss-okvir .wp-block-image img { display: block; width: 100%; height: auto; }

/* The pricing band is white with a hairline above and below. */
.wp-block-group.ss-paketi { border-block: 1px solid var(--wp--preset--color--ivica); }

/* Three projects fill the row instead of leaving an empty fourth track. */
.ss-radovi .ss-portfolio { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Explainer links, one row per page, plus glyph on the right. */
.wp-block-list.ss-pitanja {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ss-pitanja li { margin: 0; }
.ss-pitanja a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 19px 22px;
	border-radius: var(--ss-radius);
	background: var(--wp--preset--color--siva-svetla);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--crna);
	text-decoration: none;
}
.ss-pitanja a:hover { color: var(--wp--preset--color--plava); }
.ss-pitanja a::after {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	background:
		linear-gradient(var(--wp--preset--color--plava), var(--wp--preset--color--plava)) center / 11px 2px no-repeat,
		linear-gradient(var(--wp--preset--color--plava), var(--wp--preset--color--plava)) center / 2px 11px no-repeat;
}

.wp-block-group.ss-cta {
	border-radius: 10px;
	padding: 52px 56px;
}
/* Both buttons fill the column. The vertical buttons layout aligns to flex-start and
   core's width-100 rule does not reach the link there. */
.ss-cta .wp-block-buttons { gap: 11px; align-items: stretch; }
.ss-cta .wp-block-buttons > .wp-block-button,
.ss-cta .wp-block-buttons > .wp-block-button > .wp-block-button__link {
	box-sizing: border-box;
	width: 100%;
}

@media (max-width: 781px) {
	.wp-block-group.ss-cta { padding: 2rem 1.5rem; }
}

@media (max-width: 600px) {
	.ss-paket__cena { font-size: 1.625rem; }
	.ss-projekat__slika img { height: 160px; }
}

/* -- Interior pages, templates/page-usluga.html and page-dugacka.html ---------- */

/* The blue band under the header, from the Usluga and Clanak artboards. It is .ss-traka;
   .ss-zaglavlje belongs to the site header in parts/header.html. */
.wp-block-group.ss-traka--usluga,
.wp-block-group.ss-traka--clanak {
	position: relative;
	overflow: hidden;
	border-radius: 0;
	background: var(--wp--preset--color--plava);
}
.ss-traka--usluga::before,
.ss-traka--clanak::before {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.ss-traka--usluga::before {
	top: -200px;
	right: -120px;
	width: 540px;
	height: 540px;
	background: rgba(255, 255, 255, .05);
}
.ss-traka--clanak::before {
	top: -190px;
	left: -130px;
	width: 520px;
	height: 520px;
	background: rgba(200, 219, 42, .06);
}
/* Positioned, so the band's rows paint above the circle. */
.ss-traka--usluga > *,
.ss-traka--clanak > * { position: relative; }

/* The hero is its own .wrap on the artboards: 840px on Usluga, 880px on Clanak, with the
   gutter inside. Its spacing is explicit, so the block gap is off. */
.alignfull.is-layout-constrained > .alignwide.ss-traka__uvod { max-width: 840px; }
.alignfull.is-layout-constrained.ss-traka--clanak > .alignwide.ss-traka__uvod { max-width: 880px; }
/* Usluga keeps the 840px measure but starts on the row's left edge, so the breadcrumb, the
   H1 and the price card share one edge. Core centres constrained children with !important. */
.alignfull.is-layout-constrained.ss-traka--usluga > .alignwide.ss-traka__uvod {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}
.ss-traka .ss-traka__putanja > *,
.ss-traka .ss-traka__uvod > * { margin-block: 0; }

/* On Clanak the trail sits inside the hero, above the title. */
.ss-traka .ss-traka__uvod > .ss-putanja { margin-bottom: 24px; }

/* Title sizes are per template, on the class, so the element keeps the global
   letter-spacing and line-height. 48px and 50px from 1000px up, scaling down below. */
.ss-traka .ss-traka__uvod > .wp-block-post-title {
	margin-bottom: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--bela);
	overflow-wrap: break-word;
}
.ss-traka--usluga .ss-traka__uvod > .wp-block-post-title { font-size: clamp(30px, calc(21px + 2.7vw), 48px); }
.ss-traka--clanak .ss-traka__uvod > .wp-block-post-title { font-size: clamp(31px, calc(22px + 2.8vw), 50px); }

.ss-traka .ss-traka__uvod > .wp-block-post-excerpt {
	line-height: 1.6;
	color: #B9D3E2;
}
.ss-traka--usluga .ss-traka__uvod > .wp-block-post-excerpt { max-width: 680px; font-size: 1.25rem; }
.ss-traka--clanak .ss-traka__uvod > .wp-block-post-excerpt { max-width: 720px; font-size: 1.28125rem; }
.ss-traka .wp-block-post-excerpt__excerpt { margin: 0; }

/* Breadcrumb, [ss_putanja]. The slashes are generated, and silent to screen readers. */
.ss-putanja {
	font-size: .90625rem;
	color: #9FC0D3;
}
.ss-putanja ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ss-putanja li { margin: 0; }
.ss-putanja li + li::before {
	content: "/";
	content: "/" / "";
	display: inline-block;
	margin-right: 9px;
	opacity: .5;
}
.ss-putanja a {
	color: #9FC0D3;
	text-decoration: none;
}
.ss-putanja a:hover {
	color: #9FC0D3;
	text-decoration: underline;
}
.ss-putanja a:focus { outline-color: var(--wp--preset--color--bela); }
.ss-putanja [aria-current="page"] {
	color: var(--wp--preset--color--bela);
	font-weight: 600;
}

/* Two-column shell under the band: content, then a sidebar. The tracks carry a zero
   minimum, so a wide table in the content cannot push the grid past its row. */
.wp-block-group.ss-strana {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: 56px;
	align-items: start;
}
.wp-block-group.ss-strana.ss-strana--clanak {
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 64px;
}
.wp-block-group.ss-strana > * { margin-block: 0; }

/* One column below 900px on Usluga, whose main column has no padding and is 467px wide
   there. The Clanak card would leave 328px of text at 900px, so Clanak goes below 1000px. */
@media (max-width: 899px) {
	.wp-block-group.ss-strana { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) {
	.wp-block-group.ss-strana.ss-strana--clanak { grid-template-columns: minmax(0, 1fr); }
}

/* Sidebar call to action, [ss_poziv]. 26px 24px on both templates. */
.ss-poziv {
	padding: 26px 24px;
	border-radius: 6px;
	background: var(--wp--preset--color--plava);
}
.ss-poziv .ss-poziv__naslov {
	margin: 0 0 9px;
	font-family: var(--wp--preset--font-family--naslovi);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--bela);
}
.ss-poziv .ss-poziv__tekst {
	margin: 0 0 18px;
	font-size: .9375rem;
	line-height: 1.55;
	color: #B9D3E2;
}
.ss-poziv .ss-poziv__akcija { margin: 0; }
.ss-poziv .ss-poziv__dugme {
	display: block;
	padding: 12px 0;
	border-radius: 6px;
	background: var(--wp--preset--color--limun);
	color: var(--wp--preset--color--crna);
	font-size: .9375rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
}
.ss-poziv .ss-poziv__dugme:hover {
	background: var(--wp--preset--color--limun-tamna);
	color: var(--wp--preset--color--crna);
}

/* The white cards on both artboards share one shadow. Written out rather than kept in a
   :root property, which every element on the page, the site header included, inherits. */
.ss-cena,
.ss-kartica,
.wp-block-group.ss-korak,
.wp-block-group.ss-clanak {
	box-shadow: 0 1px 2px rgba(16, 32, 42, .05), 0 8px 24px -12px rgba(16, 32, 42, .14);
}

/* A band whose shortcode rendered nothing goes, padding and all. */
.wp-block-group.ss-cenovnik-traka:not(:has(.ss-cenovnik)),
.wp-block-group.ss-faq-traka:not(:has(.ss-faq)) { display: none; }

/* Sidebar on both templates: the cards stack 16px apart. */
.wp-block-group.ss-strana > .ss-strana__bocni {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ss-strana .ss-strana__bocni > * { margin-block: 0; }

/* White sidebar card with an eyebrow label, [ss_ostali_paketi] and [ss_veze]. 26px 24px on
   both templates; the Clanak artboard draws 24px 22px. */
.ss-kartica {
	padding: 26px 24px;
	border-radius: 6px;
	background: var(--wp--preset--color--bela);
	color: #4E5A62;
}
.ss-kartica .ss-kartica__oznaka {
	margin-bottom: 16px;
	font-size: .78125rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--plava);
}
.ss-kartica.ss-veze .ss-kartica__oznaka { margin-bottom: 14px; }

.ss-veze .ss-veze__lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .96875rem;
}
.ss-veze .ss-veze__lista li { margin: 0; }
.ss-veze .ss-veze__lista a {
	font-weight: 600;
	color: var(--wp--preset--color--plava);
	text-decoration: none;
}
.ss-veze .ss-veze__lista a:hover { text-decoration: underline; }

/* -- Usluga interior, templates/page-usluga.html ------------------------------- */

/* Price card, [ss_cena_kartica]. Its row rises 44px into the band; on a page without a
   card the row is empty and moves nothing. */
.alignfull.is-layout-constrained > .alignwide.ss-cena-omot:has(> .ss-cena) {
	position: relative;
	z-index: 2;
	margin-top: -44px;
}
.ss-cena {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 44px;
	padding: 34px 36px;
	border-radius: 6px;
	background: var(--wp--preset--color--bela);
	color: #4E5A62;
}
.ss-cena .ss-cena__oznaka {
	font-size: .84375rem;
	font-weight: 700;
	color: #4E5A62;
}
.ss-cena .ss-cena__vrednost {
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--naslovi);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--crna);
}
/* A long note wraps at 16em rather than widening the price column. */
.ss-cena .ss-cena__napomena {
	max-width: 16em;
	margin-top: 6px;
	font-size: .875rem;
	text-wrap: balance;
}
.ss-cena .ss-cena__stavke {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px 26px;
	padding-left: 44px;
	border-left: 1px solid var(--wp--preset--color--ivica);
}
.ss-cena .ss-cena__stavka {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: .96875rem;
}
.ss-cena .ss-cena__znak {
	flex: none;
	font-weight: 700;
	color: var(--wp--preset--color--plava);
}
/* An excluded feature is muted, cross and text, as in [ss_cenovnik]. */
.ss-cena .ss-cena__stavka--ne,
.ss-cena .ss-cena__stavka--ne .ss-cena__znak {
	font-weight: 400;
	color: var(--wp--preset--color--siva-srednja);
}
.ss-cena .ss-cena__dugme {
	display: inline-block;
	padding: 16px 32px;
	border-radius: 6px;
	background: var(--wp--preset--color--limun);
	color: var(--wp--preset--color--crna);
	font-size: 1rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}
.ss-cena .ss-cena__dugme:hover {
	background: var(--wp--preset--color--limun-tamna);
	color: var(--wp--preset--color--crna);
}
/* Narrower than the 1104px row, the features drop under the price and the button. */
@media (max-width: 1199px) {
	.ss-cena {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 28px 32px;
	}
	.ss-cena .ss-cena__stavke {
		grid-column: 1 / -1;
		grid-row: 2;
		padding: 26px 0 0;
		border-top: 1px solid var(--wp--preset--color--ivica);
		border-left: 0;
	}
	.ss-cena .ss-cena__akcija {
		grid-column: 2;
		grid-row: 1;
	}
}
@media (max-width: 699px) {
	.ss-cena {
		grid-template-columns: minmax(0, 1fr);
		padding: 26px 22px;
	}
	.ss-cena .ss-cena__vrednost { font-size: 2.25rem; }
	.ss-cena .ss-cena__stavke {
		grid-template-columns: minmax(0, 1fr);
		grid-row: auto;
	}
	.ss-cena .ss-cena__akcija {
		grid-column: auto;
		grid-row: auto;
	}
	.ss-cena .ss-cena__dugme {
		display: block;
		white-space: normal;
	}
}

/* Main column, from the Usluga artboard: 17px body at 1.66 in its body grey, 29px and 21px
   headings, 22px between blocks, and a 700px measure the paragraphs fill. The Clanak
   artboard sets its own type, inside the article card. */
.wp-block-group.ss-strana--usluga > .ss-strana__glavni {
	max-width: 700px;
	font-size: 1.0625rem;
	line-height: 1.66;
	color: #4E5A62;
}
.ss-strana--usluga .wp-block-post-content > * + * { margin-block-start: 22px; }
.ss-strana--usluga .wp-block-post-content h2 {
	font-size: 1.8125rem;
	font-weight: 700;
}
/* Every H2 after the first opens a new part: the artboard's flex column adds a 12px margin
   to its 22px gap, and in the flow layout that total is the margin. */
.ss-strana--usluga .wp-block-post-content > h2 ~ h2 { margin-block-start: 34px; }
.ss-strana--usluga .wp-block-post-content h3 {
	font-size: 1.3125rem;
	font-weight: 700;
}
.ss-strana--usluga .entry-content > :is(p, ul, ol) { max-width: none; }

.ss-ostali .ss-ostali__red {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--ivica);
	font-size: .96875rem;
}
.ss-ostali .ss-ostali__red:last-child { border-bottom: 0; }
.ss-ostali .ss-ostali__naziv {
	font-weight: 700;
	color: var(--wp--preset--color--crna);
	text-decoration: none;
}
.ss-ostali a.ss-ostali__naziv:hover { text-decoration: underline; }

/* Steps grid, a class contract for page content (THEME-GAP.md section 12): a group
   .ss-koraci holding groups .ss-korak, each with the paragraphs .ss-korak__broj,
   .ss-korak__naslov and .ss-korak__tekst. */
.wp-block-group.ss-koraci {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.wp-block-group.ss-koraci > * { margin-block: 0; }
.wp-block-group.ss-korak {
	padding: 22px 20px;
	border-radius: 6px;
	background: var(--wp--preset--color--bela);
}
.wp-block-group.ss-korak > * { margin-block: 0; }
/* The artboard's number is an inline span on the card's 17px line at 1.66, so the number's
   own line is that tall. */
.ss-korak .ss-korak__broj {
	font-family: var(--wp--preset--font-family--naslovi);
	font-size: .875rem;
	font-weight: 700;
	line-height: calc(1.0625rem * 1.66);
	color: var(--wp--preset--color--plava);
}
.wp-block-group.ss-korak > .ss-korak__naslov {
	margin: 6px 0 4px;
	font-weight: 700;
	color: var(--wp--preset--color--crna);
}
.ss-korak .ss-korak__tekst {
	font-size: .9375rem;
	line-height: 1.55;
}
@media (max-width: 899px) {
	.wp-block-group.ss-koraci { grid-template-columns: minmax(0, 1fr); }
}

/* -- Clanak interior, templates/page-dugacka.html ------------------------------ */

/* The grid sits on the artboard's grey ground, so the white cards read as cards. The band
   is square; theme.json rounds every group. */
.wp-block-group.ss-clanak-traka { border-radius: 0; }

/* The article card is the grid's main column: 52px 56px of white, with the Clanak body type,
   18px at 1.76 in its body grey. Usluga's main column sets its own. */
.wp-block-group.ss-clanak {
	padding: 52px 56px;
	border-radius: 6px;
	background: var(--wp--preset--color--bela);
	font-size: 1.125rem;
	line-height: 1.76;
	color: #414D55;
}

/* A 680px prose measure, with the site-wide 68ch cap lifted inside it. */
.ss-clanak .wp-block-post-content { max-width: 680px; }
.ss-clanak .entry-content > :is(p, ul, ol) { max-width: none; }

/* Rhythm. The artboard's prose is a flex column with a 24px gap that adds 20px above an H2
   and 8px above an H3, and gap and margin sum. Post content stays on the flow layout, so the
   totals are margins: 24px between blocks, 44px above an H2, 32px above an H3. */
.ss-clanak .wp-block-post-content > * + * { margin-block-start: 24px; }
.ss-clanak .wp-block-post-content > * + h2 { margin-block-start: 44px; }
.ss-clanak .wp-block-post-content > * + h3 { margin-block-start: 32px; }

.ss-clanak .wp-block-post-content h2 {
	font-size: 1.8125rem;
	font-weight: 700;
}
.ss-clanak .wp-block-post-content h3 {
	font-size: 1.3125rem;
	font-weight: 700;
}

/* Lists take no margin of their own beyond the rhythm, a 22px indent and 10px between items. */
.ss-clanak .wp-block-post-content :is(ul, ol) {
	margin-inline: 0;
	margin-block-end: 0;
	padding-left: 22px;
}
.ss-clanak .wp-block-post-content li + li { margin-top: 10px; }

.ss-clanak .wp-block-post-content strong { color: var(--wp--preset--color--crna); }

/* Narrow screens, build-derived rather than from the artboard (THEME-GAP.md section 13): the
   card's text keeps the sidebar cards' 24px inset instead of losing 112px to padding. */
@media (max-width: 599px) {
	.wp-block-group.ss-clanak { padding: 32px 24px; }
}

/* Pull-quote, a class contract for page content (THEME-GAP.md section 13): a paragraph, or a
   group on the default layout, carrying .ss-citat. On the white article card the grey ground
   is what makes it read. */
p.ss-citat,
.wp-block-group.ss-citat {
	padding: 22px 26px;
	border-left: 4px solid var(--wp--preset--color--limun);
	border-radius: 0 6px 6px 0;
	background: var(--wp--preset--color--siva-svetla);
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--crna);
}

/* In-article call to action, [ss_poziv_red]: text on the left, the button on the right,
   wrapping when the row is too narrow for both. */
.ss-poziv-red {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	padding: 30px 32px;
	border-radius: 6px;
	background: var(--wp--preset--color--plava);
}
.ss-poziv-red .ss-poziv-red__uvod { max-width: 390px; }
.ss-poziv-red .ss-poziv-red__naslov {
	margin: 0 0 7px;
	font-size: 1.3125rem;
	font-weight: 700;
	color: var(--wp--preset--color--bela);
}
.ss-poziv-red .ss-poziv-red__tekst {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: #B9D3E2;
}
.ss-poziv-red .ss-poziv-red__akcija { margin: 0; }
.ss-poziv-red .ss-poziv-red__dugme {
	display: block;
	padding: 15px 28px;
	border-radius: 6px;
	background: var(--wp--preset--color--limun);
	color: var(--wp--preset--color--crna);
	font-size: 1rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}
.ss-poziv-red .ss-poziv-red__dugme:hover {
	background: var(--wp--preset--color--limun-tamna);
	color: var(--wp--preset--color--crna);
}
/* In the article it sits 38px below the block before it: the artboard's 14px margin on the
   24px gap. */
.ss-clanak .wp-block-post-content > * + .ss-poziv-red { margin-block-start: 38px; }

/* Meta row under the Clanak excerpt, [ss_meta]: the date and the reading time, 18px apart
   with the artboard's faint dot between them. The excerpt gets back its 26px margin. */
.ss-traka .ss-traka__uvod > .wp-block-post-excerpt:has(+ .ss-meta) { margin-bottom: 26px; }
.ss-traka .ss-traka__uvod > .ss-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 18px;
	font-size: .90625rem;
	line-height: 1.76;
	color: #8FB4CA;
}
.ss-meta .ss-meta__stavka + .ss-meta__stavka::before {
	content: "\00B7";
	content: "\00B7" / "";
	margin-right: 18px;
	opacity: .5;
}

/* Headings land 32px below the top of the window when a contents link or an address
   anchor scrolls to them, level with the sticky sidebar. */
.ss-clanak .wp-block-post-content :is(h2, h3)[id] { scroll-margin-top: 32px; }

/* Contents card, [ss_sadrzaj], from the Clanak artboard: the article's H2 and H3, H3
   indented, the active one on a pale blue ground. */
.ss-kartica.ss-sadrzaj .ss-kartica__oznaka { margin-bottom: 15px; }
.ss-sadrzaj .ss-sadrzaj__lista {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9375rem;
	line-height: 1.45;
}
.ss-sadrzaj .ss-sadrzaj__lista li { margin: 0; }
.ss-sadrzaj .ss-sadrzaj__veza {
	display: grid;
	padding: 8px 12px;
	border-radius: 4px;
	color: #414D55;
	text-decoration: none;
}
.ss-sadrzaj .ss-sadrzaj__stavka--pod .ss-sadrzaj__veza {
	padding-left: 26px;
	font-size: .90625rem;
}
/* The text and an invisible bold copy share one grid cell, so a link is always as tall as
   its bold state and the list does not rewrap as the active link moves. */
.ss-sadrzaj .ss-sadrzaj__veza > span,
.ss-sadrzaj .ss-sadrzaj__veza::after { grid-area: 1 / 1; }
.ss-sadrzaj .ss-sadrzaj__veza::after {
	content: attr(data-naslov);
	content: attr(data-naslov) / "";
	font-weight: 700;
	visibility: hidden;
}
.ss-sadrzaj .ss-sadrzaj__veza:hover > span { text-decoration: underline; }
.ss-sadrzaj .ss-sadrzaj__veza[aria-current="location"] {
	background: #E8F1F6;
	color: var(--wp--preset--color--plava);
	font-weight: 700;
}

/* The sidebar follows the reader 32px from the top wherever it has its own column, from
   1000px up. It is never taller than the window: a long contents list scrolls inside its
   card, so the cards under it stay on screen. */
@media (min-width: 1000px) {
	.wp-block-group.ss-strana--clanak > .ss-strana__bocni {
		position: sticky;
		top: 32px;
		max-height: calc(100vh - 64px);
	}
	.ss-strana--clanak .ss-strana__bocni > * { flex-shrink: 0; }
	.ss-strana--clanak .ss-strana__bocni > .ss-sadrzaj {
		display: flex;
		flex-direction: column;
		flex-shrink: 1;
		min-height: 0;
	}
	.ss-strana--clanak .ss-sadrzaj .ss-sadrzaj__lista {
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/* The scrolling contents list shows that there is more of it. An edge with more list past it
   fades to the card's white over 32px: the bottom until the list reaches its end, the top once
   it leaves its start, each coming in over the first 32px of scroll. The list's own scroll
   timeline drives both, so a list that fits has no timeline and no fade, and a browser without
   scroll-driven animations shows the plain list. Each fade is a sticky pseudo-element that
   takes no room: its 32px and the list's 2px gap are pulled back. The scroll-spy keeps the
   active link 32px clear of the edge it is heading toward (sadrzaj.js), but the browser brings
   a focused link only as far as the edge, or leaves one already in view where it is, so a
   focused link sits above the fade. */
@media (min-width: 1000px) {
	@supports (animation-timeline: scroll()) {
		.ss-strana--clanak .ss-sadrzaj .ss-sadrzaj__lista { scroll-timeline: --ss-sadrzaj-lista block; }
		.ss-strana--clanak .ss-sadrzaj .ss-sadrzaj__lista::before,
		.ss-strana--clanak .ss-sadrzaj .ss-sadrzaj__lista::after {
			content: "";
			position: sticky;
			flex: none;
			height: 32px;
			pointer-events: none;
			opacity: 0;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: --ss-sadrzaj-lista;
		}
		.ss-strana--clanak .ss-sadrzaj .ss-sadrzaj__lista::before {
			top: 0;
			margin-bottom: -34px;
			background: linear-gradient(var(--wp--preset--color--bela), transparent);
			animation-name: ss-sadrzaj-vrh;
			animation-range: 0px 32px;
		}
		.ss-strana--clanak .ss-sadrzaj .ss-sadrzaj__lista::after {
			bottom: 0;
			margin-top: -34px;
			background: linear-gradient(transparent, var(--wp--preset--color--bela));
			animation-name: ss-sadrzaj-dno;
			animation-range: calc(100% - 32px) 100%;
		}
		.ss-strana--clanak .ss-sadrzaj .ss-sadrzaj__veza:focus-visible {
			position: relative;
			z-index: 1;
		}
		@keyframes ss-sadrzaj-vrh { from { opacity: 0; } to { opacity: 1; } }
		@keyframes ss-sadrzaj-dno { from { opacity: 1; } to { opacity: 0; } }
	}
}