/* ============================================================================
   Shining Awards — Premium header & navigation
   Frames Jannah's header (layout-2, main-nav-below) with a modern, interactive,
   fully responsive treatment. Loaded AFTER skin.css so it wins.

   Every colour is a --sa-* token, so the whole header tracks the active style
   preset. We NEVER touch Jannah markup — this is pure CSS over the theme's own
   selectors. Reference markup (confirmed live):
     #theme-header > .header-container  ......  gradient masthead + logo
     #main-nav (.fixed-nav when sticky) ......  dark nav strip
       #main-nav-menu .menu > li > a    ......  top-level items (caret = a::before)
       li.menu-item-has-children ...............  dropdown parent (VOTE / NEWS)
         ul.sub-menu.menu-sub-content ..........  dropdown card (display:none→:hover)
       li.sa-vote-menu-item > a ................  our injected "Vote" CTA
       .components .search-bar #search .........  inline search field
     aside.side-aside > #mobile-container ......  off-canvas mobile panel
   ============================================================================ */

/* ── 1. Unified dark-glass header ──────────────────────────────────────────
   The masthead no longer carries a solid bright-orange slab — that hard
   orange→dark seam against the nav read cheap. Instead the WHOLE header is one
   premium dark-glass surface that flows straight into the nav (both on
   --sa-bg-2, so there's no visible seam). The brand shows as a soft warm glow
   behind the logo + a glass top-highlight + one hairline at the very bottom —
   not a full colour fill. The glow uses --sa-violet so it still tracks presets.
   The !important + double-ID beats skin.css's `#theme-header{...!important}`. */
#tie-wrapper #theme-header {
	position: relative;
	/* No solid band colour — the header is transparent so it blends seamlessly
	   with the page canvas behind it. The only fill is ONE very wide, soft warm
	   glow that fades to transparent well before the viewport edges, so there is
	   no visible box / left-right seam behind the logo. */
	background:
		radial-gradient(140% 150% at 50% -42%, color-mix(in srgb, var(--sa-violet) 20%, transparent) 0%, transparent 60%)
		!important;
	border-bottom: 0;
}
#tie-wrapper #theme-header .header-container { position: relative; z-index: 1; }
/* Logo lifts off the dark with a soft glow instead of a hard drop-shadow. */
#tie-wrapper #theme-header #logo img,
#tie-wrapper #theme-header #sticky-logo img {
	filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .35));
}

/* ── 1b. Neutralise Jannah's saved "Header background" option ───────────────
   Jannah's Theme-Options header-background (and its Mobile variant) inject inline
   CSS that paints `.logo-container` with a STORED gradient (the old #5c258d→#4389a2
   violet/teal). On desktop it hides behind the logo; on MOBILE `.logo-container`
   becomes the full-width masthead bar, so that stale gradient WAS the visible
   mobile header — sitting on top of our transparent `#theme-header` and defeating
   the glass default AND every Header-Studio preset. Force it transparent so
   `#theme-header` is the ONE masthead fill on every width. `!important` beats
   Jannah's non-important inline option CSS regardless of source order. This is
   what makes the mobile navbar background actually track our styling.
   NOTE the `:not(.fixed-nav)` — only the AT-REST masthead is forced transparent
   (so #theme-header's fill shows through). When the mobile bar STICKS, Jannah
   adds `.fixed-nav` to `.logo-container` (layout-2 mobile sticky, scripts.js
   tieSmartSticky → $stickyNav = .logo-container) and `position:fixed` detaches
   it from #theme-header, so a transparent fixed bar would show nothing behind it
   — the "header background disappears on scroll" bug. The mobile-media rule in
   section 10 gives that stuck bar its own frosted fill instead. */
#tie-wrapper #theme-header .logo-container:not(.fixed-nav) {
	background: transparent !important;
	background-color: transparent !important;
}

/* ── 2. Nav strip — seamless with the masthead ─────────────────────────────
   Same dark surface as the masthead (skin.css sets #main-nav → --sa-bg-2), so
   there is NO orange seam. A single soft gradient hairline sits at the very
   bottom of the header as the only separator from the page. On scroll the nav
   detaches and turns to real frosted glass. */
