/* ==========================================================
   BAZA ZNANJA / KNOWLEDGE BASE
   Kanonska kopija: aso-kb/wordpress/06-kb.css
   Gradi na tokenima iz 00-base.css, ne uvodi novu paletu.
   ========================================================== */

:root {
  --kb-a: #4FE3A5;
  --kb-b: #FFB340;
  --kb-c: #FF7A7A;
  --kb-sidebar-w: 260px;
}

/* ---------- light theme ----------
   Redefines the same tokens 00-base.css sets on :root, scoped to
   html[data-theme="light"]. That selector alone outranks :root on
   specificity, so this wins without touching 00-base.css or depending on
   file load order, and because every themed rule on the site is already
   written against these var() names (not literal colours), the whole
   rendered page repaints light: header and footer included, not just the
   knowledge base body. Only ever set on a knowledge base template (see the
   toggle script below and the wp_head hook in functions.php), so it has no
   effect on the rest of the site. Accent and amber are darkened a shade
   from their dark-mode values for text contrast on a light background. */
html[data-theme="light"] {
  --bg: #F7FAF8;
  --card: #FFFFFF;
  --card-hover: #F0F4F1;
  --border: #DCE3DF;
  --border-hover: #C7D1CB;
  --text: #0E1210;
  --text-2: #4B564E;
  --text-3: #7C877E;
  --accent: #1FAE72;
  --accent-hover: #17915F;
  --amber: #B36B00;
  --bg-alt: #EFF4F1;
  --surface-2: #F3F6F4;
  --surface-3: #EBF0EC;
  --border-soft: #E3E9E5;
  --border-btn: #D5DDD8;
  --accent-glow: rgba(31, 174, 114, 0.14);
  --accent-tint: rgba(31, 174, 114, 0.10);
  --accent-line: rgba(31, 174, 114, 0.24);
  --text-mute: #7C877E;
  --text-faint: #A3ACA5;
  --warn: #B36B00;
}

/* ---------- raspored ---------- */
.kb-layout {
  display: grid;
  grid-template-columns: var(--kb-sidebar-w) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.kb-article { min-width: 0; }

.kb-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  /* overflow-y alone makes overflow-x compute to auto, and the links used to
     hang 10px past both edges on negative margins, which is where the stray
     horizontal scrollbar under the section list came from. */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 18px;
  border-right: 1px solid var(--border-soft);
}

.kb-sidebar__label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}

/* The sidebar now lists every section, not just the current one. This is
   the only thing that still marks which one the reader is in. */
.kb-sidebar__label.is-current { color: var(--accent); }

.kb-sidebar__list { margin: 0 0 20px; }

.kb-sidebar__link {
  display: block;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.kb-sidebar__link:hover { background: var(--surface-2); color: var(--text); }

.kb-sidebar__link.is-current {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 500;
}

.kb-sidebar__all {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ---------- naslov + toggle stručno/jednostavno ---------- */
.kb-title-row {
  display: flex;
  /* flex-wrap: wrap used to drop the toggle onto its own line, left-aligned,
     whenever title + toggle overflowed the row, which a longer Croatian
     title hit far more often than the English one. The title wraps inside
     its own box instead (min-width: 0 below), so the toggle always stays
     pinned to the top-right of the row. */
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.kb-title-row .title {
  flex: 1 1 auto;
  min-width: 0;
}

.kb-mode-toggle {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 3px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.kb-mode-toggle__btn {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--text-mute);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.kb-mode-toggle__btn:hover { color: var(--text); }

.kb-mode-toggle__btn.is-active {
  background: var(--accent);
  color: var(--surface);
}

/* ---------- light/dark icon toggle, lives in header.php next to lang-switch ----------
   A single icon rather than a second Dark/Light pill next to Expert/Plain: two
   look-alike pill toggles side by side read as one control, not two different
   axes (content mode vs colour theme). This one sits with the other
   page-chrome control (language) instead. */
.kb-theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-mute);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.kb-theme-icon:hover { color: var(--text); border-color: var(--border-hover); }

.kb-theme-icon__moon { display: none; }
html[data-theme="light"] .kb-theme-icon__sun { display: none; }
html[data-theme="light"] .kb-theme-icon__moon { display: block; }

.kb-body--plain :is(h1, h2, h3) { scroll-margin-top: 24px; }

/* One line saying what the toggle does, since "Expert / Plain" alone does
   not say why you'd pick either. Static text, not a tooltip. This base
   explains itself in prose everywhere else, and a tooltip is invisible on
   touch. */
.kb-mode-hint {
  font-size: 13px;
  color: var(--text-faint);
  margin: 8px 0 16px;
}

.kb-plain-missing {
  margin: 0 0 28px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-mute);
  font-size: 14px;
  max-width: 700px;
}

/* A reader who lands straight on a plain page (search, a shared link) never
   sees the shopping-centre metaphor explained anywhere else, so the terms
   that recur on almost every plain page sit here, always visible, not
   behind a click. Kept short on purpose: the full mapping is a hundred-row
   table, and a glossary that needs its own filter has stopped being one. */
.kb-plain-glossary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin: 20px 0 40px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
  max-width: 900px;
}

.kb-plain-glossary__label {
  flex-basis: 100%;
  font-weight: 600;
  color: var(--text-mute);
  margin-bottom: 2px;
}

.kb-plain-glossary__item { color: var(--text-mute); }
.kb-plain-glossary__item strong { color: var(--text); font-weight: 600; }

/* ---------- zaglavlje stranice ---------- */
.kb-lede { max-width: 700px; margin-bottom: 20px; }

.kb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--border-soft);
}

