/* =============================================================================
 * Homepage — announcement strip + compact nav + hero top alignment
 * Scope: valahub.com landing hero zone only
 * ============================================================================= */

main#vala-main.vala-homepage {
	--vh-header-max: min(1320px, calc(100% - 32px));
	--vh-header-pad-inline: clamp(16px, 2.5vw, 24px);
	margin-top: 0;
	padding-top: 0;
}

/* --- 1. Announcement strip — sizing/layout in final block at end of file --- */
main#vala-main.vala-homepage .vala-onboarding-panel--marketing > .vala-top-announcement {
	margin-top: 0;
}

main#vala-main.vala-homepage .vala-announcement.is-hidden {
	display: none !important;
}

main#vala-main.vala-homepage .vala-hero-section > .vala-landing-nav {
	margin-top: 0;
	border-top: none;
}

/* --- 2. Compact centered nav pill --- */
main#vala-main.vala-homepage .vala-landing-nav--glass {
	position: sticky;
	top: 8px;
	z-index: 200;
	margin: 0;
	padding: 0;
	background: transparent;
}

main#vala-main.vala-homepage .vala-landing-nav__sticky {
	width: auto;
}

main#vala-main.vala-homepage .vala-landing-nav__shell {
	width: var(--vh-header-max);
	max-width: var(--vh-header-max);
	margin: 8px auto 0;
	padding: 0 var(--vh-header-pad-inline);
	box-sizing: border-box;
}

main#vala-main.vala-homepage .vala-landing-nav__actions {
	gap: 6px;
}

main#vala-main.vala-homepage .vala-landing-brand.logo-pill {
	gap: 8px;
}

main#vala-main.vala-homepage .vala-landing-nav__card {
	width: 100%;
	border-radius: 24px;
	background: rgba(7, 24, 42, 0.68);
	border: 1px solid rgba(130, 230, 255, 0.14);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

main#vala-main.vala-homepage .vala-landing-nav.is-scrolled .vala-landing-nav__card {
	box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26);
	border-color: rgba(130, 230, 255, 0.2);
}

main#vala-main.vala-homepage .vala-landing-nav__inner {
	min-height: 56px;
	max-height: none;
	padding: 8px 12px;
	gap: 10px;
}

main#vala-main.vala-homepage .vala-landing-brand img {
	width: 36px;
	height: 36px;
	border-radius: 11px;
}

main#vala-main.vala-homepage .vala-landing-brand__name {
	display: inline;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
}

/* --- 3. Hero aligns with header width; tighter top gap --- */
main#vala-main.vala-homepage .vala-landing-hero.vala-landing-section--scene {
	margin-top: 0;
	padding-top: 0;
}

main#vala-main.vala-homepage .vala-landing-hero__inner.vala-landing-container {
	width: var(--vh-header-max);
	max-width: var(--vh-header-max);
	margin-inline: auto;
	padding-inline: var(--vh-header-pad-inline);
}

/* --- Tablet --- */
@media (max-width: 1024px) {
	main#vala-main.vala-homepage {
		--vh-header-max: min(1280px, calc(100% - 28px));
	}

	main#vala-main.vala-homepage .vala-landing-nav__shell {
		margin-top: 6px;
	}

	main#vala-main.vala-homepage .vala-landing-nav__inner {
		min-height: 54px;
		max-height: none;
		padding: 8px 12px;
	}
}

