/* Original vicoteka blue, taken from the actual old site (d:\www\az-lisica.rs\css\vc.css) —
   #336699 was its dominant color (.vic-menu-container, .vicevi-ttl, .smeh-izbor), not the
   #06c placeholder this stub started with. --vc-accent-dark/--vc-accent-soft are derived
   shades in the same hue, since the old site mixed this blue with unrelated yellow/brown
   accents (title text/shadow) that don't map onto this single-hue accent/dark/soft system. */
:root {
  --vc-accent: #336699;
  --vc-accent-dark: #1f3d5c;
  --vc-accent-soft: #d6e4f5;
  /* Softened further, specifically for the share-icon badges — a touch paler than the shared
     --vc-accent-soft used elsewhere (nav, notices, pagination), per explicit request to mute
     just the icon backgrounds without changing those other components. */
  --vc-share-bg: #e0ebf8;
  /* Neutral light gray for .vc-joke-meta's header band, direct request ("probaj sa #F7F7F7") -
     no longer part of the blue accent-hue family the way --vc-share-bg/--vc-accent-soft are. */
  --vc-meta-bg: #F6F9FC;
  --vc-ink: #222;
  --vc-ink-soft: #6b7480;
  --vc-border: #dde3ea;
}

.vc-menu-btn {
  font: normal 12px Oswald;
  background-color: var(--vc-accent);
  color: var(--vc-accent-soft);
}
.vc-menu-btn:hover {
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent);
}
.vc-menu-btn:active, .vc-menu-btn:focus, .vc-menu-btn:target, .vc-menu-btn:active:focus {
  background-color: var(--vc-accent-dark);
  color: #fff;
}

.vc-menu-btn-a, .vc-menu-btn-a:hover, .vc-menu-btn-a:active, .vc-menu-btn-a:focus, .vc-menu-btn-a:target, .vc-menu-btn-a:active:focus {
  font: normal 12px Oswald;
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent-dark);
}
/* Disabled placeholder button (e.g. "Pošalji vic", not built yet) — same treatment as
   .ak-menu-btn-dis/.cn-menu-btn-dis in the other module/shared stylesheets. */
.vc-menu-btn-dis {
  font: normal 12px Oswald;
  background-color: var(--vc-accent-dark);
  color: rgba(255, 255, 255, .5);
  cursor: default;
}

/* Desktop header row (_bs_inc/header.php's aService=='vc' block) — same colors as .vc-menu-btn*
   above, but font/size matched to .top-menu-btn (the service-switcher row right above it in the
   header) rather than reusing .vc-menu-btn's own 12px, which was sized down specifically for the
   in-page sort tabs (_bs_inc/vicoteka/main_index.php) and would look inconsistent here — this
   header row should read like a sibling of the other services' own second-row nav buttons
   (.ak-menu-btn, .rc-menu-btn, .bo-menu-btn, .cn-menu-btn — all .875rem Oswald), just in vicoteka's
   own colors. Padding isn't set here (or on .top-menu-btn) — both rely on the same Bootstrap
   `.btn.btn-sm` classes already in the markup, so it already matches without needing to repeat it. */
.vc-hdr-btn {
  font: normal .875rem Oswald;
  background-color: var(--vc-accent);
  color: var(--vc-accent-soft);
}
.vc-hdr-btn:hover {
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent);
}
.vc-hdr-btn:active, .vc-hdr-btn:focus, .vc-hdr-btn:target, .vc-hdr-btn:active:focus {
  background-color: var(--vc-accent-dark);
  color: #fff;
}
.vc-hdr-btn-a, .vc-hdr-btn-a:hover, .vc-hdr-btn-a:active, .vc-hdr-btn-a:focus, .vc-hdr-btn-a:target, .vc-hdr-btn-a:active:focus {
  font: normal .875rem Oswald;
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent-dark);
}
.vc-hdr-btn-dis {
  font: normal .875rem Oswald;
  background-color: var(--vc-accent-dark);
  color: rgba(255, 255, 255, .5);
  cursor: default;
}

.vc-page {
  background-color: #f7f9fb;
}

/* --- category sidebar (persistent left column, desktop-only) --- */
/* The mobile offcanvas trigger/panel this section used to also style (#vcKatOffcanvas,
   .vc-kat-offcanvas-btn) was removed — the hamburger menu's own Vicoteka submenu now lists every
   category directly, making a page-local mobile category picker redundant. */
