/*
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.80
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. */

/* One body grey, #4E5A62, the artboards' --body. theme.json still names #484848 (siva) as the body
   colour and #6E6E6E (siva-srednja) for secondary copy, and prints both into every page's global
   styles, so they are answered here: changing the palette would change the served HTML. The
   preset colour classes carry !important, so their overrides do too. The interior columns set
   their own colours and are not reached. An excluded package row keeps #6E6E6E: that muted state
   is the one place the lighter grey carries meaning. */
body { color: #4E5A62; }
.has-siva-color,
.has-siva-srednja-color { color: #4E5A62 !important; }

/* 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);
}

/* One lime button treatment: no shadow at rest or on hover, as all three artboards draw it.
   theme.json gives every button a shadow at rest and a heavier one on hover; this reaches every
   lime block button, the default button or one given the lime background, in the header, the
   homepage hero and CTA card and the 404 template alike. Outline buttons have no shadow already. A
   focused button keeps the focus shadow. */
.wp-block-button__link:not(.has-background):not(:focus),
.wp-block-button__link.has-limun-background-color:not(:focus) { box-shadow: none; }

/* Focus rings by ground, on keyboard focus only (:focus-visible): a mouse click paints what it
   painted before. A ring's colour follows the ground it is drawn on and passes 3:1 against both
   things it touches. theme.json draws a 2px ring 2px outside a focused link in #005A87, and 2px
   outside a focused block button in #005A87 on keyboard focus (in the button's text colour on a
   click). On white and light grounds those stay. On the blue header, the blue sections and cards
   and the dark footer the ring is white, 7.47:1 against #005A87. The 2px offset is kept, so the
   ground shows on both sides of the ring and neither edge touches a lime button, where white would
   measure 1.54:1. In the header it replaces the parent theme's 4px offset on the nav links. */
.ss-zaglavlje a:not(.wp-block-button__link):focus-visible,
.ss-zaglavlje button:focus-visible,
.ss-podnozje a:focus-visible,
.ss-zaglavlje .wp-block-button__link:focus-visible,
.ss-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible,
.ss-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible,
.ss-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.ss-cta .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.ss-paket--istaknut .ss-paket__cta:focus-visible,
.ss-poziv .ss-poziv__dugme:focus-visible,
.ss-poziv-red .ss-poziv-red__dugme:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* The 404 template's lime button sits on white and keeps the ink ring it has had, which theme.json's
   #005A87 keyboard default would otherwise replace. */
.error404 main .wp-block-button__link:focus-visible { outline-color: var(--wp--preset--color--crna); }

/* The skip link's ring draws inside its own #EEEEEE box, 2px in from the edge, so both of its edges
   meet that grey, 6.44:1, instead of the header blue behind the link. Its text stays over 10px clear. */
.skip-link.screen-reader-text:focus-visible { outline-offset: -4px; }

/* The mobile menu's close button had an inset ring, because it sat flush in the viewport's top
   right corner where a ring drawn outside it ran off the screen. Q9b gave it a 44 by 44 box at
   Otvori meni's position, 14px from the right and 13.34px from the top, so there is room outside
   it again and it keeps the header's ordinary white 2px ring at a 2px offset like every other
   button in here. Both of that ring's edges meet the overlay's blue, 7.47:1, and it stays 8px
   clear of the X, which now starts 10px inside the box. */

/* A link in running text keeps its 2px ring, drawn 1px out: at 2px out its outer edge reached the
   next word, one space away. Punctuation set directly against a link still meets the ring, as no ring
   around the link can clear it. Paragraphs and list items in page content, in FAQ answers and in the
   homepage sections; not buttons, and not the explainer link rows, which are blocks. */
:is(.wp-block-post-content, .ss-sekcija, .ss-faq__odgovor) :is(p, li) > a:not(.wp-element-button, .ss-pitanja a):focus-visible { outline-offset: 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. */
/* The 20px a side was an inline style on the block until Q1. It moved here so the compact state
   can cut it without !important; the resting value is unchanged, so the header is still 111.73px
   at 1440. */
.wp-block-group.ss-zaglavlje {
	border-radius: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .13);
	padding-block: 20px;
}

.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; }

/* The header button at the artboards' size: 14.5px on 11px 20px, 173 x 46. Its shadow goes with
   every lime button's, above. */
.ss-zaglavlje .wp-block-button__link {
	padding: 11px 20px;
	font-size: .90625rem;
	white-space: nowrap;
}

/* -- Sticky header and dropdowns, A1 and A2 (THEME-GAP.md section 25) ------------ */

/* The compact header's height. The built height measures 71.69px, 8px + 54.69px of logo + 8px
   + the 1px border; 72px is the number the offsets use, so a heading clears the header by
   32.31px rather than 32px.

   On .ss-zaglavlje, not on :root. A custom property inherits, and cstyles.mjs reads every
   computed property of every element, so one declaration on :root put --ss-zaglavlje-kompakt on
   all 418 elements of every page and turned the resting computed-style gate into 9,938
   differences on 1.1.64. style.css already refuses to keep the card shadow in a :root property
   for the same reason. Here it reaches the header, where it belongs, and sadrzaj.js reads it off
   .ss-zaglavlje. The two offsets derived from it are written out, and the three places that have
   to agree are: this value, html's scroll-padding-top and the article sidebar's top, both 72 + 32
   below, and the scroll-spy's line in sadrzaj.js. */
.ss-zaglavlje { --ss-zaglavlje-kompakt: 72px; }

/* Sticky goes on the template part, not on .ss-zaglavlje: the part is the child of
   .wp-site-blocks that spans the page, while .ss-zaglavlje's own parent is only as tall as the
   header is and would unstick it at once. z-index puts it over the article sidebar, which is
   sticky with no z-index of its own, and over page content. At every width since Q2: above 600px
   the bar compacts to 71.69px on scroll, below 600px it is 71.69px to start with, so one
   declaration covers both and neither needs a media query. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* A contents link, the skip link and any hash jump land the heading clear of the sticky header,
   at both widths: the compact bar above 600px and Q2's one-row bar below it measure the same
   71.69px, so one value serves both. The 32px the headings carried in their own scroll-margin is
   folded in here so it is not counted twice. It was, on 1.1.61 above 600px, where a contents
   link landed its heading 136px down instead of 104px; the margin rule that survived below
   600px went the same way in Q2, when the header became sticky there too. */
html { scroll-padding-top: 104px; }  /* the sticky header's 72px plus the 32px clearance */

/* -- The fit line, Q9b (THEME-GAP.md section 34) ---------------------------------

   The bar is the bar only where it fits on one row. Below that it is the overlay, the same one
   that served below 600px before. Stepping the viewport one pixel at a time from 1004 to 1100 on
   pages 9, 18 and 404, the header is three rows and 173.66px tall up to 1094 and one row and
   111.73px from 1095: the row needs 48 + 194 of logo + 40 of gap + 420.89 of navigation + 40 of
   gap + 303.2 of phone and button + 48, which is 1094.09. Rounded up to the next ten, the fit
   line is 1100px, and that number is written in five places, all of them listed here:

     1. this query, the compact state and the held flow height;
     2. the dropdown panel query below it;
     3. the one row bar query, `max-width: 1099.98px`, which carries the phone and the bar button
        and, in the same query because it is the same condition, core's overlay switch;
     4. the query that hides the overlay's own phone and CTA where the bar carries them;
     5. `BAR` in assets/js/zaglavlje.js, which gates the compact class, the panel fit, Escape and
        the close on a resize across the line.

   Four media queries here and one matchMedia there, which is what the gate counts:
     grep -E "@media \((min-width: 1100px|max-width: 1099\.98px)\)|matchMedia\( '\(min-width: 1100px\)' \)"

   Before this round 600px stood in all five, which is where core's navigation stylesheet switches
   its own overlay. Between 600 and 1094 that left the bar wrapped to two or three rows, and the
   compact state there took it to 133.61px, not the 71.69px that `--ss-zaglavlje-kompakt` and
   html's scroll-padding-top are sized for: every hash jump in that band landed its heading behind
   the header. One line for the header means that band cannot exist. */
@media (min-width: 1100px) {
	/* Compact once zaglavlje.js has seen 24px of scroll. The height itself is not animated: the
	   header's height is auto and auto does not interpolate. The logo's width is a length, the
	   width attribute the site-logo block writes, so animating the width brings the image's
	   height with it through its intrinsic ratio and the padding carries the rest. */
	.wp-block-group.ss-zaglavlje { transition: padding-block 150ms ease; }
	.ss-zaglavlje .wp-block-site-logo img { transition: width 150ms ease; }
	.wp-block-group.ss-zaglavlje.ss-zaglavlje--kompakt { padding-block: 8px; }
	.ss-zaglavlje--kompakt .wp-block-site-logo img { width: 150px; }

	/* The flow height, held. The band compacts inside a wrapper that keeps its resting height, so
	   the document's length never changes and there is nothing for scroll anchoring to correct.

	   This is the round's first job. The wrapper is sticky but it is still in flow, so before this
	   compacting took 40.04px out of the document: Chrome anchored the shorter document by pulling
	   scrollY back by as much, which put it under the 24px threshold, which released the class,
	   which lengthened the document again. Measured on the served 1.1.78 at 1440 on pages 9 and 19,
	   every scroll position from 0 to 120 in steps of 2, approached from 0 and from above:
	   122 of 244 positions never come to rest, the class flips up to 55 times in a 900ms window,
	   and 82 distinct header heights and 33 distinct document heights are seen between the
	   resting 111.73px and the compact 71.69px. Sent to 120 the page rests at 80. Safari has no
	   scroll anchoring, so there the same 40px moves the content instead of the scroll position.

	   The value is the resting height measured unrounded, 20px of padding + 70.734375px of logo +
	   20px + the 1px border, identical on three pages at three widths. It is a min-height and not
	   a height, so at rest the natural height still wins by being equal to it and every box at
	   rest is exactly what it was.

	   pointer-events: the strip the wrapper holds open under a compact band is transparent, and
	   without this it would swallow clicks meant for the 40px of page behind it. The band takes
	   the events back, and the overlay is inside the band. */
	.wp-site-blocks > header.wp-block-template-part {
		min-height: 111.734375px;
		pointer-events: none;
	}
	.wp-site-blocks > header.wp-block-template-part > .ss-zaglavlje { pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.ss-zaglavlje,
	.ss-zaglavlje .wp-block-site-logo img { transition: none; }
}

/* The dropdown panel. Core opens it on hover and on focus within, and that behaviour is left
   alone; this is the panel's look, the brand's rather than core's white on rgba(0, 0, 0, .15).
   No lime anywhere in it: the panel is white, where lime fails outright. */
@media (min-width: 1100px) {
	.ss-zaglavlje .wp-block-navigation .wp-block-navigation__submenu-container {
		left: 0;
		/* 8px below the parent, not flush against it. The panel is white and the parent's focus
		   ring is the header's white, so a ring drawn 2px outside a parent whose panel starts at
		   its own bottom edge had its lower edge lying on that panel: measured at 1440 on pages 9,
		   10 and 11 in both of Q9a's walk runs, 7.47 on three sides and 1 on the bottom, on all
		   three parents. Focusing the parent is what opens the panel, so the ring went blind on
		   the side nearest the thing it had just opened. The ring reaches 4px past the parent, so
		   8px of the header's own blue leaves it clear on all four sides with room to spare.
		   The gap is bridged below, or the pointer could not cross it. */
		top: calc(100% + 8px);
		padding: 8px;
		border: 1px solid var(--wp--preset--color--ivica);
		border-radius: var(--ss-radius);
		box-shadow: var(--ss-card);
		/* Core puts the navigation block's overlay colours on the submenu container itself, as
		   has-plava-background-color and has-bela-color. Those are utility classes and carry
		   !important, so the panel rendered blue with white text until these two answered in
		   kind. Measured on 1.1.61: rgb(0, 90, 135). The overlay keeps core's blue and white,
		   which is what the overlay wants, and these rules do not reach it. */
		background-color: var(--wp--preset--color--bela) !important;
		color: var(--wp--preset--color--crna) !important;
	}

	/* The bridge over that 8px. The panel opens on hover, and hover on the item is what keeps it
	   open; the panel is absolutely positioned, so the item's own box stops at the label and a
	   pointer moving down into the gap is over neither. It would close the panel on the way to it.
	   An empty pseudo-element on the panel spans the gap, so the pointer is over a descendant of
	   the item for the whole journey. It carries no colour and it exists only while the panel is
	   open, because a closed panel is hidden and clipped and takes its pseudo-elements with it.
	   left and right rather than a width, so it spans the panel in the flipped position too. */
	.ss-zaglavlje .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -8px;
		height: 8px;
	}

	/* The chevron. Core draws one only as a focusable toggle button, which adds a Tab stop per
	   parent and switches core's own CSS off :focus-within onto a click toggle, so the template
	   turns showSubmenuIcon off and the mark is drawn here: the parent stays a link, the panel
	   opens on hover and on focus within, and the tab order is what it was. */
	.ss-zaglavlje .wp-block-navigation .has-child > .wp-block-navigation-item__content::after {
		content: "";
		display: inline-block;
		width: .4em;
		height: .4em;
		margin-left: .5em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-.15em) rotate(45deg);
	}

	/* Wide enough that the longest label sits on one line. Core caps an open panel at
	   min-width 200px; max-content takes the widest item instead. The max-width is the last
	   resort at the narrow end of the bar, where the longest label cannot fit the viewport. */
	.ss-zaglavlje .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.ss-zaglavlje .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
		min-width: max-content;
		max-width: calc(100vw - 48px);
	}

	/* Six classes deep, because core's own item rule is five
	   (.wp-block-navigation .has-child .wp-block-navigation__submenu-container >
	   .wp-block-navigation-item > .wp-block-navigation-item__content) and won on 1.1.61: the
	   padding measured .5em 1em, core's, rather than the 10px 14px below. */
	.ss-zaglavlje .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 10px 14px;
		border-radius: 4px;
		font-size: .9375rem;
		font-weight: 600;
		color: var(--wp--preset--color--crna);
		white-space: nowrap;
	}
	.ss-zaglavlje .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
		background-color: var(--wp--preset--color--siva-svetla);
	}

	/* The child page you are on. Blue at 700, never the bar's lime, which would not read here. */
	.ss-zaglavlje .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--plava);
		font-weight: 700;
	}

	/* Drawn inside the item: the header's white ring is wrong on a white panel, and the panel's
	   8px of padding is not room for a 2px ring 2px outside an item that spans its width.
	   .has-child is in the selector to carry it past the parent theme, which sets
	   outline-offset: 0 on a submenu item at the same specificity this rule had and loads after
	   style.css, so the ring measured offset 0 on 1.1.63. style.css already replaced the parent
	   theme's 4px offset on the top level nav links; this is the same rule one level down, and
	   nothing had hit it before because the nav had no submenus. */
	.ss-zaglavlje .wp-block-navigation .has-child > .wp-block-navigation__submenu-container a:focus-visible {
		outline: 2px solid var(--wp--preset--color--plava);
		outline-offset: -2px;
	}

	/* Flipped to the parent's right edge where the panel would leave the viewport, which
	   zaglavlje.js measures and marks. */
	.ss-zaglavlje .wp-block-navigation .has-child.ss-podmeni--desno > .wp-block-navigation__submenu-container {
		left: auto;
		right: 0;
	}

	/* The measuring state zaglavlje.js reads the width under: the box is restored, and it stays
	   invisible and untransitioned while it is read. */
	.ss-zaglavlje .wp-block-navigation .wp-block-navigation__submenu-container.ss-podmeni--meri {
		height: auto;
		width: auto;
		min-width: max-content;
		overflow: visible;
		visibility: hidden;
		opacity: 0;
		transition: none;
	}

	/* Escape closed it. Focusing the parent keeps :focus-within true, so closing has to outrank
	   core's hover and focus-within open rules. The links go out of the tab order with it, so the
	   next Tab leaves the item instead of walking a panel that is not on screen. */
	.ss-zaglavlje .wp-block-navigation .has-child.ss-podmeni--zatvoren:hover > .wp-block-navigation__submenu-container,
	.ss-zaglavlje .wp-block-navigation .has-child.ss-podmeni--zatvoren:focus-within > .wp-block-navigation__submenu-container {
		height: 0;
		width: 0;
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
	}
}

