@layer reset, tokens, base, layout, components, widgets, blocks, utilities;

/* ==========================================================================
   Reset
   ========================================================================== */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	img, picture, video, svg { display: block; max-width: 100%; }
	input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
	button { background: none; border: 0; padding: 0; cursor: pointer; }
	ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
	h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
	h1, h2, h3, h4, h5, h6, p, li { text-wrap: pretty; }
	p, h1, h2, h3, h4, h5, h6, li { overflow-wrap: break-word; }
	a { color: inherit; }
	[hidden] { display: none !important; }
}

/* ==========================================================================
   Spremenljivke - mere iz Figme (1920 px), zvezno do 375 px
   ========================================================================== */
@layer tokens {
	:root {
		/* barve */
		--c-bg: #131313;
		--c-bg-raised: #3a3a3a;
		--c-text: #fff;
		--c-muted: #999;
		--c-accent: #ffe600;
		--c-on-accent: #131313;
		--c-line: rgb(153 153 153 / .5);
		--c-line-soft: rgb(255 255 255 / .3);

		/* pisave: Adobe Bahnschrift se doda na začetek obeh seznamov */
		--font: Bahnschrift, "Barlow", system-ui, sans-serif;
		--font-cond: Bahnschrift, "Barlow Semi Condensed", "Barlow", sans-serif;
		--stretch-cond: 87.5%;
		--fw-light: 300;
		--fw-regular: 400;

		/* velikosti pisave (375 → 1920 px) */
		--fs-display: clamp(1.75rem, 1.492rem + 1.1vw, 2.8125rem);    /* 28 → 45 */
		--fs-h3: clamp(1.5rem, 1.333rem + .712vw, 2.1875rem);         /* 24 → 35 */
		--fs-contact: clamp(1.25rem, 1.0983rem + .6472vw, 1.875rem);  /* 20 → 30 */
		--fs-address: clamp(1.125rem, 1.0188rem + .4531vw, 1.5625rem);/* 18 → 25 */
		--fs-lead: clamp(1.0625rem, .9867rem + .3236vw, 1.375rem);    /* 17 → 22 */
		--fs-label: clamp(.9375rem, .8617rem + .3236vw, 1.25rem);     /* 15 → 20 */
		--fs-small: clamp(.875rem, .8143rem + .2589vw, 1.125rem);     /* 14 → 18 */
		--lh-display: 1.333;
		--lh-h3: 1.286;
		--lh-lead: 1.5;
		--lh-nav: 1.857;
		--ls-label: .12em;
		--measure: 30em;

		/* mreža */
		--content: 87.5rem;                                           /* 1400 */
		--gutter: clamp(1.25rem, .0971rem + 4.919vw, 6rem);           /* 20 → 96 */
		--aside: clamp(15rem, 13.149rem + 7.896vw, 22.625rem);        /* 240 → 362  desni stolpec (glava, meni, obrazci) */
		--aside-pad: clamp(1.25rem, .9466rem + 1.2945vw, 2.5rem);     /* 20 → 40 */
		--cols-gap: clamp(2rem, 1.15rem + 3.625vw, 5.5rem);           /* 32 → 88 */
		--media-gap: clamp(.5rem, .1663rem + 1.424vw, 1.875rem);      /* 8 → 30 */
		--page:
			[full-start] minmax(var(--gutter), 1fr)
			[content-start] minmax(0, calc(var(--content) / 2))
			[center] minmax(0, calc(var(--content) / 2))
			[content-end] minmax(var(--gutter), 1fr)
			[full-end];

		/* razmiki */
		--s-xs: .5rem;                                                /* 8 */
		--s-s: clamp(1rem, .8786rem + .5178vw, 1.5rem);               /* 16 → 24  naslov → besedilo */
		--s-m: clamp(1rem, .7573rem + 1.036vw, 2rem);                 /* 16 → 32  nadnaslov → naslov */
		--s-l: clamp(1.5rem, 1.015rem + 2.071vw, 3.5rem);             /* 24 → 56  naslov → gumb */
		--s-xl: clamp(3rem, 2.15rem + 3.625vw, 6.5rem);               /* 48 → 104 */
		--s-section: clamp(4.5rem, 3.408rem + 4.66vw, 9rem);          /* 72 → 144 med bloki */

		/* elementi */
		--header-h: clamp(4rem, 3.681rem + 1.359vw, 5.3125rem);       /* 64 → 85 */
		--logo-w: clamp(6.875rem, 6.344rem + 2.265vw, 9.0625rem);     /* 110 → 145 */
		--btn-h: clamp(3.5rem, 3.136rem + 1.553vw, 5rem);             /* 56 → 80 */
		--btn-minw: clamp(11rem, 9.817rem + 5.049vw, 15.875rem);      /* 176 → 254 */
		--dur: .3s;
		--ease: cubic-bezier(.2, .7, .2, 1);
	}
}