/* --- Mobile: slim strip, CTA hidden, logo + ValaHub in nav --- */
@media (max-width: 768px) {
	main#vala-main.vala-homepage {
		--vh-header-max: min(100% - 24px, 1280px);
		--vh-header-pad-inline: 12px;
	}

	main#vala-main.vala-homepage .vala-landing-nav--glass {
		top: 6px;
	}

	main#vala-main.vala-homepage .vala-landing-nav__shell {
		margin-top: 6px;
		padding: 0 10px;
	}

	main#vala-main.vala-homepage .vala-landing-nav__card {
		border-radius: 20px;
	}

	main#vala-main.vala-homepage .vala-landing-nav__inner {
		min-height: 50px;
		max-height: none;
		padding: 8px 12px;
		gap: 8px;
	}

	main#vala-main.vala-homepage .vala-landing-nav__actions {
		gap: 6px;
	}

	main#vala-main.vala-homepage .vala-landing-brand.logo-pill {
		flex: 0 1 auto;
		min-width: 0;
		gap: 8px;
	}

	main#vala-main.vala-homepage .vala-landing-brand__name {
		display: inline;
		font-size: 13px;
	}

	main#vala-main.vala-homepage .vala-landing-nav__actions {
		flex: 0 0 auto;
	}

	/* Drawer header — integrated glass, no heavy sticky block (portaled to body) */
	body:has(#vala-main.vala-homepage) .vala-landing-nav__drawer-head {
		padding: 10px 4px 10px;
		margin-bottom: 4px;
		background: transparent;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		box-shadow: none;
	}

	body:has(#vala-main.vala-homepage) .vala-landing-nav__drawer-title {
		color: rgba(255, 255, 255, 0.92);
		letter-spacing: 0.16em;
	}

}

@media (max-width: 480px) {
	main#vala-main.vala-homepage {
		--vh-header-pad-inline: 10px;
	}

	main#vala-main.vala-homepage .vala-landing-brand__name {
		font-size: 12px;
	}
}

/* Dismissed / hidden — must beat display:block on .vala-top-announcement below */
main#vala-main.vala-homepage .vala-top-announcement.is-dismissed,
main#vala-main.vala-homepage .vala-top-announcement[hidden],
main#vala-main.vala-homepage .vala-top-announcement:has(.vala-announcement.is-hidden),
main#vala-main.vala-homepage .vala-top-announcement:has(.vala-announcement[hidden]) {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	background: transparent !important;
	background-image: none !important;
	visibility: hidden !important;
}

/* =============================================================================
 * ANNOUNCEMENT — compact notification strip (homepage final; keep last in file)
 *
 * DOM:
 *   section.vala-top-announcement
 *     div.vala-announcement.vala-landing-announcement.vala-home-section
 *       div.vala-landing-container.vala-announcement__inner
 *         div.vala-announcement__content (badge + text)
 *         div.vala-announcement__actions (cta + close)
 * ============================================================================= */

/* Single gradient layer on the band wrapper */
main#vala-main.vala-homepage .vala-top-announcement {
	position: relative;
	z-index: 220;
	display: block;
	width: 100vw;
	max-width: 100vw;
	margin: 0 !important;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	border: 0;
	box-sizing: border-box;
	color: #061827;
	overflow-x: clip;
	background: var(--vala-band-announcement-bg);
}

main#vala-main.vala-homepage.vala-onboarding-shell.vala-landing-v2--premium .vala-top-announcement .vala-announcement.vala-home-section,
main#vala-main.vala-homepage.vala-onboarding-shell.vala-landing-v2--premium .vala-onboarding-panel--marketing .vala-top-announcement .vala-home-section {
	padding-block: 0 !important;
	min-height: 0 !important;
}

/* Middle shell: no second gradient block */
main#vala-main.vala-homepage .vala-top-announcement .vala-announcement,
main#vala-main.vala-homepage .vala-top-announcement .vala-announcement.vala-landing-announcement,
main#vala-main.vala-homepage .vala-top-announcement .vala-announcement.vala-home-section {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	box-sizing: border-box;
	font-size: 13px;
	line-height: 1.15;
	color: #061827;
	background: transparent !important;
	border: 0;
	border-radius: 0;
	box-shadow: none !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Inner row — content-driven height, no glass slab */