/* The overlay carries the same tree. Core already renders every submenu in an open overlay
   static and visible and hides the chevron, so nothing is collapsed and no toggle needed
   defeating. What core does not do is drop the panel's white ground and black text, which would
   sit white on the overlay's blue; both go, long labels wrap here, and the header's existing
   white 2px rings are what a link in the overlay keeps. Not inside the 600px query above: core's
   white panel rules carry no media query either. */
.ss-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	padding: 4px 0 0 16px;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: inherit;
}
.ss-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 6px 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: inherit;
	white-space: normal;
}

/* The drawn chevron says nothing in the overlay, where every child is already listed under its
   parent. Core hides its own indicator there for the same reason. */
.ss-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content::after { display: none; }

/* -- One row below the fit line, the overlay's phone and CTA, A3 and A4 (sections 26 and 34) -- */

/* Below the fit line the bar carries the logo and Otvori meni, nothing else. The phone and the
   lime button move into the overlay, where there is room for them and where a thumb can reach
   them. Measured on 1.1.65 before this: two rows, 173.66px, the logo at 194 x 70.73 on 20px of
   padding and the phone and button wrapping to a second row 45.92px tall. One row at the compact
   size takes it to 71.69px, which is also the height the bar compacts to above the fit line,
   which is why one scroll-padding-top serves both.

   Q9b moved this query from 600px to the fit line, so everything it says now holds up to 1099.98
   rather than to 599.98. There is no compact state below the line: the bar starts at the height
   it would compact to. */