/* Custom fixed-width column (replaces Bootstrap's col-lg-3) — 190px measured directly in-browser
   as comfortably above the true minimum: the longest real category name ("Aforizmi i grafiti")
   only needs ~94px of actual glyph width (canvas-measured against .vc-kat-link's real computed
   font), so even after the shared 8px each-side gutter padding below (matching gx-3's own
   calc(var(--bs-gutter-x)*.5) that .vc-content-col/.col-lg-3 siblings still use), 190px leaves
   plenty of slack while giving the freed-up width back to .vc-content-col next to it. */
.vc-kat-col {
  flex: 0 0 190px;
  max-width: 190px;
  padding-right: .5rem;
  padding-left: .5rem;
}
.vc-kat-box {
  background-color: #fff;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  overflow: hidden;
}
/* Same sticky-column treatment as recepti's ingredients sidebar (.rc-sastojci-sticky) — no
   max-width reset needed to undo it below `lg` the way recepti's has, since this column is
   already fully hidden below `lg` via d-none d-lg-block rather than just repositioned. */
.vc-kat-sticky {
  position: sticky;
  top: 1rem;
}

/* --- ad column (persistent right column, desktop-only) --- */
/* Custom fixed-width column (replaces Bootstrap's col-lg-3), isti obrazac kao .vc-kat-col iznad -
   direktan zahtev da kolona nikad ne bude šira od 300px (širina banner-a). box-sizing:border-box
   znači da 300px OVDE uključuje i padding-left - stvarna spoljna širina kolone nikad ne prelazi
   300px, za razliku od content-box modela gde bi padding dodao širinu preko deklarisane. */
.vc-ad-col {
  box-sizing: border-box;
  flex: 0 0 300px;
  max-width: 300px;
  padding-left: .5rem;
}
/* 3 oglasne zone u koloni. Broj stvarnih banera NIJE fiksan (može ih biti 2, 3, 5...) niti im je
   visina poznata, a u jednoj zoni ih može biti i više od jednog - zato ovde NEMA nijedne zadate
   visine, ni zone ni banera. Zone se sabijaju tačno na visinu svog sadržaja (flex:0 0 auto), pa
   ne postoji "predviđena visina zone" koju bi sadržaj mogao da prelije; sav višak prostora deli
   justify-content:space-between IZMEĐU zona, čime prva zona sama sedne uz vrh, poslednja uz dno,
   a srednja tačno na sredinu - za bilo koji broj banera bilo koje visine.

   height: calc(100% - .25rem) - izmereno, ne pretpostavljeno: paginacija u srednjem stupcu nosi
   Bootstrap-ovu "my-1" klasu (=.25rem donje margine), pa se stubac završava tih 4px NIŽE od
   stvarne donje ivice paginacije - bez ovog oduzimanja poslednji baner visi 4px ispod nje.

   Pomeranje pri skrolovanju (sudar i guranje) radi position:sticky ispod, a ne JS - JS samo upiše
   top offset svakom baneru (zbir visina onih iznad njega), jednom, van skrolovanja. Vidi komentar
   na vrhu _bs_js/vicoteka/vcAds.js za punu podelu posla i zašto se ne sme raditi na scroll event. */
.vc-ad-column {
  /* min-height (ne height): na kratkim stranama zbir visina banera može biti VEĆI od raspoloživog
     stupca - tada vcAds.js podigne min-height na .vc-ad-col da baneri ne pobegnu preko dna. */
  min-height: calc(100% - .25rem);
  position: relative;
}
/* Svaka zona je apsolutno pozicionirana kutija; top/bottom joj upisuje vcAds.js. Zašto baš tako:
   sticky element nikad ne prelazi DONJU ivicu svog containing block-a, i tu granicu koristimo kao
   "kočnicu". Da su zone obične flex-kutije visine svog sadržaja, sticky ne bi imao kuda da pomera
   baner; da su svi baneri u jednom zajedničkom kontejneru (probano), svaki bi se na kraju strane
   nezavisno zakačio za dno stupca pa bi se PREKLOPILI (izmereno: baner 2 i 3 su završavali na
   istom dnu). Ovako se svaka zona završava tačno onoliko iznad dna stupca kolika je ukupna visina
   banera ISPOD nje, pa se svaki zaustavi tačno na svom mestu u nizu, bez preklapanja. */
