/* ============================================================
   CONCEPT 2 — BRAND ROW + TAB RAIL header (preview).
   Linked ONLY inside header.tpl's {if $hdrPreview} gate, so it
   never touches classic rendering. Shared across the public
   marketing pages and the logged-in panel (header.tpl is shared).

   Body flag classes (set by the header.tpl inline script):
     .v2hdr            preview active (single variant now)
     .v2hdr-in         visitor is logged in
     .v2hdr-out        visitor is logged out
     .v2hdr-panel      rendering inside the customer panel (pnv2)
     .v2hdr-public     rendering on a public marketing page

   Palette: neutral warm grays + gold #EAA824 (design contract).
   --pv2-* vars are absent on public pages, so every rule uses hex.
   FA6 note: never use the `font:` shorthand on elements holding an
   <i> icon (it resets weight off 900 → tofu). Set family/size/weight
   individually; core.css also guards i.fa/.fas/.fa-solid at 900.
   ============================================================ */

/* ---------- kill the classic utility strip (its items live in the brand row) ---------- */
body.v2hdr #topBar { display: none !important; }

/* the promo bar's decorative underline is killed for BOTH panels from the shared
   partial (themes/epona/tpl/promo-banner.tpl) — it used to live here, which meant the
   Death Star never got it. Nothing to declare in this file. */

/* ---------- brand row ---------- */
body.v2hdr #c2brand {
	background: #1a1a1b;
	border-bottom: 1px solid #2c2c2d;
}
body.v2hdr #c2brand .container {
	display: flex; align-items: center;
	height: 56px;
}
body.v2hdr #c2brand .c2logo { position: relative; margin-right: auto; display: inline-flex; align-items: center; line-height: 0; }
/* soft warm orange glow behind the logo (Ryan: "bring back the light orange glow over
   the logo") — classic intensity, subtle, reads over the new dark backdrop. */
body.v2hdr #c2brand .c2logo::before {
	content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 230px; height: 120px; pointer-events: none; opacity: 0;
	transition: opacity .25s ease;
	background: radial-gradient(ellipse at center, rgba(234,168,36,0.13) 0%, rgba(234,168,36,0.055) 38%, rgba(234,168,36,0) 72%);
}
/* glow on HOVER only (Ryan: not all the time) */
body.v2hdr #c2brand .c2logo:hover::before { opacity: 1; }
body.v2hdr #c2brand .c2logo img { position: relative; z-index: 1; height: 34px; width: auto; max-width: 100%; display: block; }
body.v2hdr #c2brand .c2rgt { display: flex; align-items: center; gap: 18px; }

/* socials */
body.v2hdr #c2brand .c2socials { display: inline-flex; align-items: center; gap: 15px; }
body.v2hdr #c2brand .c2socials a { color: #999; font-size: 15px; line-height: 1; text-decoration: none; transition: color .15s ease; }
body.v2hdr #c2brand .c2socials a:hover { color: #fff; }

/* ------------------------------------------------------------
   SCOPE. The three controls below are the shared right-hand slot
   (themes/epona/tpl/header-utility.tpl) and they render on THREE
   surfaces: the public site and the customer panel, which carry
   body.v2hdr, and the Death Star, which carries body.dsv2 and its
   own shell. The Death Star used to hand-roll a socials-only row
   and so never needed these rules; now it includes the same
   component, so it needs the same skin. :is() rather than a second
   copy of the block - a copy is what let the two rows drift apart
   in the first place, and :is() keeps the specificity identical.
   ------------------------------------------------------------ */

/* ---------- account chip (logged-in) ---------- */
body:is(.v2hdr, .dsv2) #c2brand .c2chip { position: relative; }
body:is(.v2hdr, .dsv2) #c2brand .c2chip-btn {
	display: inline-flex; align-items: center; gap: 8px; height: 36px;
	padding: 0 10px 0 5px; border-radius: 4px;
	background: #2d2d2e; border: 1px solid #3a3a3b; cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
