/* === OK7JN NAV (consolidated) ===
   Loaded AFTER /assets/css/style.css
   Goal: keep header consistent without inline <style> hacks.
*/

:root{
  --ok7jn-nav-text: rgba(255,255,255,.96);
  --ok7jn-nav-shadow: 0 2px 10px rgba(0,0,0,.55);
  --ok7jn-pill-bg: rgba(56, 189, 248, 0.14);
  --ok7jn-pill-bd: rgba(56, 189, 248, 0.22);
  --ok7jn-pill-glow: 0 0 0 3px rgba(56, 189, 248, 0.16);
  --ok7jn-pill-bg-active: rgba(56, 189, 248, 0.20);
  --ok7jn-pill-bd-active: rgba(56, 189, 248, 0.32);
  --ok7jn-pill-glow-active: 0 0 0 4px rgba(56, 189, 248, 0.18);
}

/* keep dropdown panels visible (avoid clipping) */
header.top,
header.top .wrap.topbar{ overflow: visible !important; }

/* === Brand === */
header.top .wrap.topbar .brand__name{
  color: #7CC8FF !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing: 1px;
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 18px rgba(124,200,255,.35);
}
header.top .wrap.topbar .brand__tag{
  color: #BEE6FF !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.75);
}

/* === Top-level nav links + Tools toggle === */
header.top .wrap.topbar nav.nav > a,
header.top .wrap.topbar nav.nav .nav-item.has-dropdown > a.tools-toggle{
  color: var(--ok7jn-nav-text) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  text-shadow: var(--ok7jn-nav-shadow) !important;
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, transform .15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
}

header.top .wrap.topbar nav.nav > a:hover,
header.top .wrap.topbar nav.nav .nav-item.has-dropdown > a.tools-toggle:hover{
  background: var(--ok7jn-pill-bg) !important;
  border-color: var(--ok7jn-pill-bd) !important;
  box-shadow: var(--ok7jn-pill-glow) !important;
  transform: translateY(-1px);
}

header.top .wrap.topbar nav.nav > a.is-active{
  background: var(--ok7jn-pill-bg-active) !important;
  border-color: var(--ok7jn-pill-bd-active) !important;
  box-shadow: var(--ok7jn-pill-glow-active) !important;
}

/* When tools dropdown is open, match active look */
header.top .wrap.topbar nav.nav .nav-item.has-dropdown.is-open > a.tools-toggle{
  background: var(--ok7jn-pill-bg-active) !important;
  border-color: var(--ok7jn-pill-bd-active) !important;
  box-shadow: var(--ok7jn-pill-glow-active) !important;
}

/* caret */
header.top .wrap.topbar nav.nav .caret{ font-size: 12px; opacity: .9; }

/* === Tools dropdown menu === */
header.top .wrap.topbar nav.nav .nav-item.has-dropdown{ position: relative; display: inline-flex; }

header.top .wrap.topbar nav.nav .nav-item.has-dropdown .dropdown-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 280px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.86);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  display: none;
  z-index: 2147483647;
}

header.top .wrap.topbar nav.nav .nav-item.has-dropdown.is-open .dropdown-menu{ display:block; }

header.top .wrap.topbar nav.nav .nav-item.has-dropdown .dropdown-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #fff !important;
  font-weight: 800;
  text-shadow: none !important;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  text-decoration: none;
}
header.top .wrap.topbar nav.nav .nav-item.has-dropdown .dropdown-menu a:hover{
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
}

/* === Language switch + admin lock === */
header.top .wrap.topbar .lang > a{
  color: var(--ok7jn-nav-text) !important;
  font-weight: 800 !important;
  text-shadow: var(--ok7jn-nav-shadow) !important;
  border-radius: 999px !important;
  border: 1px solid transparent;
}
header.top .wrap.topbar .lang > a:hover{
  background: var(--ok7jn-pill-bg) !important;
  border-color: var(--ok7jn-pill-bd) !important;
}
header.top .wrap.topbar .lang > a.is-active{
  background: var(--ok7jn-pill-bg-active) !important;
  border-color: var(--ok7jn-pill-bd-active) !important;
}

/* small square for lock */
header.top .wrap.topbar .lang > a.admin-lock{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 16px;
}