/*
Theme Name: SMO Child
Version: 0.1.0
Template: brooklyn
Text Domain: smo-child
*/

/* ===================== GLOBALNI FAKTOR SKALIRANJA =====================
   Dizajn je narisan za 1920 px. Nad to širino se layout proporcionalno
   poveča (kot Figma prototip v načinu "fit width"), do največ 2560 px.
   Uporaba: calc(<mera iz Figme> * var(--s)). Pod 1920 px je --s = 1. */
:root { --s: 1; }
@media (min-width: 1921px) { :root { --s: tan(atan2(100vw, 1920px)); } } /* = 100vw / 1920 kot število brez enote */
@media (min-width: 2561px) { :root { --s: 1.3333; } }

/* ===================== GLOBALNA POMANJŠAVA DIZAJNA (−20 %) =====================
   Na računalnikih (≥ 1025 px) je celoten dizajn prikazan v 80 % velikosti –
   enako kot zoom brskalnika na 80 %. Telefoni in tablice ostanejo nespremenjeni.
   Ker zoom pomanjša tudi vw/vh, mere, ki morajo zapolniti zaslon, množimo z --zf
   (= 1 / zoom), npr. min-height: calc(100vh * var(--zf)).
   Za drugačno velikost spremeni oba podatka (npr. 0.85 in 1.1765). */
:root { --zf: 1; }
@media (min-width: 1025px) {
	html { zoom: 0.8; }
	:root { --zf: 1.25; }
}

/* ===================== PISAVE (PP Neue World – licenčna, Pangram Pangram) ===================== */
@font-face {
	font-family: "PP Neue World";
	src: url("fonts/PPNeueWorld-CondensedRegular.woff2") format("woff2"),
	     url("fonts/PPNeueWorld-CondensedRegular.woff") format("woff");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

.smo-theme-text .smo-theme-strong {
	font-weight: 700 !important;
}

/* ============================================================
   HEADER — Figma: desktop 84px (6 + 72 + 6), mobile 55px (4 + 48 + 4)
   Barve/mere so spremenljivke; strani (Orkester, POK, Mentorji)
   jih preglasijo v svojih CSS datotekah.
   ============================================================ */
#header-section.smo-header {
	--hdr-bg: #050078;
	--hdr-line: #D3F342;
	--hdr-line-bottom: var(--hdr-line);
	--hdr-ink: #D3F342;
	--hdr-accent: #F278E0;
	--hdr-line-w: calc(6px * var(--s));
	--hdr-h: calc(72px * var(--s));
	--hdr-side: calc(24px * var(--s));
	--hdr-max: calc(1434px * var(--s));
	--nav-gap: clamp(12px, 1.5vw, calc(28px * var(--s))); /* 5 postavk v meniju */

	position: sticky;
	top: 0;
	z-index: 9999;
	height: auto;
	background: var(--hdr-bg);
	border-top: var(--hdr-line-w) solid var(--hdr-line);
	border-bottom: var(--hdr-line-w) solid var(--hdr-line-bottom);
}

body.admin-bar #header-section.smo-header { top: 32px; }

.smo-header__inner {
	position: relative;
	width: min(100% - (var(--hdr-side) * 2), var(--hdr-max));
	height: var(--hdr-h);
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Logo */
.smo-logo {
	position: static;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: calc(43px * var(--s));
	margin: 0;
	padding: 0;
	text-decoration: none;
}
#smo-header-logo { display: block; height: 100%; }
.smo-logo__img,
.smo-logo img {
	display: block;
	height: calc(43px * var(--s));
	width: auto;
	max-width: none;
	max-height: none;
}
.smo-logo__img--short { display: none; }
.smo-logo__text {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	color: var(--hdr-ink);
}

/* Desktop navigacija */
.smo-nav {
	position: static;
	display: flex;
	align-items: center;
	gap: var(--nav-gap);
	margin: 0;
}

#header-section.smo-header .smo-nav__link,
#header-section.smo-header .smo-nav__link:link,
#header-section.smo-header .smo-nav__link:visited,
#header-section.smo-header .smo-nav__link:hover,
#header-section.smo-header .smo-nav__link:focus,
#header-section.smo-header .smo-nav__link:active {
	position: relative;
	display: inline-block;
	height: auto;
	margin: 0;
	padding: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 500;
	font-size: calc(18px * var(--s));
	line-height: calc(26px * var(--s));
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--hdr-ink);
	transform: none;
}
#header-section.smo-header .smo-nav__link.is-active { font-weight: 700; }

.smo-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 2px);
	height: 2px;
	background: var(--hdr-accent);
	opacity: 0;
	transition: opacity 120ms ease-out;
	display: block;
}
.smo-nav__link:hover::after,
.smo-nav__link:focus-visible::after,
.smo-nav__link.is-active::after { opacity: 1; }

.smo-nav__dot {
	width: calc(10px * var(--s));
	height: calc(10px * var(--s));
	margin: 0;
	border-radius: 50%;
	background: var(--hdr-ink);
	flex: 0 0 auto;
}