body:is(.v2hdr, .dsv2) #c2brand .c2chip-btn:hover { border-color: #4c4c4d; background: #333; }
body:is(.v2hdr, .dsv2) #c2brand .c2chip-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
body:is(.v2hdr, .dsv2) #c2brand .c2chip-nm { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
body:is(.v2hdr, .dsv2) #c2brand .c2chip-cv { color: #999; font-size: 10px; transition: transform .15s ease; }
body:is(.v2hdr, .dsv2) #c2brand .c2chip-menu.open ~ * .c2chip-cv,
body:is(.v2hdr, .dsv2) #c2brand .c2chip-btn[aria-expanded="true"] .c2chip-cv { transform: rotate(180deg); }

/* chip dropdown */
body:is(.v2hdr, .dsv2) #c2brand .c2chip-menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 1300;
	min-width: 214px;
	background: #1e1e1f; border: 1px solid #3a3a3b; border-radius: 6px;
	box-shadow: 0 14px 34px rgba(0,0,0,.55); padding: 6px 0; overflow: hidden;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s .15s;
}
body:is(.v2hdr, .dsv2) #c2brand .c2chip-menu.open {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity .15s ease, transform .15s ease, visibility 0s 0s;
}
body:is(.v2hdr, .dsv2) #c2brand .c2chip-menu a {
	display: flex; align-items: center; gap: 11px; padding: 9px 14px;
	color: #ccc; font-size: 13px; font-weight: 400; text-decoration: none;
}
body:is(.v2hdr, .dsv2) #c2brand .c2chip-menu a i { width: 17px; text-align: center; color: #999; font-size: 13px; flex-shrink: 0; }
body:is(.v2hdr, .dsv2) #c2brand .c2chip-menu a:hover { background: rgba(255,255,255,.045); color: #fff; }
body:is(.v2hdr, .dsv2) #c2brand .c2chip-menu a:hover i { color: #ccc; }
body:is(.v2hdr, .dsv2) #c2brand .c2chip-sep { height: 1px; background: #2c2c2d; margin: 6px 0; }

/* ---------- staff chip (authenticated staff viewer) ----------
   The customer chip's sibling, not a second unrelated control: identical box,
   avatar, name and dropdown, so the header reads the same on the public site,
   in the customer panel and next to the Death Star's own rail chip. It REPLACES
   both the Death Star button and the My Servers / account button in this slot —
   Ryan: two buttons saying the same thing made no sense.
   Unlike .c2chip it is NOT suppressed on panel chrome: in the customer panel
   the rail's chip is the CUSTOMER's account, so this is the only thing telling a
   staff member who they are and how to get back. */
body:is(.v2hdr, .dsv2) #c2brand .c2staff { position: relative; }
body:is(.v2hdr, .dsv2) #c2brand .c2staff-btn {
	display: inline-flex; align-items: center; gap: 8px; height: 36px;
	padding: 0 10px 0 5px; border-radius: 4px;
	background: #2d2d2e; border: 1px solid #3a3a3b; cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
body:is(.v2hdr, .dsv2) #c2brand .c2staff-btn:hover { border-color: #4c4c4d; background: #333; }
body:is(.v2hdr, .dsv2) #c2brand .c2staff-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
body:is(.v2hdr, .dsv2) #c2brand .c2staff-nm {
	color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap;
	/* the rail's five labels get the width first — a long staff name clips
	   itself rather than pushing GAME SERVERS / LOCATIONS / GUIDES into ellipsis,
	   which is what forced the old Death Star button to collapse below 1700. */
	max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
body:is(.v2hdr, .dsv2) #c2brand .c2staff-cv { color: #999; font-size: 10px; transition: transform .15s ease; }
body:is(.v2hdr, .dsv2) #c2brand .c2staff-btn[aria-expanded="true"] .c2staff-cv { transform: rotate(180deg); }