@media (max-width: 1099.98px) {
	/* The row that holds the phone and the button. Hiding the row takes both out of the tab
	   order with it; neither has a rule of its own here, so neither can come back by accident. */
	.ss-zaglavlje .ss-zaglavlje__akcije { display: none; }

	.wp-block-group.ss-zaglavlje { padding-block: 8px; }
	.ss-zaglavlje .wp-block-site-logo img { width: 150px; }

	/* Core's navigation stylesheet switches its own overlay at 600px, and the bar has to switch
	   with the fit line instead. Four rules sit in core's `@media (min-width: 600px)`, read from
	   the served file this round (assets/captures/q9b/raw/core-nav.txt); two of them have to move
	   and two do not:

	     - the inline container is shown from 600 up. Hidden again here, so below the fit line the
	       tree lives in the overlay and nothing of it is in the tab order until the overlay opens.
	       display alone answers it: a box with no display has no position or width to restore;
	     - `Otvori meni` is hidden from 600 up. Shown again here, at core's own display: flex;
	     - core also hides the close button, but only while the container is not open, so an open
	       overlay keeps its close button at every width and that rule needs no answer;
	     - core also sets the submenu's left to 0 in an open overlay, on a box core has already
	       made position: static there, where left does nothing.

	   Specificity rather than !important: core's two are one and two classes deep at (0,3,0) and
	   (0,2,0), and .ss-zaglavlje adds a class to each. */
	.ss-zaglavlje .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.ss-zaglavlje .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}

/* The two overlay items, two navigation-link blocks marked with classes in parts/header.html.
   The bar above the fit line has the header's own phone and button, so these two are not wanted
   there. */
@media (min-width: 1100px) {
	.ss-zaglavlje .wp-block-navigation .ss-meni__telefon,
	.ss-zaglavlje .wp-block-navigation .ss-meni__cta { display: none; }
}

/* The phone, 17px at 700 in white: two steps up from the bar's 15px, because in the overlay it is
   the first thing under the close button rather than a line in a crowded row. */
.ss-zaglavlje .wp-block-navigation .ss-meni__telefon > .wp-block-navigation-item__content {
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--bela);
	text-decoration: none;
}
.ss-zaglavlje .wp-block-navigation .ss-meni__telefon > .wp-block-navigation-item__content:hover { text-decoration: underline; }

/* The lime button at the header button's size: theme.json's 6px radius and 800, style.css's
   11px 20px and 14.5px, which measured 175.73 x 45.92 in the bar at 390. Styled through the
   class rather than by putting a core button block inside the nav, which would not be a menu
   item and would not take the overlay's tab order or its ring. */
.ss-zaglavlje .wp-block-navigation .ss-meni__cta > .wp-block-navigation-item__content {
	padding: 11px 20px;
	border-radius: var(--ss-radius);
	background-color: var(--wp--preset--color--limun);
	color: var(--wp--preset--color--crna);
	font-size: .90625rem;
	font-weight: 800;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
}
.ss-zaglavlje .wp-block-navigation .ss-meni__cta > .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--limun-tamna);
	color: var(--wp--preset--color--crna);
}

/* 24px between the button and Ponuda. The overlay column's row gap is the bar's own 2rem, which
   style.css sets on .wp-block-navigation and core passes to the container in the overlay too, so
   the 24px asked for is that 32px less 8px. A negative margin rather than a smaller gap because
   the gap is the tree's rhythm and the tree is unchanged this round. */
.ss-zaglavlje .wp-block-navigation .ss-meni__cta { margin-block-end: -8px; }

/* Left-aligned, all of it, which is the call the round left open. Core centres the open overlay's
   column and centres every row inside it on its own width, so Q1's 16px indent under a parent was
   invisible and a child sat further left than its parent as often as not: measured on 1.1.65 the
   five parents' left edges were 168, 180.63, 164.41, 170.27 and 168.45, and the first child under
   SEO sat at 98.11, seventy pixels left of its parent. Left-aligned they share one edge, the
   children indent visibly, and the phone and the button line up with the tree. The inset is the
   row's own, so the overlay's text starts where the bar's logo does.

   Which is 48px, not 24px, at most of the widths the overlay opens at. The bar's logo sits at the
   row's gutter plus the 24px root padding: measured on 1.1.79 at 390 and 781 the logo starts at
   24 with the gutter at 0, and at 782, 800 and 1099 it starts at 48 with the gutter at 24, on
   pages 9, 18 and 404 alike. The overlay is fixed to the viewport, so it gets neither, and a flat
   24px left its phone and button a gutter to the left of the logo above 781. Written the way the
   row's own rule is written, the wide value first and the narrow one under the same 781px line
   core's columns stack at, rather than a min-width this file does not otherwise spell. Above the
   fit line the container is display: none and the padding is unobservable. */
.ss-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-inline: 48px;
	/* Room under the last item for its ring. Scrolled to the end of the overlay at 390 x 900, the
	   bottom edge of O nama measured 899.97 against a 900px viewport, so the item was on screen
	   and the 2px ring drawn 2px outside it was not: Q9a's walks flagged that stop fail-clipped on
	   pages 9 and 10. The ring reaches 4px past the item, and 24px clears it with room for the
	   next item to be no worse. It is not the inline inset above and does not follow it: this one
	   is a ring's clearance, which is the same at every width. Core's own padding on the scroll
	   container did not do this: the container is what scrolls, and its bottom padding sits
	   outside the scrolled box. */
	padding-block-end: 24px;
}
@media (max-width: 781px) {
	.ss-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-inline: 24px; }
}
.ss-zaglavlje .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	width: 100%;
}
/* Core centres three things, not one, and the first two rules alone left only Portfolio and
   O nama at the inset: measured on 1.1.66, Ponuda sat at 142.75, SEO at 129.92 and Pitanja at
   170.27, each centred inside its own item, because in an open overlay core makes every item and
   every submenu container a centred column of its own. The two parents without children were
   already at 24 because their item is only as wide as their label. */
.ss-zaglavlje .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.ss-zaglavlje .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start;
}

/* -- The two menu buttons, 44 by 44 (THEME-GAP.md section 34) -------------------

   Both were 24 by 24 with no padding at all, measured at 390, 360 and 320, against a 44 by 44
   minimum. Core sizes the icon inside each at exactly 24px and that is the right size for the
   icon; what was missing is the box around it. 10px of padding on a 24px icon is 44.

   The icon does not move. Otvori meni grows into its own padding and then pulls itself back by
   the same 10px, so its icon stays 24px from the right edge of the viewport where it has always
   been, and the bar stays 71.69px, because 44 is still shorter than the 54.69px logo beside it.

   The close button is given the position Otvori meni holds, rather than the viewport's corner it
   sat flush in, so opening the menu no longer moves the thing you are about to press. It is
   positioned against the viewport, so it has to be told where the bar's own right inset is, and
   that inset has two values below the fit line: the group's 24px on its own up to 781px, and the
   wide row's further 24px on top of that above it. Both are written here less the button's 10px
   of padding, so the icon lands on the same pixel as Otvori meni's either way, and 781px is the
   spelling style.css already uses for exactly that padding change.

   13.34px from the top is the same subtraction from the 23.34px the open button's icon sits at,
   which is the bar's 8px of padding plus half the difference between the 54.69px logo and the
   44px box. The bar is 71.69px at every width below the line, so one value serves all of them. */
.ss-zaglavlje .wp-block-navigation__responsive-container-open {
	padding: 10px;
	margin-inline-end: -10px;
}
.ss-zaglavlje .wp-block-navigation__responsive-container-close {
	top: 13.34px;
	right: 38px;
	padding: 10px;
}
@media (max-width: 781px) {
	.ss-zaglavlje .wp-block-navigation__responsive-container-close { right: 14px; }
}

/* 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, as Main.dc.html draws them: no border, 28px 24px, the shared card shadow, an 18px title and
   15.5px text. The title and text sizes are preset classes in page 9's content, which carry
   !important. */
.ss-usluga-kartica {
	background: var(--wp--preset--color--bela);
	border-radius: var(--ss-radius);
	padding: 28px 24px;
	box-shadow: 0 1px 2px rgba(16, 32, 42, .05), 0 8px 24px -12px rgba(16, 32, 42, .14);
	transition: box-shadow .18s ease, transform .18s ease;
}
.ss-usluga-kartica h3.has-large-font-size { font-size: 1.125rem !important; }
.ss-usluga-kartica p.has-small-font-size { font-size: .96875rem !important; }
.ss-usluga-kartica:hover {
	box-shadow: var(--ss-card);
	transform: translateY(-2px);
}
/* Q6b put the band they sit in into a white card, and a white card on a white card is only its
   shadow. Shell grey and no shadow at rest, which is what Q4 did to the step cards when Q3 put
   the interior article in a card, and what .ss-citat and .ss-korak already do on that card. The
   hover is unchanged and reads better for it: the shadow now lifts the card off the grey rather
   than deepening one it already had. Named through the card, so a service card drawn anywhere
   else keeps the white one. */
.ss-sekcija > .wp-block-post-content .ss-usluga-kartica {
	background: var(--wp--preset--color--siva-svetla);
	box-shadow: none;
}
.ss-sekcija > .wp-block-post-content .ss-usluga-kartica:hover { box-shadow: var(--ss-card); }
.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 band, the WHY US band of Main.dc.html. Page 9 stores the heading, the lead and the
   five reasons as one .ss-razlozi group; [ss_razlozi] prints it in the full-width blue band
   between the portfolio and the FAQ (inc/shortcodes.php). The group is the band's grid: the
   heading and the lead in the left column, the list as numbered cards in the right. The
   artboard draws four cards where there are five, so an odd last one takes the whole row. */
.wp-block-group.ss-razlozi-traka {
	position: relative;
	overflow: hidden;
}
/* The artboard's decorative circle, in the tint .ss-traka--clanak::before already uses. Lime
   stays an accent here and is never a flat ground. */