#tie-wrapper #theme-header #main-nav {
	position: relative;
	box-shadow: 0 12px 32px -22px rgba(0, 0, 0, .9);
}
/* At rest the nav is transparent too, so the masthead + nav read as ONE
   seamless surface (no darker nav band). skin.css sets it to --sa-bg-2 with a
   3-ID !important rule, so we out-specify with a :not() pseudo. The sticky
   .fixed-nav keeps its own frosted-glass rule below. */
#tie-wrapper #theme-header #main-nav:not(.fixed-nav),
#tie-wrapper #theme-header #main-nav:not(.fixed-nav) .main-menu-wrapper {
	background: transparent !important;
}
/* The lone brand accent: a low-key gradient hairline under the whole header. */
#tie-wrapper #theme-header #main-nav::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sa-violet) 55%, transparent), transparent);
	pointer-events: none;
}
/* Sticky nav → frosted glass. Needs a TRANSLUCENT background for the blur to
   read — so we must out-specify skin.css's 3-ID `#tie-wrapper #theme-header
   #main-nav{background:--sa-bg-2!important}` (the sticky nav stays inside
   #theme-header). Both the in-place and (if Jannah relocates it) moved cases are
   covered. color-mix falls back to the solid token if unsupported. */
#tie-wrapper #theme-header #main-nav.fixed-nav,
#tie-wrapper #main-nav.fixed-nav {
	background: color-mix(in srgb, var(--sa-bg-2) 74%, transparent) !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	box-shadow: 0 14px 40px -16px rgba(0, 0, 0, .8);
}
/* Keep the same subtle hairline under the nav when it's stuck. */
#tie-wrapper #theme-header #main-nav.fixed-nav::after,
#tie-wrapper #main-nav.fixed-nav::after { opacity: .8; }

/* Kill skin.css's flat --sa-bg-2 boxes on the menu containers (`.main-menu{
   background:--sa-bg-2}` was painting dark rectangles behind the links). The nav
   is a clean surface now — the glass island below is the only chrome. */
#tie-wrapper #theme-header #main-nav .main-menu,
#tie-wrapper #theme-header #main-nav .main-menu-wrap,
#tie-wrapper #theme-header #main-nav #main-nav-menu {
	background: transparent !important;
}

/* ── 2b. Floating glass nav island (at rest) ───────────────────────────────
   The menu + Vote + search sit inside ONE rounded, translucent, blurred capsule
   that floats on the transparent header — premium and light (a single blurred
   element; desktop only, since mobile uses the off-canvas menu). When the nav
   sticks, `.fixed-nav` takes over as a full-width frosted bar instead. */
#tie-wrapper #theme-header #main-nav:not(.fixed-nav) .main-menu-wrapper {
	display: flex;
	justify-content: center;
}
#tie-wrapper #theme-header #main-nav:not(.fixed-nav) #menu-components-wrap {
	flex: 0 0 auto;
	width: auto;
	align-items: center;
	padding: .38rem .55rem .38rem 1.1rem;
	border-radius: var(--sa-radius-pill);
	background: color-mix(in srgb, var(--sa-surface-1) 58%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.35);
	backdrop-filter: blur(16px) saturate(1.35);
	border: 1px solid var(--sa-border);
	box-shadow: 0 14px 36px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* Search sits at the island's right end, split off by a subtle divider instead
   of its own boxed pill. */
#tie-wrapper #theme-header #main-nav:not(.fixed-nav) .components {
	margin-left: .5rem;
	padding-left: .6rem;
	border-left: 1px solid var(--sa-border);
}
#tie-wrapper #theme-header #main-nav:not(.fixed-nav) .components .search-bar form#search {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* ── 3. Top-level menu items ──────────────────────────────────────────────
   Display face, muted→bright on hover, and an animated gradient underline that
   grows from the centre. The caret (a::before) is left intact and just rotates. */
#tie-wrapper #main-nav-menu .menu > li > a {
	position: relative;
	z-index: 0;
	font-family: var(--sa-font-display);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--sa-text-muted);
	border-radius: var(--sa-radius-pill);
	transition: color .2s ease;
}
#tie-wrapper #main-nav-menu .menu > li:hover > a,
#tie-wrapper #main-nav-menu .menu > li > a:focus-visible,
#tie-wrapper #main-nav-menu .menu > li.tie-current-menu > a,
#tie-wrapper #main-nav-menu .menu > li.current-menu-item > a { color: var(--sa-text); }

/* Premium hover/current: a soft frosted capsule scales up behind the item (no more
   mid-text line). A fixed-height pill centred vertically on the link sits cleanly
   around the text whatever the nav row height. ::after is free (caret uses ::before). */
