/* ============================================================================
   Author: N1CHO
   Made for LynxLayers
   ============================================================================ */
/* ============================================================================
   LynxThemeN1CHO - Navbar styled to match lynxlayers.me EXACTLY.
   Single bar (#main-menu): brand + centered primary nav + right actions.
   Values mirror the source site's .nav / .nav-link / .nav-menu / .nav-cta,
   tokenized so it flips dark <-> light. CSS-only, menu stays WHMCS-driven.
   ============================================================================ */

/* The sticky navbar is bounded by its parent (body). The base theme caps
   html/body to height:100% (= one viewport), which un-sticks the nav after
   ~1 screen of scroll. Let body grow to content height so it stays stuck. */
html { height: auto !important; }
body { height: auto !important; min-height: 100vh; }

#main-menu { position: sticky; top: 0; z-index: 60; }
#main-menu .navbar.navbar-main {
  margin: 0; min-height: 0; border: 0 !important; border-radius: 0 !important;
  background: var(--bg-base) !important;
  border-bottom: 1px solid color-mix(in oklch, var(--text-primary) 7%, transparent) !important;
}

/* Brand (matches .brand: Space Grotesk 700, 19px) */
#main-menu .navbar-header { display: flex; align-items: center; }
#main-menu .navbar-brand { height: auto; padding: 0; display: inline-flex; align-items: center; }
#main-menu .navbar-brand.logo-text {
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em;
  color: var(--text-primary) !important;
}
#main-menu .navbar-brand.logo-text::first-letter { color: var(--primary-color); }
/* Logo focus: soft glow hugging the mark, not a hard outline box. */
#main-menu .navbar-brand:focus-visible {
  outline: none; border-radius: var(--radius);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus-ring) 28%, transparent);
}
#main-menu .navbar-brand.logo img { max-height: 32px; width: auto; }
#main-menu .navbar-brand.logo-text { display: inline-flex; align-items: center; }
/* Brand lynx: the white logo image recoloured to the theme cyan via a mask
   (so it flips with --primary-color in light/dark), with a soft cyan glow. */
#main-menu .ll-brand-mark {
  display: inline-block; width: 28px; height: 28px; margin-right: 9px; flex-shrink: 0;
  background-color: var(--primary-color);
  -webkit-mask: url(../img/lynx-hero.webp) center / contain no-repeat;
  mask: url(../img/lynx-hero.webp) center / contain no-repeat;
  filter: drop-shadow(0 0 7px color-mix(in oklch, var(--primary-color) 50%, transparent));
}
#main-menu .ll-actions .btn-carticon {
  background: color-mix(in oklch, var(--text-primary) 5%, transparent) !important;
  border: 1px solid var(--border-strong) !important; color: var(--text-secondary) !important;
  width: 38px; height: 38px; padding: 0 !important; border-radius: 11px !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
#main-menu .ll-actions .btn-carticon:hover { color: var(--primary-strong) !important; border-color: var(--primary-color) !important; }

/* Links (matches .nav-link: padding 8px 14px, radius 10, 14px, muted) */
#main-menu .navbar-nav > li > a,
#main-menu .ll-actions > li > a:not(.btn) {
  color: var(--text-secondary) !important; font-weight: 500; font-size: 14px;
  padding: 8px 14px; border-radius: 10px; background: transparent !important;
  display: inline-flex; align-items: center; gap: 7px; line-height: 1.4; white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