.vc-ad-zone {
  position: absolute;
  left: 0;
  right: 0;
}
.vc-ad-item {
  position: sticky;
  /* Stvarnu vrednost (razmak + zbir visina banera iznad) upisuje vcAds.js; ovo je samo početna
     vrednost za prvi baner i fallback ako JS ne bi radio. */
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Razmak kad u istoj zoni stoji više banera - isti kao GAP u vcAds.js. */
.vc-ad-item + .vc-ad-item {
  margin-top: 10px;
}
.vc-ad-label {
  font: 700 .7rem "Barlow Condensed";
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vc-ink-soft);
  margin-bottom: .5rem;
}
/* 3 placeholder oglasna mesta umesto AdSense-a (noAdSense grana u _bs_tpl/vicoteka.php) - stubac
   mora ostati vidljiv, samo bez AdSense poziva; pravi izvor oglasa se definiše kasnije. Bez ikakvog
   okvira (border/pozadina/senka) - direktan zahtev da oglasi ne budu "ni u kakvom okviru", isto
   važi i za budući pravi baner. width:100% (ne fiksnih 300px) da se sam uklopi u .vc-ad-col-ovih
   stvarno dostupnih ~284px (300px kolona - .5rem levi padding), bez prelivanja preko ivice kolone.
   BEZ fiksne visine (height) - stvarna visina banera još nije poznata, kutija se sama sabija na
   visinu svog teksta/sadržaja preko padding-a umesto da se pretpostavlja bilo koja konkretna
   vrednost u pikselima. Privremena pozadina samo da se vizuelno vidi kako se zone uravnavaju
   tokom skrolovanja - bez okvira i dalje (direktan zahtev), samo boja za orijentaciju. */
.vc-ad-slot {
  box-sizing: border-box;
  width: 100%;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vc-accent-soft);
  color: var(--vc-ink-soft);
  font: 400 .85rem "Barlow Condensed";
  text-align: center;
}
/* Oglasno mesto uglavljeno u sam sadržaj, na ekranima ispod lg gde desnog stupca nema (markup:
   .vc-ad-inline.d-lg-none u _bs_tpl/vicoteka.php i _bs_inc/vicoteka/main_index.php). Bez ovog
   max-width-a bi se .vc-ad-slot (width:100%) razvukao preko cele širine sadržaja - baner je 300px
   i toliko sme da bude, centriran, sa malo vazduha iznad/ispod da se ne slepi sa vicevima. */
.vc-ad-inline {
  max-width: 300px;
  margin: 1rem auto;
}
/* PRIVREMENO: različita pozadina po zoni, samo da se golim okom vidi gde jedan baner prestaje a
   drugi počinje dok se proverava ponašanje pri skrolovanju. Obrisati zajedno sa placeholder-ima
   kad stignu pravi baneri. Klasa dolazi sa samog placeholder-a (vcAdSlot() je upisuje), pa boja
   važi isto i u stupcu i u uglavljenoj varijanti na uskim ekranima. */