.kb-pill {
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-mute);
}

.kb-verified {
  font-family: var(--font-label);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
}

.kb-verified--stale {
  color: var(--amber);
  background: rgba(255, 179, 64, 0.12);
  border-color: rgba(255, 179, 64, 0.30);
}

/* ---------- tijelo ---------- */
.kb-body { max-width: 760px; }
.kb-body h2 {
  font-size: 25px;
  color: var(--text);
  margin: 46px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
  letter-spacing: -0.02em;
}
.kb-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.kb-body h3 { t-size: 18px; color: var(--text); margin: 28px 0 10px; }
.kb-body p, .kb-body li { font-size: 16px; line-height: 1.78; color: var(--text-2); }
.kb-body p { margin: 0 0 17px; }
.kb-body ul, .kb-body ol { margin: 0 0 17px; padding-left: 22px; list-style: disc; }
.kb-body ol { list-style: decimal; }
.kb-body li { margin-bottom: 7px; }
.kb-body strong { color: var(--text); font-weight: 600; }
.kb-body a { text-decoration: underline; text-underline-offset: 2px; }

.kb-body code {
  font-family: var(--font-label);
  font-size: 0.87em;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--text);
}

.kb-body pre {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 20px;
}
.kb-body pre code { background: none; border: 0; padding: 0; }

.kb-body blockquote {
  margin: 20px 0;
  padding: 12px 20px;
  border-left: 3px solid var(--amber);
  background: rgba(255, 179, 64, 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.kb-body blockquote p:last-child { margin-bottom: 0; }

.kb-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}
.kb-body th, .kb-body td {
  border: 1px solid var(--border-soft);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--text-2);
}
.kb-body th { background: var(--surface-2); color: var(--text); font-weight: 600; }

/* ---------- oznake dokaza ---------- */
.kb-tier {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 5px;
  margin-right: 5px;
  vertical-align: 1px;
}
.kb-tier--A { color: var(--kb-a); background: rgba(79, 227, 165, 0.14); }
.kb-tier--B { color: var(--kb-b); background: rgba(255, 179, 64, 0.14); }
.kb-tier--C { color: var(--kb-c); background: rgba(255, 122, 122, 0.14); }

/* ---------- "In short" ---------- */
.kb-claims {
  max-width: 760px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.kb-claims h2 { font-size: 19px; color: var(--text); margin: 0 0 8px; }
.kb-claims__note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint);
  margin: 0 0 18px;
}

.kb-claim {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 13px 15px;
  margin-bottom: 9px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}
.kb-claim__meta {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 7px;
}
.kb-claim__src { font-size: 11.5px; margin-top: 3px; word-break: break-all; }
.kb-claim__src a { color: var(--text-mute); }
.kb-claim__src a:hover { color: var(--accent); }

/* ---------- prethodno / sljedece ---------- */
.kb-updown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 760px;
  margin-top: 44px;
}
.kb-updown__item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kb-updown__item:hover { border-color: var(--border-hover); background: var(--surface-2); }
.kb-updown__item--next { text-align: right; }
.kb-updown__dir {
  display: block;
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 5px;
}
.kb-updown__title { display: block; font-size: 14.5px; color: var(--text); }

/* ---------- rjecnik ---------- */
.kb-vocab-intro {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 700px;
  margin: 0 0 8px;
}

.kb-filter--terms { margin: 26px 0 8px; }

