@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
  --kh-accent: #7a2e42;
  --kh-accent-dark: #4a1b28;
  --kh-accent-soft: #e9d3da;
  /* Pozadina spoljnog breadcrumb "rama" (.bcrumb-outer, standard.css) - ista nijansa kao
     --kh-accent-soft, samo posvetljena (direktan zahtev - "dobra je nijansa, samo da bude
     svetlija"), zato poseban hex umesto var(--kh-accent-soft) direktno. */
  --bcrumb-outer-bg: #F2E6EA;
  --kh-ink: #2b2320;
  --kh-ink-soft: #7a6f68;
  --kh-bg: #faf7f5;
  --kh-card-bg: #ffffff;
  --kh-border: #e8ded9;
  --kh-font-display: 'Lora', Georgia, 'Times New Roman', serif;
}

.kh-page {
  background-color: var(--kh-bg);
}

.kh-display {
  font-family: var(--kh-font-display);
}

/* --- top nav submenu --- */
.kh-menu-btn {
  font: normal 14px Oswald;
  background-color: var(--kh-accent);
  color: var(--kh-accent-soft);
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.kh-menu-btn:hover {
  background-color: var(--kh-accent-soft);
  color: var(--kh-accent);
}
.kh-menu-btn:active, .kh-menu-btn:focus, .kh-menu-btn:target, .kh-menu-btn:active:focus {
  background-color: var(--kh-accent-dark);
  color: #fff;
}

.kh-menu-btn-a, .kh-menu-btn-a:hover, .kh-menu-btn-a:active, .kh-menu-btn-a:focus, .kh-menu-btn-a:target, .kh-menu-btn-a:active:focus {
  font: normal 14px Oswald;
  background-color: var(--kh-accent-soft);
  color: var(--kh-accent-dark);
}

/* --- pagination --- */
.kh-pages, .kh-pages-dis {
  box-sizing: border-box;
  border: 1px solid transparent;
}
.kh-pages {
  font: normal .875rem Oswald;
  background-color: var(--kh-ink);
  color: var(--kh-accent-soft);
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.kh-pages:hover {
  background-color: var(--kh-accent);
  color: #fff;
}
.kh-pages:active, .kh-pages:focus, .kh-pages:target, .kh-pages:active:focus {
  background-color: var(--kh-accent-dark);
  color: #fff;
}
.kh-pages-dis {
  font: normal .875em Oswald;
  background-color: var(--kh-bg);
  color: #b8aea8;
  border-color: #c7b6ae;
}

/* --- category sibling nav (plain text links, separated by | ) --- */
.kh-subgroup-link, .kh-subgroup-link:hover {
  color: var(--kh-ink);
  text-decoration: none;
  transition: color .15s ease-in-out;
}
.kh-subgroup-link:hover {
  color: var(--kh-accent);
}
.kh-subgroup-link-a, .kh-subgroup-link-a:hover {
  color: var(--kh-accent);
  text-decoration: none;
}
.kh-subgroup-sep {
  color: var(--kh-border);
}

/* --- filter chips (checkbox-style toggles, not nav buttons) --- */
/* Own dedicated container class (not Bootstrap's d-flex/flex-wrap utilities) specifically so this
   can be forced to a permanent single row with no !important fight — flex-wrap utility classes
   carry !important and were exactly what let these 3 chips break across two lines whenever the
   composed search+filter row got squeezed — see lisica-bootstrap-grid-css-gotchas memory #3.
   flex-wrap: nowrap here is unconditional (never toggled by any breakpoint) — the 3 chips must
   never split internally, full stop. Alignment DOES follow the same `md` breakpoint the outer
   search+filter row itself stacks/unstacks at (see main_index.php/po-grupama/main_index.php):
   centered when this bar is stacked below the search box (mobile), right-aligned once it sits
   beside it (desktop) — the two need to change together since a centered chip group would look
   adrift sitting in the leftover space next to a left-hugging search box. */
.kh-filter-bar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1rem;
}
@media (min-width: 768px) {
  .kh-filter-bar {
    justify-content: flex-end;
  }
}
.kh-filter-chip {
  gap: .2rem;
  text-decoration: none;
  color: var(--kh-ink-soft);
  white-space: nowrap;
  transition: color .15s ease-in-out;
}
.kh-filter-chip:hover {
  color: var(--kh-accent);
}
.kh-filter-icon {
  font-size: 1.35rem;
  color: var(--kh-ink-soft);
}
.kh-filter-label {
  font: 400 .9375rem "Barlow Condensed";
}
.kh-filter-chip-a {
  color: var(--kh-ink);
  font-weight: 600;
}
.kh-filter-chip-a .kh-filter-icon {
  color: var(--kh-accent);
}
/* Shrunk just enough that 3 chips still fit one row on the narrowest real phones, without ever
   needing to wrap — same 480px threshold used site-wide (lisica-bootstrap-grid-css-gotchas #5). */
@media (max-width: 480px) {
  .kh-filter-bar {
    gap: .6rem;
  }
  .kh-filter-chip {
    gap: .15rem;
  }
  .kh-filter-icon {
    font-size: 1.35rem;
  }
  .kh-filter-label {
    font-size: .9375rem;
  }
}

/* --- search --- */
.kh-search-btn {
  background-color: var(--kh-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;
}
.kh-search-btn:hover {
  background-color: var(--kh-accent-dark);
  color: #fff;
}
.kh-search-reset {
  color: var(--kh-accent);
}

/* Search form (text input + category select + submit): two equal-width rows by default (row 1 =
   input alone, row 2 = select + "Traži" button together), merging into one single row from 768px
   up (Bootstrap's own `md` breakpoint) — a plain width-based media query, not organic flex-wrap.
   Organic wrap (letting the browser decide row-vs-column from available space) was tried twice and
   both times broke unpredictably in real testing; a fixed, testable pixel threshold is what
   actually behaves consistently. 768px also matches the outer search+filter row's own stacking
   breakpoint (main_index.php/po-grupama/main_index.php's `flex-md-row`), so both switch state
   together rather than at two slightly different, unrelated widths. Below 768px,
   flex-direction:column's default align-items:stretch is what makes both rows exactly as wide as
   each other with zero extra arithmetic: every direct
   child of a column-direction flex container stretches to the container's full cross-axis width
   unless told otherwise, so the input (row 1) and the select+button group (row 2, itself just one
   such child) both end up spanning the exact same width automatically. */
.kh-find-form {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.kh-find-row2 {
  display: flex;
  gap: .5rem;
}
.kh-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: 1 1 0%;
  min-width: 0;
}
@media (min-width: 768px) {
  .kh-find-form {
    flex-direction: row;
    gap: .5rem;
  }
  .kh-find-input {
    /* Same flex-basis:0% reasoning as .kh-find-select above — Bootstrap's .form-control also sets
       width:100%. */
    flex: 1 1 0%;
    min-width: 0;
  }
  .kh-find-row2 {
    flex: 0 0 auto;
  }
}

/* --- recipe card --- */
a.kh-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background-color: var(--kh-card-bg);
  border: 1px solid var(--kh-border);
  transition: transform .18s ease-in-out, box-shadow .18s ease-in-out, border-color .18s ease-in-out;
}
a.kh-card:hover {
  transform: translateY(-3px);
  border-color: var(--kh-accent);
  box-shadow: 0 14px 28px -16px rgba(74, 27, 40, .35);
}
.kh-card-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--kh-accent-soft);
}
.kh-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease-in-out;
}
a.kh-card:hover .kh-card-img-wrap img {
  transform: scale(1.05);
}
.kh-card-body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kh-card-title {
  font-family: var(--kh-font-display);
  color: var(--kh-ink);
  /* A fixed height: 56px + overflow: hidden used to clip this — fine while the card was wide
     enough for the title to wrap at most 2 lines, but once cards went to 2-per-row on narrow
     screens the title wraps to 3 lines more often, and 56px isn't an exact multiple of the line
     height, so the top sliver of that 3rd line peeked out above the clip. line-clamp always cuts
     cleanly after a whole line instead.
     line-clamp alone only caps the MAXIMUM height though — it doesn't reserve that height for
     SHORTER titles, so a 1-line title left the star/time row sitting right underneath it while a
     2-line title on a neighboring card pushed that row further down, no longer at the same height
     across the grid. min-height (2 lines' worth) forces every title to occupy the same space
     regardless of its real length, so .kh-card-meta — now rendered directly after the title, with
     the diet-badge row moved below it instead of above — sits at a consistent height on every
     card regardless of that badge row's presence/absence. */
  line-height: 1.3;
  min-height: calc(1.25rem * 1.3 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kh-card-badge {
  font: 600 .7rem "Barlow Condensed";
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  border-radius: 100px;
}
.kh-card-badge.vege { background-color: #e5f3e8; color: #2e7d47; }
.kh-card-badge.posno { background-color: #fbeed9; color: #a15b0a; }
.kh-card-badge.makro { background-color: #e3edf5; color: #2f6690; }
@media (max-width: 480px) {
  /* Same fix as the blog article grid: equalize the row's horizontal/vertical gutter (was 1rem
     horizontal via gx-3 vs 1.5rem vertical via a per-card mb-4) and trim the card's own internal
     padding a bit so two-per-row cards don't feel cramped on the narrowest screens. */
  .kh-card-grid {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
  }
  .kh-card-body {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}
.kh-card-meta {
  color: var(--kh-ink-soft);
}

/* --- hero card (featured/newest) --- */
.kh-hero {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--kh-ink);
  text-decoration: none;
  display: block;
}
.kh-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: transform .4s ease-in-out, opacity .2s ease-in-out;
}
.kh-hero:hover .kh-hero-img {
  transform: scale(1.03);
  opacity: .9;
}
.kh-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,10,12,0) 35%, rgba(20,10,12,.86) 100%);
  pointer-events: none;
}
.kh-hero-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
  color: #fff;
}
.kh-hero-eyebrow {
  font: 700 .75rem "Barlow Condensed";
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kh-accent-soft);
}
.kh-hero-title {
  font-family: var(--kh-font-display);
  font-weight: 700;
  font-size: 1.9rem;
  text-wrap: balance;
  margin: .35rem 0;
}
.kh-hero-desc {
  font: 400 .95rem "Barlow Semi Condensed";
  color: #eadfdc;
  max-width: 46ch;
}