body:is(.v2hdr, .dsv2) #c2brand .c2staff-menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 1300;
	min-width: 214px;
	background: #1e1e1f; border: 1px solid #3a3a3b; border-radius: 6px;
	box-shadow: 0 14px 34px rgba(0,0,0,.55); padding: 6px 0; overflow: hidden;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s .15s;
}
body:is(.v2hdr, .dsv2) #c2brand .c2staff-menu.open {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity .15s ease, transform .15s ease, visibility 0s 0s;
}
body:is(.v2hdr, .dsv2) #c2brand .c2staff-menu a {
	display: flex; align-items: center; gap: 11px; padding: 9px 14px;
	color: #ccc; font-size: 13px; font-weight: 400; text-decoration: none; white-space: nowrap;
}
body:is(.v2hdr, .dsv2) #c2brand .c2staff-menu a i { width: 17px; text-align: center; color: #999; font-size: 13px; flex-shrink: 0; }
body:is(.v2hdr, .dsv2) #c2brand .c2staff-menu a:hover { background: rgba(255,255,255,.045); color: #fff; }
body:is(.v2hdr, .dsv2) #c2brand .c2staff-menu a:hover i { color: #ccc; }
body:is(.v2hdr, .dsv2) #c2brand .c2staff-sep { height: 1px; background: #2c2c2d; margin: 6px 0; }

/* tight header: below 1500 the name goes and the avatar + caret carry the chip,
   the same give the Death Star button used to make — except now there is one
   control here instead of two, so the rail keeps its full labels either way. */
@media (max-width: 1499px) {
	body:is(.v2hdr, .dsv2) #c2brand .c2staff-nm { display: none; }
	body:is(.v2hdr, .dsv2) #c2brand .c2staff-btn { padding: 0 8px 0 5px; gap: 6px; }
}

/* ---------- logged-out affordance: ONE login door (My Servers) ---------- */
body:is(.v2hdr, .dsv2) #c2brand .c2myservers {
	display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px;
	border-radius: 4px; border: 1px solid rgba(255,255,255,.45);
	color: #fff; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	white-space: nowrap; text-decoration: none; transition: background .15s ease, border-color .15s ease;
}
body:is(.v2hdr, .dsv2) #c2brand .c2myservers i { color: #eaa824; font-size: 12px; }
body:is(.v2hdr, .dsv2) #c2brand .c2myservers:hover { background: #333; border-color: #4c4c4d; }

/* ---------- the logged-in chip now lives in the tab rail ----------
   On the panel the rail (panel submenu) hosts the account chip cell, so
   the brand-row chip is suppressed there. On public marketing pages there
   is no panel submenu, so the brand-row chip stays as the account door. */
body.v2hdr.v2hdr-panel #c2brand .c2chip { display: none !important; }

/* ---------- the Death Star does the same thing, for the same reason ----------
   Its own rail carries the account cell on every signed-in page, so the
   brand-row control there would be the second one saying the same thing. The
   SIGN-IN and SIGN-OUT screens render no rail at all (the rail is gated on an
   admin session), and body.pv2auth is exactly those two screens - so the slot
   keeps its control precisely where it is the only one on the page. That is
   the bug Ryan reported: a header whose right-hand slot was empty on the two
   screens where it was the only thing there. */
body.dsv2:not(.pv2auth) #c2brand .c2rgt .c2chip,
body.dsv2:not(.pv2auth) #c2brand .c2rgt .c2staff { display: none !important; }

/* ============================================================
   TAB RAIL — public marketing pages.
   #topNav becomes a full-width bar below the brand row: its logo
   is hidden (brand row owns it), the marketing nav is trimmed to
   GAMES + LOCATIONS and left-aligned as a 46px tab rail.
   Panel pages hide #topNav entirely (the panel submenu is the rail).
   ============================================================ */
body.v2hdr.v2hdr-panel #topNav { display: none !important; }

