/* ========================================================================== Base Styles ========================================================================== */ /* Screen-reader-only utility: visually hidden but announced by assistive tech. Used for accessible headings that don't need to be shown visually. */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Responsive-image safety net. Pairs with the width/height attributes now on every : keeps images from overflowing their container and preserves aspect ratio (prevents distortion) for any image without a specific size rule. Component rules with their own height (.news-card img, .eg-thumb img, object-fit covers, logos, etc.) are more specific and still win. */ img { max-width: 100%; height: auto; } /** * 1. Temeljni stili za celotno stran (box-sizing, osnovna pisava, barve). * 2. Definicija glavnega `.container` razreda za omejitev širine vsebine. * 3. Pravilo za preprečevanje drsenja strani, ko je mobilni meni odprt. */ /* 1. Temeljni stili */ /* NOVO: Globalno pravilo za box-sizing. To je ključno za preprečevanje težav s postavitvijo in horizontalnim drsenjem. Vsem elementom naroči, naj padding in border vključijo v svojo končno širino. */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html { /* * `overflow-x: hidden` na ``/`` bi pokvaril `position: sticky` * (stranska vrstica in mobilni TOC v člankih). Zato uporabljamo * `overflow-x: clip`, ki obreže vodoravni preliv (npr. mobilni meni, * ki je zunaj zaslona), NE da bi ustvaril drsni vsebnik, zato `sticky` * še vedno deluje. */ overflow-x: clip; } body { font-family: 'Inter', sans-serif; margin: 0; background-color: #FFFFFF; color: #101828; overflow-x: clip; } /* Pravilo za preprečevanje drsenja, ko je mobilni meni odprt. To je pravilno in ostane. */ html.nav-open, html.nav-open body { overflow: hidden; } /* 2. Glavni container */ .container { max-width: 1280px; /* Uporabi max-width namesto fiksne širine za boljšo odzivnost. */ width: 100%; /* Zagotovi, da vsebnik zavzame razpoložljivo širino do svoje maksimalne meje. */ margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 32px; /* box-sizing: border-box; -- to pravilo je zdaj globalno in ni več potrebno tukaj */ } /* ========================================================================== Tablet header clearance (769–1024px) The fixed header is 80px on desktop but shrinks to 60px at ≤1024px, while each page's first section keeps its 80px-header top padding until ≤768px. That leaves a ~20px extra gap under the header on tablets. Pull the first section up by exactly that delta for this range only (phones ≤768 keep their own reduced paddings, untouched). ========================================================================== */ @media (min-width: 769px) and (max-width: 1024px) { main > :first-child { margin-top: -20px; } } /* ========================================================================== Mobile Base Styles ========================================================================== */ @media (max-width: 768px) { body { /* Odmik na vrhu telesa strani zaradi fiksne glave na mobilnih napravah. Ta stil je tukaj, ker vpliva na celotno stran. */ padding-top: 60px; } .container { width: 100%; padding: 0 24px; } }