/* ==========================================================================
   Osnova
   ========================================================================== */
@layer base {
	html {
		color-scheme: dark;
		background: var(--c-bg);
		scroll-padding-top: var(--header-h);
		scrollbar-gutter: stable;		/* stran ne skoči, ko meni zaklene drsenje */
	}

	@media (prefers-reduced-motion: no-preference) {
		html { scroll-behavior: smooth; }
	}

	body {
		background: var(--c-bg);
		color: var(--c-text);
		font-family: var(--font);
		font-size: var(--fs-lead);
		font-weight: var(--fw-light);
		line-height: var(--lh-lead);
	}
	body.menu { overflow: hidden; }

	h1, h2, h3, h4 { font-weight: var(--fw-regular); }
	strong, b { font-weight: var(--fw-regular); }

	a { text-decoration-thickness: 1px; text-underline-offset: .2em; }

	:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

	::selection { background: var(--c-accent); color: var(--c-on-accent); }
}

/* ==========================================================================
   Postavitev: ena mreža čez celo stran (full | content | full)
   ========================================================================== */
@layer layout {
	.w {
		display: grid;
		grid-template-columns: var(--page);
	}
	.w > * { grid-column: content; }
	.w > .full { grid-column: full; }

	main { padding-block-end: var(--s-section); }
	main:has(> .full:last-child) { padding-block-end: 0; }	/* pas logotipov / Kariera se dotika noge */
	main > * + * { margin-block-start: var(--s-section); }
	main > .full + .full { margin-block-start: var(--media-gap); }
}

/* ==========================================================================
   Skupni elementi (šablona bloka: .blk__head → .blk__body → .blk__actions)
   ========================================================================== */