/* --- 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). */
.kh-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 .kh-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. */
  .kh-rating {
    gap: .35rem;
  }
}
.kh-star-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.kh-rating[data-readonly="1"] .kh-star-wrap {
  cursor: default;
}
.kh-star {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  transition: fill .1s ease-in-out;
}
.kh-star-bg {
  fill: #ddd1cd;
}
.kh-star-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: width .1s ease-in-out;
}
.kh-star-fill .kh-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. */
.kh-rating[data-readonly="1"] .kh-star-fill .kh-star {
  fill: #ec6b22;
}

/* --- detail page --- */
.kh-detail-hero {
  border-radius: 10px;
  overflow: hidden;
}
.kh-detail-hero img {
  width: 100%;
  height: auto;
  display: block;
}
.kh-title {
  font-family: var(--kh-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.5rem);
  color: var(--kh-ink);
  text-wrap: balance;
}
.kh-meta-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--kh-border);
  border-bottom: 1px solid var(--kh-border);
}
.kh-meta-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kh-meta-props {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .75rem;
}
@media (min-width: 768px) {
  .kh-meta-strip {
    flex-direction: row;
    justify-content: space-between;
  }
  .kh-meta-props {
    justify-content: flex-end;
  }
}
.kh-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  color: var(--kh-ink-soft);
  min-width: 64px;
}
.kh-meta-icon {
  color: var(--kh-accent);
  font-size: 1.6rem;
}
.kh-meta-value {
  font: 600 .85rem "Barlow Condensed";
  color: var(--kh-ink);
  text-align: center;
}
.kh-desc {
  font-family: var(--kh-font-display);
  font-style: italic;
  color: var(--kh-accent-dark);
}

