/* Top Navbar theme linked to global palette */
:root {
  --tn-bg: #ffffff;
  --tn-text: #2c3e50;
  --tn-border: var(--border-color, #dee2e6);
  --tn-hover-bg: rgba(52,152,219,0.10); /* primary @ 10% */
  --tn-active-bg: rgba(52,152,219,0.15); /* primary @ 15% */
  --tn-accent: var(--primary-color, #3498db);
  --tn-accent-dark: var(--primary-dark, #2980b9);
}

.top-navbar.navbar { background: var(--tn-bg) !important; border-bottom: 1px solid var(--tn-border);}
.top-navbar .navbar-brand, .top-navbar .nav-link { color: var(--tn-text); transition: color .2s ease, background-color .2s ease; border-radius: .375rem; }
.top-navbar .nav-link:hover, .top-navbar .navbar-brand:hover { background-color: var(--tn-hover-bg); color: var(--tn-accent); }
.top-navbar .nav-link.active, .top-navbar .dropdown-item.active { background-color: var(--tn-active-bg) !important; color: var(--tn-accent) !important; }

/* Dropdown */
.top-navbar .dropdown-menu { border: 1px solid var(--tn-border); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.top-navbar .dropdown-item { color: var(--tn-text); border-radius: .35rem; }
.top-navbar .dropdown-item:hover { background: var(--tn-hover-bg); color: var(--tn-accent); }

/* Toggler */
.top-navbar .navbar-toggler { border-color: var(--tn-border); }
.top-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .25rem rgba(52,152,219,.25); }

/* Icons follow accent on hover/active for consistency */
.top-navbar .nav-link i, .top-navbar .navbar-brand i { transition: color .2s ease; }
.top-navbar .nav-link:hover i, .top-navbar .navbar-brand:hover i { color: var(--tn-accent); }

/* RTL tweaks */
html[dir="rtl"] .top-navbar .dropdown-menu { text-align: right; }

/* Language flag icons: circular subtle shadow without square box */
.top-navbar #langMenuRoot img#currentLangFlag,
.top-navbar #langMenuRoot [data-lang-option] img[data-flag] {
  border-radius: 50%; /* ensure circle clipping */
  background: transparent; /* keep transparent PNG edges */
  /* use drop-shadow so only opaque circle gets a shadow, not the square image box */
  filter: drop-shadow(0 0 0 rgba(0,0,0,.04)) drop-shadow(0 1px 2px rgba(0,0,0,.22));
  transition: filter .25s ease, transform .25s ease;
}

.top-navbar #langMenuRoot a#langDropdown:hover img#currentLangFlag,
.top-navbar #langMenuRoot .dropdown-item:hover img[data-flag],
.top-navbar #langMenuRoot .dropdown-item:focus img[data-flag] {
  filter: drop-shadow(0 0 0 rgba(0,0,0,.05)) drop-shadow(0 2px 5px rgba(0,0,0,.30));
  transform: translateY(-1px);
}

#langCurrentBox, #langSuggestedBox {
  transition: transform .2s ease;
  border-radius: .375rem;
  padding: .25rem .5rem;
}

#langCurrentBox:hover, #langSuggestedBox:hover { 
  cursor: pointer; 
  scale: 1.02;
}

/* Collapsed-menu styles. 991.98px matches the navbar-expand-lg breakpoint in
   top_navbar.html — the two must move together. */
@media (max-width: 991.98px) {
  .top-navbar .navbar-collapse {
    max-height: 75vh;
    overflow-y: auto;
    padding-bottom: 3rem;
  }
  html[dir="rtl"] .top-navbar .navbar-nav {
    padding-right: 1rem; /* adjust for lang menu on left */
    padding-left: 0rem;
  }
  html[dir="ltr"] .top-navbar .navbar-nav {
    padding-left: 1rem; /* adjust for lang menu on right */
    padding-right: 0rem;
  }
}

/* Expanded (horizontal) bar: a nav label must never wrap inside its item —
   multi-word Arabic labels ("تسجيل الدخول") once broke to two lines on
   tablet widths. Scoped to the expanded mode so long labels in the burger
   menu still wrap freely on narrow phones. */
@media (min-width: 992px) {
  .top-navbar .nav-link { white-space: nowrap; }
}

/* Reduce motion preference respect */
@media (prefers-reduced-motion: reduce) {
  .top-navbar #langMenuRoot img#currentLangFlag,
  .top-navbar #langMenuRoot [data-lang-option] img[data-flag] { transition: none; }
}