/* ONE common content width for all inner pages (every page except the front page) = the width of the header.
   Left edge of the content = left edge of the CodeArt logo, right edge = right edge of the menu button / icon.
   The header pill is a Bootstrap container (1430px >=1400, 1140 >=1200, 960 >=992, 720 >=768, 540 >=576, fluid below) with 15px outside
   padding; the logo / menu button sit 31px inside the pill on desktop (>=1200px) and 21px inside it on tablet / mobile.

   --kt-container   content width (what the header uses between logo and menu button)
   --kt-side        side padding for a full-width band (background stays full width, only the content is limited):
                    padding-left / padding-right: var(--kt-side)  ->  content width = --kt-container, centred
   .kt-container    band wrapper (padding as above);  .kt-container-in  inner wrapper (width = --kt-container, centred)
   This file is loaded on EVERY page (the footer is shared, so the front page gets it too) and only defines the variables, the classes and the footer.
   The rules for the inner pages (service pages, kontakt, projects, O nama ...) are in kt-pages.css (not loaded on the front page);
   the PHP templates (blog, 404) use .kt-container directly. */
:root {
	--kt-container: min(1338px, calc(100% - 92px));
	--kt-side: max(46px, calc((100% - 1400px) / 2 + 31px));
}
@media (max-width: 1399px) { :root { --kt-container: 1048px; --kt-side: calc((100% - 1110px) / 2 + 31px); } }
@media (max-width: 1199px) { :root { --kt-container: 888px; --kt-side: calc((100% - 930px) / 2 + 21px); } }
@media (max-width: 991px)  { :root { --kt-container: 648px; --kt-side: calc((100% - 690px) / 2 + 21px); } }
@media (max-width: 767px)  { :root { --kt-container: 468px; --kt-side: calc((100% - 510px) / 2 + 21px); } }
@media (max-width: 575px)  { :root { --kt-container: calc(100% - 72px); --kt-side: 36px; } }

.kt-container { box-sizing: border-box; width: 100%; padding-left: var(--kt-side); padding-right: var(--kt-side); }
.kt-container-in { box-sizing: border-box; width: var(--kt-container); max-width: 100%; margin-left: auto; margin-right: auto; }

/* ---- FOOTER (Elementor template 47741, shared by the whole site): content = header width; backgrounds and lines stay full width ----
   ft-top (three columns) and ft-bar (copyright / links) get the side padding, their inner boxes are as wide as that content box.
   ft-mid (big logo + slogan) stays centred and is not touched. The decoration arcs (.ft-root::before) stay at the screen edge. */
body .e-con.ft-top, body .e-con.ft-bar { padding-left: var(--kt-side) !important; padding-right: var(--kt-side) !important; }
body .e-con.ft-top > .e-con-inner, body .e-con.ft-bar > .e-con-inner { width: 100%; max-width: none !important; }
/* the line above the bottom bar: full screen width (it used to be the border of the inner box) */
body .e-con.ft-bar { border-top: 1px solid rgba(255, 255, 255, 0.08); }
body .e-con.ft-bar > .e-con-inner { border-top: 0 !important; }

/* ---- footer column "Mapa sajta": wider, moved left, every link on ONE line (nowrap, arrow right next to the text) ----
   The big left column keeps its width (its title is max 400px wide, so it wraps exactly as before); the empty space between it and the map
   goes to the map. The Kontakt column keeps its width (30%) and its place. Font size is not changed. Grid columns only on desktop (>1024px);
   tablet / mobile keep the existing grid. Two link columns only when the map column is wide enough (container query), otherwise one column. */
@media (min-width: 1025px) {
	body .e-con.ft-top > .e-con-inner { grid-template-columns: minmax(0, min(calc((100% - 96px) * 0.35), 400px)) minmax(0, 1fr) minmax(0, calc((100% - 96px) * 0.30)); column-gap: 0; }
	body .e-con.ft-top .ft-col.ft-col--map { margin-left: 24px !important; margin-right: 48px !important; }
}
body .e-con.ft-top .ft-col--map { container-type: inline-size; }
body .elementor .e-con.ft-root .ft-col--map .tp-footer-widget-menu ul { column-count: 1; column-gap: 48px; }
body .elementor .e-con.ft-root .ft-col--map .tp-footer-widget-menu ul li:nth-child(6) { break-before: auto; }
body .elementor .e-con.ft-root .ft-col--map .tp-footer-widget-menu ul li a.tp-el-list { white-space: nowrap !important; }
@container (min-width: 490px) {
	body .elementor .e-con.ft-root .ft-col--map .tp-footer-widget-menu ul { column-count: 2; }
	body .elementor .e-con.ft-root .ft-col--map .tp-footer-widget-menu ul li:nth-child(6) { break-before: column; }
}

/* ---- HEADER CTA button (header 40222, widget ffbf54a; markup: mu-plugin codeart-header-button.php): ONE orange pill, arrow inside the same link ----
   #FF5722 / text #111111 (5.8:1), Inter weight 500, 44px high (padding 14px 26px, line-height 16px). Hidden below 576px by the header itself (d-sm-block). */