@media (min-width: 768px) {
	body.v2hdr.v2hdr-public #topNav {
		background: #1a1a1b;
		border-bottom: 1px solid #3a3a3b;
		border-top: 1px solid #2c2c2d;
		margin: 0; min-height: 46px;
	}
	body.v2hdr.v2hdr-public #topNav .container { position: relative; }
	body.v2hdr.v2hdr-public #topNav .logo { display: none !important; }
	body.v2hdr.v2hdr-public #topNav .navbar-collapse.nav-main-collapse {
		float: none !important; width: 100%;
	}
	body.v2hdr.v2hdr-public #topNav .nav-main { float: none; }
	body.v2hdr.v2hdr-public #topMain {
		display: flex; align-items: stretch; float: none; margin: 0;
	}
	body.v2hdr.v2hdr-public #topMain > li { float: none; }
}

/* redundancy kills on the public rail (all widths) */
body.v2hdr #topMain > li:has(> a[href="/order/"]),
body.v2hdr #topMain > li:has(> a[href="/about/"]),
body.v2hdr #topMain > li:has(> a[href="/sspanel/"]) { display: none !important; }
body.v2hdr #gameServersMenu { display: none !important; }

/* rail tab language (public) — uppercase 12.5px/600, gold active underline, 46px */
@media (min-width: 768px) {
	body.v2hdr.v2hdr-public #topMain > li > a {
		display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 14px;
		font-family: 'Open Sans', Arial, sans-serif; font-size: 12.5px; font-weight: 400;
		letter-spacing: .13em; text-transform: uppercase; color: #a7a7a8; line-height: 1;
		border-bottom: 2px solid transparent; background: transparent; white-space: nowrap;
	}
	body.v2hdr.v2hdr-public #topMain > li > a:hover { color: #fff; background: rgba(255,255,255,.03); }
	body.v2hdr.v2hdr-public #topMain > li.active > a,
	body.v2hdr.v2hdr-public #topMain > li.hdrnav-open > a { color: #fff; border-bottom-color: #eaa824; }
	body.v2hdr.v2hdr-public #topMain > li > a i.hdrnav-caret,
	body.v2hdr.v2hdr-public #topMain > li > a i { font-size: 12px; }
}

/* ---------- public rail order: GAMES · LOCATIONS · SUPPORT · REFER & EARN ----------
   Each is a rich hover-panel cell (.hdrnav-hp). SUPPORT holds Create a Ticket / Read
   our Guides (the wiki) / Community Forum — the single support door logged-out, so the
   brand-row Contact Us was removed. REFER & EARN keeps the 15% affiliate blurb. Reads
   as one system with the logged-in panel rail. */
@media (min-width: 768px) {
	body.v2hdr.v2hdr-public #topMain > li.hdrnav-games   { order: 1; }
	body.v2hdr.v2hdr-public #topMain > li.hdrnav-loc     { order: 2; }
	body.v2hdr.v2hdr-public #topMain > li.hdrnav-support { order: 3; }
	body.v2hdr.v2hdr-public #topMain > li.hdrnav-refer   { order: 4; }
}
/* the rail hover-panel cells only belong on the public marketing rail */
body.v2hdr.v2hdr-panel #topMain > li.hdrnav-hp { display: none !important; }
/* the classic LOCATIONS dropdown is replaced by the .hdrnav-loc hover panel */
body.v2hdr #topMain > li.dropdown:has(> a.dropdown-toggle[href="#"]) { display: none !important; }

/* ============================================================
   RAIL HOVER PANELS (shared) — GAMES / LOCATIONS / GUIDES / FORUM / AFFILIATES
   Each cell = a rail-tab toggle + an absolutely-positioned dark panel
   (approved chrome: #252526 / #4c4c4d / 6px / deep shadow). Opens on hover
   AND click; closes on ESC / outside-click (panel-v2-header inline JS).
   ============================================================ */
body.v2hdr .hdrnav-hp { position: relative; }
body.v2hdr .hdrnav-hp .hdrnav-caret {
	font-size: 11px; margin-left: 3px; opacity: .7; transition: transform .18s ease;
}
body.v2hdr .hdrnav-hp.hdrnav-open .hdrnav-caret { transform: rotate(180deg); opacity: 1; }