@layer components {
	.eyebrow {
		font-family: var(--font-cond);
		font-stretch: var(--stretch-cond);
		font-size: var(--fs-label);
		font-weight: var(--fw-regular);
		line-height: 1;
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--c-muted);
	}

	.display {
		font-size: var(--fs-display);
		line-height: var(--lh-display);
		max-inline-size: var(--measure);
	}

	.blk__head > * + * { margin-block-start: var(--s-m); }
	.blk__head + .blk__body { margin-block-start: var(--s-l); }
	.blk__body + .blk__actions,
	.blk__head + .blk__actions { margin-block-start: var(--s-l); }

	.blk__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-s);
	}

	.pageHead { padding-block-start: var(--s-xl); }

	.flow > * + * { margin-block-start: var(--flow-space, 1em); }

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-block-size: var(--btn-h);
		min-inline-size: var(--btn-minw);
		padding: .5em 1.5em;
		background: var(--c-accent);
		color: var(--c-on-accent);
		font-family: var(--font-cond);
		font-stretch: var(--stretch-cond);
		font-size: var(--fs-label);
		font-weight: var(--fw-regular);
		line-height: 1;
		text-transform: uppercase;
		text-align: center;
		text-decoration: none;
		transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
	}
	.btn:hover { background: var(--c-text); }

	.skipLink:focus {
		position: fixed;
		inset: var(--s-xs) auto auto var(--s-xs);
		z-index: 100;
		width: auto;
		height: auto;
		clip-path: none;
		padding: .75em 1.25em;
		background: var(--c-accent);
		color: var(--c-on-accent);
	}

	/* seznami povezav iz drevesa strani (meni, noga) */
	.nav {
		list-style: none;
		padding: 0;
	}
	.nav a {
		text-decoration: none;
		transition: color var(--dur) var(--ease);
	}
	.nav .active > a { color: var(--c-muted); }
	.nav a:hover { color: var(--c-accent); }

	.nav--main,
	.nav--sec {
		font-size: var(--fs-h3);
		line-height: var(--lh-nav);
	}
	.nav--main { font-weight: var(--fw-regular); }
	.nav--sec { font-weight: var(--fw-light); }

	.nav--legal {
		display: flex;
		flex-wrap: wrap;
		column-gap: 2em;
		font-size: var(--fs-label);
		font-weight: var(--fw-regular);
		line-height: 2.25;
	}

	/* storitve | podjetje v dveh stolpcih */
	.navCols {
		display: grid;
		grid-template-columns: minmax(max-content, var(--nav-col, 24.125rem)) max-content;
		align-content: start;
	}

	/* kontakt: meni (--mega), noga (--footer), obrazci */
	.contact {
		--contact-fs: var(--fs-contact);
		--contact-lh: 1.667;
		--contact-fs-address: var(--fs-address);
		--contact-lh-address: 1.8;
		font-style: normal;
		font-weight: var(--fw-regular);
	}
	.contact a { text-decoration: none; transition: color var(--dur) var(--ease); }
	.contact a[href]:hover { color: var(--c-accent); }

	.contact__lines {
		font-size: var(--contact-fs);
		line-height: var(--contact-lh);
	}
	.contact__address {
		font-size: var(--contact-fs-address);
		line-height: var(--contact-lh-address);
	}
	.contact__map {
		color: var(--c-accent);
		font-size: var(--fs-label);
	}
	.contact a.contact__map:hover { color: var(--c-text); }

	.contact__social {
		display: flex;
		gap: .9375rem;
		list-style: none;
		padding: 0;
	}
	.contact__socialLink {
		display: block;
		color: var(--c-text);
	}
	.contact__socialLink svg { inline-size: 1.875rem; block-size: auto; }

	.contact > * + * { margin-block-start: var(--s-l); }

	.contact--footer {
		--contact-fs: var(--fs-h3);
		--contact-lh: 1.714;
		--contact-fs-address: var(--fs-h3);
		--contact-lh-address: 1.286;
	}
}

/* ==========================================================================
   Glava
   ========================================================================== */