#main-menu .navbar-nav > li > a:hover,
#main-menu .ll-actions > li > a:not(.btn):hover {
  color: var(--text-primary) !important;
  background: color-mix(in oklch, var(--text-primary) 5%, transparent) !important;
}
#main-menu .navbar-nav > li.open > a,
#main-menu .navbar-nav > li.dropdown:hover > a,
#main-menu .navbar-nav > .active > a,
#main-menu .ll-actions > li.open > a:not(.btn) {
  color: var(--text-primary) !important;
  background: color-mix(in oklch, var(--primary-color) 11%, transparent) !important;
}
/* Active page = a branded cyan pill (clearly the current location) */
#main-menu .navbar-nav > li.active > a {
  background: color-mix(in oklch, var(--primary-color) 15%, transparent) !important;
  color: var(--primary-strong) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary-color) 38%, transparent),
              0 2px 12px -6px color-mix(in oklch, var(--primary-color) 60%, transparent);
}
#main-menu .navbar-nav > li.active > a:hover { color: var(--primary-strong) !important; }
#main-menu .navbar-nav > li.active > a > i { color: var(--primary-color) !important; opacity: 1; }
#main-menu .navbar-nav > li > a > i, #main-menu .ll-actions > li > a > i { color: currentColor; opacity: .8; font-size: 13px; }
#main-menu .caret { border-top-color: currentColor; opacity: .7; }

/* CTA button (matches .nav-cta / .btn-primary) */
#main-menu .ll-actions .btn-cart {
  background: linear-gradient(180deg, var(--primary-color), var(--primary-hover)) !important;
  color: var(--text-on-primary) !important; border: 0 !important; border-radius: 12px !important;
  font-weight: 600; font-size: 13px; padding: 9px 18px !important; box-shadow: var(--shadow-glow); white-space: nowrap;
}
#main-menu .ll-actions .btn-cart:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* icon-only login button (logged-out): a square cyan icon button */
#main-menu .ll-actions .ll-login-btn {
  width: 40px; height: 40px; padding: 0 !important; border-radius: 12px !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
#main-menu .ll-actions .btn-navghost {
  background: color-mix(in oklch, var(--text-primary) 4%, transparent) !important;
  border: 1px solid var(--border-strong) !important; color: var(--text-primary) !important;
  border-radius: 12px !important; font-size: 13px; padding: 8px 15px !important;
}
#main-menu .ll-actions .btn-navghost:hover { border-color: var(--primary-color) !important; }
/* admin / return-to-admin: dark (old) background with a BLUE outline + icon. */
#main-menu .ll-actions .btn-logged-in-admin {
  background: color-mix(in oklch, var(--text-primary) 5%, transparent) !important;
  border: 1.5px solid #3b82f6 !important; color: #5aa2f5 !important;
  width: 40px; height: 40px; padding: 0 !important; border-radius: 12px !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out), background .25s var(--ease-out), transform .2s var(--ease-out);
}
#main-menu .ll-actions .btn-logged-in-admin:hover { border-color: #5aa2f5 !important; color: #7db0f8 !important; background: color-mix(in oklch, #3b82f6 16%, transparent) !important; transform: translateY(-1px); }
#main-menu .ll-actions .ll-theme-toggle-item { display: inline-flex; align-items: center; }
/* Outlined action icon-buttons: keep the dark (old) background, colour only the
   OUTLINE + icon per action — cart = violet, theme = mode-reactive (indigo in
   dark, gold in light). The login button stays a solid cyan fill (untouched). */
#main-menu .ll-actions .ll-cart .btn-carticon,
#main-menu .ll-actions .ll-theme-toggle {
  width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 12px !important;
  background: color-mix(in oklch, var(--text-primary) 5%, transparent) !important; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out), background .25s var(--ease-out), transform .2s var(--ease-out);
}
#main-menu .ll-actions .ll-cart .btn-carticon { border: 1.5px solid #8b5cf6 !important; color: #a78bfa !important; }
#main-menu .ll-actions .ll-cart .btn-carticon:hover { border-color: #a78bfa !important; color: #b9a3fb !important; background: color-mix(in oklch, #8b5cf6 16%, transparent) !important; transform: translateY(-1px); }
#main-menu .ll-actions .ll-theme-toggle { border: 1.5px solid #6366f1 !important; color: #818cf8 !important; }
#main-menu .ll-actions .ll-theme-toggle:hover { border-color: #818cf8 !important; background: color-mix(in oklch, #6366f1 16%, transparent) !important; transform: translateY(-1px); }
.theme-light #main-menu .ll-actions .ll-theme-toggle { border-color: #f59e0b !important; color: #d97706 !important; }
.theme-light #main-menu .ll-actions .ll-theme-toggle:hover { border-color: #fbbf24 !important; background: color-mix(in oklch, #f59e0b 16%, transparent) !important; }
/* icon matches the mode: moon on the indigo (dark) button, sun on the gold (light) */
#main-menu .ll-theme-toggle .ll-icon-moon { display: inline !important; }
#main-menu .ll-theme-toggle .ll-icon-sun { display: none !important; }
.theme-light #main-menu .ll-theme-toggle .ll-icon-moon { display: none !important; }
.theme-light #main-menu .ll-theme-toggle .ll-icon-sun { display: inline !important; }
/* Compact icon-only actions (language globe, notifications bell) */
#main-menu .ll-actions .ll-icon-link { position: relative; padding: 9px 11px !important; }
#main-menu .ll-actions .ll-icon-link > i { font-size: 15px; opacity: .85; }
#main-menu .ll-actions .ll-icon-link .caret { display: none; }
#main-menu .ll-actions .ll-notif-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; min-width: 0; padding: 0; border-radius: 50%; background: var(--primary-color); }

