/* VELYON Theme — Header (Desktop) */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--velyon-bg);
	border-bottom: 1px solid var(--velyon-border);
	transition: box-shadow .2s ease;
}
.site-header.is-scrolled {
	box-shadow: var(--velyon-shadow);
}
.site-header.not-sticky {
	position: static;
}

/* Auto-hide (hide on scroll down, show on scroll up) — v1.0.2, replaces
   the old shrink-on-scroll. The old shrink changed the header's HEIGHT
   while scrolling, which shifts the whole page content, which changes
   scrollY, which can flip the "scrolled" state right back — that
   feedback loop near the top is what caused the jitter and the extra
   blank scroll room. This version only ever uses transform, which
   never changes layout, so nothing below the header can move.
   transform is `none` (not translateY(0)) when visible so the header
   doesn't become a containing block for fixed-position descendants. */
.site-header.is-autohide {
	transition: box-shadow .2s ease, transform .28s ease;
}
.site-header.is-autohide.is-hidden {
	transform: translateY(-100%);
	box-shadow: none;
}

/* Sticky header must sit BELOW the WordPress admin bar when it is
   showing (logged-in admins), otherwise it hides underneath it. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
	/* Admin bar is not fixed at this width — it scrolls away. */
	.admin-bar .site-header { top: 0; }
}

/* Single header row — logo, nav, and actions share one bar (a two-bar
   split was tried and reverted; see README's history section). The
   header keeps a constant height at all times (no shrink on scroll). */
.header-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	/* v1.7.0: vertical only — `padding: 16px 0` wiped .velyon-container's
	   side padding (the header shares that element), so on phones and on
	   tablet/small-laptop widths the logo and icons touched the screen edge. */
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-branding {
	position: relative;
	min-width: 0; /* v1.7.0: lets a wide logo shrink instead of pushing the header past the screen */
}
.site-branding img.custom-logo {
	display: block;
	max-height: var(--velyon-logo-height, 40px);
	max-width: 100%;
	width: auto;
	transition: max-height .2s ease;
}
.site-branding .site-title {
	display: block;
	font-family: var(--velyon-font-heading);
	font-weight: 800;
	font-size: 19px;
	color: var(--velyon-text);
}

/* Light/dark logo swap (post-M11). The native Site Identity logo is
   the dark-mode logo; .logo-light only renders when an admin has set
   one via Customize → Site Identity → Logo — Light mode. If it's
   unset, .logo-light simply isn't in the markup at all, so the dark
   logo shows regardless of theme (today's behavior, unchanged). */
.logo-light {
	display: none;
}
html[data-theme="light"] .logo-dark {
	display: none;
}
html[data-theme="light"] .logo-light {
	display: block;
}

/* Theme toggle (desktop) — button + icons existed as JS/CSS
   infrastructure since M2/M3 (assets/js/theme-switcher.js), but no
   actual button was ever added to the header markup. Fixed here. */
/* v1.7.0: the header search BAR became a round Search BUTTON that opens the
   search popup (inc/search-popup.php) — same look as the toggle beside it. */
.theme-toggle-btn,
.search-trigger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--velyon-border);
	background: var(--velyon-surface-alt);
	color: var(--velyon-text);
}
.theme-toggle-btn:hover,
.search-trigger-btn:hover,
.search-trigger-btn:focus-visible {
	border-color: var(--velyon-accent-deep);
	color: var(--velyon-accent-deep);
}
.search-trigger-btn:focus-visible {
	outline: 2px solid var(--velyon-accent);
	outline-offset: 2px;
}
.theme-toggle-btn svg,
.search-trigger-btn svg {
	width: 18px;
	height: 18px;
}
.theme-toggle-btn .icon-moon {
	display: none;
}
html[data-theme="light"] .theme-toggle-btn .icon-sun {
	display: none;
}
html[data-theme="light"] .theme-toggle-btn .icon-moon {
	display: block;
}

/* Primary nav */
.primary-nav {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: var(--logo-gap, 32px);
}
.primary-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
}
.primary-nav > ul > li.menu-item > a {
	font-family: var(--velyon-font-heading);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--velyon-text-muted);
	padding: 6px 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.primary-nav > ul > li.menu-item:hover > a,
.primary-nav > ul > li.menu-item:focus-within > a {
	color: var(--velyon-text);
}

/* Simple (non-mega) dropdown fallback */
.primary-nav li.menu-item > ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--velyon-surface);
	border: 1px solid var(--velyon-border);
	border-radius: var(--velyon-radius-m);
	box-shadow: var(--velyon-shadow);
	padding: 8px;
	min-width: 180px;
	list-style: none;
	display: none;
	z-index: 150;
}
.primary-nav li.menu-item:not(.mega-wrap) {
	position: relative;
}

/* "More" overflow menu (post-M11 priority nav, assets/js/priority-nav.js)
   — right-aligned since it's always the rightmost item, so its dropdown
   never risks overflowing past the viewport's right edge. */