#tie-wrapper #main-nav-menu .menu > li > a::after {
	content: ""; position: absolute; z-index: -1;
	top: 50%; left: 0; right: 0; height: 32px;
	/* `width:auto` is load-bearing. Jannah's own current-item marker is also an
	   `a:after` (base.css, `.menu-style-default .menu > li.tie-current-menu > a:after`)
	   and it sets `width:20px` — the same pseudo-element, so on the ACTIVE item
	   that width won and collapsed our capsule into a 20px blob. Declaring it
	   here keeps the capsule spanning left:0→right:0 whatever Jannah asks for. */
	width: auto; margin: 0; bottom: auto;
	transform: translateY(-50%) scale(.82);
	border-radius: var(--sa-radius-pill);
	background: color-mix(in srgb, var(--sa-violet) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--sa-violet) 24%, transparent);
	opacity: 0;
	transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1);
}
#tie-wrapper #main-nav-menu .menu > li:hover > a::after,
#tie-wrapper #main-nav-menu .menu > li > a:focus-visible::after,
#tie-wrapper #main-nav-menu .menu > li.tie-current-menu > a::after,
#tie-wrapper #main-nav-menu .menu > li.current-menu-item > a::after {
	opacity: 1; transform: translateY(-50%) scale(1);
}
/* ── Neutralise Jannah's own current-item decorations ─────────────────────
   The active item is the one place the base theme decorates hardest, and it
   used to STACK on top of our capsule: a 5px underline, a solid fill, and a
   little arrow — all painted in `--main-nav-primary-color`, which resolves to
   Jannah's stock `--brand-color` (#0669ff) unless remapped (skin.css now does).
   Which of the three you get depends on `main_nav_style` in Theme Options →
   Header, so neutralise EVERY style rather than the one that happened to be
   selected: an admin changing that option must not resurrect the blue.

   The capsule above is the single source of truth for "this item is active". */
#tie-wrapper nav.main-nav.menu-style-default .menu > li.tie-current-menu,
#tie-wrapper nav.main-nav.menu-style-border-bottom .menu > li.tie-current-menu,
#tie-wrapper nav.main-nav.menu-style-side-arrow .menu > li.tie-current-menu,
#tie-wrapper nav.main-nav.menu-style-border-top .menu > li.tie-current-menu {
	border-bottom: 0 !important;
	border-top: 0 !important;
	margin-bottom: 0;
}
/* The solid fill behind the active/hovered link. */
#tie-wrapper nav.main-nav.menu-style-solid-bg .menu > li.tie-current-menu > a,
#tie-wrapper nav.main-nav.menu-style-solid-bg .menu > li:hover > a {
	background-color: transparent;
}
/* Jannah's little pointer/arrow on the active item — same pseudo-element as our
   capsule, so it cannot simply be hidden; it is re-specified by the capsule
   rule above. This only kills the variants drawn on the LI. */
#tie-wrapper nav.main-nav .menu > li.tie-current-menu::after,
#tie-wrapper nav.main-nav .menu > li.tie-current-menu::before {
	display: none;
}
/* Dropdown caret: gentle rotate on open. */
#tie-wrapper #main-nav .menu-item-has-children > a::before {
	transition: transform .25s ease;
}
#tie-wrapper #main-nav-menu .menu > li.menu-item-has-children:hover > a::before,
#tie-wrapper #main-nav-menu .menu > li.menu-item-has-children:focus-within > a::before {
	transform: translateY(-50%) rotate(180deg);
}

/* ── 4. Dropdown panels ───────────────────────────────────────────────────
   Turn Jannah's plain display:none list into a floating card: rounded, bordered,
   glowing, with a gradient accent line and a fade+slide reveal. We override the
   display toggle with visibility/opacity so it can animate. */
#tie-wrapper #main-nav .main-menu .menu-sub-content {
	display: block;
	opacity: 0; visibility: hidden;
	transform: translateY(12px);
	transform-origin: top center;
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	background: var(--sa-surface-1);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-sm);
	box-shadow: 0 20px 46px -14px rgba(0, 0, 0, .72), var(--sa-glow);
	padding: 8px;
	margin-top: 12px;
	min-width: 224px;
}
/* Gradient accent line (::before) + invisible hover bridge (::after) so moving
   the cursor from the item into the card doesn't close it. */
