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

/* ==========================================================
   OK7JN THEME TOGGLE + NIGHT HEADER OVERRIDES
   ========================================================== */
header.top .wrap.topbar .lang > .theme-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(0,0,0,.28) !important;
  color:#ffffff !important;
  font-size:17px !important;
  line-height:1 !important;
  cursor:pointer !important;
  text-shadow:0 2px 10px rgba(0,0,0,.55) !important;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

header.top .wrap.topbar .lang > .theme-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);
}

body.theme-night header.top .wrap.topbar .lang > .theme-toggle{
  background:rgba(96,165,250,.16) !important;
  border-color:rgba(147,197,253,.42) !important;
  box-shadow:0 0 0 3px rgba(96,165,250,.14) !important;
}

body.theme-night header.top .wrap.topbar nav.nav > a,
body.theme-night header.top .wrap.topbar nav.nav .nav-item.has-dropdown > a.tools-toggle,
body.theme-night header.top .wrap.topbar .lang > a{
  color:#f8fafc !important;
  background:rgba(15,23,42,.52) !important;
  border-color:rgba(148,163,184,.24) !important;
  text-shadow:0 2px 10px rgba(0,0,0,.72) !important;
}

body.theme-night header.top .wrap.topbar nav.nav > a:hover,
body.theme-night header.top .wrap.topbar nav.nav .nav-item.has-dropdown > a.tools-toggle:hover,
body.theme-night header.top .wrap.topbar .lang > a:hover,
body.theme-night header.top .wrap.topbar .lang > a.is-active,
body.theme-night header.top .wrap.topbar nav.nav > a.is-active,
body.theme-night header.top .wrap.topbar nav.nav .nav-item.has-dropdown.is-open > a.tools-toggle{
  background:rgba(96,165,250,.18) !important;
  border-color:rgba(147,197,253,.45) !important;
}

body.theme-night header.top .wrap.topbar nav.nav .nav-item.has-dropdown .dropdown-menu{
  background:rgba(2,6,23,.94) !important;
  border-color:rgba(148,163,184,.24) !important;
}

body.theme-night header.top .wrap.topbar nav.nav .nav-item.has-dropdown .dropdown-menu a{
  color:#f8fafc !important;
  background:rgba(15,23,42,.44) !important;
  border-color:rgba(148,163,184,.18) !important;
}

body.theme-night header.top .wrap.topbar nav.nav .nav-item.has-dropdown .dropdown-menu a:hover{
  background:rgba(96,165,250,.18) !important;
  border-color:rgba(147,197,253,.42) !important;
}

@media (max-width:820px){
  header.top .wrap.topbar .lang > .theme-toggle{
    min-width:36px !important;
    min-height:36px !important;
  }
}


/* ==========================================================
   OK7JN FINAL FIX: theme button must look like header control
   ========================================================== */
header.top .wrap.topbar .lang > button.theme-toggle,
header.top .lang > button.theme-toggle{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(0,0,0,.28) !important;
  color:#fff !important;
  font:800 17px/1 system-ui,Segoe UI,Roboto,Arial,sans-serif !important;
  cursor:pointer !important;
  text-shadow:0 2px 10px rgba(0,0,0,.55) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
}
header.top .wrap.topbar .lang > button.theme-toggle:hover,
header.top .lang > button.theme-toggle:hover{
  background:rgba(56,189,248,.18) !important;
  border-color:rgba(56,189,248,.48) !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.14), 0 8px 18px rgba(0,0,0,.22) !important;
  transform:translateY(-1px);
}
@media (max-width:820px){
  header.top .wrap.topbar .lang > button.theme-toggle,
  header.top .lang > button.theme-toggle{
    width:36px !important;
    height:36px !important;
  }
}


/* ==========================================================
   HEADER DESKTOP ONE-LINE FIX
   Nástroje nesmí spadnout pod hlavní menu na desktopu.
   Mobilní rozložení pod 900px zůstává původní.
   ========================================================== */
@media (min-width: 901px){

  header.top .wrap.topbar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
  }

  header.top .top-left{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:18px !important;
  }

  header.top .brand{
    flex:0 0 auto !important;
  }

  header.top .nav{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:1 1 auto !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    min-width:0 !important;
    margin-top:0 !important;
  }

  header.top .nav > a,
  header.top .nav > .nav-item.has-dropdown > .tools-toggle{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    margin:0 !important;
  }

  header.top .nav .nav-item.has-dropdown{
    flex:0 0 auto !important;
    width:auto !important;
    display:inline-flex !important;
    align-items:center !important;
    margin:0 !important;
  }

  header.top .lang{
    flex:0 0 auto !important;
    margin-left:12px !important;
    white-space:nowrap !important;
  }
}