.elementor-element-ffbf54a .tp-header-10-btn-box a.kt-hbtn { display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 14px 26px; border: 0; border-radius: 999px; background: #FF5722; color: #111111; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 16px; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease; }
.elementor-element-ffbf54a .tp-header-10-btn-box a.kt-hbtn:hover, .elementor-element-ffbf54a .tp-header-10-btn-box a.kt-hbtn:focus-visible { background: #E64A19; color: #111111; outline: none; }
.elementor-element-ffbf54a .tp-header-10-btn-box a.kt-hbtn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
.elementor-element-ffbf54a .tp-header-10-btn-box a.kt-hbtn .kt-hbtn__arr { flex: none; width: 14px; height: 14px; color: #111111; transition: transform 0.2s ease; }
.elementor-element-ffbf54a .tp-header-10-btn-box a.kt-hbtn:hover .kt-hbtn__arr, .elementor-element-ffbf54a .tp-header-10-btn-box a.kt-hbtn:focus-visible .kt-hbtn__arr { transform: translate(2px, -2px); }
/* narrow tablets (576-767px): the pill must fit next to the logo and the menu icon */
@media (max-width: 767px) { .elementor-element-ffbf54a .tp-header-10-btn-box a.kt-hbtn { padding: 12px 20px; font-size: 15px; } }
/* images printed with width / height attributes by inc: mu-plugins/codeart-perf-trim.php (no layout shift): keep the aspect ratio when the CSS only sets one dimension;
   :where() has zero specificity, so every explicit height rule of the theme still wins */
:where(img[width][height]) { height: auto; }

/* =====================================================================================================================================================
   MOBILE (<= 767px): narrower gaps, wider text. ONE shared block; desktop and tablet (>= 768px) are not touched. (step 17, 2026-11-05)
   The home hero has its own rules (mu-plugins/codeart-pagespeed.php) and is not touched here; the /nasi-radovi/ 3D panels are not touched either.
   - side gap screen edge -> content / card = 16px: --kt-side drives every section of the inner pages (kt-pages.css), the blog / legal / 404 .kt-container and the footer;
     the front page sections (ks-section, hp-featured, hp-process) get it directly. Containers inside containers add no side padding (the default padding of Elementor
     containers is 0 on this site, kit 48479); --kt-container is not used for a second inner width any more (100%).
   - inner padding of the cards: 20px (radius 16px and borders stay)
   - vertical gaps: only the big ones (>= 64px) are reduced, by about 25%; the 50px section gaps that were already set for mobile stay.
   "html body ..." selectors win over the older <= 576px / <= 767px card rules of kt-pages.css, kt-blog.css, kt-collab.css and the Additional CSS.
   ===================================================================================================================================================== */
@media (max-width: 767px) {
	:root { --kt-side: 16px; --kt-container: 100%; }

	/* front page sections: same 16px as the hero */
	html body .e-con.ks-section, html body .e-con.hp-featured, html body .e-con.hp-process { padding-left: 16px !important; padding-right: 16px !important; }

	/* cards: services, process cards, closing CTA box, /usluge/ boxes, counters (front page, O nama), featured projects, previous / next project */
	html body .e-con.svc-card, html body .e-con.pf-card, html body .e-con.us-box, html body .e-con.pf-cta { padding: 20px !important; }
	html body .ks-section .ks-card { padding: 20px !important; }
	html body .hp-featured .hp-fp__body { padding: 20px; }
	html body .pf-nav .pf-pn .pf-pn__card { padding: 20px; }

	/* /kontakt/ and /zapocnimo-saradnju/: outer frame 8px (was 12), the form card and the text card 20px */
	html body .e-con.kt-card { padding: 8px !important; }
	html body .e-con.kt-left { padding: 20px 14px !important; }
	html body .e-con.kt-right { padding: 20px 18px !important; }
	html body .elementor .zs-next, html body .elementor .zs-side .zs-next, html body .elementor .zs-thanks .zs-next { padding: 20px; }

	/* blog: post cards, side boxes, call-out, steps */
	html body.kt-blog .kt-card__body, html body.kt-blog .kt-card--featured .kt-card__body, html body .kt-card__body, html body .kt-card--featured .kt-card__body { padding: 20px; }
	html body .kt-box { padding: 20px; }
	html body .kt-box--search { padding: 16px; }
	html body .kt-post-content .kt-callout { padding: 18px 20px; }
	html body .kt-post-content .kt-step, html body .kt-post-content .kt-steps--4 .kt-step { padding: 20px; }

	/* vertical gaps >= 64px -> about 25% less */
	html body .e-con.svc-cta-wrap .e-con.pf-cta { margin-top: 72px !important; margin-bottom: 72px !important; }
	html body .e-con.pf-about { padding-top: 48px !important; padding-bottom: 48px !important; }
	html body .e-con.pf-cta-wrap { padding-bottom: 48px !important; }
	html body .kt-posts { padding-top: 36px; padding-bottom: 52px; }
	html body .kt-single { padding-bottom: 52px; }
}
/* =====================================================================================================================================================
   MOBILE (<= 767px), step 19: service cards (icon + title + check list) on the four service pages - the title sits right of the icon in the same row, vertically centred;
   the list runs full width below (16px). Icon 52px (was 64), title 22px (was 26, never below 18), words are never broken. Desktop / tablet are not touched.
   The process steps (number + icon in the head) and the project cards (number + icon) have a different head and are not changed.
   ===================================================================================================================================================== */
@media (max-width: 767px) {
	html body .e-con.svc-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px !important; row-gap: 16px !important; }
	html body .e-con.svc-card > .svc-icon { grid-column: 1; grid-row: 1; width: auto !important; margin: 0 !important; }
	html body .e-con.svc-card > .svc-card-title { grid-column: 2; grid-row: 1; width: auto !important; min-width: 0; margin: 0 !important; }
	html body .e-con.svc-card > .svc-list { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
	html body .svc-card .svc-icon .elementor-icon { width: 52px; height: 52px; font-size: 22px !important; }
	html body .svc-card .svc-card-title .elementor-heading-title { font-size: 22px !important; line-height: 1.2em !important; overflow-wrap: normal; word-break: normal; hyphens: none; }
}