#tie-wrapper #main-nav .main-menu .menu-sub-content::before {
	content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px;
	background: var(--sa-gradient); border-radius: 2px;
}
#tie-wrapper #main-nav .main-menu .menu-sub-content::after {
	content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
#tie-wrapper #main-nav .main-menu ul li:hover > .menu-sub-content,
#tie-wrapper #main-nav .main-menu ul li:focus-within > .menu-sub-content {
	opacity: 1; visibility: visible; transform: translateY(0);
}
/* Dropdown links — pill rows with a sliding accent wash + indent. */
#tie-wrapper #main-nav .menu-sub-content li > a {
	display: block;
	border-radius: 10px;
	padding: 9px 12px !important;
	color: var(--sa-text-muted);
	font-family: var(--sa-font-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .02em;
	border: 0 !important;
	transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
#tie-wrapper #main-nav .menu-sub-content li > a:hover {
	background: linear-gradient(90deg, color-mix(in srgb, var(--sa-violet) 24%, transparent), transparent);
	color: var(--sa-text);
	padding-left: 18px !important;
}

/* ── 5. "Vote" CTA pill ───────────────────────────────────────────────────
   The injected sa-vote-menu-item becomes the primary action: a gradient pill
   with a lift, a shine sweep on hover, and a soft idle glow. */
#tie-wrapper #main-nav-menu .menu > li.sa-vote-menu-item {
	display: flex; align-items: center; margin-left: 8px;
}
#tie-wrapper #main-nav-menu .menu > li.sa-vote-menu-item > a {
	position: relative; overflow: hidden;
	/* Compact pill — tighter padding + slightly smaller caps so its height sits in
	   line with the text menu items instead of towering over them. */
	padding: .34em 1em !important;
	border-radius: var(--sa-radius-pill);
	/* Gradient fill + a glass sheen on top for a premium, dimensional look. */
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 46%),
		var(--sa-gradient);
	color: var(--sa-on-accent) !important;
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: .9em;
	letter-spacing: .05em;
	text-transform: uppercase;
	box-shadow:
		0 5px 13px -7px var(--sa-violet),            /* soft coloured drop glow   */
		inset 0 1px 0 rgba(255, 255, 255, .4),        /* crisp top edge highlight  */
		inset 0 0 0 1px rgba(255, 255, 255, .1);      /* subtle rim                */
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#tie-wrapper #main-nav-menu .menu > li.sa-vote-menu-item > a::after { display: none; }
#tie-wrapper #main-nav-menu .menu > li.sa-vote-menu-item > a:hover {
	transform: translateY(-1px);
	filter: saturate(1.06) brightness(1.04);
	box-shadow:
		0 9px 22px -9px var(--sa-violet),
		inset 0 1px 0 rgba(255, 255, 255, .48),
		inset 0 0 0 1px rgba(255, 255, 255, .15);
}
/* Shine sweep (::before is free — the CTA has no caret). */
#tie-wrapper #main-nav-menu .menu > li.sa-vote-menu-item > a::before {
	content: ""; position: absolute; top: 0; left: -125%; width: 60%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
	transform: skewX(-18deg); pointer-events: none;
}
#tie-wrapper #main-nav-menu .menu > li.sa-vote-menu-item > a:hover::before {
	left: 135%; transition: left .7s ease;
}

/* ── 6. Inline search field ───────────────────────────────────────────────
   Rounded pill with a focus ring and a gradient circular submit. */
#tie-wrapper #main-nav .components .search-bar form#search {
	display: flex; align-items: center;
	background: var(--sa-surface-1);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-pill);
	padding: 3px 3px 3px 8px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
#tie-wrapper #main-nav .components .search-bar form#search:focus-within {
	border-color: var(--sa-border-strong);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-violet) 24%, transparent);
}
#tie-wrapper #main-nav .components .search-bar #search-input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--sa-text) !important;
	height: 34px; margin: 0;
}
#tie-wrapper #main-nav .components .search-bar #search-input::placeholder { color: var(--sa-text-dim); }
#tie-wrapper #main-nav .components .search-bar #search-submit {
	flex: 0 0 auto;
	width: 34px; height: 34px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--sa-gradient);
	color: var(--sa-on-accent);
	display: flex; align-items: center; justify-content: center;
	transition: transform .15s ease, filter .15s ease;
}
#tie-wrapper #main-nav .components .search-bar #search-submit:hover {
	transform: scale(1.07); filter: saturate(1.1);
}

