/* ==============================================================
   Site header (templates/header.html): chosen in the top nav lab.
   Centred links with tab-strip separators and a sliding underline
   that rests, glowing, on the current section; latest-posts panel
   under Blog; Discord + Download on the right; labelled search
   button that opens a full-width strip. Extras come from site-nav.js.
   Transparent over the hero, dark blurred band once scrolled.
   ============================================================== */

/* ---------- links ---------- */
#header .main-menu > ul { position: relative; display: flex; justify-content: center; }
#header .main-menu > ul > li { margin: 0 2px; }
#header .main-menu > ul > li > a { padding-left: 16px; padding-right: 16px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--title-color); transition: color .2s, text-shadow .2s; }
#header .main-menu > ul > li > a i.fa-chevron-down { font-size: 0.6rem; opacity: .6; transition: transform .25s; }
#header .main-menu > ul > li:hover > a { color: var(--title-color); }
#header .main-menu > ul > li:hover > a i.fa-chevron-down { transform: rotate(180deg); }
#header .main-menu > ul > li + li > a::before { content: ""; position: absolute; left: 0; top: calc(50% - 7px); width: 1px; height: 14px; background: rgba(246, 245, 245, 0.18); }
/* the theme's own "current page" colouring is replaced by the indicator */
#header .main-menu > ul > li.active > a,
#header .main-menu ul li.menu-item-has-children.active > a { color: var(--title-color); }
#header .main-menu > ul > li.nav-current > a { color: #fff; text-shadow: 0 0 14px rgba(84, 184, 147, 0.55); }
#header #locale-flag { width: 18px; height: 12px; margin-right: 8px !important; }
#header #locale-label { display: none; }
#header .nav-code { display: inline; }
/* sliding underline: follows hover, rests on the current section */
#header .nav-ink { position: absolute; left: 0; top: 0; height: 2px; background: var(--vs-theme-color2); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1), opacity .2s, box-shadow .3s; }
#header .nav-ink.is-current { box-shadow: 0 0 6px rgba(84, 184, 147, 0.9), 0 0 18px rgba(84, 184, 147, 0.6), 0 0 34px rgba(84, 184, 147, 0.35); }
#header .nav-ink.is-current::after { content: ""; position: absolute; left: 10%; right: 10%; top: -14px; height: 14px; background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(84, 184, 147, 0.35), transparent 70%); }

/* ---------- dropdowns ---------- */
#header .main-menu ul.sub-menu { top: 100%; left: -16px; min-width: 230px; padding: 8px; margin-top: 12px; background: rgba(7, 13, 12, 0.97); border: 1px solid rgba(246, 245, 245, 0.1); border-top: 2px solid var(--vs-theme-color2); border-radius: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#header .main-menu ul.sub-menu::before { display: none; }
#header .main-menu ul li:hover > ul.sub-menu { margin-top: 0; }
#header .main-menu ul.sub-menu li a { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; font-family: var(--title-font); font-size: 0.74rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-color1); transition: background-color .2s, color .2s; }
#header .main-menu ul.sub-menu li a::before,
#header .main-menu ul.sub-menu li a::after { content: none; }
#header .main-menu ul.sub-menu li a:hover { transform: none; color: var(--title-color); background: rgba(84, 184, 147, 0.1); }
#header .main-menu ul.sub-menu em { display: block; padding: 10px 12px; font-size: 0.8rem; color: var(--text-color4); }
#header #campaign-submenu { min-width: 280px; }
#header .nav-desc { display: block; font-family: var(--body-font, inherit); font-size: 0.72rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-color4); }
/* Blog: latest-posts panel replaces the plain list once it is built */
#header #dynamic-blog-menu.has-mega > #blog-submenu { display: none !important; }
#header .nav-mega { position: absolute; z-index: 9; top: 100%; left: 50%; width: 620px; padding: 14px; background: rgba(7, 13, 12, 0.97); border: 1px solid rgba(246, 245, 245, 0.1); border-top: 2px solid var(--vs-theme-color2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s, visibility .25s; }
#header #dynamic-blog-menu:hover .nav-mega,
#header #dynamic-blog-menu:focus-within .nav-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-mega__head { display: flex; justify-content: space-between; margin-bottom: 12px; font-family: var(--title-font); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-color4); }
#header .nav-mega__head a { padding: 0; font-size: inherit; color: var(--vs-theme-color2); }
.nav-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#header .nav-mega__card { display: flex; flex-direction: column; gap: 6px; padding: 0; text-transform: none; letter-spacing: 0; }
.nav-mega__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(246, 245, 245, 0.1); transition: border-color .2s; }
.nav-mega__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.nav-mega__card:hover .nav-mega__thumb { border-color: var(--vs-theme-color2); }
.nav-mega__card:hover .nav-mega__thumb img { transform: scale(1.05); }
.nav-mega__meta { display: flex; gap: 8px; font-size: 0.66rem; font-weight: 500; color: var(--text-color4); }
.nav-mega__meta b { font-family: var(--title-font); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vs-theme-color2); }
.nav-mega__title { font-family: var(--title-font); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--title-color); }