main#vala-main.vala-homepage .vala-top-announcement .vala-landing-container.vala-announcement__inner,
main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__inner,
main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__inner {
	width: var(--vh-header-max);
	max-width: var(--vh-header-max);
	min-height: 0 !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 auto !important;
	padding: 4px 20px !important;
	display: flex !important;
	flex-flow: row nowrap !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	box-sizing: border-box;
	line-height: 1.15 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__content {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	gap: 8px !important;
}

main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__badge,
main#vala-main.vala-homepage .vala-top-announcement .vala-landing-badge.vala-announcement__badge {
	flex: 0 0 auto;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 7px !important;
	display: inline-flex !important;
	align-items: center !important;
	font-size: 10px !important;
	font-weight: 800;
	line-height: 1 !important;
	white-space: nowrap;
	background: rgba(6, 24, 39, 0.88);
	color: #ffffff;
	border: 0;
	box-shadow: none;
}

main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__text,
main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__text,
main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__message {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.15 !important;
	color: #061827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__actions {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	flex: 0 0 auto;
	flex-shrink: 0;
	margin: 0 !important;
	padding: 0 !important;
	gap: 8px !important;
}

main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__cta,
main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__link,
main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__link {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 700;
	line-height: 1.15 !important;
	white-space: nowrap;
	color: #061827;
	background: transparent;
	border: 0;
	box-shadow: none;
	text-decoration: none;
	opacity: 1;
}

main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__cta:hover,
main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__cta:focus-visible,
main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__link:hover,
main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__link:focus-visible {
	color: #082033;
	text-decoration: underline;
	text-underline-offset: 2px;
}

main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__cta-chevron {
	line-height: 1;
	color: inherit;
}

main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__close {
	flex: 0 0 auto;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	min-height: 26px !important;
	max-height: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid rgba(6, 24, 39, 0.14);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.2);
	color: #061827;
	font-size: 14px;
	line-height: 1 !important;
	cursor: pointer;
}

main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__close:hover,
main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__close:focus-visible {
	background: rgba(255, 255, 255, 0.32);
	border-color: rgba(6, 24, 39, 0.22);
	color: #082033;
}

/* Tablet — compact single row; beat vala-landing-base @720px */
@media (min-width: 768px) and (max-width: 1024px) {
	main#vala-main.vala-homepage .vala-top-announcement .vala-landing-container.vala-announcement__inner,
	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__inner,
	main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__inner {
		padding: 4px 16px !important;
		flex-wrap: nowrap !important;
	}

	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__cta,
	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__link,
	main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__link {
		font-size: 12px !important;
		max-width: 42%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (max-width: 767px) {
	main#vala-main.vala-homepage .vala-top-announcement .vala-landing-container.vala-announcement__inner,
	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__inner,
	main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__inner {
		width: 100%;
		max-width: 100%;
		min-height: 0 !important;
		height: auto !important;
		padding: 5px 10px !important;
		gap: 6px !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
	}

	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__content {
		flex: 1 1 auto;
		min-width: 0;
		gap: 6px !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
	}

	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__text,
	main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__text,
	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__message {
		font-size: 12px !important;
		line-height: 1.15 !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__badge,
	main#vala-main.vala-homepage .vala-top-announcement .vala-landing-badge.vala-announcement__badge {
		height: 18px !important;
		padding: 0 6px !important;
		font-size: 9px !important;
	}

	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__cta,
	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__link,
	main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__link {
		display: none !important;
	}

	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__close {
		width: 26px !important;
		height: 26px !important;
		min-width: 26px !important;
		min-height: 26px !important;
		font-size: 14px;
	}
}

/* Legacy vala-landing-base.css (@720px wrap / extra padding) — homepage wins */
@media (max-width: 720px) {
	main#vala-main.vala-homepage .vala-top-announcement .vala-landing-container.vala-announcement__inner,
	main#vala-main.vala-homepage .vala-top-announcement .vala-announcement__inner,
	main#vala-main.vala-homepage .vala-top-announcement .vala-landing-announcement__inner {
		min-height: 0 !important;
		height: auto !important;
		padding-top: 5px !important;
		padding-bottom: 5px !important;
		flex-wrap: nowrap !important;
	}
}

/* Announcement dismiss — vala-homepage-background.css (loads after this file) */