/* ==========================================================================
   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 <img>: 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 `<html>`/`<body>` 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 */
  }
  
  
  /* ==========================================================================
     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;
      }
  
  }