@layer widgets {
	.header {
		position: sticky;
		inset-block-start: 0;
		z-index: 50;
		display: grid;
		grid-template-columns: var(--page);
		block-size: var(--header-h);
		background: var(--c-bg);
		border-block-end: 1px solid var(--c-line);
		transition: background-color var(--dur) var(--ease);
	}

	/* prosojna glava čez naslovnico, ob drsenju dobi ozadje (main.js → body.scrolled) */
	.header--floating {
		position: fixed;
		inset-inline: 0;
		background: transparent;
	}
	.scrolled .header--floating {
		background: rgb(19 19 19 / .92);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.header__bar {
		grid-column: content;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.header__logo {
		justify-self: start;
		inline-size: var(--logo-w);
	}
	.header__logo img { inline-size: 100%; block-size: auto; }

	.header__menuBtn {
		justify-self: center;
		align-self: stretch;
		display: inline-flex;
		align-items: center;
		gap: .75em;
		padding-inline: .5em;
		font-family: var(--font-cond);
		font-stretch: var(--stretch-cond);
		font-size: var(--fs-label);
		line-height: 1;
		text-transform: uppercase;
	}
	/* MENU in ZAPRI v isti celici, da se ikona ne premika */
	.header__menuText { display: grid; }
	.header__menuLabel { grid-area: 1 / 1; }
	.header__menuLabel--close,
	.header__menuBtn[aria-expanded="true"] .header__menuLabel { visibility: hidden; }
	.header__menuBtn[aria-expanded="true"] .header__menuLabel--close { visibility: visible; }

	.header__menuIcon {
		position: relative;
		inline-size: 2.5rem;
		block-size: 10px;
	}
	.header__menuIcon::before,
	.header__menuIcon::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		block-size: 1px;
		background: currentColor;
		transition: translate var(--dur) var(--ease), opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
	}
	.header__menuIcon::before { inset-block-start: 0; }
	.header__menuIcon::after { inset-block-end: 0; }
	.header__menuBtn[aria-expanded="true"] .header__menuIcon::before {
		translate: 0 4.5px;
		background: var(--c-accent);
	}
	.header__menuBtn[aria-expanded="true"] .header__menuIcon::after {
		translate: 0 -4.5px;
		opacity: 0;
	}

	/* desni stolpec (--aside) se nadaljuje v meniju */
	.header__more {
		justify-self: end;
		align-self: stretch;
		display: flex;
		inline-size: var(--aside);
	}
	.header__lang {
		display: flex;
		list-style: none;
		padding: 0;
	}
	.header__lang a,
	.header__cta {
		display: grid;
		place-items: center;
		block-size: 100%;
		border-inline-start: 1px solid var(--c-line);
		color: var(--c-muted);
		font-family: var(--font-cond);
		font-stretch: var(--stretch-cond);
		font-size: var(--fs-label);
		line-height: 1;
		text-transform: uppercase;
		text-decoration: none;
		transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
	}
	.header__lang a { inline-size: 5.625rem; }
	.header__lang a:hover,
	.header__lang a[aria-current] { color: var(--c-text); }
	.header__cta { flex: 1; }
	.header__cta:hover,
	.header__cta[aria-current] {
		background: var(--c-accent);
		color: var(--c-on-accent);
	}

	.menu .header--floating {
		background: var(--c-bg);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	@media (width < 48em) {
		.header__bar { grid-template-columns: 1fr auto; }
		.header__menuBtn { justify-self: end; margin-inline-end: -.5em; }
		.header__more { display: none; }
	}
}

/* ==========================================================================
   Meni: plošča pod glavo, zatemnjeno ozadje (main.js → body.menu)
   ========================================================================== */
@layer widgets {
	.mega {
		position: fixed;
		inset: 0;
		z-index: 40;
		background: rgb(0 0 0 / .6);
		visibility: hidden;
		opacity: 0;
		transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
	}
	.menu .mega {
		visibility: visible;
		opacity: 1;
		transition-delay: 0s;
	}

	/* stolpci: rob | navigacija | --aside (kontakt) | rob */
	.mega__inner {
		display: grid;
		grid-template-columns:
			[full-start] minmax(var(--gutter), 1fr)
			[content-start] minmax(0, calc(var(--content) - var(--aside)))
			[aside-start] var(--aside)
			[content-end] minmax(var(--gutter), 1fr)
			[full-end];
		max-block-size: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-block-start: var(--header-h);
		background: var(--c-bg);
		translate: 0 -1.5rem;
		transition: translate var(--dur) var(--ease);
	}
	.menu .mega__inner { translate: none; }

	.mega__nav {
		--nav-col: 22.5rem;
		grid-column: content-start / aside-start;
		justify-self: center;
		padding-block: var(--s-l);
	}
	.mega__nav:focus { outline: none; }
	.mega__nav .nav--legal {
		grid-column: 1 / -1;
		margin-block-start: var(--s-xl);
	}

	.mega__cta { display: none; }

	.contact--mega {
		grid-column: aside-start / content-end;
		padding-block: var(--s-l);
		padding-inline-start: var(--aside-pad);
		border-inline-start: 1px solid var(--c-line);
	}

	@media (width < 64em) {
		.mega__nav {
			grid-column: content;
			justify-self: stretch;
		}
		.mega__nav .nav--legal { contain: inline-size; }	/* vrstica se prelomi, ne širi stolpcev */
		.contact--mega {
			grid-column: content;
			padding-inline-start: 0;
			border-inline-start: 0;
			border-block-start: 1px solid var(--c-line);
		}
	}

	/* telefon: čez cel zaslon, Povpraševanje iz glave je v meniju */
	@media (width < 48em) {
		.mega__inner {
			min-block-size: 100%;
			align-content: start;
		}
		.mega__nav { padding-block-end: var(--s-l); }
		.mega__nav .nav--legal { margin-block-start: var(--s-l); }
		.mega__cta {
			display: flex;
			grid-column: content;
			margin-block-end: var(--s-l);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.mega__inner { translate: none; }
	}
}

/* ==========================================================================
   Pripomočki
   ========================================================================== */
@layer utilities {
	.offscreen:not(:focus) {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}