/* Meni gumb (hamburger 22×18, klikljivo polje 44×44) */
.smo-menu-button {
	position: static;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 -11px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hdr-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.smo-menu-button__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 18px;
}
.smo-menu-button__bar {
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: transform 180ms ease-out, opacity 120ms ease-out, top 180ms ease-out;
}
.smo-menu-button__bar:nth-child(1) { top: 0; }
.smo-menu-button__bar:nth-child(2) { top: 8px; }
.smo-menu-button__bar:nth-child(3) { top: 16px; }
.smo-menu-button[aria-expanded="true"] .smo-menu-button__bar:nth-child(1) { top: 8px; transform: rotate(45deg); }
.smo-menu-button[aria-expanded="true"] .smo-menu-button__bar:nth-child(2) { opacity: 0; }
.smo-menu-button[aria-expanded="true"] .smo-menu-button__bar:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* Mobilni meni — panel pod headerjem (vzorec iz Figme: vertikalni seznam s pikami) */
.smo-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5, 0, 120, 0.45);
	z-index: 9998;
	touch-action: none;
}
.smo-drawer-overlay[hidden] { display: none; }

.smo-drawer {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + var(--hdr-line-w));
	width: auto;
	height: auto;
	padding: 16px var(--hdr-side) 24px;
	background: var(--hdr-bg);
	border-top: 0;
	border-bottom: var(--hdr-line-w) solid var(--hdr-line-bottom);
	z-index: 9999;
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 0s linear 160ms;
}
body.smo-menu-open .smo-drawer {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 0s;
}

.smo-drawer__nav {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0;
	padding: 0;
}
#header-section.smo-header .smo-drawer .smo-nav__link {
	display: block;
	font-size: 18px;
	line-height: 26px;
	height: auto;
	white-space: normal;
}
.smo-drawer .smo-nav__link + .smo-nav__link::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: 4px 0;
	border-radius: 50%;
	background: var(--hdr-ink);
}
.smo-drawer .smo-nav__link::after { display: none; }
#header-section.smo-header .smo-drawer .smo-nav__link.is-active {
	text-decoration: underline;
	text-decoration-color: var(--hdr-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

html.smo-menu-open,
body.smo-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.smo-menu-button__bar,
	.smo-drawer,
	.smo-nav__link::after { transition: none; }
}

/* Vmesne širine: manjša pisava, da se meni ne stisne */
@media (max-width: 1439px) {
	#header-section.smo-header .smo-nav__link { font-size: 16px; letter-spacing: 0.03em; }
}

/* Tablet / manjši prenosnik: burger namesto navigacije (5 postavk se pod 1200 px ne prilega) */
@media (max-width: 1199px) {
	.smo-nav { display: none; }
	.smo-menu-button { display: inline-flex; }
}

/* Mobile: 55px header, kratki logo */
@media (max-width: 782px) {
	body.admin-bar #header-section.smo-header { top: 46px; }
}
@media (max-width: 767px) {
	#header-section.smo-header {
		--hdr-line-w: 4px;
		--hdr-h: 48px;
		--hdr-side: 20px;
	}
	.smo-logo { height: 30px; }
	.smo-logo__img,
	.smo-logo img { height: 30px; }
	/* če je kratki logo nastavljen v Customizerju, pokaži njega */
	.smo-logo.has-short .smo-logo__img--full { display: none; }
	.smo-logo.has-short .smo-logo__img--short { display: block; }
	/* sicer polni logo obrežemo na znak + SMO */
	.smo-logo:not(.has-short) #smo-header-logo { width: 150px; overflow: hidden; }
	.smo-logo__text { font-size: 20px; }
	.smo-drawer { padding: 14px var(--hdr-side) 20px; }
}


/* Noga (.smo-footer): slogi so v css/footer.css */

/* no page shift — drawer overlays the page */