/* ---- Account greeting ("Hello, name" -> just the name): plain nav link ----
   six paints this item a solid colour; the nav hook tags it .ll-account-link so
   we can render it like every other link (token text colour, no button bg). */
#main-menu .ll-actions > li.ll-account-link > a {
  background: transparent !important; color: var(--text-secondary) !important;
  border: 0 !important; box-shadow: none !important; font-weight: 500 !important;
  border-radius: 10px !important; padding: 8px 14px !important;
}
#main-menu .ll-actions > li.ll-account-link > a:hover,
#main-menu .ll-actions > li.ll-account-link.open > a {
  color: var(--text-primary) !important;
  background: color-mix(in oklch, var(--text-primary) 5%, transparent) !important;
}
#main-menu .ll-actions > li.ll-account-link > a > i { color: var(--primary-color); opacity: .9; }
#main-menu .ll-actions > li.ll-account-link > a .caret { opacity: .7; }
/* Hook-independent safety net: the ONLY dropdowns in the actions bar are the
   language switcher (.ll-lang) and the account greeting. WHMCS/six render the
   account one as a solid primary button — force any non-language actions
   dropdown to a plain nav link so it never shows a coloured pill. */
#main-menu .ll-actions > li.dropdown:not(.ll-lang),
#main-menu .ll-actions > li.dropdown:not(.ll-lang) > a.dropdown-toggle {
  background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important; border-radius: 10px !important;
}
#main-menu .ll-actions > li.dropdown:not(.ll-lang) > a.dropdown-toggle {
  color: var(--text-secondary) !important; font-weight: 500 !important; padding: 8px 14px !important;
}
#main-menu .ll-actions > li.dropdown:not(.ll-lang) > a.dropdown-toggle:hover,
#main-menu .ll-actions > li.dropdown:not(.ll-lang).open > a.dropdown-toggle {
  color: var(--text-primary) !important;
  background: color-mix(in oklch, var(--text-primary) 6%, transparent) !important;
}
#main-menu .ll-actions > li.dropdown:not(.ll-lang) > a.dropdown-toggle .caret { opacity: .7; }