.more-menu-wrap > ul.sub-menu {
	left: auto;
	right: 0;
}
.primary-nav li.menu-item:hover > ul.sub-menu,
.primary-nav li.menu-item.is-open > ul.sub-menu {
	display: block;
}
.primary-nav ul.sub-menu li a {
	display: block;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--velyon-text);
}
.primary-nav ul.sub-menu li a:hover {
	background: var(--velyon-surface-alt);
}

/* Nested (non-mega) flyout submenu — depth ≥ 2. Flies out to the right
   instead of stacking as another row inside the same panel. Flush
   against the parent item (no gap) — unlike the mega menu, a flyout is
   narrow enough that a geometric hover-bridge isn't worth the
   complexity; removing the gap entirely is simpler and just as
   effective. The hover-intent JS delay (header.js) also covers this. */
.primary-nav ul.sub-menu ul.sub-menu.sub-menu-flyout {
	top: -9px;
	left: 100%;
	margin-left: 0;
}
.primary-nav ul.sub-menu li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.primary-nav ul.sub-menu li.menu-item-has-children > a::after {
	content: "›";
	color: var(--velyon-text-muted);
}

/* Mega menu — positioned relative to .header-inner (the whole header
   row), NOT the individual trigger link. A panel wide enough for
   several columns, centered under a narrow trigger, would overflow the
   viewport whenever that trigger sits far from center (e.g. the first
   item in the nav, near the logo) — exactly what caused the panel to
   render half off-screen. Spanning the full header row instead is
   robust regardless of which item triggers it. */
.header-inner {
	position: relative;
}
/* .mega-wrap must NOT get position:relative from anywhere — that's
   exactly the bug that regressed this fix once already (the plain-
   dropdown rule above matches it too, since it carries both .menu-item
   and .mega-wrap; the :not(.mega-wrap) exclusion on that rule is what
   prevents it, not this comment — but if that exclusion ever gets
   removed by mistake, .mega will silently re-anchor to the narrow
   trigger again instead of .header-inner. */

/* No hover-bridge element here on purpose (there was one, it caused a
   real bug: since .mega now spans the FULL header row rather than
   sitting under its own trigger, a bridge sized to match it also spans
   the full row — meaning hovering ANYWHERE along the header, nowhere
   near "For Candidates", would open the mega menu. header.js's JS
   hover-intent delay (open on mouseenter of the trigger OR the panel,
   close ~220ms after mouseleave of both) already handles the gap
   between trigger and panel via TIME rather than needing to geometrically
   bridge the SPACE between them, so no bridge is needed for the
   primary (JS-enabled) case. The plain CSS :hover fallback below is
   slightly less forgiving of the gap without a bridge — an acceptable
   trade for a no-JS fallback rather than a wide invisible hit-area
   sitting across the entire header for everyone. */
.mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-width: 900px;
	margin: 14px auto 0;
	background: var(--velyon-surface);
	border: 1px solid var(--velyon-border);
	border-radius: var(--velyon-radius-m);
	box-shadow: var(--velyon-shadow);
	padding: 28px 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 22px 32px;
	z-index: 150;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	transform: translateY(6px);
}
.mega-wrap:hover .mega,
.mega-wrap.is-open .mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.mega-col {
	flex: 1 1 160px;
	min-width: 160px;
	padding-right: 26px;
	border-right: 1px solid var(--velyon-border);
}
.mega-col:last-child {
	border-right: none;
	padding-right: 0;
}
.mega-col h4 {
	position: relative;
	margin: 0 0 14px;
	padding-left: 13px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--velyon-text-muted);
	font-weight: 800;
}
.mega-col h4::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 4px;
	height: 13px;
	border-radius: 2px;
	background: var(--velyon-accent);
}
.mega-col-links {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
a.mega-link {
	padding: 9px 10px;
	margin: 0 -10px;
	border-radius: var(--velyon-radius-s);
	font-size: 14px;
	color: var(--velyon-text);
	font-weight: 500;
}
a.mega-link:hover {
	color: var(--velyon-accent-deep);
	background: var(--velyon-surface-alt);
}

/* Featured column — thumbnail-style items */
a.mega-course {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px;
	margin: 0 -12px;
	border-radius: 12px;
	background: var(--velyon-surface-alt);
}
a.mega-course:hover {
	background: var(--velyon-border);
}
a.mega-course .thumb {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--velyon-accent), var(--velyon-accent-deep));
	flex-shrink: 0;
	box-shadow: 0 6px 14px rgba(0, 206, 45, .3);
}
a.mega-course .t {
	display: flex;
	align-items: center;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--velyon-text);
}
a.mega-course .s {
	display: block;
	font-size: 11.5px;
	color: var(--velyon-text-muted);
	line-height: 1.4;
}

