/* Mobile off-canvas menu. Site-wide component (loaded by every _bs_tpl/*.php chrome
   template), styled here and driven by _bs_js/mainNav.js. */

/* --- hamburger trigger (lives in header.php, outside the panel) --- */
.mnav-trigger {
  position: relative;
  width: 30px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.mnav-trigger span,
.mnav-trigger span::before,
.mnav-trigger span::after {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 3px;
  background: #34495e;
  border-radius: 2px;
  transition: all .2s ease;
}
.mnav-trigger span {
  top: 50%;
  transform: translateY(-50%);
}
.mnav-trigger span::before {
  content: '';
  top: -10px;
}
.mnav-trigger span::after {
  content: '';
  top: 10px;
}
.mnav-trigger.is-open span {
  background: transparent;
}
.mnav-trigger.is-open span::before {
  top: 0;
  transform: rotate(45deg);
  background: #34495e;
}
.mnav-trigger.is-open span::after {
  top: 0;
  transform: rotate(-45deg);
  background: #34495e;
}

/* --- panel root + backdrop --- */
.mnav-panel {
  position: fixed;
  inset: 0;
  /* Deliberately higher than every other z-index used site-wide, so this panel always sits
     on top regardless of what else is on the page. */
  z-index: 10500;
  visibility: hidden;
  pointer-events: none;
}
.mnav-panel.is-open {
  visibility: visible;
  pointer-events: auto;
}
.mnav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .3s ease;
}
.mnav-panel.is-open .mnav-backdrop {
  opacity: 1;
}

/* --- drawer --- */
.mnav-drawer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: #1c1e22;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .3s ease;
}
/* Only the middle (header-to-bottom-bar) content scrolls — .mnav-bottom sits outside this wrapper
   as its own flex child, so it stays pinned to the drawer's bottom edge regardless of how tall
   the list/expanded submenus get, instead of just trailing after the list content. */
.mnav-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.mnav-panel.is-open .mnav-drawer {
  transform: translateX(0);
}
.mnav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  flex-shrink: 0;
}
.mnav-logo img {
  height: 32px;
  display: block;
}
.mnav-close {
  background: none;
  border: none;
  color: #fff;
  padding: .25rem;
  line-height: 1;
  cursor: pointer;
}
.mnav-close .material-symbols-outlined {
  font-size: 24px;
}

/* --- top-level list --- */
.mnav-list {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
}
.mnav-row {
  display: flex;
  align-items: stretch;
  position: relative;
}
/* An inset divider line instead of a plain border-bottom, which would run edge-to-edge across
   the full width of the row. */
.mnav-row::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .08);
}
.mnav-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  color: #fff;
  text-decoration: none;
  font: 500 1.05rem "Barlow Condensed";
  letter-spacing: .02em;
}
.mnav-link:hover,
.mnav-link:active {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.mnav-icon {
  font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 20;
  font-size: 22px;
  color: #999;
  flex-shrink: 0;
}
/* Active-page checkmark — shown on the currently active service (top-level .mnav-link) and, in
   the submenu, on whichever item's own href matches the current page. margin-left: auto pushes
   it to the far right of its flex row regardless of where else it sits in the markup. */
.mnav-check {
  margin-left: auto;
  flex-shrink: 0;
  color: #cddc39;
}
.mnav-link .mnav-check {
  font-size: 20px;
  /* Kept in step with .mnav-toggle's own margin-right (below) - both were sitting flush against
     the drawer's right edge, which read as cramped, so both got the same 8px breathing room. */
  margin-right: 8px;
}
.mnav-toggle {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .7);
  width: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Some breathing room from the drawer's right edge - it used to sit flush against it, which
     read as cramped ("skroz uz ivicu", direct feedback). Shifting the whole button (not just its
     icon) keeps the icon centered within it rather than off-center. */
  margin-right: 8px;
}
.mnav-toggle .material-symbols-outlined {
  font-size: 22px;
  transition: transform .25s ease;
  /* .mnav-toggle centers this icon within its 48px box via flex, which lands it 2px right of
     the top-level .mnav-check on rows with no submenu (e.g. "Početna strana") - measured live via
     getBoundingClientRect(), not guessed. Because the icon is centered (justify-content: center),
     margin-right only moves it half as far as the margin value itself (the rest of the shift goes
     to the equal-and-opposite space on the left) - needed 4px of margin to actually close a 2px
     gap, confirmed by re-measuring after the first attempt undershot it. Nudged left so every
     row's rightmost marker (chevron or checkmark) sits on the same vertical line regardless of
     which one it is. */
  margin-right: 4px;
}
.mnav-item.is-expanded .mnav-toggle .material-symbols-outlined {
  transform: rotate(180deg);
}

