/* restavracija/static/restavracija/style.css
   Public menu page - palette matches hub's shared red/gray/cream tokens
   (hub/static/hub/css/hub.css), mobile-first, no external assets (system
   font stack only: the CSP has no font-src for a remote host - see
   javna_stran.html's header comment). */

:root {
  /* Palette matches hub's shared tokens exactly
     (hub/static/hub/css/hub.css) so this page and the rest of the site read
     as one system. Custom-property NAMES below are kept as they were even
     though they no longer describe "warm terracotta/cream" - they are also
     read directly by restavracija/templates/restavracija/miza/narocanje.html
     (a page this task does not own), so renaming them would silently break
     that page's inline styles. Only the values changed. */
  --rjava-temna:  #1A1A1A;   /* body text (hub's "text") */
  --rjava:        #1A1A1A;   /* secondary text/links - same as body text;
                                 the new palette has no separate secondary
                                 dark tone the way the old brown pair did */
  --oranzna:      #F20000;   /* primary accent - CTA, active tab, prices
                                 (hub's color-red) */
  --oranzna-temna:#BC0C0B;   /* hover/pressed state of the accent
                                 (hub's color-red-dark) */
  --zlata:        #888888;   /* neutral "no photo" placeholder icon only -
                                 was a gold secondary accent; the new palette
                                 has no secondary accent so this is now
                                 hub's color-gray-dark */
  --krem:         #f7f7f7;   /* page background (hub's bg-page) */
  --krem-temna:   #eeeeee;   /* card / stripe raised background
                                 (hub's bg-raised) */
  --siva:         #888888;   /* muted/secondary text (hub's color-gray-dark) */
  --crta:         #CCCCCC;   /* hairlines / default borders (hub's color-gray) */
  --obroba-srednja: #D4D4D4; /* border-mid - a slightly stronger divider than
                                 --crta, used where a hairline needs more
                                 presence against a raised (--krem-temna)
                                 background */
  --bela:         #FFFFFF;
  --alergen:      #F20000;   /* allergen disclosure - reuses the primary red
                                 (hub's color-red) rather than a separate hue;
                                 it is already bold/inline so a distinct red
                                 buys no extra legibility here */
  --senca: 0 10px 30px -12px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--krem);
  color: var(--rjava-temna);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
h1, h2, h3 { font-family: inherit; line-height: 1.15; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* ── Sticky header ─────────────────────────────────────────────────────── */
.glava {
  position: sticky; top: 0; z-index: 30;
  background: var(--bela);
  border-bottom: 1px solid var(--crta);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.glava-notranjost { max-width: 64rem; margin: 0 auto; padding: .5rem .8rem 0; }

/* Hours (left) + the "Oceni obrok" CTA (right) on one line, even at ~320-360px
   phone widths - this is the one row on the page that must never wrap, so
   both children are sized down and pinned with flex-wrap: nowrap rather than
   left to reflow. See .urnik/.gumb-oceni below for the actual size budget. */
.glava-vrstica {
  display: flex; align-items: center; justify-content: flex-start;
  gap: .4rem; flex-wrap: nowrap;
}
.urnik {
  margin: 0; min-width: 0; font-size: .64rem; line-height: 1.25;
  font-weight: 700; color: var(--rjava-temna); flex: 0 0 auto;
}
.urnik span { display: block; white-space: nowrap; }
.urnik span:first-child { font-weight: 600; color: var(--siva); }

/* Merged back onto one row with .urnik/.gumb-oceni (see the template's own
   comment) - sized down further than the previous, two-row revision so all
   three groups (hours, icons, button) fit a ~320-360px phone at once:
   smaller icon circles (below), a shorter button label ("Ocenite"), and no
   margin/padding of its own any more (it used to be a full second row). */
.glava-kontakt {
  display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; margin: 0;
}
.glava-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--krem-temna); border: 1px solid var(--crta);
  color: var(--rjava); text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.glava-ikona:hover, .glava-ikona:focus-visible {
  color: var(--oranzna-temna); border-color: var(--oranzna); outline: none;
}
.glava-ikona:focus-visible { outline: 2px solid var(--oranzna); outline-offset: 2px; }
.glava-ikona svg { width: 13px; height: 13px; flex: 0 0 auto; }

.gumb-oceni {
  display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto;
  margin-left: auto; min-height: 36px; padding: 0 .55rem; border-radius: 999px;
  background: var(--oranzna); color: var(--bela); text-decoration: none;
  font-weight: 800; font-size: .74rem; white-space: nowrap;
  box-shadow: 0 4px 14px -4px rgba(242, 0, 0, .5);
  transition: transform .15s ease, background-color .15s ease;
}
.gumb-oceni:hover, .gumb-oceni:focus-visible {
  background: var(--oranzna-temna); transform: translateY(-1px);
}
.gumb-oceni svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

.zavihki {
  display: flex; gap: .4rem; margin: .7rem 0 0;
  border-top: 1px solid var(--crta); padding-top: .1rem;
}
.zavihek {
  flex: 1 1 0; min-height: 44px; border: none; background: none;
  cursor: pointer; font-weight: 700; font-size: .95rem;
  color: var(--siva); padding: .55rem .5rem .6rem;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.zavihek:hover { color: var(--rjava-temna); }
.zavihek--aktiven {
  color: var(--oranzna-temna); border-bottom-color: var(--oranzna);
}
.zavihek:focus-visible { outline: 2px solid var(--oranzna); outline-offset: -2px; }

/* ── Main content ──────────────────────────────────────────────────────── */
.ovoj { max-width: 64rem; margin: 0 auto; padding: 1.1rem .9rem 3rem; }

.plosca > h2 {
  font-size: 1.05rem; margin: 0 0 .2rem; color: var(--rjava-temna);
}
.opomba, .prazno {
  font-size: .88rem; color: var(--siva); margin: 0 0 .9rem;
}
.prazno { font-style: italic; }

.kategorija {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--oranzna-temna); font-weight: 800; margin: 1.1rem 0 .55rem;
}
.kategorija:first-of-type { margin-top: .6rem; }

/* ── Card grid ─────────────────────────────────────────────────────────── */
.mreza {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.kartica {
  display: flex; flex-direction: column; text-align: left;
  background: var(--bela); border: 1px solid var(--crta); border-radius: 12px;
  overflow: hidden; cursor: pointer; padding: 0; min-height: 44px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kartica:hover, .kartica:focus-visible {
  transform: translateY(-2px); box-shadow: var(--senca);
  border-color: var(--oranzna); outline: none;
}
.kartica:focus-visible { outline: 2px solid var(--oranzna); outline-offset: 2px; }

.kartica-slika {
  width: 100%; height: 8.5rem; object-fit: cover; background: var(--krem-temna);
}
.kartica-slika--prazna {
  display: flex; align-items: center; justify-content: center;
  color: var(--zlata);
  background: var(--krem-temna);
}
.kartica-slika--prazna svg { width: 2.1rem; height: 2.1rem; }

.kartica-telo { padding: .6rem .7rem .75rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.kartica-vrh { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.kartica-naziv { font-weight: 700; font-size: .96rem; line-height: 1.25; }
.kartica-cena {
  font-weight: 800; color: var(--oranzna-temna); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: .92rem;
}
.kartica-opis {
  font-size: .82rem; color: var(--siva);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kartica-al { font-size: .74rem; font-weight: 700; color: var(--alergen); }

/* ── Stalni meni: compact one-dish-per-row list, small thumbnail ───────
   Deliberately NOT `.mreza`/`.kartica` (the big photo-card grid) - those
   classes stay untouched because
   restavracija/templates/restavracija/miza/narocanje.html (not owned by
   this task) also renders them and must keep looking the way it does. */
.seznam-stalni { display: flex; flex-direction: column; gap: .5rem; }
.vrstica {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  text-align: left; background: var(--bela);
  border: 1px solid var(--obroba-srednja); border-radius: 10px;
  padding: .5rem .7rem; cursor: pointer; min-height: 44px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vrstica:hover, .vrstica:focus-visible {
  border-color: var(--oranzna); box-shadow: var(--senca); outline: none;
}
.vrstica:focus-visible { outline: 2px solid var(--oranzna); outline-offset: 2px; }
.vrstica-slika {
  width: 56px; height: 56px; flex: 0 0 auto; object-fit: cover;
  border-radius: 8px; background: var(--krem-temna);
}
.vrstica-telo {
  display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0;
}
.vrstica-vrh { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.vrstica-naziv { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.vrstica-cena {
  font-weight: 800; color: var(--oranzna-temna); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: .92rem;
}
.vrstica-opis {
  font-size: .8rem; color: var(--siva);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vrstica-al { font-size: .72rem; font-weight: 700; color: var(--alergen); }

/* ── Dnevni meni: all 5 days shown directly, today pinned first ────────
   Replaces the old collapsed `<details class="teden-predogled">` preview
   (a non-clickable, de-emphasized list) - every day is now a full,
   always-visible group of real `.vrstica` rows (see above), and TODAY is
   moved to the front purely with flexbox `order` (see the template comment
   above the Dnevni <section>), not by changing `teden`'s actual order. */
.podnaslov { font-weight: 500; color: var(--siva); font-size: .78rem; margin-left: .3rem; }
.teden-seznam { display: flex; flex-direction: column; gap: 1rem; }
.dan-skupina {
  order: 0; border: 1px solid var(--obroba-srednja); border-radius: 10px;
  padding: .7rem .9rem .85rem; background: var(--bela);
}
.dan-skupina--danes {
  order: -1; border-color: var(--oranzna); background: var(--krem-temna);
  box-shadow: 0 0 0 1px var(--oranzna) inset;
}
.dan-glava {
  margin: 0; font-size: .92rem; font-weight: 800; color: var(--rjava-temna);
  display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap;
}
.dan-skupina--danes .dan-glava { color: var(--oranzna-temna); }
.dan-datum { font-weight: 500; color: var(--siva); font-size: .8rem; }
.dan-skupina .kategorija:first-of-type { margin-top: .7rem; }
.dan-skupina .prazno-mini { margin-top: .5rem; }
.znak {
  font-size: .6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; background: var(--oranzna); color: var(--bela);
  padding: .05rem .35rem; border-radius: 4px;
}
.prazno-mini { font-size: .82rem; color: var(--siva); font-style: italic; margin: .3rem 0; }

/* ── Info + allergens ───────────────────────────────────────────────── */
.odsek { margin: 1.8rem 0 0; }
.odsek > h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--oranzna-temna); margin: 0 0 .5rem; font-weight: 800;
}
.info { list-style: none; margin: 0; padding: 0; }
.info li { padding: .3rem 0 .3rem 1.3rem; position: relative; }
.info li::before {
  content: ""; position: absolute; left: .25rem; top: .85em;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--oranzna);
}
.legenda { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.legenda li { font-size: .85rem; padding: .15rem 0; }
.legenda b { color: var(--rjava-temna); }

.pridrzek {
  margin: 1.6rem 0 0; padding-top: .8rem; border-top: 1px solid var(--crta);
  font-size: .85rem; color: var(--siva); font-style: italic;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.noga {
  max-width: 64rem; margin: 0 auto; padding: 0 .9rem 2.4rem;
  font-size: .85rem; color: var(--siva);
}
.noga a { color: var(--siva); }
.noga-logotip { margin: 0 0 .8rem; }
.noga-logotip img { max-height: 36px; width: auto; height: auto; }
.noga-drobno { margin-top: 1rem; }
/* Deliberately muted, small, un-CTA-like: a quiet utility link, never blue -
   uses the same neutral token as every other secondary-text color on this
   page (--siva === hub's color-gray-dark, #888888). */
.noga-prijava {
  color: var(--siva); font-size: .74rem; text-decoration: none;
}
.noga-prijava:hover, .noga-prijava:focus-visible {
  color: var(--rjava-temna); text-decoration: underline;
}

a { color: var(--rjava); }

/* ── Dish modal ────────────────────────────────────────────────────────── */
.modal {
  border: none; border-radius: 16px; padding: 0; max-width: 30rem;
  width: calc(100% - 2rem); margin: auto; background: var(--bela);
  box-shadow: var(--senca); color: var(--rjava-temna);
  transform: scale(.97); opacity: 0;
  transition: transform .15s ease, opacity .15s ease;
}
.modal[open] { transform: scale(1); opacity: 1; }
.modal::backdrop { background: rgba(0, 0, 0, .5); }
.modal-vsebina { position: relative; }
.modal-zapri {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, .92); color: var(--rjava-temna);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  transition: background-color .15s ease;
}
.modal-zapri:hover, .modal-zapri:focus-visible { background: var(--bela); }
.modal-zapri svg { width: 1.1rem; height: 1.1rem; }

.modal-slika { width: 100%; height: 12rem; object-fit: cover; }
.modal-slika--prazna {
  display: flex; align-items: center; justify-content: center; color: var(--zlata);
  background: var(--krem-temna);
}
.modal-slika--prazna svg { width: 3rem; height: 3rem; }

.modal-telo { padding: 1.1rem 1.2rem 1.3rem; }
.modal-telo h3 { font-size: 1.2rem; margin: 0 0 .3rem; }
.modal-cena {
  font-weight: 800; color: var(--oranzna-temna); font-size: 1.05rem;
  margin: 0 0 .6rem;
}
.modal-opis { font-size: .92rem; color: var(--rjava); margin: 0 0 .7rem; }
.modal-alergeni { font-size: .85rem; font-weight: 700; color: var(--alergen); margin: 0; }

/* ── One breakpoint. Everything above is the phone. ──────────────────── */
@media (min-width: 40rem) {
  body { font-size: 17px; }
  .urnik { font-size: .78rem; }
  .gumb-oceni { font-size: .88rem; padding: 0 1rem; min-height: 42px; }
  .glava-ikona { width: 38px; height: 38px; }
  .glava-ikona svg { width: 18px; height: 18px; }
  .mreza { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .kartica-slika { height: 9.5rem; }
  .vrstica-slika { width: 64px; height: 64px; }
  .legenda { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .legenda { grid-template-columns: repeat(3, 1fr); }
}

@media print {
  .glava, .noga, .modal { display: none; }
  body { font-size: 11pt; }
  #plosca-dnevni, #plosca-stalni { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kartica, .vrstica, .gumb-oceni, .modal, .zavihek, .glava-ikona, .modal-zapri {
    transition: none;
  }
}