.ss-razlozi-traka::before {
	content: "";
	position: absolute;
	top: -140px;
	left: -120px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: rgba(200, 219, 42, .06);
	pointer-events: none;
}
/* Positioned, so the band's row paints above the circle. */
.ss-razlozi-traka > * { position: relative; }
/* A band whose shortcode found no group prints nothing, as the cenovnik and FAQ bands do. */
.wp-block-group.ss-razlozi-traka:not(:has(.ss-razlozi)) { display: none; }

.wp-block-group.ss-razlozi {
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	column-gap: 60px;
}
/* The group is a constrained layout, so core clamps every child to the 760px content size and
   centres it with !important. The band's own columns set the width. */
.wp-block-group.ss-razlozi > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* The heading and the lead share the left column and sit centred against the cards: the list
   spans both rows, and grid hands a spanning item's spare height to the two rows equally, so
   the pair ends up centred whichever side is taller. */
.ss-razlozi > h2 {
	grid-area: 1 / 1;
	align-self: end;
	margin-top: 0;
	margin-bottom: 18px;
	color: var(--wp--preset--color--bela);
	font-size: min(2.125rem, var(--wp--preset--font-size--xx-large));
}
.ss-razlozi > p {
	grid-area: 2 / 1;
	align-self: start;
	margin-block: 0;
	font-size: 1.09375rem;
	line-height: 1.68;
	color: #B9D3E2;
}
.ss-razlozi > .wp-block-list {
	grid-area: 1 / 2 / 3 / 3;
	align-self: center;
}
.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);
}
/* The numeral is 19px where the artboard draws 14px. Lime on the card ground reads 4.15:1, and
   14px 700 is not large text, so its threshold is 4.5:1 and it failed. Large text starts at
   14pt bold, 18.67px at 700, where the threshold is 3:1. Colour, weight and the 8px gap under
   it are the artboard's. Section 24 of design/THEME-GAP.md carries the readings. */
.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: 19px;
	font-weight: 700;
	color: var(--wp--preset--color--limun);
}
.ss-razlozi .wp-block-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* The columns stack at 781px, the width core's columns block stacks at, so the band and every
   other two-column row on the page turn to one column together. */
@media (max-width: 781px) {
	.wp-block-group.ss-razlozi { display: block; }
	.ss-razlozi > p { margin-bottom: 28px; }
}
@media (max-width: 599.98px) {
	.ss-razlozi .wp-block-list { grid-template-columns: 1fr; }
}

/* -- Pricing ------------------------------------------------------------- */

/* The heading sits on the row's left edge with everything else, and starts the band's content
   at the band's own padding edge. The margin-top is the browser's default 0.83em on an h2:
   core zeroes the first child's margin inside its own layout containers, and this heading is
   the first child of the shortcode's <section>, which is not one, so it kept it and pushed the
   band's content 30.71px down at 1440 and 25.56px at 390. Only the homepage renders this
   heading: the hubs draw their band with bez_naslova and take their heading from the hero's
   [ss_cenovnik_naslov], which is .ss-traka__cenovnik-naslov. */
.ss-cenovnik__naslov { text-align: start; margin-top: 0; 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. Its measure is 620px and
   it keeps it; the auto margins that centred it are gone, so it starts on the row edge too. */
.ss-cenovnik__uvod {
	max-width: 620px;
	margin: 0 0 44px;
	font-size: 1.125rem;
	text-align: start;
}

.ss-cenovnik__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}
/* Three packages share one row wherever three fit and stack where they do not, so the third
   never sits alone on a second row (pages 12 and 24). From 726px the band is at least 678px wide
   and each card at least 210px.

   It said "in the 760px band" until Q9c. Q4 took these bands out of the 760px constrained column
   and on to the row, and the band is the row less 48px a side at every width: measured on 1.1.79
   it is 1104px at 1440 and 704px at 800 on pages 9, 11, 12 and 24 alike. */