.smo-home-sixth {
	background: linear-gradient(to bottom,
			#050078 0 6px,
			#D2F245 6px 293px);
	width: 100%;
	height: 293px;
	overflow: visible;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative;
	z-index: 6;
}

.smo-home-sixth__canvas {
	position: relative;
	left: auto;
	width: 100%;
	height: 293px;
	transform: none;
	transform-origin: center;
}

.smo-home-sixth__content {
	position: relative;
	left: auto;
	top: auto;
	width: min(1440px, 100%);
	height: 293px;
	z-index: 1;
	margin: 0 auto;
}

.smo-home-sixth__title {
	position: absolute;
	left: 0;
	top: 10px;
	font-family: "PP Neue World", serif;
	font-weight: 400;
	font-size: 130px;
	line-height: 1.05;
	letter-spacing: 1px;
	color: #050078;
	white-space: nowrap;
	transform: translateX(55px);
}

.smo-home-sixth__slider {
	position: absolute;
	left: 0;
	top: 140px;
	width: 100%;
	min-height: 90px;
	transform: none;
	z-index: 2;
}

.smo-home-sixth__slider .ut-single-brand-logo img {
	max-height: 50px;
}

.smo-home-sixth .ut-brands-carousel .ut-single-brand {
	visibility: visible;
}

/* ============================================================
   LAPTOP  (≤1280px)  — footer padding
   ============================================================ */
@media (max-width: 1280px) {
}

/* ============================================================
   TABLET  (≤768px)  — footer + sixth section
   ============================================================ */
@media (max-width: 768px) {
	.smo-home-sixth__title  { font-size: clamp(5rem, 10vw, 8rem); transform: translateX(20px); }
}

/* ============================================================
   LARGE MOBILE  (≤640px)
   ============================================================ */
@media (max-width: 640px) {
	.smo-home-sixth__title  { font-size: clamp(3.5rem, 9vw, 6rem); transform: translateX(16px); }
}

/* ============================================================
   MOBILE SMALL  (≤360px)
   ============================================================ */
@media (max-width: 360px) {
	.smo-home-sixth__title  { font-size: clamp(2.5rem, 8vw, 4rem); transform: translateX(12px); }
}

/* ============================================================
   LARGE DESKTOP  (≥1600px)
   ============================================================ */
@media (min-width: 1600px) { }

/* ============================================================
   ULTRA WIDE  (≥1920px)
   ============================================================ */
@media (min-width: 1920px) { }

/* ============================================================
   PROJEKTI SINGLE — layout + color
   ============================================================ */

/* Body = lime so gutters left/right of the 1440px box show lime */
body.smo-page-projekti-portfolio {
	background-color: #D3F342 !important;
}

/* Strip Brooklyn's #main-content padding so it doesn't offset VC full-width rows */
body.smo-page-projekti-portfolio #main-content,
body.smo-page-projekti-portfolio .main-content-background {
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Page wrapper — full width, same background as content ── */
.smo-projekti-single-page {
	background: #ECFAB1;
	width: 100%;
	min-height: calc(100vh * var(--zf));
}

/* ── Content area — centred at 1440px, ECFAB1 background ── */
.smo-projekti-single-page__content {
	max-width: 1440px;
	margin: 0 auto;
	background: #ECFAB1;
	overflow: hidden;
}

/* VC wrapper backgrounds inside the content area */
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .vc_section,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .vc_row,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .vc_row-fluid,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .vc_column_container,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .vc_column-inner,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .wpb_column,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .wpb_wrapper,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .wpb_content_element {
	background-color: #ECFAB1 !important;
	background-image: none !important;
}

/* Cancel VC's negative-left full-width row offsets inside our container */
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .vc_row[data-vc-full-width],
body.smo-page-projekti-portfolio .smo-projekti-single-page__content [data-vc-full-width] {
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	position: relative !important;
	box-sizing: border-box !important;
}

/* Titles */
body.smo-page-projekti-portfolio .smo-projekti-single-page__content h1,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content h2,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content h3,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content h4,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content h5,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content h6,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .page-title {
	color: #FF7BE4 !important;
}

/* Body text */
body.smo-page-projekti-portfolio .smo-projekti-single-page__content p,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content li,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content td,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content th,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content label,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content span,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content a,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content .lead {
	color: #5F54DF !important;
}

/* Body text size +0.1rem */
body.smo-page-projekti-portfolio .smo-projekti-single-page__content p,
body.smo-page-projekti-portfolio .smo-projekti-single-page__content li {
	font-size: calc(1em + 0.1rem) !important;
}
/* ---------- Piškotki (Complianz) ----------
   Pasica: samo novim obiskovalcem, po 5 s samodejno izgine (js/cookie-banner.js).
   Plavajoči gumb "Nastavitve piškotkov" je skrit – nadomešča ga postavka v meniju noge. */
#cmplz-manage-consent,
.cmplz-manage-consent {
	display: none !important;
}
.cmplz-cookiebanner.smo-cmplz-fade {
	opacity: 0 !important;
	transform: translateY(12px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}

html.smo-cmplz-seen .cmplz-cookiebanner {
	display: none !important;
}
/* Barve pasice v SMO slogu: temno modra podlaga (kot glava), bele črke, limetini gumbi.
   (Complianz ima nastavljeno belo besedilo, a belo podlago – zato besedilo ni bilo vidno.) */
.cmplz-cookiebanner {
	background-color: #050078 !important;
	color: #fff !important;
	box-shadow: 0 12px 40px rgba(5, 0, 120, .35) !important;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-message p {
	color: #fff !important;
	font-size: 13px;
	line-height: 1.5;
}
.cmplz-cookiebanner .cmplz-message p + p {
	margin-top: .6em !important;
}
.cmplz-cookiebanner .cmplz-category .cmplz-icon svg,
.cmplz-cookiebanner .cmplz-category summary svg {
	fill: #d2f245 !important;
}
.cmplz-cookiebanner .cmplz-close,
.cmplz-cookiebanner .cmplz-close svg {
	color: #d2f245 !important;
	fill: #d2f245 !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible {
	background-color: #d2f245 !important;
	color: #050078 !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category,
.cmplz-cookiebanner .cmplz-categories .cmplz-category * {
	color: #fff;
}