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

/* ===================== 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(28px, 3.75vw, calc(72px * var(--s)));

	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: 1199px) {
	#header-section.smo-header .smo-nav__link { font-size: 16px; letter-spacing: 0.03em; }
}

/* Tablet: burger namesto navigacije */
@media (max-width: 1023px) {
	.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; }
}


.smo-footer {
	--smo-footer-scale: 1;
	background: transparent;
	height: auto;
	overflow: visible;
	color: #DBF342;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative;
	z-index: 5;
}

.smo-footer__main {
	background: linear-gradient(
		to bottom,
		#FB7BE3 0 6px,
		#050078 6px 453px
	);
	height: 453px;
}

.smo-footer a,
.smo-footer a:link,
.smo-footer a:visited {
	color: #DBF342;
}

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

.smo-footer__content {
	position: relative;
	left: auto;
	top: auto;
	width: min(1440px, 100%);
	height: 453px;
	margin: 0 auto;
}

.smo-footer__title {
	position: absolute;
	left: 35px;
	top: 23px;
	font-family: "PP Neue World", serif;
	font-weight: 400;
	font-size: calc(130px - 0.5rem);
	line-height: 1.05;
	letter-spacing: 1px;
	color: #DBF342;
	white-space: nowrap;
}

.smo-footer__meta {
	position: absolute;
	right: 0;
	top: 58px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.smo-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 1px;
	transform: translateX(-210px);
}

.smo-footer__contact-link {
	text-decoration: none;
	color: #DBF342;
	display: inline-block;
	transform-origin: center;
	transition: transform 140ms ease-out;
}

.smo-footer__contact-link:hover,
.smo-footer__contact-link:focus-visible {
	transform: scale(1.02);
}

.smo-footer__social {
	display: flex;
	align-items: center;
	gap: 12px;
	transform: translateX(-195px);
}

.smo-footer__social-link {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 2px solid #DBF342;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transform-origin: center;
	transition: transform 140ms ease-out, background 140ms ease-out;
}

.smo-footer__social-link:hover,
.smo-footer__social-link:focus-visible {
	background: rgba(219, 243, 66, 0.14);
	transform: scale(1.06);
}

.smo-footer__social-link i {
	color: #DBF342;
	font-size: 14px;
	line-height: 1.2;
}

.smo-footer__social-svg {
	width: 14px;
	height: 14px;
	color: #DBF342;
	display: block;
}

.smo-footer__social-link--linkedin .smo-footer__social-svg {
	transform: scale(1.85);
	transform-origin: center;
}

.smo-footer__addresses {
	position: absolute;
	left: 0;
	top: 88px;
	width: 560px;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: calc(14px + 0.1rem);
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	transform: translateX(55px);
}

.smo-footer__address {
	white-space: pre-line;
}

.smo-footer__address + .smo-footer__address {
	margin-top: 38px;
}

.smo-footer__nav {
	position: absolute;
	left: 1075px;
	top: 181px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.smo-footer__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: #DBF342;
	position: relative;
}

.smo-footer__nav-link:link,
.smo-footer__nav-link:visited,
.smo-footer__nav-link:hover,
.smo-footer__nav-link:focus,
.smo-footer__nav-link:active {
	color: #DBF342;
}

.smo-footer__nav-text {
	position: relative;
}

.smo-footer__nav-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #F278E0;
	top: calc(100% + 1px);
	display: none;
}

.smo-footer__nav-link:hover .smo-footer__nav-text::after,
.smo-footer__nav-link:focus-visible .smo-footer__nav-text::after {
	display: block;
}

.smo-footer__nav-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #DBF342;
	flex: 0 0 auto;
	margin-left: 0;
	margin-top: 4px;
	margin-bottom: 4px;
}

.smo-footer__nav-arrow {
	width: 0;
	height: 0;
	border-left: 6px solid #DBF342;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transform: rotate(-90deg);
	flex: 0 0 auto;
}

.smo-footer__copyright {
	position: absolute;
	left: 0;
	bottom: 36px;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	max-width: 900px;
}

.smo-footer__credits {
	position: absolute;
	left: 0;
	bottom: 18px;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 1px;
	color: inherit;
}

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

@media (max-width: 1024px) {
	.smo-footer {
		height: auto;
		overflow: visible;
		background: linear-gradient(
			to bottom,
			#FB7BE3 0 6px,
			#050078 6px 100%
		);
	}

	.smo-footer__canvas {
		left: auto;
		transform: none;
		width: 100%;
		height: auto;
	}

	.smo-footer__content {
		position: static;
		width: 100%;
		height: auto;
	}

	.smo-footer__title {
		position: static;
		font-size: calc(64px - 0.5rem);
		margin-left: 35px;
	}

	.smo-footer__meta {
		position: static;
		margin-top: 16px;
		justify-content: flex-end;
	}

	.smo-footer__contact,
	.smo-footer__social,
	.smo-footer__addresses {
		transform: translateX(35px);
	}

	.smo-footer__addresses {
		position: static;
		width: 100%;
		margin-top: 28px;
	}

	.smo-footer__nav {
		position: static;
		margin-top: 28px;
		left: auto;
		top: auto;
	}


	.smo-footer__copyright {
		position: static;
		margin-top: 28px;
	}
}

.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) {
	.smo-footer__title      { font-size: calc(52px - 0.5rem); margin-left: 28px; }
	.smo-footer__contact,
	.smo-footer__social,
	.smo-footer__addresses  { transform: translateX(28px); }
}

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

/* ============================================================
   LARGE MOBILE  (≤640px)
   ============================================================ */
@media (max-width: 640px) {
	.smo-footer__title      { font-size: calc(36px - 0.5rem); margin-left: 16px; }
	.smo-footer__contact,
	.smo-footer__social,
	.smo-footer__addresses  { transform: translateX(16px); }
	.smo-home-sixth__title  { font-size: clamp(3.5rem, 9vw, 6rem); transform: translateX(16px); }
}

/* ============================================================
   MOBILE SMALL  (≤360px)
   ============================================================ */
@media (max-width: 360px) {
	.smo-footer__title      { font-size: calc(28px - 0.5rem); margin-left: 12px; }
	.smo-footer__contact,
	.smo-footer__social,
	.smo-footer__addresses  { transform: translateX(12px); }
	.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: 100vh;
}

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