/* ---------- right side: Discord, Download ---------- */
#header .vs-header__right { gap: 12px; }
#header .nav-cta { display: inline-flex; align-items: center; justify-content: center; height: 40px; font-family: var(--title-font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--title-color); transition: color .2s, background-color .2s, border-color .2s; }
#header .nav-cta--discord { width: 40px; font-size: 1.1rem; border: 1px solid rgba(246, 245, 245, 0.18); }
#header .nav-cta--discord:hover { color: #fff; background: #5865f2; border-color: #5865f2; }
#header .nav-cta--download { padding: 0 18px; color: #050a09; background: var(--vs-theme-color2); }
#header .nav-cta--download:hover { color: #050a09; background: #8affd4; }

/* ---------- scrolled: dark blurred band ---------- */
#header .vs-sticky-header.sticky { background: rgba(5, 10, 9, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(246, 245, 245, 0.08); }
#header .vs-sticky-header.sticky.stickyon.sticky-hold { border-bottom: 1px solid rgba(246, 245, 245, 0.08); }
#header .vs-sticky-header.sticky .main-menu > ul > li > a { padding-top: 26px; padding-bottom: 26px; }

/* =================================================================
   SEARCH: labelled button, full-width strip under the header
   ================================================================= */
#header .searchBoxTggler::before,
#header .searchBoxTggler::after { content: none; display: none; }
#header .searchBoxTggler { gap: 10px; height: 40px; padding: 0 10px 0 12px; border: 1px solid rgba(246, 245, 245, 0.18); background: rgba(5, 10, 9, 0.4); transition: border-color .2s; }
#header .searchBoxTggler:hover,
#header .search-flyout-wrap.is-open .searchBoxTggler { border-color: var(--vs-theme-color2); }
#header .searchBoxTggler svg { width: 15px; height: 15px; }
.nav-search-label { font-family: var(--title-font); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-color1); }
#header kbd { align-self: center; padding: 2px 6px; font-family: Consolas, Menlo, monospace; font-size: 0.66rem; line-height: 1.2; color: var(--text-color2); background: rgba(246, 245, 245, 0.06); border: 1px solid rgba(246, 245, 245, 0.18); border-bottom-width: 2px; border-radius: 0; }
/* strip: anchored to the header row, not the button */
#header .search-flyout-wrap { position: static; }
#header .vs-sticky-header .row,
#header #navbar-wrap .container { position: relative; }
#header .vs-sticky-header .row > [class*="col"],
#header .vs-header__right { position: static; }
#header .search-flyout { top: 100%; left: 12px; right: 12px; width: auto; padding: 18px 20px; border-radius: 0; background: rgba(7, 13, 12, 0.97); border: 1px solid rgba(246, 245, 245, 0.1); border-top: 2px solid var(--vs-theme-color2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(-8px); }
#header .search-flyout-wrap.is-open .search-flyout { transform: none; }
#header .search-flyout__input { height: 50px; padding: 11px 14px; font-size: 1.05rem; border-radius: 0; background: #050a09; border: 1px solid rgba(246, 245, 245, 0.14); }
#header .search-flyout__input:focus { border-color: var(--vs-theme-color2); box-shadow: 0 0 0 3px rgba(84, 184, 147, 0.15); }
#header .search-flyout__submit { width: 50px; height: 50px; border-radius: 0; }
#header .search-flyout__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#header .search-flyout__results > .search-tags,
#header .search-flyout__results > .search-flyout__view-all,
#header .search-flyout__results > .search-flyout__message,
#header .search-flyout__results > .nav-empty { grid-column: 1 / -1; }
#header .search-flyout .search-result { border-radius: 0; background: rgba(14, 22, 21, 0.8); -webkit-backdrop-filter: none; backdrop-filter: none; }
#header .search-flyout .search-result:hover { transform: none; }
#header .search-flyout__view-all { border-radius: 0; border-style: solid; border-color: rgba(84, 184, 147, 0.35); font-family: var(--title-font); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
#header .search-tag { border-radius: 0; }
.search-flyout__foot { display: flex; gap: 16px; padding-top: 10px; border-top: 1px solid rgba(246, 245, 245, 0.08); font-size: 0.72rem; color: var(--text-color4); }
/* empty state: popular tags + latest posts */
.nav-empty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nav-empty .search-tags,
.nav-empty__k { grid-column: 1 / -1; }
.nav-empty .search-tags { margin: 0 0 6px; }
.nav-empty__k { margin-top: 4px; }
#header .nav-empty__post { display: flex; align-items: center; gap: 12px; padding: 6px; font-family: var(--title-font); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; color: var(--title-color); border: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.nav-empty__post img { width: 72px; height: 40px; object-fit: cover; }
#header .nav-empty__post:hover { background: rgba(84, 184, 147, 0.08); border-color: rgba(84, 184, 147, 0.35); }