/* the panel surface (both the wide games mega + the standard panels) */
body.v2hdr .hdrnav-hp .hdrnav-mega,
body.v2hdr .hdrnav-hp .hdrnav-panel {
	position: absolute; top: 100%; left: 0; margin-top: 6px;
	background: #252526; border: 1px solid #4c4c4d; border-radius: 6px;
	box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 2px 0 rgba(0,0,0,.3);
	z-index: 1200; text-align: left;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility 0s .16s;
}
body.v2hdr .hdrnav-hp.hdrnav-open .hdrnav-mega,
body.v2hdr .hdrnav-hp.hdrnav-open .hdrnav-panel {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity .16s ease, transform .16s ease, visibility 0s 0s;
}
/* right-anchor the rightmost panel so it never widens the page */
body.v2hdr #hdrReferMenu .hdrnav-panel { left: auto; right: 0; }

/* shared panel chrome + section heading */
body.v2hdr .hdrnav-panel { width: 300px; max-width: calc(100vw - 24px); padding: 14px 16px; }
body.v2hdr .hdrnav-panel-loc { width: 470px; }
body.v2hdr .hdrnav-panel-forum { width: 384px; }
body.v2hdr .hdrnav-panel-aff { width: 280px; }
body.v2hdr .hdrnav-panel-h {
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 10.5px;
	text-transform: uppercase; letter-spacing: .08em; color: #8a8a8b; margin: 0 0 8px;
}

/* shared "view all" footer link. The GAMES mega no longer has one - it lists
   every game, so a "see all" door under it only implied there were more. */
