/* javno/static/javno/style.css
   The shared shell for sintal.eu: the landing page, the login, and the
   chrome that `navodila` sits inside. Loaded by every page in both apps;
   `navodila/style.css` loads ON TOP of it and only adds the tree, the tabs
   and the PDF viewer.

   PALETTE COPIED FROM restavracija/static/restavracija/style.css, which in
   turn copies hub/static/hub/css/hub.css, so all three read as one system.
   The names here are the honest ones (--rdeca, not --oranzna) because this
   file has no existing template reading the old names inline - unlike the
   restaurant's, whose comment explains why its names could not be fixed.

   NO EXTERNAL ASSET OF ANY KIND. The sintal.eu CSP is `default-src 'none'`
   with `font-src 'self' data:` and `img-src 'self' data:`
   (tehnika_ocene.conf) - a web font, a CDN stylesheet or a remote image is
   blocked on the live host while working perfectly on a laptop. System font
   stack and same-origin images only. */

:root {
  --crna:          #1A1A1A;   /* body text */
  --rdeca:         #F20000;   /* primary accent */
  --rdeca-temna:   #BC0C0B;   /* hover / pressed */
  --siva-temna:    #888888;   /* muted text */
  --siva:          #CCCCCC;   /* hairlines */
  --obroba:        #D4D4D4;   /* stronger divider */
  --ozadje:        #f7f7f7;   /* page */
  --ozadje-dvig:   #eeeeee;   /* raised card */
  --bela:          #FFFFFF;
  --senca:         0 10px 30px -12px rgba(0, 0, 0, .35);
  --senca-mehka:   0 2px 8px -4px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ozadje);
  color: var(--crna);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

h1, h2, h3 { line-height: 1.15; margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--rdeca-temna); }

/* ── Header ─────────────────────────────────────────────────────────────
   Sticky, because `navodila` has long pages and the way back to the index
   should not require scrolling to the top of a 400-page manual. */
.glava {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bela);
  border-bottom: 1px solid var(--obroba);
  box-shadow: var(--senca-mehka);
}
.glava-notranjost {
  max-width: 1100px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.glava-znamka {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  text-decoration: none;
  color: var(--crna);
  font-weight: 800;
  letter-spacing: .01em;
}
.glava-znamka span { color: var(--rdeca); font-weight: 300; }
.glava-povezave {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .85rem;
}
.glava-povezave a { color: var(--siva-temna); text-decoration: none; font-weight: 600; }
.glava-povezave a:hover { color: var(--rdeca); }

/* ── Page body ──────────────────────────────────────────────────────── */
.vsebina {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.4rem 1rem 3rem;
}
.vsebina--siroka { max-width: 100%; padding-left: 1rem; padding-right: 1rem; }

.noga {
  border-top: 1px solid var(--siva);
  color: var(--siva-temna);
  font-size: .78rem;
  padding: 1.1rem 1rem 1.6rem;
  text-align: center;
}

/* ── Landing page tiles ─────────────────────────────────────────────────
   TEXT OVER IMAGE, built the same way as hub's hero
   (hub/templates/hub/home.html): the picture is absolutely positioned at
   inset:0 with object-fit:cover, a translucent scrim sits above it, and the
   text is on z-index 2. That order is what keeps the text legible over an
   arbitrary photo instead of depending on the photo being dark enough.

   THE GRADIENT UNDER THE <img> IS NOT DECORATION. If a photo is missing -
   and both are owner-supplied files that may not be in the checkout yet -
   the <img> collapses and the gradient is what remains, so the tile still
   reads as a styled panel with a legible label rather than as a broken
   page. */
.ploscice {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: .4rem;
}
@media (max-width: 720px) {
  .ploscice { grid-template-columns: 1fr; }
}

.ploscica {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  min-height: 300px;
  text-decoration: none;
  color: var(--crna);
  box-shadow: var(--senca);
  background: linear-gradient(140deg, var(--rdeca) 0%, var(--rdeca-temna) 100%);
  isolation: isolate;
}
@media (max-width: 720px) { .ploscica { min-height: 210px; } }

.ploscica__slika {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .35s ease;
}
.ploscica:hover .ploscica__slika { transform: scale(1.04); }

/* The scrim. White at .62 rather than a dark overlay, because the palette's
   text colour is near-black - the same choice hub's hero makes. */
.ploscica__zastor {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, .62);
  pointer-events: none;
}

.ploscica__besedilo {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.2rem;
  gap: .3rem;
}
.ploscica__naslov {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.01em;
}
.ploscica__podnaslov {
  color: var(--rdeca-temna);
  font-weight: 600;
  font-style: italic;
}
.ploscica__vec {
  margin-top: .7rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bela);
  background: var(--rdeca);
  border-radius: 999px;
  padding: .45rem 1.1rem;
}
.ploscica:hover .ploscica__vec { background: var(--rdeca-temna); }

.uvod {
  text-align: center;
  margin: .6rem 0 1.6rem;
}
.uvod h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.uvod p { color: var(--siva-temna); margin: .35rem 0 0; }

/* ── Cards, forms, buttons ──────────────────────────────────────────── */
.kartica {
  background: var(--bela);
  border: 1px solid var(--siva);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  box-shadow: var(--senca-mehka);
}
.kartica--ozka { max-width: 420px; margin: 2.5rem auto; }

label { display: block; font-weight: 700; font-size: .82rem; margin-bottom: .25rem; }
.polje { margin-bottom: .9rem; }
.namig { color: var(--siva-temna); font-size: .74rem; margin-top: .25rem; }

input[type=text], input[type=password], input[type=number],
input[type=file], select, textarea {
  width: 100%;
  font: inherit;
  padding: .55rem .65rem;
  border: 1px solid var(--obroba);
  border-radius: 8px;
  background: var(--bela);
  color: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--rdeca);
  outline-offset: 1px;
  border-color: var(--rdeca);
}
textarea { min-height: 70px; resize: vertical; }

.gumb {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: .6rem 1.1rem;
  background: var(--rdeca);
  color: var(--bela);
  cursor: pointer;
  text-decoration: none;
}
.gumb:hover { background: var(--rdeca-temna); }
.gumb--tih {
  background: var(--bela);
  color: var(--rdeca);
  border: 1px solid var(--rdeca);
}
.gumb--tih:hover { background: #fff4f4; color: var(--rdeca-temna); }
.gumb--majhen { padding: .3rem .65rem; font-size: .78rem; border-radius: 6px; }
.gumb--nevaren { background: var(--bela); color: var(--rdeca-temna); border: 1px solid var(--siva); }
.gumb--nevaren:hover { background: #fff4f4; border-color: var(--rdeca); }

/* ── Feedback strip (the ?ok= / ?napaka= pattern) ───────────────────── */
.obvestilo {
  border-radius: 8px;
  padding: .6rem .8rem;
  margin-bottom: 1rem;
  font-size: .88rem;
}
.obvestilo--napaka { background: #fdecea; border: 1px solid #f5c6c2; color: #8c1d13; }
.obvestilo--ok     { background: #eaf7ee; border: 1px solid #bfe3ca; color: #1d6b33; }
.obvestilo--opozorilo { background: #fff7e6; border: 1px solid #f0d9a8; color: #7a5300; }

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.drobtine {
  font-size: .82rem;
  color: var(--siva-temna);
  margin-bottom: .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.drobtine a { color: var(--siva-temna); text-decoration: none; font-weight: 600; }
.drobtine a:hover { color: var(--rdeca); }
.drobtine .locilo { opacity: .5; }