.vc-ad-slot-1 { background-color: #d6e4f5; }
.vc-ad-slot-2 { background-color: #f7e2cf; }
.vc-ad-slot-3 { background-color: #d9eedb; }

/* --- main content column --- */
/* Custom flex column (replaces Bootstrap's col-lg-6), paired with .vc-kat-col above — takes
   whatever width is left between the narrowed sidebar and the ad column (still plain col-lg-3,
   fixed at exactly the 300px ad unit's real footprint) rather than a fixed 50% share, so the
   width freed up by narrowing the sidebar goes straight to this column instead of sitting unused. */
.vc-content-col {
  flex: 1 1 0%;
  min-width: 0;
  padding-right: .5rem;
  padding-left: .5rem;
}
.vc-kat-box-ttl {
  background-color: var(--vc-accent);
  color: #fff;
  font: 700 .85rem "Barlow Condensed";
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: .6rem 0;
}
.vc-kat-link, .vc-kat-link:hover {
  padding: .45rem .9rem;
  color: var(--vc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--vc-border);
  font: 400 .9rem "Barlow Semi Condensed";
}
.vc-kat-link:hover {
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent-dark);
}
.vc-kat-link:last-child {
  border-bottom: none;
}
.vc-kat-link-a, .vc-kat-link-a:hover {
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent-dark);
  font-weight: 700;
}

/* --- listing / detail titles --- */
.vc-listing-ttl {
  font: 700 1.5rem "Barlow Condensed";
  color: var(--vc-ink);
  margin-bottom: .75rem;
}
.vc-listing-ttl-user {
  color: #0000CC;
}
/* Sort tabs (Najnoviji/Najbolje ocenjeni/Sa najviše glasova) — right-aligned at every width,
   including the narrowest ones (a full-width edge-to-edge treatment was tried for narrow screens
   and rejected as ugly). Set as a plain rule rather than Bootstrap's .justify-content-end utility
   class, which carries !important and would block any future override attempt regardless of
   specificity (same class of bug as other Bootstrap-utility-vs-custom-CSS conflicts already hit
   in this project). */
.vc-sort-tabs {
  justify-content: flex-end;
}
.vc-notice {
  background-color: var(--vc-accent-soft);
  color: var(--vc-accent-dark);
  border-radius: 6px;
  padding: .6rem 1rem;
  font: 400 .9rem "Barlow Semi Condensed";
  margin-bottom: 1rem;
}
.vc-notice-error {
  background-color: #f8d7da;
  color: #842029;
}

/* --- "Pošalji vic" form (vicoteka/posalji.php) --- */
.vc-posalji-row {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: 1rem;
  max-width: 640px;
}
.vc-posalji-label {
  font: 700 .85rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vc-ink-soft);
}
.vc-posalji-select,
.vc-posalji-input {
  border: 1px solid var(--vc-border);
  border-radius: 4px;
  padding: .5rem .6rem;
  font: 400 1rem "Barlow Semi Condensed";
  color: var(--vc-ink);
  width: 100%;
  box-sizing: border-box;
}
.vc-posalji-textarea {
  resize: vertical;
}
.vc-posalji-buttons {
  max-width: 640px;
}

/* --- "Moji vicevi" list (vicoteka/moji-vicevi.php) --- */
.vc-my-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.vc-my-row {
  background-color: #fff;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  padding: .75rem 1rem;
}
/* NOT display:flex, deliberately - was flex before, which is what caused a real, confirmed bug:
   a long .vc-my-title wraps onto 2+ lines by itself (normal text wrapping inside that one flex
   item's box), but flexbox lays out siblings as separate boxes along the main axis - it has no
   concept of "flow into the leftover space after a sibling's wrapped last line" the way plain
   inline content does, so .vc-my-status got pushed onto its own flex line below the title instead
   of sitting right after it ("u produžetku"). Fixed by going back to normal inline flow instead:
   .vc-my-title/.vc-my-status are plain inline(-block) content that wraps together like text, and
   .vc-my-toggle is floated right (overflow:hidden here gives it a proper containing block so the
   row's height doesn't collapse around the float). */
.vc-my-row-main {
  overflow: hidden;
}
.vc-my-toggle {
  float: right;
}
.vc-my-title {
  font: 700 1rem "Barlow Semi Condensed";
  color: var(--vc-ink);
  text-decoration: none;
}
a.vc-my-title:hover {
  color: var(--vc-accent);
}
.vc-my-status {
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
  font: 700 .7rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border-radius: 4px;
}
.vc-my-status-ok {
  background-color: #d1e7dd;
  color: #0f5132;
}
.vc-my-status-wait {
  background-color: #fff3cd;
  color: #664d03;
}
.vc-my-status-no {
  background-color: #f8d7da;
  color: #842029;
}
.vc-my-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-top: .3rem;
  font: 400 .85rem "Barlow Semi Condensed";
  color: var(--vc-ink-soft);
}
/* Only the "Razlog:" LABEL reads in the same soft-ink color as the category/date siblings (direct
   request) - the reason VALUE itself keeps its own original distinguishing red (#842029), only the
   label word was ever meant to match. Wrapped together with the delete button in
   .vc-my-reason-wrap so the two move as one unit rather than splitting apart independently -
   .vc-my-row-meta's own flex-wrap has no idea they belong together otherwise. Below 480px this pair
   is forced onto its own line unconditionally (flex-basis: 100%) rather than only wrapping
   opportunistically when it doesn't fit - direct request ("na užim ekranima razlog i button OBRIŠI
   moraju da pređu u naredni red"), a stronger requirement than plain flex-wrap alone provides. */