/* ---- Language selector: a clean dropdown (flag + current name + caret) ---- */
/* language trigger: flag only (no name, no caret) — a compact icon button */
#main-menu .ll-lang-trigger { display: inline-flex; align-items: center; justify-content: center; padding: 9px 10px !important; color: var(--text-secondary) !important; }
#main-menu .ll-lang-trigger:hover, #main-menu .ll-lang.open > .ll-lang-trigger { color: var(--text-primary) !important; }
#main-menu .ll-lang-trigger .fi { font-size: 18px; border-radius: 3px; box-shadow: 0 0 0 1px var(--border-color); }
#main-menu .ll-lang-trigger .ll-lang-current { font-size: 13.5px; font-weight: 500; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#main-menu .ll-lang-trigger .caret { opacity: .7; }
@media (max-width: 1399px) { #main-menu .ll-lang-trigger .ll-lang-current { display: none; } }
/* the list itself (it is a .dropdown-menu, so it inherits the themed card) */
.ll-lang-list { list-style: none; min-width: 232px !important; max-height: min(60vh, 380px); overflow-y: auto; overscroll-behavior: contain; }
.ll-lang-list li { margin: 0; float: none; }
.ll-lang-list > li > a { display: flex !important; align-items: center; gap: 11px; padding: 9px 12px !important; border-radius: 10px !important; color: var(--text-secondary) !important; font-size: 13.5px; line-height: 1.25; white-space: nowrap; border: 1px solid transparent; transition: background .15s, color .15s; }
.ll-lang-list > li > a:hover { background: color-mix(in oklch, var(--primary-color) 10%, transparent) !important; color: var(--text-primary) !important; transform: none !important; }
.ll-lang-list > li > a.active { background: color-mix(in oklch, var(--primary-color) 14%, transparent) !important; color: var(--primary-strong) !important; }
.ll-lang-list .fi { font-size: 19px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border-color); }
.ll-lang-list .ll-lang-globe { width: 19px; text-align: center; color: var(--primary-color); flex-shrink: 0; }
.ll-lang-list .ll-lang-name { flex: 1; }
.ll-lang-list .ll-lang-check { margin-left: auto; color: var(--primary-color); font-size: 11px; flex-shrink: 0; }
/* tidy scrollbar inside the language list */
.ll-lang-list::-webkit-scrollbar { width: 10px; }
.ll-lang-list::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--text-primary) 16%, transparent); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
.ll-lang-list::-webkit-scrollbar-thumb:hover { background: color-mix(in oklch, var(--text-primary) 28%, transparent); background-clip: padding-box; }

/* ---- DESKTOP: compact flex layout like .nav-inner (brand | centered links | actions) ---- */
@media (min-width: 992px) {
  #main-menu .navbar-main > .container { display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
  #main-menu .navbar-header { float: none; }
  #main-menu .navbar-toggle { display: none; }
  #main-menu .navbar-collapse.collapse {
    display: flex !important; flex: 1; align-items: center; padding: 0;
    height: auto !important; visibility: visible !important; overflow: visible !important;
  }
  #main-menu .navbar-nav { float: none; margin: 0 auto; display: flex; align-items: center; gap: 4px; }
  #main-menu .navbar-nav > li { float: none; display: block; }
  #main-menu .navbar-right.ll-actions { float: none; margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; }
  #main-menu .ll-actions > li { float: none; display: inline-flex; align-items: center; }
  #main-menu .navbar-nav li, #main-menu .navbar-nav a, #main-menu .ll-actions li, #main-menu .ll-actions a { visibility: visible !important; }
  /* hover-open dropdowns */
  #main-menu .navbar-nav > li.dropdown:hover > .dropdown-menu,
  #main-menu .ll-actions > li.dropdown:hover > .dropdown-menu { display: block; }
}

/* ---- Dropdown menus (matches .nav-menu card + .menu-item rows) ---- */
#main-menu .dropdown-menu {
  background: linear-gradient(180deg, color-mix(in oklch, var(--bg-elevated) 92%, var(--primary-color)), var(--bg-base)) !important;
  border: 1px solid var(--border-strong) !important; border-radius: 16px !important;
  padding: 8px !important; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px color-mix(in oklch, var(--primary-color) 6%, transparent) !important;
  min-width: 250px; margin-top: 8px;
}
#main-menu .dropdown-menu > li > a {
  color: var(--text-secondary) !important; padding: 10px 12px !important; border-radius: 11px !important;
  font-size: 13.5px; white-space: nowrap; border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .15s ease, color .18s ease;
}
#main-menu .dropdown-menu > li > a:hover, #main-menu .dropdown-menu > li.active > a {
  background: color-mix(in oklch, var(--primary-color) 7%, transparent) !important;
  border-color: color-mix(in oklch, var(--primary-color) 22%, transparent) !important;
  color: var(--text-primary) !important; transform: translateX(2px);
}
#main-menu .dropdown-menu > li > a > i { color: var(--primary-color); }
#main-menu .dropdown-menu .divider { background: var(--border-color) !important; margin: 6px 4px; }
#main-menu .dropdown-header { color: var(--text-muted) !important; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; padding: 8px 12px 4px; }

