/* ==========================
   NAV / DROPDOWNS / OFFCANVAS
   (Bootstrap accordion inside mega dropdown)
   ========================== */

/* Navbar (desktop) */
.navbar{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}
.navbar .nav-link{ color: var(--nav-link) !important; }
.navbar .nav-link.active,
.navbar .nav-link:hover,
.nav_active > a{ color: var(--brand) !important; }

/* Spacing tokens (tune here) */
:root{
  --nav-link-px: 1.05rem;     /* L/R padding for top-level items */
  --nav-link-py: 0.55rem;     /* T/B padding for top-level items */

  --dropdown-link-px: 1rem;   /* L/R padding for dropdown items */
  --dropdown-link-py: 0.50rem;/* T/B padding for dropdown items */

  --mobile-link-px: 1rem;     /* Offcanvas links L/R */
  --mobile-link-py: 0.55rem;  /* Offcanvas links T/B */
}

/* Desktop: top-level items */
.navbar-nav > .nav-item > .nav-link{
  padding: var(--nav-link-py) var(--nav-link-px);
  line-height: 1.2;
  min-height: 42px;
}

/* Dropdowns (shared) */
.dropdown-menu{
  background: var(--dd-bg);
  border: 1px solid var(--dd-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
  overflow: hidden;
  padding: .35rem;                     /* menu chrome minimal; items add real padding */
  max-height: min(72vh, 720px);        /* long menus scroll instead of overflowing */
  overflow-y: auto;
}
.dropdown-item{
  display: block;
  color: var(--dd-link);
  padding: var(--dropdown-link-py) var(--dropdown-link-px);
  border-radius: .375rem;              /* soft hover edges */
  min-height: 42px;
}
.dropdown-item:hover,
.dropdown-item:focus{ background: var(--dd-hover-bg); color: var(--dd-hover); }
.dropdown-item.active{ color: var(--brand); }
.dropdown-divider{ margin: .35rem 0; }

/* ===== Mega dropdown (desktop) ===== */
.dropdown-menu.mega{
  max-height: 70vh;
  overflow: auto;
  padding: .5rem;
}

/* Grid wrapper (kept for structure; can be simple) */
.mega .mega-grid{ display: block; }

/* Accordion inside mega */
.mega .accordion{ --bs-accordion-bg: transparent; }
.mega .accordion-item{
  background: transparent;
  border: 0;
  margin-bottom: .15rem;
}
.mega .accordion-header{ margin: 0; }

/* Title rows (accordion buttons = group titles) */
.mega .accordion-button{
  background: transparent;
  color: var(--fg);
  font-weight: 600;
  padding: var(--dropdown-link-py) var(--dropdown-link-px);
  border-radius: .375rem;
  box-shadow: none;
  min-height: 42px;
}
.mega .accordion-button:hover{ background: rgba(255,255,255,.05); }
.mega .accordion-button:not(.collapsed){
  background: rgba(255,255,255,.06);
  color: var(--fg);
  box-shadow: none;
}

/* Caret icon (Bootstrap’s ::after) — ensure it’s visible on dark glass */
.mega .accordion-button::after{
  filter: invert(1) opacity(.75);
}
.mega .accordion-button:not(.collapsed)::after{
  filter: invert(1) opacity(1);
}

/* Collapse body */
.mega .accordion-collapse{ border: 0; }
.mega .accordion-body{
  padding: 0; /* list handles spacing */
}

/* Links inside accordion body */
.mega .accordion-body ul{
  list-style: none;
  margin: .15rem 0 0 0;
  padding: .25rem 0 .5rem 0;
}
.mega .accordion-body .dropdown-item{
  padding: var(--dropdown-link-py) var(--dropdown-link-px);
  border-radius: .375rem;
}
.mega .accordion-body .dropdown-item:hover,
.mega .accordion-body .dropdown-item:focus,
.mega .accordion-body .dropdown-item.active{
  background: rgba(255,255,255,.08);
}

/* “Link-only” items (children without grandchildren) styled like headers, no caret */
.mega .link-only .accordion-button{
  cursor: pointer;
  text-decoration: none;
}
.mega .link-only .accordion-button::after{ display: none; }

/* ===== Offcanvas (mobile) ===== */
.offcanvas.text-bg-dark{
  background: #0e121a; /* stable dark under blur */
}
.offcanvas .accordion{ --bs-accordion-bg: transparent; }
.offcanvas .accordion-item{ background: transparent; border: 0; }
.offcanvas .accordion-button{
  background: transparent;
  color: var(--fg);
  box-shadow: none;
  padding: var(--mobile-link-py) var(--mobile-link-px);
  min-height: 42px;
}
.offcanvas .accordion-button:not(.collapsed){
  background: rgba(255,255,255,.06);
  color: var(--fg);
}
.offcanvas .accordion-body{ padding: .25rem 0 .5rem 0; }
.offcanvas .accordion-body .nav-link{
  color: var(--fg);
  padding: var(--mobile-link-py) var(--mobile-link-px);
  min-height: 42px;
}
.offcanvas .accordion-body .nav-link.active,
.offcanvas .accordion-body .nav-link:hover{
  color: var(--brand);
}

/* Back to top */
.to_top{ position: fixed; right: 1rem; bottom: 1rem; z-index: 10; opacity: .9; }
.to_top .icon{ width: 34px; height: 34px; }


/* Keep navbar items on one line and let brand | menu | search align properly */
.navbar > .container-xxl,
.navbar > .container,
.navbar > .container-fluid{
  display: flex;              /* be explicit */
  flex-wrap: nowrap;          /* no wrapping */
  align-items: center;        /* vertical centering */
  justify-content: space-between; /* brand left, last item (search) far right */
}


/* Keep icon + input on one line and vertically centered */
.navbar .searchbar { flex-wrap: nowrap; align-items: center; }

/* Make the icon sit nicely in light/dark */
.navbar .searchbar .input-group-text {
  display: flex; align-items: center;
  color: var(--nav-link); /* inherits your theme */
}

/* Size + feel of the field */
.navbar .searchbar .form-control {
  min-width: 20rem;           /* adjust as you like */
  box-shadow: none !important;
  color: var(--nav-link);
}
.navbar .searchbar .form-control::placeholder { opacity: .6; }

/* Tweak for narrower viewports where this form is still visible */
@media (max-width: 1200px){
  .navbar .searchbar .form-control { min-width: 14rem; }
}

/* Prevent navbar wrapping that shoves items to a new row */
.navbar .container,
.navbar .container-fluid { flex-wrap: nowrap; align-items: center; }

/* Brand sizing guard — prevents distortion */
.navbar-brand img {
  height: 34px;           /* adjust if you prefer 32/36 */
  width: auto;
  object-fit: contain;
  display: block;
}

/* Search bar: keep icon + field on one line and nice width */
.navbar .searchbar {
  flex-wrap: nowrap;
  align-items: center;
  width: clamp(12rem, 22vw, 18rem); /* doesn’t push nav items */
}

/* Icon inside the input group (independent of your global .icon rules) */
.navbar .searchbar .search-icon {
  width: 16px; height: 16px;
  display: block;
}

/* Field look + colors for dark/light */
.navbar .searchbar .form-control {
  box-shadow: none !important;
  color: var(--nav-link);
}
.navbar .searchbar .form-control::placeholder { opacity: .6; }

/* Make sure the text addon inherits theme color */
.navbar .searchbar .input-group-text {
  color: var(--nav-link);
}

/* Slightly shrink on tighter desktops so it never wraps */
@media (max-width: 1200px){
  .navbar .searchbar { width: clamp(10rem, 24vw, 14rem); }
}

/* Let the menu take the middle space so search pushes to the edge */
@media (min-width: 992px){
  .navbar .navbar-collapse { flex-grow: 1; }
}