.vc-my-reason-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.vc-my-reason {
  color: #842029;
}
.vc-my-reason-label {
  color: var(--vc-ink-soft);
}
@media (max-width: 480px) {
  .vc-my-reason-wrap {
    flex-basis: 100%;
  }
}
/* Expand/collapse arrow revealing a row's full joke text, direct request ("kao što se na
   hamburger meniju otvaraju podmeniji") - "Moji vicevi" only ever showed a title (or, for
   pending/rejected rows with no real title yet, a 60-char excerpt), never the full text, unlike
   the main public listing's cards. Same mechanism as .mnav-toggle in main_nav.css: rotating
   chevron icon + a max-height-transitioned panel, just re-implemented here with this module's own
   class names since it's a different page/stylesheet, not a shared component. Each row toggles
   independently (not a mutually-exclusive accordion like the hamburger menu's submenus) - there's
   no strong reason to force only one open at a time in a list meant for comparing your own jokes. */
.vc-my-toggle {
  /* float: right (see .vc-my-row-main's own comment) does the "push to the right edge" job that
     margin-left: auto used to do back when this was a flex child - display:flex/align-items here
     now only center the icon glyph within the button's own small box, unrelated to the parent's
     layout mode. */
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--vc-ink-soft);
  display: flex;
  align-items: center;
}
.vc-my-toggle .material-symbols-outlined {
  font-size: 22px;
  transition: transform .2s ease;
}
.vc-my-row.is-expanded .vc-my-toggle .material-symbols-outlined {
  transform: rotate(180deg);
}
.vc-my-text-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.vc-my-row.is-expanded .vc-my-text-panel {
  max-height: 600px;
}
.vc-my-text {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--vc-border);
  font: 400 .9rem "Barlow Semi Condensed";
  color: var(--vc-ink);
  white-space: pre-line;
}
/* "Obriši" button on rejected rows, direct request ("na vicevima koji su odbijeni, mora da postoji
   button 'obriši'") - a rejected vcPending row otherwise sits there forever with no way for the
   submitter to clean it up. Small/muted on purpose - a delete action shouldn't visually compete
   with the row's own content. */
.vc-my-delete-btn {
  background: none;
  border: 1px solid #842029;
  color: #842029;
  font: 600 .75rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .15rem .5rem;
  border-radius: 4px;
  cursor: pointer;
}
.vc-my-delete-btn:hover {
  background-color: #842029;
  color: #fff;
}
/* Custom confirm modal - this project deliberately never uses the native confirm()/alert() dialogs
   anywhere (public site or admin), always a real styled modal instead, so this follows the same
   convention rather than being a one-off exception. */
.vc-confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.vc-confirm-box {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}
.vc-confirm-title {
  font: 700 1.1rem "Barlow Condensed";
  text-transform: uppercase;
  color: #842029;
  margin-bottom: .5rem;
}
.vc-confirm-text {
  font: 400 .95rem "Barlow Semi Condensed";
  color: var(--vc-ink);
  margin-bottom: 1rem;
}
.vc-confirm-buttons {
  display: flex;
  gap: .5rem;
  justify-content: center;
}
.vc-confirm-cancel {
  background: none;
  border: 1px solid var(--vc-border);
  color: var(--vc-ink-soft);
  padding: .375rem 1rem;
  border-radius: 4px;
  font: 600 .9rem "Barlow Condensed";
  cursor: pointer;
}
.vc-confirm-cancel:hover {
  background-color: #f1f1f1;
}
.vc-random-ttl {
  font: 700 1.1rem "Barlow Condensed";
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vc-accent-dark);
  border-top: 2px solid var(--vc-accent);
  padding-top: .75rem;
  margin: 1rem 0;
}
.vc-random-more {
  text-align: center;
  margin: 1rem 0;
}
.vc-random-more a {
  color: var(--vc-accent-dark);
  font: 700 .95rem "Barlow Condensed";
  text-decoration: none;
}

