/* ==========================================================================
   navbar.css — top navbar + top-bar language/theme-toggle strip
   Markup: frontend/views/layouts/main.php — bootsnav-based navbar, plus a
   top-bar <ul class="top-bar-cta list-inline"> holding language flag links
   and the theme-toggle button.
   Notes:  only restyles colors/spacing; bootsnav's own collapse/hamburger
   JS behavior is left untouched.
   ========================================================================== */

/* nav.navbar.bootsnav (bootsnav.css:42) hardcodes background-color: #fff
   with element+2-class specificity — match element+class here too so this
   always wins regardless of source order. */
nav.navbar.bootsnav {
  background: var(--otzivi-surface) !important;
  border-bottom: 1px solid var(--otzivi-border);
  box-shadow: var(--otzivi-shadow-sm);
  transition: background-color .2s ease, border-color .2s ease;
}

.navbar.bootsnav .navbar-brand,
.navbar.bootsnav .navbar-brand:hover {
  color: var(--otzivi-text);
}

.navbar.bootsnav .nav > li > a {
  color: var(--otzivi-text);
  font-weight: var(--otzivi-fw-semibold);
  font-family: var(--otzivi-font-base);
}

.navbar.bootsnav .nav > li > a:hover,
.navbar.bootsnav .nav > li > a:focus {
  color: var(--otzivi-primary);
  background: transparent;
}

/* theme/style.css:436 hardcodes the "current page" nav link to a legacy
   brand orange (#f6861c) — 2.5:1 on white, fails WCAG AA even for large
   bold text. Keep the orange "this is the primary action" visual language
   (matches every CTA button on the site) but use the theme-reactive darker
   shade — this is text sitting directly on the page background in both
   themes, not a white-filled button, so it needs to invert with the theme
   (dark amber on light navbar, bright amber on dark navbar) rather than the
   fixed always-dark --otzivi-accent-button made for white button text. */
nav.navbar.bootsnav ul.nav > li.active > a {
  color: var(--otzivi-accent-hover) !important;
}

.top-bar {
  background: var(--otzivi-surface-soft);
  border-bottom: 1px solid var(--otzivi-border);
}

.top-bar-cta.list-inline > li {
  display: inline-flex;
  align-items: center;
}

/* theme/style.css's ".top-bar .social-link li, li a { color: #fff; }" was
   built for a dark top-bar background — invisible white-on-light since the
   redesign's top-bar is light. ".top-bar-cta li a/span" has the same rule
   but it never matched (that markup's plain-text <li>s have no child a/span,
   so they quietly inherited the readable body text color instead) — the
   .social-link rule matches the <li> directly, so it did apply. Own both
   the "Стежити" label and the icon links explicitly. */
.top-bar .social-link li,
.top-bar .social-link li a {
  color: var(--otzivi-text-muted);
}
.top-bar .social-link li a:hover {
  color: var(--otzivi-primary);
}
.otzivi-topbar-account a {
  color: var(--otzivi-text-muted) !important;
  font-size: var(--otzivi-fs-label);
}
.otzivi-topbar-account a:hover {
  color: var(--otzivi-primary) !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .top-bar-cta.list-inline > li {
    margin-bottom: var(--otzivi-space-4);
  }
}