.kb-terms { margin: 0 0 8px; }

.kb-term {
  margin: 0;
  padding-top: 16px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
}
.kb-term__alt {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
  margin-left: 8px;
}

.kb-term__def {
  margin: 4px 0 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
}
.kb-term__def:last-child { border-bottom: 0; }

.kb-term__more {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-decoration: none;
  white-space: nowrap;
  margin-left: 6px;
}
.kb-term__more::before { content: "→ "; }
.kb-term__more:hover { color: var(--accent); }

.kb-body .kb-terms + h2 { margin-top: 44px; }

/* ---------- indeks ---------- */
.kb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 8px 0 34px;
  font-family: var(--font-label);
  font-size: 13px;
  color: var(--text-mute);
}
.kb-stat strong { color: var(--accent); font-size: 17px; margin-right: 4px; }

.kb-legend {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 22px 24px;
  max-width: 820px;
}
.kb-legend p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 14px;
}
.kb-legend p:last-child { margin-bottom: 0; }
.kb-legend strong { color: var(--text); }
.kb-legend em { color: var(--text-faint); font-style: normal; }

.kb-stale-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--amber);
  max-width: 820px;
}

.kb-filter { display: block; max-width: 560px; }
.kb-filter input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}
.kb-filter input::placeholder { color: var(--text-faint); }
.kb-filter input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.kb-filter__count {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--text-faint);
  margin: 10px 0 0;
}

.kb-section { margin-top: 52px; }
.kb-section__title {
  font-size: 22px;
  color: var(--text);
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.kb-index { margin: 0; }

/* The whole row is the target, borrowing the card hover vocabulary from
   01-cards.css (accent edge, surface-2 fill, accent heading) but without the
   lift, the glow and the shadow. On a list of 116 rows the full card treatment
   is noise; this keeps the family resemblance and stays quiet. */
.kb-index__item {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  margin: 0 -16px;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* Separator drawn inset, so it does not curve with the hover corners. */
.kb-index__item::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: var(--border-soft);
}
.kb-index__item:last-child::after { display: none; }

/* The accent edge that appears on hover. */
.kb-index__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.kb-index__item:hover {
  background: var(--surface-2);
  transform: translateX(3px);
}
.kb-index__item:hover::before { opacity: 1; }
.kb-index__item:hover .kb-index__title { color: var(--accent); }
.kb-index__item:hover .kb-index__summary { color: var(--text-2); }
.kb-index__item:hover .kb-index__date { color: var(--text-mute); }

.kb-index__link { display: block; flex: 1; min-width: 0; }

/* Makes the entire row clickable, not just the title text. */
.kb-index__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.kb-index__title {
  display: block;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 3px;
  transition: color var(--dur) var(--ease);
}
.kb-index__summary {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-mute);
}
.kb-index__date {
  position: relative;
  flex: 0 0 auto;
  transition: color var(--dur) var(--ease);
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--text-faint);
}
.kb-index__date.is-stale { color: var(--amber); }

.kb-empty { color: var(--text-mute); font-size: 15px; margin-top: 28px; }

/* The index stacks section--glow on section--tight, which put 110px of
   padding above 70px of padding, 180px of dead space between the tier
   legend and the filter box. */
.post-type-archive-aso_kb .section--glow { padding-bottom: 40px; }
.post-type-archive-aso_kb .section--tight { padding-top: 0; }

@media (max-width: 767px) {
  .post-type-archive-aso_kb .section--glow { padding-bottom: 28px; }
}

/* ---------- uski zasloni ---------- */
@media (max-width: 1024px) {
  .kb-layout { grid-template-columns: 1fr; gap: 32px; }
  /* The sidebar now carries the full tree (all sections, ~116 links), not
     just the current section's handful. Unwrapping that into flat pills
     above the article (the old treatment, sized for ~8 links) would dump a
     wall of buttons ahead of the content, so it keeps the desktop's own
     scroll box instead, just without the sticky positioning a single-column
     layout has no room for. */
  .kb-sidebar {
    position: static;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    padding-right: 0;
    padding-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .kb-updown { grid-template-columns: 1fr; }
  .kb-updown__item--next { text-align: left; }
  .kb-index__item { flex-direction: column; gap: 6px; }
  .kb-body table { font-size: 13.5px; }
}

@media (max-width: 480px) {
  /* Below this, pinning the toggle to the row leaves the title too little
     room; stack it under the title instead, same as before. */
  .kb-title-row { flex-wrap: wrap; }
  .kb-mode-toggle { margin-top: 8px; }
}