@media (min-width: 726px) {
	.ss-cenovnik__grid:has(> .ss-paket:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 725.98px) {
	.ss-cenovnik__grid:has(> .ss-paket:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
}
/* Four packages go four in a row, two and two, or one under another, never three and the fourth
   alone. The grid above put three and one on the homepage from 864px to 1127px, where the band is
   768px to 1031px wide; four 240px cards need 1032px, which the band reaches at 1128px. From 552px
   two 240px cards fit, so two to a row there changes nothing below 864px.

   The line under this one said "Page 11's band stops at 760px and already shows two and two at
   every width". Both halves went stale with Q4: page 11's band is the same 1104px row as the
   homepage's, and measured on 1.1.79 it lays its four out as 258px four times at 1440 and as
   340px twice at 800. It is this rule that gives it two and two, in the band this rule names,
   and above 1127.98px the auto-fit above puts all four on one row on both pages. */
@media (min-width: 552px) and (max-width: 1127.98px) {
	.ss-cenovnik__grid:has(> .ss-paket:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 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;
}

/* Package name in Manrope 15px 800, as Main.dc.html draws it. */
.ss-paket__naziv {
	font-family: var(--wp--preset--font-family--telo);
	font-size: .9375rem;
	font-weight: 800;
	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: #4E5A62;
	margin-top: .2rem;
}

.ss-paket__opis { font-size: .9375rem; color: #4E5A62; 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; }
/* On the blue card an excluded row is muted too, cross and text, in the card's white dimmed to 72%:
   #B8D1DD on #005A87, 4.69:1, where the included rows' #CBE2EF is 5.57:1 and the white 7.47:1.
   #6E6E6E would be 1.46:1 there. */
.ss-paket--istaknut .ss-paket__stavka--ne,
.ss-paket--istaknut .ss-paket__stavka--ne span { color: rgba(255, 255, 255, .72); }

/* 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 ----------------------------------------------------------- */

/* The floor is min(280px, 100%), not 280px (Q5b). A bare 280px floor is a minimum the track keeps
   even when the row is narrower than it, so below 328px on page 14 and below 304px on the
   homepage the tile stayed 280px wide in a row that was not, and the page scrolled sideways.
   min() lets the track fall to the row's own width, so a narrow row takes one full-width tile. */
.ss-portfolio {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--50);
}

/* ONE TILE (Q5, A13, THEME-GAP.md section 29). Until Q5 there were two: these base rules drew a
   bordered card with outlined chips, and a second layer scoped to .ss-radovi redrew it on the
   homepage alone as Main.dc.html draws it. Page 14 got the base layer, so the same project read
   as two different cards on two pages. The homepage layer is now the tile, here, and .ss-radovi
   keeps only what belongs to the section around it: the auto-fit grid, the heading size and the
   Ceo portfolio button.

   Positioned, because the title's link covers the card through its ::after.

   It carries the site's body type rather than inheriting whatever ground it lands on. Every
   line of text in a tile sets its own size in rem, but not its line height, and inside page
   14's article card the tile inherited the card's 18px on 1.76 where the homepage gives it
   17px on 1.65: same pills, same title, a description set 1.65px looser per line and a card
   4.66px taller. These are the two values the homepage's ground already hands it, so the
   homepage computes exactly what it computed before. */
.ss-projekat {
	position: relative;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	background: var(--wp--preset--color--bela);
	border: 0;
	border-radius: var(--ss-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 32, 42, .05), 0 8px 24px -12px rgba(16, 32, 42, .14);
	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); }

/* A hairline under the image. */
.ss-projekat__slika { border-bottom: 1px solid var(--wp--preset--color--ivica); }
.ss-projekat__slika img { display: block; width: 100%; height: 190px; object-fit: cover; }

/* The title and the description take whole rows; the package and the technologies share the row
   under them, 7px apart, and the list takes the rest of that row so a technology that does not
   fit wraps inside the list rather than at the card's left edge. */
.ss-projekat__telo {
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-flow: row wrap;
	gap: .5rem;
	column-gap: 7px;
}
.ss-projekat__telo > :not(.ss-projekat__paket, .ss-projekat__tehnologije) { flex-basis: 100%; }

.ss-projekat__naziv { font-size: 1.125rem; margin: 0; }

/* The whole tile is the link (Q5, A13). The title carries it and its ::after covers the card, so
   a tile is one Tab stop and one click target instead of a rectangle with a link in it. Ink at
   rest with no underline, so the card reads as a card, and blue on hover anywhere over it. */
.ss-projekat__naziv a {
	color: var(--wp--preset--color--crna);
	text-decoration: none;
}
.ss-projekat__naziv a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.ss-projekat:hover .ss-projekat__naziv a { color: var(--wp--preset--color--plava); }
/* The ring the running-text links take, drawn 1px out, and on the keyboard only: the cover means
   a click anywhere on the card would otherwise ring the title, several hundred pixels away from
   where the pointer is. */
.ss-projekat__naziv a:focus-visible {
	outline: 2px solid var(--wp--preset--color--plava);
	outline-offset: 1px;
}
.ss-projekat__naziv a:focus:not(:focus-visible) { outline: none; }

/* Both kinds of pill: filled, not outlined, 5px 11px on a 100px radius at 12.5px 700. */
.ss-projekat__paket,
.ss-projekat__tehnologije li {
	border: 0;
	border-radius: 100px;
	padding: 5px 11px;
	font-size: .78125rem;
	font-weight: 700;
}
.ss-projekat__paket {
	align-self: flex-start;
	background: var(--wp--preset--color--plava-svetla);
	color: var(--wp--preset--color--plava);
}

.ss-projekat__opis { font-size: .9375rem; color: #4E5A62; margin: 0; }

.ss-projekat__tehnologije {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	flex: 1 1 0;
	min-width: min-content;
}
.ss-projekat__tehnologije li {
	color: #4E5A62;
	background: var(--wp--preset--color--siva-svetla);
}

/* The link's wrapper takes the auto margin, so the link sits on the card's foot, and it is
   positioned above the title link's cover so it can still be clicked. No project stores a
   sajt_url today, so nothing renders it; the day one does, it works. */
.ss-projekat__akcija { position: relative; z-index: 1; 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; }

/* One rhythm for all seven bands. Each carried its own inline padding on the block, 70 to 84
   and 76 over 84 on the hero, which a media query can only reach with !important. Here the
   781px line applies on its own, and 781px is where core's columns stack, so the whole page
   changes rhythm on one line. .ss-paketi draws a 1px hairline above and below, which its
   border box counts and its padding does not, so its content sits 73 and 73 from the band's
   outer edge where the rest sit 72 and 72. */
.wp-block-group.ss-sekcija { padding-block: 72px; }
@media (max-width: 781px) {
	.wp-block-group.ss-sekcija { padding-block: 48px; }
}

/* 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; }

/* Hero lead at 19.5px on 1.6, as drawn; the size is a preset class in the template, which carries
   !important, and below 1440px the preset's own smaller fluid size still applies. */
.ss-hero .ss-svetli-tekst.has-large-font-size {
	font-size: min(1.21875rem, var(--wp--preset--font-size--large)) !important;
	line-height: 1.6;
}

/* The hero and CTA buttons at 16.5px, 59px tall: the lime button on 16px 30px, the outline on
   15px 26px inside its border. In the CTA card both fill the column. */
.ss-hero .wp-block-button__link,
.ss-cta .wp-block-button__link { font-size: 1.03125rem; }
.ss-hero .wp-block-buttons > .wp-block-button:not(.is-style-outline) > .wp-block-button__link { padding: 16px 30px; }
.ss-hero .wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link { padding: 15px 26px; }
.ss-cta .wp-block-buttons > .wp-block-button:not(.is-style-outline) > .wp-block-button__link { padding: 16px 0; }
.ss-cta .wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link { padding: 15px 0; }
/* The services band, the only block on the page core lays out as a constrained container of its
   own. It centred every child on its own measure: paragraphs on 68ch, which is 705px at 1440 and
   put them at x 367; headings on theme.json's 760px contentSize, x 340; and the two card rows on
   the 1200px wide row, x 120. Three left edges on one band, none of them the 168 every other
   section starts at.

   So the container takes the row itself, exactly as .alignfull.is-layout-constrained > .alignwide
   does for every other band; its children take a left-aligned 740px measure; and the two card rows
   fill the row. The !important is core's: a constrained container centres its children with
   margin-left: auto !important, so nothing without it can put a child on the left edge. The rules
   name .ss-sekcija, which no interior template puts a post-content inside, so interior
   post-content is untouched.

   Q6b makes the container the article card, the same card the interior templates draw. Its
   ground, radius, padding and prose type come from the rule that draws that card,
   .wp-block-group.ss-strana > .ss-strana__glavni, which this selector now joins, and its shadow
   from the rule the white cards share; both are further down the file and win on order. What is
   here is this card's own width. A card's edge is the row's edge, so the 48px gutter every wide
   row keeps inside itself is outside this one: the width is the row less its two gutters, and
   never more than the room the band has to give. The gutter's three values are the alignwide
   rule's own. */
.ss-sekcija > .wp-block-post-content.alignfull {
	--ss-oluk: 48px;
	box-sizing: border-box;
	max-width: calc(min(var(--wp--style--global--wide-size), 100%) - 2 * var(--ss-oluk));
	margin-inline: auto;
}
@media (max-width: 1247px) {
	.ss-sekcija > .wp-block-post-content.alignfull { --ss-oluk: 24px; }
}
@media (max-width: 781px) {
	.ss-sekcija > .wp-block-post-content.alignfull { --ss-oluk: 0px; }
}
.ss-sekcija > .wp-block-post-content > * {
	max-width: 740px;
	margin-inline: 0 !important;
}
.ss-sekcija > .wp-block-post-content.alignfull > .alignwide {
	max-width: none;
	padding-inline: 0;
}

/* Section headings at the artboard's sizes: 37px on the services band's headings (the second, Ko
   to radi, follows the first), on the packages and on the portfolio, 34px on the questions and 33px
   in the CTA card. Each keeps the fluid preset below the size it caps. */
.ss-sekcija > .wp-block-post-content > h2.wp-block-heading,
.ss-paketi .ss-cenovnik__naslov,
.ss-radovi h2.wp-block-heading { font-size: min(2.3125rem, var(--wp--preset--font-size--xx-large)); }
.ss-sekcija:has(.ss-pitanja) h2.wp-block-heading { font-size: min(2.125rem, var(--wp--preset--font-size--xx-large)); }
.ss-cta h2.wp-block-heading { font-size: min(2.0625rem, var(--wp--preset--font-size--xx-large)); }

/* Sva pitanja at the artboard's size, 15.5px on 13px 26px, with no shadow at rest or on hover. A
   focused button keeps the focus shadow. */
.ss-sekcija:has(.ss-pitanja) .wp-block-button__link {
	padding: 13px 26px;
	font-size: .96875rem;
}
.ss-sekcija:has(.ss-pitanja) .wp-block-button__link:not(:focus) { box-shadow: none; }

/* 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;
}

/* 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. The tile itself is not
   the section's business any more: Q5 moved the whole of the homepage's tile build onto the
   .ss-projekat rules, so every [ss_portfolio] draws the same card. What is left here is the
   section around them, which the homepage does own. */
.ss-radovi .ss-portfolio { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* Ceo portfolio: white, a line-coloured border, blue 15.5px text on 12px 24px. */
.ss-radovi .wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 12px 24px;
	border: 1.5px solid var(--wp--preset--color--ivica);
	background: var(--wp--preset--color--bela);
	color: var(--wp--preset--color--plava);
	font-size: .96875rem;
	font-weight: 700;
}
.ss-radovi .wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--plava); }

/* 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.66;
	color: var(--wp--preset--color--crna);
	text-decoration: none;
}
.ss-pitanja a:hover { color: var(--wp--preset--color--plava); }
/* The glyph points the way the row goes. A plus says the row opens where it is, and these five
   navigate; the accordion on page 11, which does open where it is, keeps its plus. The chevron is
   .ss-clanak__nazad::before turned to point right: two sides of a square, rotated 45 degrees. The
   flex item still measures 17px by 17px counting its margins, which is the box the plus filled,
   so space-between puts it where the plus sat and neither the row's height nor its text box
   moves; the square drawn inside is 9px. */
.ss-pitanja a::after {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	margin: 4px;
	border-top: 2px solid var(--wp--preset--color--plava);
	border-right: 2px solid var(--wp--preset--color--plava);
	transform: rotate(45deg);
}

.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; }
}

/* The three stats stay on one row on a phone. The 34px column gap is what broke them: at 390 the
   three measure 289.25px and the two gaps 68px, which is 357.25 in a 342px row, so Besplatno
   dropped alone to a second row and the strip stood 158.84px tall. A 16px gap and 22px figures
   bring the row to about 287px, which still fits at 360 and at 340. Below that it wraps, which is
   where one row would have to overflow. The desktop strip is untouched. */
@media (max-width: 599.98px) {
	.ss-hero .ss-hero__statistike { column-gap: 16px; }
	.ss-hero .ss-stat__broj { font-size: 1.375rem; }
}

@media (max-width: 599.98px) {
	.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; }

/* ONE HERO (Q3, THEME-GAP.md section 27). Everything from here to the breadcrumb block is the
   shared hero: the same markup in both interior templates and the same rules for both bands, so
   Q5 can hand the portfolio single the same section and the same class. Only the band modifier
   differs, and it carries nothing but the decorative circle above.

   The hero is its own .wrap: 840px including the 48px gutter the alignwide rule adds, so the row
   measures 744px. It starts on the row's left edge rather than centred, so the breadcrumb, the
   H1, the excerpt and the price card below all share one edge. Core centres constrained children
   with !important, which is why the override carries it too. */
.alignfull.is-layout-constrained > .alignwide.ss-traka__uvod {
	max-width: 840px;
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
	margin-block-start: 0;
	/* The band height follows its content: 72px above the breadcrumb and 72px below the last
	   thing the hero draws, which is the excerpt, or the meta line where there is one. The
	   band itself has no padding, so these two numbers are the whole of it. */
	padding-block: 72px;
}
@media (max-width: 781px) {
	/* The QA pass's mobile section padding, and the line where the alignwide gutter already
	   goes to zero and the 24px root padding takes over. */
	.alignfull.is-layout-constrained > .alignwide.ss-traka__uvod { padding-block: 48px; }
}
.ss-traka .ss-traka__uvod > * { margin-block: 0; }

/* The trail sits inside the hero on both templates now, above the title. */
.ss-traka .ss-traka__uvod > .ss-putanja { margin-bottom: 24px; }