/* ── 7. Mobile trigger icons — premium buttons (Header Studio) ─────────────
   The hamburger (#mobile-menu-icon) + search (.tie-search-trigger-mobile) tap
   targets sit on the masthead. They keep their white glyphs (bars/icon) but the
   <a> becomes a proper 40px circular button whose chrome is switchable from
   "Shining Awards → Style" — `html.sa-hbtn-{id}`: glass (frosted, default),
   outline (thin ring), minimal (bare). `.mobile-header-components` only renders
   below Jannah's mobile breakpoint, so these never touch desktop. */
#tie-wrapper #theme-header .mobile-header-components .components > li { margin: 0; }
#tie-wrapper #theme-header .mobile-header-components .components > li > a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0;
	border-radius: 50%;
	color: #fff;
	transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
#tie-wrapper #theme-header .mobile-header-components .components > li > a:active { transform: scale(.92); }
/* Keep the 3-bar hamburger + search glyph crisp white on any masthead fill. */
#tie-wrapper #theme-header .tie-mobile-menu-icon,
#tie-wrapper #theme-header .tie-mobile-menu-icon::before,
#tie-wrapper #theme-header .tie-mobile-menu-icon::after { background-color: #fff; }
#tie-wrapper #theme-header .mobile-header-components .tie-search-icon { color: #fff; }
/* Jannah ships the CSS-drawn hamburger with `position:relative; top:-4px` (it was
   tuned to sit on a text baseline). Inside our flex-centred round button that
   offset shoves the whole icon up-left off the disc's centre. Zero it out so the
   middle bar (the span itself) sits dead-centre and the ±offset bars stay
   symmetric around it — precise, compact centring on every preset. */
#tie-wrapper #theme-header .mobile-header-components .components > li > a .tie-mobile-menu-icon {
	top: 0 !important;
	margin: 0 !important;
	line-height: 0 !important;
}
/* The search glyph is icon-font text; neutralise any inherited line-height so it,
   too, optically centres in the disc. */
#tie-wrapper #theme-header .mobile-header-components .components > li > a .tie-search-icon { line-height: 1 !important; }

/* Glass pill (default) — frosted translucent disc with a top-edge highlight. */
html.sa-hbtn-glass #tie-wrapper #theme-header .mobile-header-components .components > li > a {
	background: rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(8px) saturate(1.3);
	backdrop-filter: blur(8px) saturate(1.3);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
}
html.sa-hbtn-glass #tie-wrapper #theme-header .mobile-header-components .components > li > a:hover {
	background: rgba(255, 255, 255, .2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .4);
}
/* Outline — thin bright ring, transparent fill; subtle fill on hover. */
html.sa-hbtn-outline #tie-wrapper #theme-header .mobile-header-components .components > li > a {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42);
}
html.sa-hbtn-outline #tie-wrapper #theme-header .mobile-header-components .components > li > a:hover {
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7);
}
/* Minimal — bare glyph, only a faint disc on hover. */
html.sa-hbtn-minimal #tie-wrapper #theme-header .mobile-header-components .components > li > a { background: transparent; box-shadow: none; }
html.sa-hbtn-minimal #tie-wrapper #theme-header .mobile-header-components .components > li > a:hover { background: rgba(255, 255, 255, .1); }

/* ── 7b. Off-canvas mobile MENU (drawer) ──────────────────────────────────
   The slide-out panel is `aside.side-aside`, which Jannah renders as a SIBLING
   of #tie-wrapper (right before </body>) — so our old `#tie-wrapper aside…` rules
   never matched and Jannah's stored gradient (the purple #5c258d→#4389a2 from its
   theme options) always won. These rules are scoped from <html> instead, so they
   actually reach the panel, and out-specify Jannah's `.side-aside.normal-side`
   (2 classes) with `html.sa-drawer-{id} aside.side-aside` (+ !important for
   LiteSpeed source-order safety). The background is switchable per preset from
   the Style Studio; the internals (search, menu rows, Vote CTA, socials, close)
   are re-skinned to our tokens for every preset. */
aside.side-aside { border-right: 1px solid rgba(255, 255, 255, .08); }

/* Drawer background presets (default = frosted glass; needs the panel translucent
   so the blur reads, with a solid fallback for engines without color-mix). */