body.v2hdr .hdrnav-panel-foot {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	margin-top: 12px; padding-top: 12px; border-top: 1px solid #3a3a3b;
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 11.5px;
	text-transform: uppercase; letter-spacing: .05em; color: #eaa824; text-decoration: none;
}
body.v2hdr .hdrnav-panel-foot:hover { color: #db9b15; }
body.v2hdr .hdrnav-arrow { font-size: 14px; line-height: 1; transition: transform .15s ease; }
body.v2hdr .hdrnav-panel-foot:hover .hdrnav-arrow { transform: translateX(3px); }

/* per-game label chips.
   The rail keeps FLAT chips at every size - the corner sash is the panel's
   treatment (#c2sitenav out-specifies everything here, so the two coexist on the
   customer panel, where both sheets load).
   Six families since 2026-08-01, matching games.menu_label_type: the four staff
   ones plus the two derived. Colour comes from the type, never the text. */
body.v2hdr .hdrnav-lbl {
	margin-left: auto; flex-shrink: 0;
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 8.5px; line-height: 1;
	text-transform: uppercase; letter-spacing: .02em;
	padding: 2px 4px; border-radius: 3px; white-space: nowrap;
	background: #3a3a3b; color: #d5a84a;
}
body.v2hdr .hdrnav-lbl-offer    { background: #eaa824; color: #1a1a1b; }
body.v2hdr .hdrnav-lbl-new      { background: #f25757; color: #fff; }
body.v2hdr .hdrnav-lbl-popular  { background: #3a3a3b; color: #d5a84a; }
body.v2hdr .hdrnav-lbl-version  { background: #5cb85c; color: #10230f; }
body.v2hdr .hdrnav-lbl-platform { background: #3f8dcb; color: #fff; }
body.v2hdr .hdrnav-lbl-preorder { background: #f0ad4e; color: #241a08; }

/* the catalog row's cover art belongs to the panel's phone grid only */
body.v2hdr .hdrnav-gart { display: none; }

/* ---------- GAMES mega (full catalog: featured column + A-Z columns) ---------- */
body.v2hdr .hdrnav-mega-games { width: 1040px; max-width: calc(100vw - 40px); padding: 16px; }
body.v2hdr .hdrnav-mega-inner { display: flex; gap: 18px; }
body.v2hdr .hdrnav-feat { flex: 0 0 202px; width: 202px; padding-right: 16px; border-right: 1px solid #3a3a3b; }
body.v2hdr .hdrnav-feat-row {
	display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 5px; text-decoration: none;
	transition: background .13s ease;
}
body.v2hdr .hdrnav-feat-row:hover { background: #333; }
body.v2hdr .hdrnav-feat-art {
	flex: 0 0 30px; width: 30px; height: 30px; border-radius: 5px; overflow: hidden; background: #1a1a1b; display: block;
}
body.v2hdr .hdrnav-feat-art img { width: 30px !important; height: 30px !important; object-fit: cover; display: block; max-width: 30px !important; }
body.v2hdr .hdrnav-feat-nm {
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 12px; color: #f0f0f0;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
body.v2hdr .hdrnav-cols { flex: 1 1 auto; min-width: 0; }
/* balanced 5-up alphabetical columns. The theme's nav-pill rules inflate
   descendant <li>/<a> (tall rows → 1000px+ balanced columns), so the row
   metrics are pinned with !important to keep each column compact. */
body.v2hdr .hdrnav-glist {
	list-style: none; margin: 0; padding: 0;
	column-count: 5; column-gap: 14px;
}
body.v2hdr .hdrnav-glist li { break-inside: avoid; margin: 0 !important; padding: 0 !important; float: none !important; line-height: normal !important; }
body.v2hdr .hdrnav-glist li > a {
	display: flex !important; align-items: center; gap: 5px;
	padding: 3px 6px !important; margin: 0 !important; height: auto !important; min-height: 0 !important;
	border-radius: 4px; text-decoration: none; line-height: 1.3 !important; background: transparent;
}
body.v2hdr .hdrnav-glist li > a:hover { background: #333 !important; }
body.v2hdr .hdrnav-glist li > a i.fa { color: #666; font-size: 9px; flex-shrink: 0; }
body.v2hdr .hdrnav-gnm {
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 12px; color: #ccc;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
body.v2hdr .hdrnav-glist li > a:hover .hdrnav-gnm { color: #fff; }

/* ---------- LOCATIONS (region-grouped, flags) ---------- */
body.v2hdr .hdrnav-panel-loc .hdrnav-panel-inner { display: flex; gap: 24px; }
body.v2hdr .hdrnav-locgrp { min-width: 0; }
body.v2hdr .hdrnav-loclist { list-style: none; margin: 0; padding: 0; }
body.v2hdr .hdrnav-loclist li { margin: 0 !important; padding: 0 !important; float: none !important; line-height: normal !important; }
body.v2hdr .hdrnav-loclist li > a {
	display: flex !important; align-items: center; gap: 8px; padding: 4px 6px !important; margin: 0 !important;
	height: auto !important; min-height: 0 !important; line-height: 1.3 !important; border-radius: 4px; text-decoration: none; background: transparent;
}
body.v2hdr .hdrnav-loclist li > a:hover { background: #333 !important; }
body.v2hdr .hdrnav-loclist a span {
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 12.5px; color: #ccc; white-space: nowrap;
}
body.v2hdr .hdrnav-loclist a:hover span { color: #fff; }
body.v2hdr .hdrnav-flag {
	width: 18px; height: 12px; object-fit: cover; border-radius: 2px; display: block; flex-shrink: 0;
	box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}

/* ---------- GUIDES + FORUM link lists ---------- */
body.v2hdr .hdrnav-linklist { list-style: none; margin: 0; padding: 0; }
body.v2hdr .hdrnav-linklist li { margin: 0 !important; padding: 0 !important; float: none !important; line-height: normal !important; }
body.v2hdr .hdrnav-linklist li > a {
	display: flex !important; align-items: center; gap: 8px; padding: 5px 6px !important; margin: 0 !important;
	height: auto !important; min-height: 0 !important; line-height: 1.35 !important; border-radius: 4px; text-decoration: none; background: transparent;
}
body.v2hdr .hdrnav-linklist li > a:hover { background: #333 !important; }
body.v2hdr .hdrnav-linklist li > a i.fa { color: #666; font-size: 10px; flex-shrink: 0; }
body.v2hdr .hdrnav-linklist li > a span,
body.v2hdr .hdrnav-linklist li > a .hdrnav-ttl {
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 12.5px; color: #ccc; line-height: 1.35;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
body.v2hdr .hdrnav-linklist li > a:hover span,
body.v2hdr .hdrnav-linklist li > a:hover .hdrnav-ttl { color: #fff; }
body.v2hdr .hdrnav-repl {
	margin-left: auto; flex-shrink: 0; font-family: 'Open Sans', Arial, sans-serif;
	font-size: 10.5px; font-weight: 600; color: #8a8a8b;
	background: #2d2d2e; border-radius: 9px; padding: 1px 7px; min-width: 20px; text-align: center;
}

/* ---------- SUPPORT panel (public): Create a Ticket / Read our Guides / Community Forum ---------- */
body.v2hdr .hdrnav-panel-support { width: 268px; }
body.v2hdr .hdrnav-supportlist li > a { align-items: flex-start; padding: 8px 6px !important; }
body.v2hdr .hdrnav-supportlist li > a i.fa { margin-top: 4px; }
body.v2hdr .hdrnav-supportlist .hdrnav-txt { display: flex; flex-direction: column; min-width: 0; }
body.v2hdr .hdrnav-supportlist .hdrnav-ttl {
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 12.5px; color: #f0f0f0; line-height: 1.25;
}
body.v2hdr .hdrnav-supportlist li > a:hover .hdrnav-ttl { color: #fff; }
body.v2hdr .hdrnav-supportlist .hdrnav-sub {
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 11.5px; color: #8a8a8b; line-height: 1.3; margin-top: 1px;
}

/* wiki search field */
body.v2hdr .hdrnav-search { position: relative; margin: 0 0 12px; }
body.v2hdr .hdrnav-search i.fa {
	position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #777; font-size: 12px; pointer-events: none;
}
body.v2hdr .hdrnav-search input[type=text] {
	width: 100%; height: 32px; box-sizing: border-box; padding: 0 10px 0 30px;
	background: #2d2d2e; border: 1px solid #3a3a3b; border-radius: 4px;
	color: #f0f0f0; font-family: 'Open Sans', Arial, sans-serif; font-size: 12.5px;
}
body.v2hdr .hdrnav-search input[type=text]:focus { outline: none; border-color: #eaa824; }
body.v2hdr .hdrnav-search input::placeholder { color: #777; }

/* ---------- COMMUNITY (folded: forum discussions + affiliates blurb) ---------- */
body.v2hdr .hdrnav-panel-comm { width: 560px; }
body.v2hdr .hdrnav-panel-comm .hdrnav-panel-inner { display: flex; gap: 22px; }
body.v2hdr .hdrnav-commcol { min-width: 0; }
body.v2hdr .hdrnav-commcol-forum { flex: 1 1 auto; border-right: 1px solid #3a3a3b; padding-right: 22px; }
body.v2hdr .hdrnav-commcol-aff { flex: 0 0 190px; width: 190px; }
body.v2hdr .hdrnav-comm-link {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 11px;
	text-transform: uppercase; letter-spacing: .05em; color: #eaa824; text-decoration: none;
}
body.v2hdr .hdrnav-comm-link:hover { color: #db9b15; }
body.v2hdr .hdrnav-comm-link:hover .hdrnav-arrow { transform: translateX(3px); }
body.v2hdr .hdrnav-commcol-aff .hdrnav-aff-stat { margin-bottom: 7px; }
body.v2hdr .hdrnav-commcol-aff .hdrnav-aff-num { font-size: 26px; }

/* ---------- AFFILIATES ---------- */
body.v2hdr .hdrnav-aff-stat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
body.v2hdr .hdrnav-aff-num { font-family: 'Open Sans', Arial, sans-serif; font-weight: 800; font-size: 30px; color: #eaa824; line-height: 1; }
body.v2hdr .hdrnav-aff-cap { font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #999; }
body.v2hdr .hdrnav-aff-blurb { margin: 0; font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 12.5px; line-height: 1.5; color: #ccc; }

/* ============================================================
   COMPACT TITLE BAND — inserted by JS (panel: panel-v2-header.js).
   Real page-top banner art behind a left-dark gradient; the page
   title + subline live here (once). Full-bleed; text container-aligned.
   ============================================================ */
body.v2hdr .c2titleband {
	position: relative; height: 98px; overflow: hidden;
	background: #121111 center 38% / cover no-repeat;
	display: flex; align-items: center;
	/* no bottom border — the band's bottom edge FADES into the backdrop (panel CSS
	   .c2titleband::after) so the banner art flows into the page texture, no hard line. */
}
body.v2hdr .c2titleband::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg,
		rgba(12,12,13,.94) 0%, rgba(12,12,13,.80) 30%,
		rgba(12,12,13,.44) 62%, rgba(12,12,13,.14) 100%);
}
body.v2hdr .c2titleband .container { position: relative; z-index: 2; display: flex; align-items: center; }
body.v2hdr .c2titleband .c2tb-text { min-width: 0; }
/* the band title IS the page <h1> (panel-v2-header.js builds it as one whenever the
   in-content pv2 head is hidden — every panel page had zero visible h1 before that).
   font/margin are fully declared here so the h1 default 2em/.67em margins never leak. */
body.v2hdr .c2titleband .c2tb-title,
body.v2hdr .c2titleband h1.c2tb-title {
	margin: 0; padding: 0;
	color: #fff; font-family: 'Open Sans', Arial, sans-serif;
	font-size: 24px; font-weight: 400; text-transform: uppercase;
	letter-spacing: .02em; line-height: 1.1; text-shadow: 0 1px 3px rgba(0,0,0,.6);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.v2hdr .c2titleband .c2tb-sub { color: #b9b9ba; font-size: 13px; margin-top: 7px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
body.v2hdr .c2titleband .c2tb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-left: 20px; }

/* ============================================================
   MOBILE (<768px)
   ============================================================ */
@media (max-width: 767px) {
	/* brand row is desktop-only; classic #mobileTopBar carries mobile.
	   rail hover-panels collapse to plain links: hide every panel + caret,
	   the toggle keeps its href and behaves as an ordinary menu link. */
	body.v2hdr .hdrnav-hp .hdrnav-mega,
	body.v2hdr .hdrnav-hp .hdrnav-panel { display: none !important; }
	body.v2hdr .hdrnav-hp .hdrnav-caret { display: none; }
	body.v2hdr .c2titleband { height: 72px; }
	body.v2hdr .c2titleband .c2tb-title,
	body.v2hdr .c2titleband h1.c2tb-title { font-size: 19px; }
	body.v2hdr .c2titleband .c2tb-sub { font-size: 12px; margin-top: 4px; }
	/* band actions DROP UNDER the title on phones instead of vanishing (mobile
	   sweep: hidden CTAs deleted New Ticket / Recent Jobs on every page) */
	body.v2hdr .c2titleband { height: auto; min-height: 72px; padding: 10px 0; }
	body.v2hdr .c2titleband .container { flex-wrap: wrap; row-gap: 8px; }
	body.v2hdr .c2titleband .c2tb-actions {
		display: flex; flex-wrap: wrap; gap: 8px; margin-left: 0; padding-left: 0;
		flex-basis: 100%;
	}
}

/* ---------- dedupe new-server affordances (Ryan: too many buy buttons) ----------
   the panel submenu's "+ NEW SERVER" is the one Ryan kept; hide the page-level
   "Order New Server" button on the gameservers list under the preview. */
body.v2hdr .pv2-gslist .pv2-head-actions { display: none !important; }


/* Ryan, twice: the bloom is still too strong. A radial wash behind the mark
   lights the BAR as much as the logo, and at any opacity you can see it as a
   patch. Replaced with a glow that follows the letterforms - it cannot spill
   onto the header because it never leaves the glyphs - at roughly half the
   old strength. The wash above is kept but never shown, so switching back is
   one line. */
body.v2hdr #c2brand .c2logo img {
	transition: filter .22s ease;
}
body.v2hdr #c2brand .c2logo:hover img {
	filter: drop-shadow(0 0 5px rgba(234, 168, 36, 0.34))
	        drop-shadow(0 0 12px rgba(234, 168, 36, 0.16));
}