/* --- search --- */
/* .vc-find-form ima 2 direktna deteta (tekstualno polje, .vc-find-row2 omotač oko kategorije i
   dugmeta) - flex-direction:column ispod 768px slaže njih dva jedno ispod drugog (svako puna
   širina preko align-items:stretch-a), flex-direction:row od 768px na gore ih ređa u jedan red
   (samo tekstualno polje raste, ostalo drži svoju prirodnu širinu). Kategorija i dugme su namerno
   u zajedničkom .vc-find-row2 redu na SVIM širinama (ne samo od 768px), isti obrazac kao recepti-
   jevo .rc-find-row2 - jedna padajuća lista i dugme jedno pored drugog čitljivije stoje nego svako
   u svom punom redu na uskom ekranu. Sortiranje unutar pretrage je uklonjeno - kombinovanje sa
   "najbolje ocenjeni" sortom (koji filtrira samo vicove sa 5+ glasova) je unosilo zabunu jer je
   moglo neočekivano da sakrije stvarne rezultate pretrage; pretraga je sad fiksno sortirana po
   najnovijim, kao kod recepti. */
.vc-search-btn {
  background-color: var(--vc-accent);
  color: #fff;
  border: none;
  padding: .375rem 1rem;
  border-radius: 4px;
  font: 600 .9rem "Barlow Condensed";
  white-space: nowrap;
  transition: background-color .15s ease-in-out;
}
.vc-search-btn:hover {
  background-color: var(--vc-accent-dark);
  color: #fff;
}
.vc-search-reset {
  color: var(--vc-accent);
}
.vc-find-form {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.vc-find-row2 {
  display: flex;
  gap: .5rem;
}
/* Explicit flex-GROW ratios (basis:0%, not literal percentage flex-basis) so the split stays
   exact regardless of the row's own gap - a literal "flex-basis: 70%" on both items would sum to
   100% of the content box BEFORE the gap is subtracted, causing a slight overflow since these
   items don't shrink (flex-shrink 0 would be needed, which then breaks on very narrow width).
   Ratios distributed against the post-gap free space sidestep that entirely and hit the requested
   split exactly at any container width. Two rows below (row2 alone = 70/30, req 30%/20% -> ratio
   3:2 of the whole row once combined with the 50% left for the input). */
.vc-find-select {
  /* Explicit non-auto flex-basis (0%, not "auto") — Bootstrap's own .form-select class sets
     width:100%, and "flex: <n> <n> auto" falls back to reading that width as the flex-basis,
     which can throw off sizing inside a flex row in non-obvious ways. flex-basis:0% sidesteps it
     entirely by never consulting the width property at all. */
  flex: 7 1 0%;
  min-width: 0;
}
.vc-find-row2 .vc-search-btn {
  flex: 3 1 0%;
}
@media (min-width: 768px) {
  .vc-find-form {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
  }
  .vc-find-input {
    /* Same flex-basis:0% reasoning as .vc-find-select above — Bootstrap's .form-control also sets
       width:100%. */
    flex: 5 1 0%;
    min-width: 0;
  }
  /* display:contents un-boxes the wrapper so .vc-find-select/.vc-search-btn become direct flex
     items of .vc-find-form itself - their ratio is then computed against the WHOLE row's free
     space (input+select+button, 5:3:2 = 50%/30%/20%) instead of just row2's own box, matching the
     "of available width" wording used for the one-row case specifically (vs. "of the row" for the
     two-row case, which is row2's own width - see the un-nested rule above). Descendant selectors
     below still match through display:contents (it only affects the box/render tree, not the DOM
     the selectors walk). */
  .vc-find-row2 {
    display: contents;
  }
  .vc-find-select {
    flex: 3 1 0%;
  }
  .vc-find-row2 .vc-search-btn {
    flex: 2 1 0%;
  }
}

/* --- pagination --- */
.vc-pages, .vc-pages-dis {
  box-sizing: border-box;
  border: 1px solid transparent;
}
.vc-pages {
  font: normal .875rem Oswald;
  /* Lightened from --vc-ink (near-black, #222) — same neutral color family, just not as harsh
     next to the light-grey disabled links right beside it. Still a dark neutral, not re-colored. */
  background-color: #454545;
  color: #fff;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.vc-pages:hover {
  background-color: var(--vc-ink);
  color: #fff;
}
.vc-pages-dis {
  font: normal .875em Oswald;
  background-color: #f7f9fb;
  color: #b7bec7;
  /* Darkened from #c9d1da - the original border was nearly invisible against the #f7f9fb
     background it sits on. */
  border-color: #93a1b0;
}
/* Page-info cell ("strana X od Y") only - a stronger, more readable font color than the plain
   disabled nav links (« / prethodna strana) share via .vc-pages-dis above, since this cell
   carries actual information (current page) rather than just being an inert disabled control. */
.vc-pages-info {
  color: #5a6675;
}

/* --- joke card --- */
.vc-joke-card {
  background-color: #fff;
  border: 1px solid var(--vc-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  /* Was the Bootstrap mb-4 utility class in the markup — moved into plain CSS so the last card's
     margin can actually be zeroed out below (mb-4 carries !important, which a custom override can
     never win against regardless of selector specificity). */
  margin-bottom: 1.5rem;
  /* Establishes a query container so .vc-joke-meta below can react to THIS card's own rendered
     width, not the viewport's — see the container-query note there for why that distinction is
     the whole point. */
  container-type: inline-size;
}
/* The gap above/below pagination used to be inconsistent — collapsing with whatever preceded it
   (this card's own 1.5rem mb-4-equivalent, or the sort-tabs/notice's own mb-3) always produced a
   bigger gap than pagination's own .25rem (my-1) contributes on the OTHER side, where nothing
   competes with it. Zeroing the last card's own bottom margin here (and the equivalent mb-3 cases
   in _bs_inc/vicoteka/main_index.php) lets pagination's own .25rem be the sole, consistent
   contributor on every side of every pagination instance. */
.vc-joke-list > .vc-joke-card:last-child {
  margin-bottom: 0;
}
.vc-joke-meta {
  /* Full-bleed colored header band above the joke text, direct request. .vc-joke-card's own
     padding (1rem 1.25rem) applies uniformly, so a plain background-color here would only tint
     the meta content's own tight box, not reach the card's edges - negative margins pull this
     strip out to the card's own padding edges (top/left/right, matching .vc-joke-card's own
     border-radius on top so the rounded corners stay clean), then padding puts equivalent
     breathing room back so the id/date/share content isn't flush against the new edges. Color is
     --vc-meta-bg, not --vc-accent-soft (too dark per direct follow-up - lighter than even
     --vc-share-bg, the share-icon circles' own background). */
  background-color: var(--vc-meta-bg);
  margin: -1rem -1.25rem .5rem -1.25rem;
  padding: .6rem 1.25rem;
  border-radius: 8px 8px 0 0;
}
/* On narrow (wrapped) screens .vc-joke-meta's content drops the share icons onto their own line
   below this text instead of side by side, with no gap between the two rows otherwise. The extra
   gap is applied ONLY inside the @container wrapped block below (.6rem there), not here as a base
   rule — a base-level increase was tried once and broke vertical centering on wide screens too,
   confirmed live: align-items:center centers each flex item's margin box, so a bigger
   margin-bottom shifts the item's own visual center upward relative to its siblings even in the
   normal side-by-side row layout, not just once wrapped as originally assumed. Base margin-bottom
   here stays at .35rem, the value the top:3px correction below was originally tuned against. */
.vc-joke-idline {
  margin-bottom: .35rem;
  /* Boxes are already mathematically centered against .vc-joke-share (verified via
     getBoundingClientRect - both compute to the same vertical center within .vc-joke-meta), but
     14px text next to 32px icon circles reads visibly high regardless, same root cause as the
     footer icon nudge above. Small manual correction, screenshot-verified. */
  position: relative;
  top: 3px;
}
/* Container query, not a viewport media query — deliberately. .vc-joke-meta's own content
   (id/date/category text + share icons) wraps whenever the CARD's rendered width drops below
   ~538px (measured directly: 535px wraps, 540px doesn't), and the card's width depends on the
   page layout (sidebar visible or not, column width) which is NOT the same thing as the viewport
   width. A viewport media query here was a real, confirmed bug — e.g. a browser window wide
   enough to keep the desktop sidebar visible could still render a card narrow enough to wrap
   (sidebar eats width a mobile layout wouldn't lose), landing in a "wrapped but not centered"
   dead zone the old @media (max-width:480px) rule never covered, since viewport width alone
   never dropped below its own 480px trigger. @container reacts to the card's actual width
   instead, so this can't happen regardless of what shares the row with the joke list. Threshold
   is 550px (not the measured 538px) for a small safety margin so column mode kicks in at/before
   the real wrap point rather than right at it. flex-direction here is a plain rule (no Bootstrap
   utility sets it), so no !important conflict to work around; align-self on each child only
   affects that one child regardless of the parent's own align-items utility class, since
   align-self always wins for the item it's set on. */
@container (max-width: 550px) {
  .vc-joke-meta {
    flex-direction: column;
  }
  .vc-joke-idline {
    align-self: center;
    margin-bottom: .6rem;
  }
  .vc-joke-share {
    align-self: center;
  }
}
.vc-joke-text {
  white-space: pre-line;
  color: var(--vc-ink);
  font-family: Barlow, Tahoma, Helvetica, "sans-serif";
  line-height: 1.5;
  margin-bottom: .75rem;
  text-align: justify;
}
.vc-joke-footer {
  border-top: 1px solid var(--vc-border);
  padding-top: .6rem;
}
/* Boxes are already mathematically centered (verified via getBoundingClientRect - both groups
   compute to the exact same vertical center), but the link/user glyphs' own ink doesn't fill
   their box as symmetrically as the star glyphs do, so they visually read a couple px high next
   to the star row. Small manual nudge to compensate, screenshot-verified. */
.vc-joke-footer-left {
  position: relative;
  top: 2px;
}
.vc-joke-permalink {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--vc-ink-soft);
  text-decoration: none;
}
.vc-joke-permalink:hover {
  color: var(--vc-accent);
}
.vc-joke-permalink-svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.vc-joke-poster {
  line-height: 1;
  color: var(--vc-ink-soft);
  text-decoration: none;
}
.vc-joke-poster:hover {
  color: var(--vc-accent);
}
.vc-joke-poster-svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.vc-joke-votes {
  color: var(--vc-ink-soft);
}

/* --- rating --- */
/* Two stacked copies of the glyph per star (empty background + a gold copy clipped to a % width)
   instead of a single glyph toggled on/off — lets the average render with its actual fractional
   fill (e.g. 3.6 shows a star 60% filled) rather than rounding to the nearest whole star, which
   used to visibly disagree with the numeric average next to it. Matches how the old pre-_bs_ site
   rendered ratings (precise both numerically and visually). */
.vc-rating {
  display: flex;
}
@media (pointer: coarse) {
  /* Stars sit flush against each other by default — fine with a mouse cursor, but on a touch
     screen it's easy to miss and tap the neighboring star. A small gap gives each star its own
     tappable margin without changing how the fill/hover mechanics work (each star is still its
     own separate .vc-star-wrap). Targets touch input directly (pointer: coarse) instead of a
     viewport-width breakpoint — a phone in landscape can be well past any "narrow screen" cutoff
     and still have exactly the same fat-finger problem, since the issue is the input method, not
     how wide the screen happens to be at the moment. */
  .vc-rating {
    gap: .35rem;
  }
}
.vc-star-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.vc-rating[data-readonly="1"] .vc-star-wrap {
  cursor: default;
}
.vc-star {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  transition: fill .1s ease-in-out;
}
.vc-star-bg {
  fill: #ddd1cd;
}
.vc-star-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: width .1s ease-in-out;
}
.vc-star-fill .vc-star {
  fill: #d99a2b;
}
/* Already-rated/locked state gets its own color instead of the same gold as the interactive
   widget — sampled directly from the old site's real rateit star.gif sprite (its "preset" row,
   used for exactly this same already-voted/readonly state), not picked arbitrarily. */
.vc-rating[data-readonly="1"] .vc-star-fill .vc-star {
  fill: #ec6b22;
}

/* --- share bar --- */
@media (max-width: 480px) {
  .vc-share-bar {
    gap: .35rem !important;
  }
}
.vc-share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--vc-share-bg);
  transition: background-color .15s ease-in-out, transform .15s ease-in-out;
}
.vc-share-icon:hover {
  background-color: var(--brand-color, var(--vc-accent));
  transform: translateY(-2px);
}
.vc-share-svg {
  width: 22px;
  height: 22px;
}
/* Mail's source artwork (email.svg) reads slightly flatter/wider than the other icons — a couple
   extra px of height (stretched via preserveAspectRatio="none" on the svg itself) gives it a more
   natural envelope proportion; width stays the same 22px as every other icon. */
.vc-share-icon[data-key="mail"] .vc-share-svg {
  height: 26px;
}
.vc-share-icon:hover .vc-share-svg {
  fill: #fff !important;
}