/* --- accordion submenu --- */
.mnav-sub {
  list-style: none;
  margin: 0 0 0 1rem;
  /* No vertical padding here on purpose — box-sizing: border-box is already the site-wide default
     (Bootstrap's own reset), so that alone didn't fix it: max-height: 0 + overflow: hidden still
     let a sliver of this element's own background (and the top of its first <li>) peek through
     between rows. Zero vertical padding on the animated element itself removes any possibility of
     that regardless of box-sizing — the equivalent spacing is added on the first/last <li>'s own
     link instead (see below), which sits safely *inside* the overflow: hidden clip. */
  /* Right padding is 1rem, not .75rem to match the left - deliberately asymmetric. .mnav-sub::after
     (below) already had to use right: 1rem instead of the "matching" .75rem to land its divider
     line at the same final position as .mnav-row's own divider (see that rule's own comment) -
     this padding governs where the actual <li>/<a> pills sit, so it needs the same 1rem to keep
     the pills' own right edge lined up with that same divider/row boundary. Left stays .75rem
     (unchanged) since .mnav-sub's own margin-left: 1rem already accounts for the left-side inset
     the row needs - only the right side was actually short by .25rem (4px), confirmed by measuring
     live in a real browser (pill right edge vs. divider right edge, getBoundingClientRect()) and
     by directly pixel-sampling a user-supplied screenshot showing the pills overhanging their
     parent row. */
  padding: 0 1rem 0 .75rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: rgba(0, 0, 0, .15);
  position: relative;
}
/* The parent .mnav-row already draws its own inset divider at ITS bottom (.mnav-row::after),
   which visually reads as "top border of the submenu" — but without a matching line at the
   submenu's own bottom, the boundary between the submenu and the NEXT top-level item (e.g.
   Recepti) was unmarked, making the submenu look like it belonged to that next item instead of
   the one it's actually nested under. Same inset-line treatment, mirrored at the bottom — left/
   right values are NOT the same 1rem/1rem as .mnav-row::after, though, because they're relative
   to a differently-offset box: .mnav-row spans the item's full width with no margin, so its own
   1rem/1rem inset IS the final position. .mnav-sub is already shifted in by margin-left: 1rem
   (with no margin on the right), so left: 0/right: 1rem here lands the line at that same final
   1rem/1rem position relative to the item — left: .75rem/right: .75rem (matching .mnav-row's
   numbers literally, without accounting for that pre-existing offset) made the two lines visibly
   different lengths, indented differently on each side. */
.mnav-sub::after {
  content: '';
  position: absolute;
  left: 0;
  right: 1rem;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .08);
}
.mnav-sub li a {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .2rem 0;
  padding: .5rem .65rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font: 400 .92rem "Barlow Semi Condensed";
}
.mnav-sub li a:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.mnav-sub li:first-child a {
  margin-top: .5rem;
}
.mnav-sub li:last-child a {
  margin-bottom: .5rem;
}
.mnav-sub li a .material-symbols-outlined {
  font-size: 18px;
  /* Was lime-yellow (#e8ff3d, before that #fff44f, before that #ff0066 sampled from the site logo)
     — switched to #9CF (same blue as the footer's .ftLList-cta CTA links), then lightened once
     more toward white on direct follow-up ("malo ubledi, da budu malo svetlije, više ka beloj"). */
  color: #BDF;
  flex-shrink: 0;
}
.mnav-sub li a .mnav-check {
  color: #cddc39;
  /* .mnav-check's own margin-left: auto pushes it to the right edge of the <a> it's actually in,
     which sits well left of the top-level row's chevron toggle icon (.mnav-toggle, a separate
     48px-wide box outside .mnav-sub entirely) - measured via getBoundingClientRect() live (not
     guessed). A NEGATIVE margin-right closes that gap (a positive value only pushes it further
     left, the opposite of what's needed here, confirmed by testing +7px first and re-measuring).
     This value has been re-measured and re-tuned twice since it was first set, each time something
     else in this file changed the target position: once when .mnav-sub's own right padding grew
     from .75rem to 1rem (see .mnav-sub's own comment - that fix, for the submenu pills overhanging
     their parent row, also shifted every submenu <a>'s own right edge, and this checkmark rides on
     that edge via margin-left: auto), and again when .mnav-toggle's own icon got a small
     margin-right of its own to line up with the top-level "Početna strana" checkmark. Always
     re-measure this value after touching either of those two rules. */
  margin-right: -2px;
}
.mnav-sub li.mnav-disabled a {
  color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .02);
  pointer-events: none;
}
.mnav-sub li.mnav-disabled a .material-symbols-outlined {
  color: rgba(255, 255, 255, .2);
}
/* Highlighted submenu entries — call-to-action items like "Postavi oglas" that should stand out
   from the plain sibling links around them. Reusable as-is for future items of the same kind
   (e.g. "Pošalji recept", "Pošalji vic") — just add class="mnav-highlight" to the <li>. */
.mnav-sub li.mnav-highlight a {
  color: #ffb870;
  font-weight: 400;
  background: rgba(255, 45, 45, .12);
}
.mnav-sub li.mnav-highlight a:hover {
  color: #ff9640;
  background: rgba(255, 45, 45, .2);
}
.mnav-sub li.mnav-highlight a .material-symbols-outlined {
  /* Same blue as the regular submenu icons now (see .mnav-sub li a .material-symbols-outlined)
     — kept as an explicit override rather than deleted outright, since the two rules matching by
     coincidence isn't guaranteed to stay true if either one changes again later. */
  color: #BDF;
}
.mnav-sub li.mnav-highlight a .mnav-check {
  color: #cddc39;
}

/* --- bottom shortcut row --- */
.mnav-bottom {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-shrink: 0;
  /* The logo's second color (also sampled directly, not picked freehand) — the same light grey
     the "LISICA.RS" wordmark text uses in logo-120x30-inverse.png, the exact logo file used both
     in this menu's own header and in footer.php. */
  background: #e1e1e1;
}
.mnav-bottom li {
  flex: 1;
}
.mnav-bottom a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 0;
  color: #000;
  text-decoration: none;
  transition: background-color .15s ease-in-out;
}
.mnav-bottom a:hover {
  background: rgba(0, 0, 0, .1);
}
.mnav-bottom a .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 20;
  font-size: 22px;
}