/* ---- MOBILE (Bootstrap collapse) ---- */
@media (max-width: 991px) {
  #main-menu { position: relative; }
  #main-menu .navbar-main > .container { padding: 6px 16px; }
  /* DOM order is [toggle, brand]; reverse so brand sits left, hamburger right
     (the conventional mobile layout). space-between pins them to the edges. */
  #main-menu .navbar-header { float: none; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; padding: 6px 0; }
  #main-menu .navbar-toggle { display: block; border-color: var(--border-strong) !important; background: transparent !important; margin: 0; padding: 8px 10px; border-radius: 10px; }
  #main-menu .navbar-toggle .icon-bar { background: var(--text-primary) !important; }
  /* Tailwind ships a `.collapse { visibility: collapse }` utility that collides
     with Bootstrap's `.navbar-collapse.collapse` and hides the opened menu (it
     inherits down to every item). Bootstrap toggles open/closed via `display`,
     so forcing visibility visible here is safe and restores the mobile menu. */
  #main-menu .navbar-collapse,
  #main-menu .navbar-collapse * { visibility: visible !important; }
  /* Opened menu = a distinct panel under the bar (not a transparent overlay).
     overflow:visible so inline-expanding dropdowns aren't clipped; the page
     itself scrolls if the open menu grows taller than the viewport. */
  #main-menu .navbar-collapse {
    border-top: 1px solid var(--border-color) !important; box-shadow: var(--shadow-lg);
    background: var(--bg-base) !important; margin: 6px -16px 0; padding: 8px 16px 14px;
    max-height: none; overflow: visible;
  }
  #main-menu .navbar-nav { float: none; margin: 6px 0; }
  #main-menu .navbar-nav > li { display: block; }
  #main-menu .navbar-nav > li > a { padding: 12px 14px; }
  /* Action icons (lang / theme / cart / login): a tidy wrapped row under the
     links, set off by a divider — instead of an awkward vertical stack. */
  #main-menu .navbar-right.ll-actions {
    float: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 10px 0 0; padding: 14px 0 2px; border-top: 1px solid var(--border-color);
  }
  #main-menu .ll-actions > li { display: inline-flex; align-items: center; }
  #main-menu .ll-actions > li > a:not(.btn) { padding: 8px 12px; }
  #main-menu .ll-actions .btn-cart, #main-menu .ll-actions .btn-navghost,
  #main-menu .ll-actions .ll-theme-toggle-item { margin: 0; }
  /* Primary-nav dropdowns (Servers, Dedicated…) expand inline as accordions —
     they live in the block list, so static positioning flows correctly. */
  #main-menu .navbar-nav .dropdown-menu {
    position: static !important; float: none; box-shadow: none !important; border: 0 !important;
    background: color-mix(in oklch, var(--text-primary) 4%, transparent) !important;
    margin: 4px 0 4px 12px; min-width: 0;
  }
  /* Action-row dropdowns (account "Test", language): an open one becomes a
     full-width row in the wrapped flex layout and expands its menu inline as an
     accordion — same model as the nav, so nothing floats, overlaps or clips. */
  #main-menu .ll-actions > li.dropdown > a {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  }
  /* Only the OPEN dropdown breaks to its own full-width line; closed ones stay
     inline so the icon row remains compact. */
  #main-menu .ll-actions > li.dropdown.open { flex-basis: 100%; display: block; }
  #main-menu .ll-actions .dropdown-menu {
    position: static !important; float: none; left: auto; right: auto; transform: none;
    width: 100%; min-width: 0; max-width: none; margin: 4px 0 2px;
    box-shadow: none !important; border: 0 !important;
    background: color-mix(in oklch, var(--text-primary) 4%, transparent) !important;
  }
}