/* ---------- smaller screens (the full mobile pass comes later) ---------- */
/* 1200-1399px: longer translations (ruRU) pushed the search button off the
   right edge, so the links tighten and search drops to its icon here */
@media (max-width: 1399px) {
  #header .main-menu > ul > li > a { padding-left: 10px; padding-right: 10px; }
  .nav-search-label, #header .searchBoxTggler kbd { display: none; }
  #header .searchBoxTggler { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 1199px) {
  #header .nav-cta, .nav-search-label, #header .searchBoxTggler kbd { display: none; }
  #header .searchBoxTggler { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 991px) {
  #header .search-flyout__results, .nav-empty { grid-template-columns: 1fr; }
}
/* phones: search.css fixes the panel under the header; keep it there.
   The logo shrinks so logo + search + menu fit a 320-375px screen
   (at 260px wide the menu button was pushed off the right edge). */
@media (max-width: 575px) {
  #header .vs-header__logo img { width: clamp(150px, 55vw, 260px); height: auto; }
  #header .search-flyout { position: fixed; top: var(--search-flyout-top, 70px); left: 12px; right: 12px; max-height: calc(100vh - var(--search-flyout-top, 70px) - 24px); }
  #header .search-flyout__foot { display: none; }
}

/* ---------- no sideways scroll ----------
   Wide hero art (home emblem, button blobs) and off-canvas pieces must
   never widen the page. style.css puts overflow-x: hidden on body only,
   which iOS Safari still lets you swipe past. clip on both: html's value
   goes to the viewport, and body clips without becoming a scroll container
   (hidden would, and break the sticky header and smooth scroll). Browsers
   without clip keep body's hidden. */
html, body { overflow-x: clip; }