/* Chips/badges (Hot, New, Live…) — see inc/menu-chips.php */
.menu-chip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	background: var(--chip-color, var(--velyon-accent));
	color: #04170a;
	line-height: 1.6;
	vertical-align: middle;
}
.menu-chip-icon {
	font-size: 9px;
	line-height: 1;
}
.menu-chip-animated {
	animation: velyon-chip-pulse 1.6s ease-in-out infinite;
}
@keyframes velyon-chip-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
	.menu-chip-animated {
		animation: none;
	}
}

/* Header actions: search, secondary button, account */
.header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
	flex-shrink: 0;
}

/* v1.7.0: the header no longer prints a .search-form; these rules now style
   the core Search widget in the blog sidebar (see also blog.css). */
.search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--velyon-surface);
	border: 1px solid var(--velyon-border);
	border-radius: 999px;
	padding: 8px 16px;
}
.search-form input[type="search"] {
	border: none;
	background: transparent;
	color: var(--velyon-text);
	font-family: var(--velyon-font-body);
	font-size: 13.5px;
	outline: none;
	width: 160px;
}
.search-form button {
	background: none;
	border: none;
	color: var(--velyon-text-muted);
	display: flex;
}

.btn {
	padding: 10px 18px;
	border-radius: 999px;
	font-family: var(--velyon-font-heading);
	font-weight: 700;
	font-size: 13.5px;
	border: none;
	display: inline-block;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary {
	background: var(--velyon-accent);
	color: #04170a;
}
.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 206, 45, .3);
}
.btn-ghost {
	background: transparent;
	color: var(--velyon-text);
	border: 1px solid var(--velyon-border);
}
.btn-ghost:hover {
	transform: translateY(-2px);
	border-color: var(--velyon-accent-deep);
	color: var(--velyon-accent-deep);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
@media (prefers-reduced-motion: reduce) {
	.btn-primary:hover,
	.btn-ghost:hover {
		transform: none;
	}
}

/* Account dropdown */
.account-wrap {
	position: relative;
}
.account-wrap .avatar {
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid var(--velyon-border);
	overflow: hidden;
	padding: 0;
	background: var(--velyon-accent-deep);
	cursor: pointer;
}
/* Live pulse ring — a small "you're logged in" signal, gamified per
   your ask rather than a plain static avatar. Expanding ring + fading
   opacity, looped. Deliberately on .account-wrap (the outer wrapper),
   NOT on .avatar itself — .avatar has overflow:hidden (needed to clip
   the profile photo into a circle), which was silently clipping this
   ring since it extends beyond the avatar's own box. .account-wrap has
   no overflow:hidden, so the ring renders correctly there instead,
   positioned to exactly match the avatar's own size/position. */
.account-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid var(--velyon-accent);
	animation: velyon-avatar-pulse 2.2s ease-out infinite;
	pointer-events: none;
}
@keyframes velyon-avatar-pulse {
	0% { transform: scale(1); opacity: .8; }
	100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.account-wrap::before {
		animation: none;
		display: none;
	}
}
.account-wrap .avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.account-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	background: var(--velyon-surface);
	border: 1px solid var(--velyon-border);
	border-radius: var(--velyon-radius-m);
	min-width: 190px;
	box-shadow: var(--velyon-shadow);
	padding: 8px;
	display: none;
	z-index: 150;
}
.account-wrap:hover .account-menu,
.account-wrap.is-open .account-menu {
	display: block;
}
.account-menu li {
	list-style: none;
	margin: 0;
}
.account-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--velyon-text);
}
.account-menu a:hover {
	background: var(--velyon-surface-alt);
}

/* v1.1.2 — name/avatar/email header at the top of the dropdown, same
   informational (non-clickable) convention as .drawer-account-tab in
   mobile-app-shell.css. Negative margin+border trick pulls it to the
   dropdown's own edges since .account-menu has 8px padding on all sides. */
.account-menu-who {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	margin: -8px -8px 6px;
	border-bottom: 1px solid var(--velyon-border);
	background: var(--velyon-surface-alt);
	border-radius: var(--velyon-radius-m) var(--velyon-radius-m) 0 0;
}
.account-menu-who .who-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
}
.account-menu-who .who-info {
	display: flex;
	flex-direction: column;
	min-width: 0; /* lets who-email ellipsis instead of overflowing the dropdown */
}
.account-menu-who .who-name {
	font-family: var(--velyon-font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--velyon-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.account-menu-who .who-email {
	font-size: 12px;
	color: var(--velyon-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Divider above Logout, same visual language as the who-block's own
   border — keeps it visually separated from the regular menu items
   above it, matching the previous theme's account menu. */
.account-menu a.account-menu-logout {
	margin-top: 6px;
	border-top: 1px solid var(--velyon-border);
	padding-top: 12px;
}

/* M3 will add mobile-specific header rules (hamburger, hidden nav, etc.)
   in a separate mobile-app-shell.css, loaded only where needed. */