html.sa-drawer-frosted aside.side-aside.normal-side {
	background: var(--sa-bg-2) !important;
	background: radial-gradient(130% 150% at 20% 0%, color-mix(in srgb, var(--sa-violet) 24%, transparent), transparent 60%), color-mix(in srgb, var(--sa-bg-2) 88%, transparent) !important;
	-webkit-backdrop-filter: blur(22px) saturate(1.35);
	backdrop-filter: blur(22px) saturate(1.35);
}
html.sa-drawer-brand  aside.side-aside.normal-side { background: var(--sa-gradient) !important; }
html.sa-drawer-cosmic aside.side-aside.normal-side { background: linear-gradient(160deg, #2A1055 0%, #7C3AED 50%, #FF3DAE 100%) !important; }
html.sa-drawer-aurora aside.side-aside.normal-side { background: linear-gradient(160deg, #0B1E3A 0%, #0E7C68 50%, #16E5A6 100%) !important; }
html.sa-drawer-noir   aside.side-aside.normal-side { background: radial-gradient(130% 150% at 30% 0%, rgba(255, 61, 174, .26), transparent 62%), #0B0710 !important; }
html.sa-drawer-solid  aside.side-aside.normal-side { background: var(--sa-bg-2) !important; }
html.sa-drawer-custom aside.side-aside.normal-side { background: var(--sa-drawer-custom, var(--sa-gradient)) !important; }

/* Drawer internals — light on every preset (all fills are dark/saturated). The
   selectors carry `aside.side-aside …` so they beat Jannah's own `.side-aside
   #mobile-menu li a{color:#fff}` (equal-or-lower specificity otherwise). */
aside.side-aside .close-side-aside,
aside.side-aside .tie-btn-close span { color: #fff; opacity: .85; }
aside.side-aside .close-side-aside:hover { opacity: 1; }
aside.side-aside #mobile-search .search-field {
	background: rgba(255, 255, 255, .1) !important;
	border: 1px solid rgba(255, 255, 255, .16) !important;
	color: #fff !important;
	border-radius: var(--sa-radius-pill) !important;
}
aside.side-aside #mobile-search .search-field::placeholder { color: rgba(255, 255, 255, .6); }
aside.side-aside #mobile-menu li > a {
	color: rgba(255, 255, 255, .9);
	font-family: var(--sa-font-display);
	font-weight: 600;
	border-color: rgba(255, 255, 255, .1) !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	transition: color .18s ease, padding-left .18s ease;
}
aside.side-aside #mobile-menu li > a:hover,
aside.side-aside #mobile-menu li.current-menu-item > a { color: #fff; padding-left: 6px; }
aside.side-aside #mobile-social-icons a { color: #fff; opacity: .85; transition: opacity .18s ease, transform .18s ease; }
aside.side-aside #mobile-social-icons a:hover { opacity: 1; transform: translateY(-2px); }
/* Off-canvas Vote (cloned sa-vote-menu-item) → full-width gradient CTA. */
aside.side-aside #mobile-menu li.sa-vote-menu-item > a {
	margin: 12px 14px;
	padding: .7em 1em;
	text-align: center;
	background: var(--sa-gradient) !important;
	color: var(--sa-on-accent) !important;
	border: 0 !important;
	border-radius: var(--sa-radius-pill);
	font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	text-shadow: none;
	box-shadow: 0 8px 22px -8px var(--sa-violet);
}

/* ── 8. Tablet / mid-width polish ─────────────────────────────────────────*/
@media (max-width: 1200px) {
	#tie-wrapper #main-nav-menu .menu > li > a { letter-spacing: .02em; }
	#tie-wrapper #main-nav .components .search-bar #search-input { max-width: 130px; }
}

/* ── 10. Navbar background presets (Header Studio) ─────────────────────────
   The masthead background is switchable per device from "Shining Awards →
   Header". header-studio.php stamps `sa-navd-{id}` (desktop) + `sa-navm-{id}`
   (mobile) on <html>; the rules below swap `#theme-header`'s background,
   GATED BY MEDIA so desktop and mobile are independent (992px = Jannah's
   mobile-nav breakpoint). `glass` is the default (section 1 above) and needs
   no rule here. Each fill out-specifies section 1 (adds html.class) + !important.
   The at-rest nav is already transparent (section 2), so the fill reads as one
   unified bar; the floating glass island (2b) still sits nicely on top.
   Preset values are mirrored in shining_nav_presets() (admin swatches). */

/* Shared: give any FILLED masthead a soft separating drop-shadow + drop the
   radial glow's job to the fill. Listed per device below via the same values. */
@media (min-width: 992px) {
	html.sa-navd-brand  #tie-wrapper #theme-header { background: var(--sa-gradient) !important; }
	html.sa-navd-cosmic #tie-wrapper #theme-header { background: linear-gradient(100deg, #2A1055 0%, #7C3AED 50%, #FF3DAE 100%) !important; }
	html.sa-navd-aurora #tie-wrapper #theme-header { background: linear-gradient(100deg, #0B1E3A 0%, #0E7C68 50%, #16E5A6 100%) !important; }
	html.sa-navd-ocean  #tie-wrapper #theme-header { background: linear-gradient(100deg, #0B2A4A 0%, #1E5FD0 50%, #22D3EE 100%) !important; }
	html.sa-navd-sunset #tie-wrapper #theme-header { background: linear-gradient(100deg, #3A0D22 0%, #C42E93 50%, #FF6A3D 100%) !important; }
	html.sa-navd-noir   #tie-wrapper #theme-header { background: radial-gradient(120% 150% at 50% -35%, rgba(255, 61, 174, .24), transparent 62%), #0B0710 !important; }
	html.sa-navd-solid  #tie-wrapper #theme-header { background: var(--sa-bg-2) !important; }
	html.sa-navd-custom #tie-wrapper #theme-header { background: var(--sa-navd-custom, var(--sa-gradient)) !important; }
	/* Filled desktop mastheads: subtle bottom shadow for separation from the page. */
	html.sa-navd-brand  #tie-wrapper #theme-header,
	html.sa-navd-cosmic #tie-wrapper #theme-header,
	html.sa-navd-aurora #tie-wrapper #theme-header,
	html.sa-navd-ocean  #tie-wrapper #theme-header,
	html.sa-navd-sunset #tie-wrapper #theme-header,
	html.sa-navd-noir   #tie-wrapper #theme-header,
	html.sa-navd-solid  #tie-wrapper #theme-header,
	html.sa-navd-custom #tie-wrapper #theme-header { box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9); }

	/* A filled masthead paints the (transparent) nav with a bright gradient, so the
	   at-rest muted mauve link colour can drop below 4.5:1 on its light end. On any
	   filled desktop preset, brighten labels to full text + a soft dark shadow so
	   they stay legible across the whole gradient (WCAG 1.4.3). */
	html.sa-navd-brand  #tie-wrapper #main-nav-menu .menu > li > a,
	html.sa-navd-cosmic #tie-wrapper #main-nav-menu .menu > li > a,
	html.sa-navd-aurora #tie-wrapper #main-nav-menu .menu > li > a,
	html.sa-navd-ocean  #tie-wrapper #main-nav-menu .menu > li > a,
	html.sa-navd-sunset #tie-wrapper #main-nav-menu .menu > li > a,
	html.sa-navd-noir   #tie-wrapper #main-nav-menu .menu > li > a,
	html.sa-navd-solid  #tie-wrapper #main-nav-menu .menu > li > a,
	html.sa-navd-custom #tie-wrapper #main-nav-menu .menu > li > a {
		color: var(--sa-text);
		text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	}
}

@media (max-width: 991px) {
	/* ── Stuck mobile masthead → frosted glass ─────────────────────────────
	   On scroll Jannah adds `.fixed-nav` to `.logo-container` and makes it
	   `position:fixed`, detaching it from `#theme-header` — so the masthead
	   fill/glow no longer sits behind it and the bar would go fully transparent
	   (the disappearing-header-on-scroll bug). Give the STUCK bar its OWN frosted
	   fill, mirroring the desktop `#main-nav.fixed-nav` treatment, so it always
	   reads as a premium glass bar over the content — for the Glass default AND
	   every preset. The solid `--sa-bg-2` line is a fallback for engines without
	   color-mix (which would otherwise drop the translucent value and go clear). */
	#tie-wrapper #theme-header .logo-container.fixed-nav {
		background: var(--sa-bg-2) !important;
		background: color-mix(in srgb, var(--sa-bg-2) 82%, transparent) !important;
		-webkit-backdrop-filter: blur(18px) saturate(1.4);
		backdrop-filter: blur(18px) saturate(1.4);
		box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .8);
	}
	html.sa-navm-brand  #tie-wrapper #theme-header { background: var(--sa-gradient) !important; }
	html.sa-navm-cosmic #tie-wrapper #theme-header { background: linear-gradient(100deg, #2A1055 0%, #7C3AED 50%, #FF3DAE 100%) !important; }
	html.sa-navm-aurora #tie-wrapper #theme-header { background: linear-gradient(100deg, #0B1E3A 0%, #0E7C68 50%, #16E5A6 100%) !important; }
	html.sa-navm-ocean  #tie-wrapper #theme-header { background: linear-gradient(100deg, #0B2A4A 0%, #1E5FD0 50%, #22D3EE 100%) !important; }
	html.sa-navm-sunset #tie-wrapper #theme-header { background: linear-gradient(100deg, #3A0D22 0%, #C42E93 50%, #FF6A3D 100%) !important; }
	html.sa-navm-noir   #tie-wrapper #theme-header { background: radial-gradient(120% 150% at 50% -35%, rgba(255, 61, 174, .24), transparent 62%), #0B0710 !important; }
	html.sa-navm-solid  #tie-wrapper #theme-header { background: var(--sa-bg-2) !important; }
	html.sa-navm-custom #tie-wrapper #theme-header { background: var(--sa-navm-custom, var(--sa-gradient)) !important; }
	/* On a filled mobile masthead the logo/hamburger/search sit on colour — keep
	   the trigger icons white (section 7 already does) and add separation. */
	html.sa-navm-brand  #tie-wrapper #theme-header,
	html.sa-navm-cosmic #tie-wrapper #theme-header,
	html.sa-navm-aurora #tie-wrapper #theme-header,
	html.sa-navm-ocean  #tie-wrapper #theme-header,
	html.sa-navm-sunset #tie-wrapper #theme-header,
	html.sa-navm-noir   #tie-wrapper #theme-header,
	html.sa-navm-solid  #tie-wrapper #theme-header,
	html.sa-navm-custom #tie-wrapper #theme-header { box-shadow: 0 16px 34px -24px rgba(0, 0, 0, .9); }

	/* ── Header ad strip ────────────────────────────────────────────────────
	   Jannah renders the `banner_top` ad INSIDE #theme-header (beside the logo
	   on desktop — fine there). On phones that column wraps below the nav as a
	   full-width row, and the masthead presets above — which paint the whole
	   #theme-header — kept painting behind it: an advertisement floating on the
	   brand gradient, with the article's category pill starting flush beneath.
	   Give the wrapped row its own full-bleed strip (the 50% − 50vw bleed,
	   since the column sits in a centered container) so the gradient visually
	   ends at the nav band, plus real breathing room before the content.

	   THE COLOUR IS NOT --sa-bg. The visible page canvas everywhere on this
	   theme is #tie-wrapper, which Jannah paints `--tie-dark-skin-bg` — mapped
	   by skin.css to --sa-surface-1. Two shipped attempts guessed per-surface
	   colours (--sa-bg, then .single→surface-1) and each mismatched somewhere,
	   because the wrapper canvas is the SAME on every page. Painting the strip
	   with the wrapper's own token makes it pixel-identical to whatever sits
	   below — home, singles, archives, routes, any palette. */
	#tie-wrapper #theme-header .stream-item-top-wrapper {
		background: var(--tie-dark-skin-bg, var(--sa-surface-1));
		margin: 0 calc(50% - 50vw);
		padding: 1.1rem calc(50vw - 50%) 1.5rem;
	}
	/* The masthead presets' drop shadow paints past the header's bottom edge —
	   which, with the ad row present, is the STRIP's edge: a soft dark smear
	   right where the strip meets the content, reading as a border (measured
	   live: a ~50px #0C1711 dip on a #101E18 canvas). The strip already does
	   the job of separating the coloured band from the page, so with an ad
	   present the shadow is dropped. (No-`:has` engines keep the faint smear —
	   cosmetic only.) */
	#tie-wrapper #theme-header:has(.stream-item-top-wrapper) {
		box-shadow: none !important;
	}
}

/* ── 11. Motion opt-out ────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
	#tie-wrapper #main-nav-menu .menu > li > a::after,
	#tie-wrapper #main-nav .main-menu .menu-sub-content,
	#tie-wrapper #main-nav-menu .menu > li.sa-vote-menu-item > a { transition: none; animation: none; }
}