/* public/css/layout.css
   Replaced/standardised: navbar, menubar, dropdowns (desktop + mobile)
*/

:root{
  --navbar-height:56px;
  --menubar-height:48px;
  --base-gap:6px;
}

/* Navbar */
.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--navbar-height);
  z-index:1200;
}

/* Menubar */
.menubar{
  position:fixed;
  top:var(--navbar-height);
  left:0;
  right:0;
  height:var(--menubar-height);
  z-index:1150;
  display:flex;
  align-items:center;
  padding:6px 12px;
  box-sizing:border-box;
  border-bottom:1px solid rgba(0,0,0,0.08);
  background:#000;
  color:#fff;
}

.menubar-inner{
  display:flex;
  align-items:center;
  width:100%;
}

/* Alerts wrapper: in normal flow, not fixed */
#global-alerts,
.global-alerts {
  position: relative;
  display: none;
  margin: 0;
  padding: 8px 12px 0;
  z-index: 1140;
  box-sizing: border-box;
}

#global-alerts.show,
.global-alerts.show {
  display: block;
}

/* Visual container */
#global-alerts .container,
.global-alerts .container {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0;
}
#global-alerts .alert,
.global-alerts .alert {
  margin: 6px 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Ensure content begins below menubar */
.content-wrapper {
  margin-top: calc(var(--menubar-height) + var(--base-gap));
  transition: margin-top 0.12s ease;
  padding: 0 12px 24px;
}

/* Alerts appear *below* navbar + menubar */
#global-alerts,
.global-alerts {
  margin-top: calc(var(--navbar-height) + var(--menubar-height) + var(--base-gap));
  padding: 0 12px;
}

/* Menu links container (desktop by default) */
.menu-links{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:6px;
}

/* generic link/menu item style (desktop) */
.menu-links > a,
.menu-links > .dropdown > .dropdown-toggle {
  color:#fff;
  padding:0 12px;
  text-decoration:none;
  line-height:var(--menubar-height);
  display:inline-block;
  text-align:center;
}

/* Dropdown wrapper */
.dropdown{
  position:relative;
  display:inline-block;
}

/* Dropdown toggle arrow (single arrow via CSS) */
.dropdown-toggle::after{
  content:'\25BE';
  margin-left:8px;
  font-size:0.75em;
  vertical-align:middle;
  opacity:0.9;
}

/* ---------- DESKTOP: dropdown panel (hidden by default) ---------- */
@media (min-width:769px){

  .dropdown-menu{
    display:none;
    position:absolute;
    top:100%; /* immediately below the toggle */
    left:0;
    background:#111;
    min-width:160px;
    border:1px solid rgba(255,255,255,0.08);
    z-index:2000;
    box-shadow:0 6px 12px rgba(0,0,0,0.2);
  }

  .dropdown-menu a{
    display:block;
    color:#fff;
    padding:8px 12px;
    text-decoration:none;
    white-space:nowrap;
  }

  .dropdown:hover > .dropdown-menu{
    display:block;
  }

  .dropdown-menu a:hover{
    background:#333;
  }

  /* Desktop-specific: ensure hamburger hidden */
  .hamburger{
    display:none;
  }
}

/* small hover/focus styles */
.menu-links a:hover,
.menu-links a:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus{
  background:rgba(255,255,255,0.05);
}
@media (min-width:769px){
  #menu-links {
    display:flex !important;
  }
}


@media (max-width: 768px) {

  /* show hamburger */
  .hamburger {
    display: block;
  }

  /* mobile menu container */
  .menu-links {
    display: none;          /* hidden until JS adds .open */
    position: absolute;
    top: 48px;
    left: 0;
    background: #111;
    width: max-content;     /* shrink-to-fit width */
    max-width: 220px;
    padding: 6px 0;
    z-index: 9999;
    text-align: left;       /* ensure left alignment */
  }

  .menu-links.open {
    display: block;
  }

  /* all menu items use left alignment */
  .menu-links a,
  .menu-links .dropbtn {
    display: block;
    padding: 10px 16px;
    text-align: left;        /* fixes your centred Lookup */
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
  }

  /* .dropdown-content initially hidden on mobile */
  .dropdown-content {
    display: none;
    position: static;
    background: #111;
    padding-left: 16px;      /* indent submenu */
  }

  /* shown when dropdown is opened by JS */
  .dropdown.open .dropdown-content {
    display: block;
  }

  /* restore arrow's default look */
  .dropbtn {
    background: none;
  }
}