/* One title size for both templates: 48px from 1000px up, scaling down to 30px below. Set on
   the class, so the element keeps the global letter-spacing and line-height. Clanak's 50px is
   gone; section 27 records it. */
.ss-traka .ss-traka__uvod > .wp-block-post-title {
	margin-bottom: 18px;
	font-size: clamp(30px, calc(21px + 2.7vw), 48px);
	font-weight: 700;
	color: var(--wp--preset--color--bela);
	overflow-wrap: break-word;
}

/* One excerpt measure for both: 680px at 20px. Clanak's 720px at 20.5px is gone. */
.ss-traka .ss-traka__uvod > .wp-block-post-excerpt {
	max-width: 680px;
	font-size: 1.25rem;
	line-height: 1.6;
	color: #B9D3E2;
}
.ss-traka .wp-block-post-excerpt__excerpt { margin: 0; }

/* The pricing band's heading, as the hero's last line on the three hub pages (Q4, A11).
   [ss_cenovnik_naslov] renders it here rather than above the cards, which would put it on the
   excerpt: see the shortcode's own note. Left-aligned on the row's edge like everything else in
   the hero, and white, because it is on the blue. The Q3 rule then leaves 72px of band under it,
   and the cards rise 44px into that. */
.ss-traka .ss-traka__uvod > .wp-block-post-excerpt:has(+ .ss-traka__cenovnik-naslov) { margin-bottom: 30px; }
.ss-traka .ss-traka__uvod > .ss-traka__cenovnik-naslov {
	max-width: 680px;
	font-size: clamp(22px, calc(16px + 1.2vw), 33px);
	font-weight: 700;
	color: var(--wp--preset--color--bela);
	text-align: left;
	overflow-wrap: break-word;
}

/* 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;
}

/* ONE GRID (Q3, THEME-GAP.md section 27). Two-column shell under the band on both interior
   templates: the article card, then a 300px sidebar, 64px apart. The 1104px row leaves the card
   740px. The main track carries a zero minimum, so a wide table in the content cannot push the
   grid past its row; the sidebar track is a fixed 300px, so the card takes every pixel the
   sidebar does not. Usluga's 1.25fr / .75fr with a 56px gap is gone. */
.wp-block-group.ss-strana {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 64px;
	align-items: start;
	/* Q4: one section rhythm, the same 72 and 48 the hero uses. It was 64 and 70 on Usluga and
	   56 and 72 on Clanak, as inline block attributes; those are gone from both templates. */
	padding-block: 72px;
}
@media (max-width: 781px) {
	.wp-block-group.ss-strana { padding-block: 48px; }
}
.wp-block-group.ss-strana > * { margin-block: 0; }

/* One column below 1000px on both. Usluga went one column below 900px, where its main column
   had no padding; inside the card it would leave the same 328px of text that sent Clanak to
   1000px in the first place. */
