/* 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;
}

@media (max-width: 767.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;
  }
}

/* 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; }
}