.kh-section-title {
  font: 700 .78rem "Barlow Condensed";
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kh-accent);
  padding-bottom: .4rem;
  margin-bottom: .9rem;
  border-bottom: 2px solid var(--kh-accent);
}

.kh-sastojci-sticky {
  position: sticky;
  top: 1rem;
}
.kh-sastojci-celina {
  margin-bottom: 14px;
}
.kh-sastojci-celina-title {
  color: var(--kh-accent-dark);
  margin-bottom: 4px;
}
.kh-sastojak {
  border-bottom: 1px dotted var(--kh-border);
  padding: 3px 0;
  color: var(--kh-ink);
}

.kh-priprema-celina-title {
  color: var(--kh-accent-dark);
  margin-bottom: 4px;
}
.kh-priprema-text {
  line-height: 1.5;
  color: var(--kh-ink);
}

.kh-footer-info {
  background-color: var(--kh-accent-soft);
  border-radius: 8px;
}
.kh-footer-info .kh-footer-label {
  font: 700 .7rem "Barlow Condensed";
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kh-accent);
}
.kh-footer-info strong {
  color: var(--kh-ink);
}
.kh-footer-info a {
  color: var(--kh-accent-dark);
}
/* Poreklo/Kategorija/Autor stays 3-across at every width (col-4, not col-12 col-md-4) — direct
   request. Label/value shrink a bit below 480px so a longer category name/username doesn't wrap
   onto 3+ lines inside a ~33%-wide cell on a narrow phone (same 480px threshold used site-wide,
   see lisica-bootstrap-grid-css-gotchas memory #5). */
@media (max-width: 480px) {
  .kh-footer-info .kh-footer-label {
    font-size: .62rem;
    letter-spacing: .04em;
  }
  .kh-footer-info strong {
    font-size: .95rem;
  }
}

@media (max-width: 991.98px) {
  .kh-sastojci-sticky { position: static; }
}