@media (max-width: 999.98px) {
	.wp-block-group.ss-strana { 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 here. The homepage's services
   band is the fourth since Q6b.

   The reason given until Q9c was that a :root custom property is inherited by every element on
   the page, the site header included. That is true of the property and false as a reason: :root
   ten screens up holds --ss-card and --ss-card-hover, which are inherited by everything just the
   same and are used on five components. This value is written out because it is this group's
   own and nothing else asks for it, which is a smaller claim and the true one. No new property
   is added to fix a comment. */
.ss-cena,
.ss-kartica,
.wp-block-group.ss-strana > .ss-strana__glavni,
.ss-sekcija > .wp-block-post-content.alignfull {
	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 ------------------------------- */

/* The price card row and the grid sit on the artboard's grey ground, from the blue band to the
   footer, so the white cards read as cards, as on Clanak. Set here rather than as a block
   attribute in the template. Both groups are square; theme.json rounds every group. The pricing
   and FAQ bands under the grid keep their own grounds. */
.wp-block-group.ss-cena-traka,
.wp-block-group.ss-cenovnik-traka,
.wp-block-group.alignfull:has(> .ss-strana--usluga) {
	border-radius: 0;
	background: var(--wp--preset--color--siva-svetla);
}
/* The row is positioned and follows the band, so it paints over it. Without its own formatting
   context the card's -44px margin collapses through the row and its grey covers the band's last
   44px; with one the row starts where the band ends and the card alone rises into the band. */
.wp-block-group.ss-cena-traka,
.wp-block-group.ss-cenovnik-traka { display: flow-root; }

/* PRICING ON THE HUBS (Q4, A11 and A12). Pages 11, 12 and 24 drew their packages inside the
   article column, below the text, in the 760px constrained band: four cards two to a row at
   368px on 11, three at 237.33px on 12 and 24. They now sit directly under the hero on the wide
   1104px row, four across on 11 and three across on 12 and 24, and rise 44px into the blue the
   way a leaf page's single price card does, so a hub and a leaf open the same way.

   Same construction as the price card row above: a positioned omot with a negative top margin,
   inside a band with its own formatting context, so the card alone rises into the blue and the
   band's grey does not cover the blue's last 44px. */
.alignfull.is-layout-constrained > .alignwide.ss-cenovnik-omot:has(.ss-cenovnik) {
	position: relative;
	z-index: 2;
	margin-top: -44px;
}
/* One card per row below the section breakpoint, as on the hero and the grid. The rules above
   put four cards two to a row from 552px and three cards on one row from 726px; those bounds
   are the homepage's band, which is not in this round, so this narrows only the interior one.
   The :has() selectors above carry three classes and pseudo-classes, so these have to be at
   least as specific to win. */
@media (max-width: 781px) {
	.ss-cenovnik-omot .ss-cenovnik__grid,
	.ss-cenovnik-omot .ss-cenovnik__grid:has(> .ss-paket:nth-child(3):last-child),
	.ss-cenovnik-omot .ss-cenovnik__grid:has(> .ss-paket:nth-child(4):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 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;
	}
}

/* The Usluga main column's own 17px at 1.66 on a 700px measure is gone as of Q3: it is the
   shared article card now, with the shared 18px at 1.76. Its block rhythm below is unchanged,
   which is the one thing the two templates still set separately. */
.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; }
/* Shell grey, not white, and no shadow: Q3 put the article in a white card and left the steps
   white inside it, where only their shadow separated them from their ground. This is how
   .ss-citat already sits on the same card. Radius and padding are unchanged. */
.wp-block-group.ss-korak {
	padding: 22px 20px;
	border-radius: 6px;
	background: var(--wp--preset--color--siva-svetla);
}
.wp-block-group.ss-korak > * { margin-block: 0; }
/* The artboard's number is an inline span on a 17px line at 1.66, so the number's own line is
   that tall: 28.22px, which is what the calc below computes and what the number keeps.

   The line it names is no longer the card's. Q3 put the steps in a card of their own and
   .ss-korak__tekst went to 15px; the 17px here is the artboard's measurement, held as a literal
   so the number's line does not move when the card's text moves. Only this sentence was wrong,
   so only this sentence changed. */
.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; }

/* ONE ARTICLE CARD (Q3, THEME-GAP.md section 27). The grid's main column on both interior
   templates: 52px 56px of white, so a 740px card leaves a 628px measure. The type is the Clanak
   artboard's 18px at 1.76, in the brand body grey rather than the artboard's #414D55: one body
   colour across the site beats one card matching its own drawing. Section 27 records it.

   On the selector rather than on .ss-clanak, because .ss-clanak is what marks the Clanak
   article's own rhythm, headings and lists, and Usluga keeps its own.

   Q6b: the homepage's services band is this card too, so it reads here rather than being copied
   into the front-page section. One ground, one radius, one padding, one prose type. Its width is
   its own, and so is the line where its padding narrows, both in the front-page section. */
.wp-block-group.ss-strana > .ss-strana__glavni,
.ss-sekcija > .wp-block-post-content.alignfull {
	padding: 52px 56px;
	border-radius: 6px;
	background: var(--wp--preset--color--bela);
	font-size: 1.125rem;
	line-height: 1.76;
	color: #4E5A62;
}

/* 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; }

/* These are prose rules, and the portfolio grid inside an article is not prose: without the
   exclusions the article's h3 rule set page 14's tile titles to 21px against the homepage's 18,
   the list rule indented every pill row by 22px, and the li rule pushed each pill after the
   first down 10px. That was most of what made the same project read as two different cards
   (Q5, A13). Nothing else on the site carries these classes, so the 25 interior pages are
   untouched. */
.ss-clanak .wp-block-post-content h2 {
	font-size: 1.8125rem;
	font-weight: 700;
}
.ss-clanak .wp-block-post-content h3:not(.ss-projekat__naziv) {
	font-size: 1.3125rem;
	font-weight: 700;
}

/* Lists take no margin of their own beyond the rhythm, a 22px indent and 10px between items.
   Two lists are laid out rather than read as prose and are named here rather than fought with a
   heavier selector: the portfolio single's technology pills, and the team grid on /o-nama/. */
.ss-clanak .wp-block-post-content :is(ul, ol):not(.ss-projekat__tehnologije, .ss-tim) {
	margin-inline: 0;
	margin-block-end: 0;
	padding-left: 22px;
}
.ss-clanak .wp-block-post-content li + li:not(.ss-projekat__tehnologije > *, .ss-tim > *) { 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. All three
   templates: Q3 gave both interior templates the same card and Q6b put the homepage's content in
   it, and from Q9c the homepage narrows on the same line rather than on its own.

   It was 781px on the homepage and 599px on the interiors, on the argument that each page turns
   at its own line. The card is one component and it now has one. The band between them is what
   decided it: from 600 to 781 the homepage card was already at the narrow padding while the two
   interior cards were still at the wide one, so the same card read two ways at the same width. */
@media (max-width: 599.98px) {
	.wp-block-group.ss-strana > .ss-strana__glavni,
	.ss-sekcija > .wp-block-post-content.alignfull { 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;
}

/* The headings' own 32px scroll-margin is gone as of Q2. html's scroll-padding-top carries the
   clearance at every width now, and below 600px this margin would be counted a second time on
   top of it, the way it was above 600px on 1.1.61: a contents link landed its heading 136px down
   instead of 104px, exactly 32px too far. Q1 scoped it to max-width 599.98px, where the header
   was still static; Q2 makes the header sticky there as well, so there is nowhere left for it. */

/* 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;
}
/* A focused contents link draws its #005A87 ring inside its own box. From 1000px up the list
   scrolls, and a ring drawn outside the link was cut off by the list. Inside, the 2px ring sits in
   the link's padding, clear of the text, and on every side at every width. */
.ss-sadrzaj .ss-sadrzaj__veza:focus-visible {
	outline: 2px solid var(--wp--preset--color--plava);
	outline-offset: -2px;
}
/* A contents link pressed with the mouse paints nothing. It takes focus without :focus-visible, and
   the 2px #005A87 ring a clicked link gets (theme.json's link :focus colour and offset, the parent
   theme's :focus width and style) showed on it, cut off by the list at 1000px up. Keyboard focus keeps
   the inset ring above. */
.ss-sadrzaj .ss-sadrzaj__veza:focus:not(:focus-visible) { outline: none; }

/* The sidebar follows the reader 32px below the compact header wherever it has its own column,
   from 1000px up: 104px from the top, the header's 72px and the same 32px clearance every
   heading gets. Before Q1 the header was static and this was a plain 32px.

   Q4 (A8, A9) takes the cap off and puts the choice on a class instead. A sticky box taller than
   the window can never have its foot reached, and the old max-height kept it on screen by
   squeezing the contents list, which on a short window left the list a few rows tall. Now
   assets/js/bocni.js measures the sidebar against the room below the header and sets
   .ss-strana__bocni--lepi when it fits; without the class the sidebar is static and the whole
   column scrolls with the page. Both templates, where before only Clanak was sticky at all.
   Nothing is capped in either branch, so the sidebar's height does not depend on which branch it
   is in, and the measurement cannot chase its own result. */
@media (min-width: 1000px) {
	.wp-block-group.ss-strana > .ss-strana__bocni--lepi {
		position: sticky;
		top: 104px;                        /* the compact header's 72px plus 32px */
	}
	.ss-strana .ss-strana__bocni > * { flex-shrink: 0; }
	.ss-strana .ss-strana__bocni > .ss-sadrzaj {
		display: flex;
		flex-direction: column;
		flex-shrink: 1;
		min-height: 0;
	}
	.ss-strana .ss-sadrzaj .ss-sadrzaj__lista {
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
	/* Never squeezed below six rows. A row is 37.75px (8px of padding a side on a 15px line at
	   1.45) and the rows sit 2px apart, so six of them are 236.5px.

	   Scoped to a list that has a seventh item, because a list is only ever squeezed when it has
	   more rows than the room allows. Unscoped, min-height would pad every short list out to six
	   rows: page 33's three entries are 117px tall, and 119.5px of white under them would push
	   pages 29, 32 and 33 over the fit line at 1440x900 and make three sidebars static that are
	   sticky today. */
	.ss-strana .ss-sadrzaj .ss-sadrzaj__lista:has(> li:nth-child(7)) {
		min-height: calc(6 * 37.75px + 5 * 2px);
	}
}

/* Below 1000px the sidebar stacks after the article, so a contents card would index text the
   reader has already passed. Povezano and the CTA still belong there and stay (A10). */
@media (max-width: 999.98px) {
	.ss-strana .ss-strana__bocni > .ss-sadrzaj { display: none; }
}

/* 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 .ss-sadrzaj .ss-sadrzaj__lista { scroll-timeline: --ss-sadrzaj-lista block; }
		.ss-strana .ss-sadrzaj .ss-sadrzaj__lista::before,
		.ss-strana .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 .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 .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 .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; } }
	}
}

/* -- Procena form, [fluentform id="3"] on page 16 ---------------------------------------- */

/* No artboard draws a form, so it follows the brand tokens: white fields with the line colour and
   the cards' 6px radius, Manrope throughout, ink text, blue focus. The plugin's stylesheet loads
   first. Its error border (.ff-el-is-error, three classes) still outranks the field rule, and its
   error colour is kept wherever it applies. Field text is 16px: the plugin sets no size, the
   browser's default is 13.33px, and below 16px Safari on iOS zooms the page when a field takes
   focus. */
.fluentform form .ff-el-form-control {
	border: 1px solid #E2E8EB;
	border-radius: 6px;
	background-color: #fff;
	font-family: var(--wp--preset--font-family--telo);
	font-size: 1rem;
	color: #131A1F;
}
.fluentform form .ff-el-form-control::placeholder { color: #4E5A62; }

/* The plugin removes the focus outline and on focus sets its own border blue and a lighter text
   grey. The outline comes back in #005A87, the text stays ink, and the border follows the outline,
   except on a field in error, which keeps the plugin's error colour while it is being corrected. */
.fluentform form .ff-el-form-control:focus {
	outline: 2px solid var(--wp--preset--color--plava);
	outline-offset: 1px;
	color: #131A1F;
}
.fluentform form .ff-el-group:not(.ff-el-is-error) .ff-el-form-control:focus { border-color: var(--wp--preset--color--plava); }
.fluentform form .ff-el-group.ff-el-is-error .ff-el-form-control:focus { border-color: var(--fluentform-danger); }

.fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--telo);
	font-weight: 700;
	color: #131A1F;
}

/* Help text stays under its field, where the form setting puts it. The plugin sets 12px italic,
   which is below the theme's smallest reading size and leans away from every other line on the
   page. It reads upright at 14px on 1.5, in the body grey the rule below already gives it. */
.fluentform .ff-el-help-message {
	font-family: var(--wp--preset--font-family--telo);
	font-size: .875rem;
	font-style: normal;
	line-height: 1.5;
	color: #4E5A62;
}

/* The required mark, which the plugin draws as label::after with content " *". A leading ordinary
   space is a break opportunity, so at a narrow width the asterisk can fall to a line of its own,
   and on /procena/ the third label did exactly that at 390. The space becomes a no-break space,
   written as an escape so the character cannot be mistaken for an ordinary one in this file, and
   the plugin's 3px margin goes with it: the no-break space is the gap now, and 3px on top of it
   would double the space. The plugin's colour is 2.9:1 on white, so the mark takes the theme's
   error red, 6.3:1. The selector matches the plugin's own, class for class, and this file loads
   after it. Nothing is added to the accessibility tree: the mark was already generated content
   and stays generated content, and the field's own aria-required is what announces it. */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	content: "\00a0\002A";
	margin-left: 0;
	color: #B32D2E;
}

/* -- The radios and checkboxes, form 3's 23 and 8 (Q7, B2) -------------------------------- */

/* The browser's own controls are 13px by 13px: a third of the 31.68px line they sit on, and well
   under the 24px a finger expects. They are drawn here instead, at 20px, in the same white ground
   and line colour the text fields use, so a chosen answer reads at a glance from across the form.
   The mark inside a checked control is drawn in CSS, not set as a glyph, because a glyph would
   depend on a font that may not have it and would not scale with the box.

   The label becomes the row: a flex line whose first item is the control and whose second is the
   text. That does two things the inline flow could not. The gap is one value, 10px, rather than a
   space character whose width follows the font. And the control aligns to the first line of the
   text rather than to the last, so an option that wraps keeps its control at the top. The offset
   is half the difference between the line box and the control, computed rather than typed: the
   control takes the label's font size and line height, so 1lh is the label's own line, with an em
   fallback for browsers that do not know lh. A control's line-height is normal by default, not the
   inherited one, which is why it is set here and not left alone. The plugin lifts the control 2px
   with position/top, which was a correction for the old alignment; it goes back to 0.

   The label's own 7px bottom margin is set to 0. It is a vertical margin on an inline box today, so
   it does not apply; making the label a flex container applies it and pushes the rows from 36.67px
   apart to 38.67px, moving the whole form down for no reason this round asked for. The selector
   carries a tag to match the plugin's own weight. Row spacing stays the plugin's 5px on
   .ff-el-form-check.

   Nothing is written for :disabled: this form has no disabled control, and the browser's own
   dimming is the thing a user already recognises. Under forced colors the drawing is handed back
   to the browser, whose control follows the user's own palette. */
.fluentform .ff-el-form-check label.ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 0;
}
.fluentform .ff-el-form-check-label .ff-el-form-check-input {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	top: 0;
	border: 1.5px solid #4E5A62;
	background-color: #fff;
	background-origin: border-box;
	background-repeat: no-repeat;
	accent-color: var(--wp--preset--color--plava);
	font-size: inherit;
	line-height: inherit;
	margin-top: calc((1.76em - 20px) / 2);
	margin-top: calc((1lh - 20px) / 2);
}
.fluentform .ff-el-form-check-label input.ff-el-form-check-radio { border-radius: 50%; }
.fluentform .ff-el-form-check-label input.ff-el-form-check-checkbox { border-radius: 4px; }

.fluentform .ff-el-form-check-label .ff-el-form-check-input:checked {
	border-color: var(--wp--preset--color--plava);
	background-color: var(--wp--preset--color--plava);
}
.fluentform .ff-el-form-check-label .ff-el-form-check-input:hover { border-color: var(--wp--preset--color--plava); }

/* The radio's mark is an 8px white disc in the middle of the 20px box. */
.fluentform .ff-el-form-check-label input.ff-el-form-check-radio:checked {
	background-image: radial-gradient(circle at 50% 50%, #fff 0 4px, transparent 4px);
}

/* The checkbox's mark is two white strokes, each a band across its own square of the background.
   A band runs at a right angle to its gradient's axis, so the 45deg layer draws the short stroke
   down and right, from 4.25,10 to 8.25,14, and the 135deg layer draws the long one up and right,
   from 7.75,14 to 15.75,6. Both are 2.2px thick, centred on their own diagonal, and both are
   placed from the border box, so a browser that rounds the 1.5px border does not move them. The
   stops meet at a single position, so the edge is a hard one and nothing fades. */
.fluentform .ff-el-form-check-label input.ff-el-form-check-checkbox:checked {
	background-image:
		linear-gradient(45deg, transparent 0 calc(50% - 1.1px), #fff calc(50% - 1.1px) calc(50% + 1.1px), transparent calc(50% + 1.1px)),
		linear-gradient(135deg, transparent 0 calc(50% - 1.1px), #fff calc(50% - 1.1px) calc(50% + 1.1px), transparent calc(50% + 1.1px));
	background-size: 4px 4px, 8px 8px;
	background-position: 4.25px 10px, 7.75px 6px;
}

/* Keyboard focus only, on the ring the text fields in this form already carry: 2px of the brand
   blue, 1px out. It is not the theme's lime ring, which belongs to the lime buttons and would
   disappear on this form's white. */
.fluentform .ff-el-form-check-input:focus-visible {
	outline: 2px solid var(--wp--preset--color--plava);
	outline-offset: 1px;
}

@media (forced-colors: active) {
	.fluentform .ff-el-form-check-label .ff-el-form-check-input {
		appearance: auto;
		-webkit-appearance: auto;
		background-image: none;
	}
}

/* Submit: the form's own blue and white, Manrope 700 on the theme's 6px radius. The plugin also
   removes this button's focus outline; it comes back. */
.fluentform .ff-btn-submit.ff_btn_style {
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--telo);
	font-weight: 700;
}
.fluentform .ff-btn-submit.ff_btn_style:focus-visible {
	opacity: 1;
	outline: 2px solid var(--wp--preset--color--plava);
	outline-offset: 2px;
}

/* Validation messages: the plugin's colour, the brand's type and spacing. */
.fluentform .ff-el-is-error .text-danger {
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--telo);
	font-size: .875rem;
	line-height: 1.55;
}

/* The confirmation after a submission, in the theme's card treatment: white, radius 6, the shared
   card shadow, 26px 24px, the article's 18px on 1.76 in the body grey. */
.fluentform .ff-message-success {
	padding: 26px 24px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 32, 42, .05), 0 8px 24px -12px rgba(16, 32, 42, .14);
	font-size: 1.125rem;
	line-height: 1.76;
	color: #4E5A62;
}

/* -- The portfolio single, templates/single-portfolio.html (Q5, A14) ---------------------- */

/* The card's first row: what the project is, as a wrapping row of groups. A group renders only
   when it has something to say, so the row is two groups on a project the client does not
   update and three on one they do. */
.ss-projekat-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 36px;
	margin: 0 0 30px;
}
.ss-projekat-meta .ss-projekat-meta__grupa { margin: 0; }
.ss-projekat-meta dt {
	margin: 0 0 9px;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.3;
	color: #4E5A62;
}
.ss-projekat-meta dd {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.4;
	color: #4E5A62;
}
/* The package pill is a block in the tile's flex row and an inline run here, so padding has a
   line box to sit in. Everything else about it is the tile's pill. */