/* Trochu úspornější menu na menších desktop/notebook šířkách */
@media (min-width:901px) and (max-width:1350px){
  header.top .wrap.topbar{
    gap:10px !important;
  }

  header.top .top-left{
    gap:14px !important;
  }

  header.top .wrap.topbar nav.nav{
    gap:7px !important;
  }

  header.top .wrap.topbar nav.nav > a,
  header.top .wrap.topbar nav.nav .nav-item.has-dropdown > a.tools-toggle{
    font-size:16px !important;
    padding:9px 10px !important;
  }

  header.top .wrap.topbar .brand__name{
    font-size:31px !important;
  }

  header.top .wrap.topbar .brand__tag{
    font-size:13px !important;
  }

  header.top .wrap.topbar .lang{
    gap:5px !important;
    margin-left:8px !important;
  }
}



/* ==========================================================
   OK7JN THEME PICKER DROPDOWN
   Header zůstává kompaktní: CZ EN 🎨
   ========================================================== */
header.top .wrap.topbar .lang > .theme-picker{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

header.top .wrap.topbar .lang > .theme-picker > button.theme-toggle,
header.top .lang > .theme-picker > button.theme-toggle{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(0,0,0,.28) !important;
  color:#fff !important;
  font:800 17px/1 system-ui,Segoe UI,Roboto,Arial,sans-serif !important;
  cursor:pointer !important;
  text-shadow:0 2px 10px rgba(0,0,0,.55) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

header.top .wrap.topbar .lang > .theme-picker > button.theme-toggle:hover,
header.top .wrap.topbar .lang > .theme-picker.is-open > button.theme-toggle{
  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 .theme-menu{
  position:absolute !important;
  right:0 !important;
  top:calc(100% + 10px) !important;
  width:220px !important;
  padding:8px !important;
  border-radius:14px !important;
  background:rgba(0,0,0,.88) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.48) !important;
  z-index:2147483647 !important;
  display:none !important;
}

header.top .wrap.topbar .theme-picker.is-open .theme-menu{
  display:block !important;
}

header.top .wrap.topbar .theme-menu button{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  padding:10px 12px !important;
  margin:0 0 4px 0 !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
  font:800 14px/1.15 system-ui,Segoe UI,Roboto,Arial,sans-serif !important;
  text-align:left !important;
  cursor:pointer !important;
}
header.top .wrap.topbar .theme-menu button:last-child{ margin-bottom:0 !important; }
header.top .wrap.topbar .theme-menu button:hover,
header.top .wrap.topbar .theme-menu button.is-active{
  background:rgba(56,189,248,.18) !important;
  border-color:rgba(56,189,248,.45) !important;
}

/* Barevné ladění headeru podle aktuálního schématu */
body.ok7jn-theme-radioblue,
html.ok7jn-theme-radioblue{
  --ok7jn-pill-bg:rgba(96,165,250,.18);
  --ok7jn-pill-bd:rgba(147,197,253,.44);
  --ok7jn-pill-glow:0 0 0 3px rgba(96,165,250,.16);
  --ok7jn-pill-bg-active:rgba(96,165,250,.24);
  --ok7jn-pill-bd-active:rgba(147,197,253,.56);
}
body.ok7jn-theme-outdoor,
html.ok7jn-theme-outdoor{
  --ok7jn-pill-bg:rgba(143,191,114,.18);
  --ok7jn-pill-bd:rgba(183,230,157,.42);
  --ok7jn-pill-glow:0 0 0 3px rgba(143,191,114,.14);
  --ok7jn-pill-bg-active:rgba(143,191,114,.24);
  --ok7jn-pill-bd-active:rgba(183,230,157,.54);
}
body.ok7jn-theme-nightops,
html.ok7jn-theme-nightops{
  --ok7jn-pill-bg:rgba(56,189,248,.18);
  --ok7jn-pill-bd:rgba(125,211,252,.46);
  --ok7jn-pill-glow:0 0 0 3px rgba(56,189,248,.16);
  --ok7jn-pill-bg-active:rgba(56,189,248,.25);
  --ok7jn-pill-bd-active:rgba(125,211,252,.58);
}
body.ok7jn-theme-tactical,
html.ok7jn-theme-tactical{
  --ok7jn-pill-bg:rgba(214,179,106,.18);
  --ok7jn-pill-bd:rgba(255,217,138,.42);
  --ok7jn-pill-glow:0 0 0 3px rgba(214,179,106,.14);
  --ok7jn-pill-bg-active:rgba(214,179,106,.24);
  --ok7jn-pill-bd-active:rgba(255,217,138,.56);
}
body.ok7jn-theme-hamclassic,
html.ok7jn-theme-hamclassic{
  --ok7jn-pill-bg:rgba(255,179,71,.18);
  --ok7jn-pill-bd:rgba(255,207,115,.44);
  --ok7jn-pill-glow:0 0 0 3px rgba(255,179,71,.15);
  --ok7jn-pill-bg-active:rgba(255,179,71,.25);
  --ok7jn-pill-bd-active:rgba(255,207,115,.58);
}

@media (max-width:820px){
  header.top .wrap.topbar .theme-menu{
    right:50% !important;
    transform:translateX(50%) !important;
    width:min(240px, calc(100vw - 24px)) !important;
  }
}