/* --- badges + print/pdf actions row (recipe detail page) --- */
.kh-badges-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.kh-badges-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.kh-actions-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .kh-badges-actions {
    flex-direction: row;
    justify-content: center;
  }
  .kh-badges-actions.has-badges {
    justify-content: space-between;
  }
}

.kh-share-row {
  display: flex;
  justify-content: center;
}

/* --- print link (screen state) --- */
.kh-print-link, .kh-print-link:hover {
  gap: .35rem;
  text-decoration: none;
  color: var(--kh-accent);
}
.kh-print-icon {
  font-size: 1.2rem;
}
.kh-print-link-disabled {
  color: var(--kh-ink-soft);
  cursor: not-allowed;
  opacity: .55;
}

/* --- share bar (recipe detail page) --- */
/* Isti "invert" tretman kao Vicoteka (vc_standard.css, "--- share bar ---" - pun komentar/rezonovanje
   tamo). :not(.share-icon-invert) namerno izostavlja X/Threads iz ovog opšteg pravila - njihovo mirno
   stanje već izgleda identično (postojeći .share-icon-invert mehanizam u standard.css, netaknut),
   dobijaju samo dodatnu hover-inverziju. */
.kh-share-bar .share-icon:not(.share-icon-invert) {
  background-color: #fff;
}
.kh-share-bar .share-icon:not(.share-icon-invert) .share-icon-svg {
  fill: var(--brand-color, #666) !important;
}
.kh-share-bar .share-icon:not(.share-icon-invert):hover {
  background-color: var(--brand-color, #666);
}
.kh-share-bar .share-icon:not(.share-icon-invert):hover .share-icon-svg {
  fill: #fff !important;
}
.kh-share-bar .share-icon-invert:hover {
  background-color: #000;
}
.kh-share-bar .share-icon-invert:hover .share-icon-svg {
  fill: #fff !important;
}

/* --- layout: content column + right ad column (desktop-only) --- */
/* Isti mehanizam kao Blog/Vicoteka (.bo-content-col/.bo-ad-col/.bo-ad-column/.bo-ad-zone/
   .bo-ad-item) - Kuhinja nema levi kategorija-sidebar (kategorije su u top nav-u), pa je ovo samo
   dvostubačna mreža: sadržaj + oglasi. Vidi _bs_js/kuhinja/khAds.js za JS deo (raspored zona,
   "sudar i guranje" pri skrolu). */
.kh-content-col {
  flex: 1 1 0%;
  min-width: 0;
  padding-right: .5rem;
  padding-left: .5rem;
}
.kh-ad-col {
  box-sizing: border-box;
  flex: 0 0 300px;
  max-width: 300px;
  padding-left: .5rem;
}
.kh-ad-column {
  min-height: calc(100% - .25rem);
  position: relative;
}
.kh-ad-zone {
  position: absolute;
  left: 0;
  right: 0;
}
.kh-ad-item {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Ista zaštita od širenja preko granica kontejnera kao .bo-ad-inline/.kh-ad-inline (vidi
     komentar niže) - dosad primenjena samo na uklopljena/mobilna mesta, ne i na ovaj, desni
     sticky stubac - direktan izveštaj ("desni stubac iskače udesno") potvrdio da isti problem
     (spoljni oglasni servis čija je unutrašnja širina vezana za viewport, ne za pravog roditelja)
     pogađa i sticky stubac, ne samo uklopljena mesta. */
  overflow: hidden;
}
.kh-ad-item + .kh-ad-item {
  margin-top: 10px;
}
.kh-ad-unit + .kh-ad-unit {
  margin-top: 10px;
}
.kh-ad-unit img,
.kh-ad-unit ins {
  max-width: 100%;
  height: auto;
}
/* Oglasno mesto uglavljeno u sam sadržaj, ispod lg gde desnog stupca nema - isti obrazac kao
   .bo-ad-inline/.vc-ad-inline. text-align:center centrira stvarni <ins> (uži od punog
   kontejnera), overflow:hidden sprečava da AdSense-ov "matched content" stil probije širinu
   kontejnera (potvrđena, dokumentovana AdSense specifičnost, vidi bo_standard.css). */
.kh-ad-inline {
  max-width: 100%;
  margin: .5rem auto;
  text-align: center;
  overflow: hidden;
}

/* Actual printing is handled by the dedicated kuhinja/recipe/print.php page
   (_bs_css/kh_print.css) — a minimal standalone document with no shared site
   chrome, rather than an in-page @media print override, since reliably hiding
   every piece of shared header/footer/mobile-nav chrome via print media
   proved fragile (e.g. the mobile-only icon row isn't reliably excluded by
   print media the way d-lg-none excludes it on screen). */