.ss-projekat-meta .ss-projekat__paket { display: inline-block; }
/* The technology list keeps the tile's pills and its 7px gap; the tile's flex sizing is for the
   card's pill row and means nothing in a dd. */
.ss-projekat-meta .ss-projekat__tehnologije { flex: 0 1 auto; }

/* The screenshot at the card's inner width, and what it is under it. */
.ss-clanak__slika { margin: 0; }
.ss-clanak__slika img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.ss-clanak__natpis {
	margin-top: 12px;
	font-size: .875rem;
	line-height: 1.55;
	color: #4E5A62;
}

/* Back to the list, in the running-text link style, with the arrow drawn rather than set: a
   glyph here would be one more thing the dash and Cyrillic sweeps have to excuse. */
.ss-clanak__nazad-red { margin: 30px 0 0; }
.ss-clanak__nazad {
	font-size: .9375rem;
	font-weight: 600;
}
.ss-clanak__nazad::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 10px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	vertical-align: 1px;
}

/* -- A page that lists the portfolio, body.ss-strana--radovi (Q5, A13) ------------------- */

/* The grid is the page, so it takes the row rather than the article column. Lifting the prose
   cap is what lets it: a child cannot be wider than the parent that holds it. The text keeps a
   740px measure, which is the width the article card gave it. */
.ss-strana--radovi .ss-clanak .wp-block-post-content { max-width: none; }
.ss-strana--radovi .ss-clanak .wp-block-post-content > :not(.ss-portfolio) { max-width: 740px; }

/* One column, and the card stops being a card: no ground, no shadow and no padding, so the text
   starts on the row's own edge and the grid spans the whole of it. The type stays where
   .ss-strana__glavni sets it, 18px on 1.76 in the body grey.

   At every width, not only from 1000px up (Q5b). Below 1000px these were still inside the media
   query, so page 14 kept a white card with a shadow and 24px of padding, and drew 59 white
   borderless tiles on it: white on white, each one 48px narrower than the two sidebar cards
   below, which sat on the shell grey as cards should. The tile is the card on this page; there
   is no second card for it to sit inside. */
.ss-strana--radovi .wp-block-group.ss-strana { grid-template-columns: minmax(0, 1fr); }
.ss-strana--radovi .wp-block-group.ss-strana > .ss-strana__glavni {
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

@media (min-width: 1000px) {
	/* Three across, which at 1104px with the 24px gap is the homepage's 352px tile exactly.
	   Below this the base grid decides, and its own floor is what sets the count. */
	.ss-strana--radovi .ss-portfolio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The sidebar follows the article instead of sitting beside it, and its two cards share a row.
   Static in either branch: there is nothing beside it to follow, so bocni.js can set its class
   whichever way and this wins on specificity. */
.ss-strana--radovi .wp-block-group.ss-strana > .ss-strana__bocni {
	position: static;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}
@media (max-width: 781px) {
	.ss-strana--radovi .wp-block-group.ss-strana > .ss-strana__bocni { grid-template-columns: minmax(0, 1fr); }
}

/* -- The team grid on /o-nama/, the ss-tim list (Q8, A22) ----------------- */

/* The list on page 10 is the record of who works here, and it stays a list: nine <li>, each one
   a name in a <strong>, a <br> and a role. functions.php puts a photograph in front of each name
   as the item's first child; everything here is what turns that into a grid. Nothing is stored
   for the layout, so a name added to or removed from the page moves the grid with it.

   The <br> is what separates the name from the role today, and a <br> inside a grid cell would
   leave the role on the same line box as the name once the name becomes a block. So the break is
   hidden and the <strong> is made the block instead: the name takes its own line because it is a
   block, not because a break was printed after it. The role is the item's own text, which is why
   the size, line and colour for it sit on the <li>. */
.wp-block-list.ss-tim {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.wp-block-list.ss-tim > li {
	margin: 0;
	padding: 0;
	font-size: .875rem;
	line-height: 1.5;
	color: #4E5A62;
}

/* The photograph fills its column and is cropped to a square rather than resized to one, so a
   face is never stretched. The files are square already; the ratio is declared so a file that is
   not cannot break the row. Because it is the item's first child and every item starts at the top
   of its grid row, the nine photographs line up whatever the names below them do.

   height: auto is not decoration. The img carries width and height attributes, which is what stops
   the page reflowing while the file loads, and the height attribute is a presentational hint: with
   no author rule against it the photograph is laid out 500px tall inside a 186px column, and
   aspect-ratio is ignored because both dimensions are then given. Setting height back to auto is
   what lets the ratio do its work. */
.wp-block-list.ss-tim > li > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin-bottom: 12px;
	border-radius: var(--ss-radius);
	object-fit: cover;
}
.wp-block-list.ss-tim > li > strong {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--crna);
}
.wp-block-list.ss-tim > li > br { display: none; }

/* Two across below 600px. Three 500px photographs in a 294px row would be 82px wide, which is
   smaller than the faces need. */
@media (max-width: 599.98px) {
	.wp-block-list.ss-tim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}