/**
 * SignalMind — Global chrome
 *
 * The announcement bar, the header action cluster, the desktop mega panel, the
 * fullscreen off-canvas navigation and the enterprise footer.
 *
 * Extends components.css, which owns the base header, drawer and footer.
 * Modifier classes are used rather than overrides, so nothing here competes on
 * specificity with the phase-one chrome.
 *
 * @package SignalMind
 */

/* ==========================================================================
   Announcement bar
   ========================================================================== */

/* Published so a full-height section below the bar can subtract it. Kept in
   sync with the min-height and padding of .sm-announce__inner plus its border. */
:root {
	--sm-announce-height: 41px;
}

.sm-announce {
	position: relative;
	z-index: var(--sm-z-sticky);
	background-image: var(--sm-gradient-brand-soft);
	border-bottom: var(--sm-border-width) solid var(--sm-color-border);
}

.sm-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sm-space-3);
	min-height: 40px;
	padding-block: var(--sm-space-2);
	text-align: center;
}

.sm-announce__text {
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-medium);
	letter-spacing: var(--sm-tracking-wide);
	color: var(--sm-color-text-secondary);
}

.sm-announce__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-1);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-primary);
	white-space: nowrap;
	transition: var(--sm-transition-colors);
}

.sm-announce__link:hover {
	color: var(--sm-color-primary-hover);
}

.sm-announce__link .sm-icon {
	transition: var(--sm-transition-transform);
}

.sm-announce__link:hover .sm-icon {
	transform: translateX(2px);
}

.sm-announce__dismiss {
	position: absolute;
	top: 50%;
	right: var(--sm-gutter);
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--sm-radius-sm);
	color: var(--sm-color-text-subtle);
	transition: var(--sm-transition-colors);
}

.sm-announce__dismiss:hover {
	background-color: var(--sm-alpha-white-8);
	color: var(--sm-color-text);
}

/* Dismissed for this visitor: removed from the layout entirely, not just hidden,
   so it never occupies space or takes a tab stop. */
.sm-announce[hidden] {
	display: none;
}

@media (max-width: 639px) {
	.sm-announce__inner {
		padding-inline: var(--sm-space-8);
	}

	.sm-announce__dismiss {
		right: var(--sm-space-2);
	}
}

/* ==========================================================================
   Header actions
   ========================================================================== */

.sm-header__actions {
	gap: var(--sm-space-2);
}

.sm-header__auth {
	display: none;
	align-items: center;
	gap: var(--sm-space-2);
}

@media (min-width: 1024px) {
	.sm-header__auth {
		display: flex;
	}
}

/* A hairline between the navigation and the auth cluster, at desktop only. */
@media (min-width: 1024px) {
	.sm-header__auth::before {
		content: "";
		width: 1px;
		height: 20px;
		margin-right: var(--sm-space-2);
		background-color: var(--sm-color-border);
	}
}

.sm-nav__item--hint .sm-nav__link {
	color: var(--sm-color-text-disabled);
	font-style: italic;
}

/* ==========================================================================
   Mega menu
   Anchored to the sticky header rather than the menu item, so the panel can
   span the full container width.
   ========================================================================== */

.sm-nav__item--mega {
	position: static;
}

.sm-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--sm-z-dropdown);
	padding-top: var(--sm-space-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--sm-duration-base) var(--sm-ease-standard),
		transform var(--sm-duration-base) var(--sm-ease-out),
		visibility var(--sm-duration-base) linear;
}

.sm-nav__item--mega:hover > .sm-mega,
.sm-nav__item--mega:focus-within > .sm-mega,
.sm-nav__item--mega.is-open > .sm-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sm-mega__inner {
	width: 100%;
	max-width: var(--sm-container);
	margin-inline: auto;
	padding: var(--sm-space-7);
	background-color: var(--sm-color-surface-overlay);
	border: var(--sm-border-width) solid var(--sm-color-border);
	border-radius: var(--sm-radius-xl);
	box-shadow: var(--sm-shadow-2xl), var(--sm-shadow-inner);
}

.sm-mega__grid {
	display: grid;
	gap: var(--sm-space-6) var(--sm-space-8);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-mega__grid > li + li {
	margin-top: 0;
}

.sm-mega__col-title {
	display: block;
	margin-bottom: var(--sm-space-3);
	font-size: var(--sm-text-2xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-color-text-subtle);
}

a.sm-mega__col-title:hover {
	color: var(--sm-color-primary);
}

.sm-mega__list {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-mega__list li + li {
	margin-top: 0;
}

.sm-mega__link {
	display: flex;
	align-items: flex-start;
	gap: var(--sm-space-3);
	padding: var(--sm-space-2-5);
	margin-inline: calc(-1 * var(--sm-space-2-5));
	border-radius: var(--sm-radius-md);
	transition: var(--sm-transition-colors);
}

.sm-mega__link:hover {
	background-color: var(--sm-color-surface-hover);
}

.sm-mega__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--sm-radius-md);
	background-color: var(--sm-alpha-white-4);
	border: var(--sm-border-width) solid var(--sm-color-border-subtle);
	color: var(--sm-color-primary);
	transition: var(--sm-transition-colors);
}

.sm-mega__link:hover .sm-mega__icon {
	border-color: var(--sm-color-border-brand);
	background-color: var(--sm-color-primary-subtle);
}

.sm-mega__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sm-mega__title {
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-medium);
	color: var(--sm-color-text);
}

.sm-mega__desc {
	font-size: var(--sm-text-xs);
	line-height: var(--sm-leading-normal);
	color: var(--sm-color-text-subtle);
}

/* ==========================================================================
   Fullscreen off-canvas navigation
   Reuses the drawer's open/close contract from phase one; only the surface
   geometry changes.
   ========================================================================== */

.sm-drawer__panel--full {
	inset: 0;
	width: 100%;
	max-width: none;
	gap: var(--sm-space-8);
	padding: var(--sm-space-5) var(--sm-gutter) var(--sm-space-10);
	border-left: 0;
	background-color: var(--sm-color-bg);
	background-image: var(--sm-gradient-mesh);
	transform: translateY(-100%);
	transition: transform var(--sm-duration-slow) var(--sm-ease-out),
		opacity var(--sm-duration-base) var(--sm-ease-standard);
	opacity: 0;
}

.sm-drawer.is-open .sm-drawer__panel--full {
	transform: translateY(0);
	opacity: 1;
}

.sm-drawer__panel--full .sm-drawer__head {
	max-width: var(--sm-container);
	width: 100%;
	margin-inline: auto;
}

.sm-drawer__scroll {
	flex: 1 1 auto;
	width: 100%;
	max-width: var(--sm-container);
	margin-inline: auto;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sm-drawer__panel--full .sm-drawer__actions {
	width: 100%;
	max-width: var(--sm-container);
	margin-inline: auto;
	margin-top: 0;
}

/* Larger, staggered items. The delay ladder is capped so a long menu does not
   end up waiting a second for its last item. */
.sm-drawer__panel--full .sm-menu-mobile__link {
	padding-block: var(--sm-space-4);
	font-size: var(--sm-text-2xl);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-color-text);
}

.sm-drawer__panel--full .sm-menu-mobile__submenu .sm-menu-mobile__link {
	font-size: var(--sm-text-md);
	font-weight: var(--sm-weight-regular);
	color: var(--sm-color-text-muted);
}

@media (scripting: enabled) {
	.sm-drawer__panel--full .sm-menu-mobile > .sm-menu-mobile__item {
		opacity: 0;
		transform: translateY(12px);
	}

	.sm-drawer.is-open .sm-drawer__panel--full .sm-menu-mobile > .sm-menu-mobile__item {
		opacity: 1;
		transform: none;
		transition: opacity var(--sm-duration-slow) var(--sm-ease-standard),
			transform var(--sm-duration-slow) var(--sm-ease-out);
	}

	.sm-drawer.is-open .sm-drawer__panel--full .sm-menu-mobile > li:nth-child(1) { transition-delay: 60ms; }
	.sm-drawer.is-open .sm-drawer__panel--full .sm-menu-mobile > li:nth-child(2) { transition-delay: 100ms; }
	.sm-drawer.is-open .sm-drawer__panel--full .sm-menu-mobile > li:nth-child(3) { transition-delay: 140ms; }
	.sm-drawer.is-open .sm-drawer__panel--full .sm-menu-mobile > li:nth-child(4) { transition-delay: 180ms; }
	.sm-drawer.is-open .sm-drawer__panel--full .sm-menu-mobile > li:nth-child(5) { transition-delay: 220ms; }
	.sm-drawer.is-open .sm-drawer__panel--full .sm-menu-mobile > li:nth-child(n + 6) { transition-delay: 260ms; }
}

.sm-drawer__auth {
	display: grid;
	gap: var(--sm-space-3);
}

@media (min-width: 480px) {
	.sm-drawer__auth {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Enterprise footer
   ========================================================================== */

.sm-footer__grid {
	display: grid;
	gap: var(--sm-grid-gap-lg);
	padding-block: var(--sm-section-y-sm);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.sm-footer__grid {
		/* brand · four link columns · newsletter */
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.5fr) minmax(0, 1.2fr);
		gap: var(--sm-space-12);
	}
}

.sm-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sm-space-4);
	max-width: 22rem;
}

.sm-footer__links {
	display: grid;
	gap: var(--sm-space-8) var(--sm-grid-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.sm-footer__links {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* A column falling back to a widget area can hold more than one widget. The
   margin is scoped to the column so it can never apply to widgets that are
   themselves grid children, where it would push columns out of alignment. */
.sm-footer__col .sm-widget + .sm-widget {
	margin-top: var(--sm-space-8);
}

.sm-footer__col-title {
	margin-bottom: var(--sm-space-4);
	font-size: var(--sm-text-2xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-color-text-subtle);
}

.sm-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-2-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-footer__menu li + li {
	margin-top: 0;
}

.sm-footer__menu a {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-1-5);
	font-size: var(--sm-text-sm);
	color: var(--sm-color-text-muted);
	transition: var(--sm-transition-colors);
}

.sm-footer__menu a:hover {
	color: var(--sm-color-text);
}

/* Newsletter */

.sm-newsletter {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	max-width: 24rem;
}

.sm-newsletter__title {
	font-size: var(--sm-text-2xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-color-text-subtle);
}

.sm-newsletter__text {
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

.sm-newsletter__form {
	display: flex;
	gap: var(--sm-space-2);
	align-items: stretch;
}

.sm-newsletter__form .sm-field {
	flex: 1 1 auto;
	min-width: 0;
}

.sm-newsletter__form .sm-btn {
	flex: none;
}

/* Off-screen but still submitted: bots fill it, humans never see it. */
.sm-newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Social */

.sm-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sm-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-social li + li {
	margin-top: 0;
}

.sm-social__link {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: var(--sm-border-width) solid var(--sm-color-border);
	border-radius: var(--sm-radius-md);
	color: var(--sm-color-text-muted);
	transition: var(--sm-transition-colors), var(--sm-transition-transform);
}

.sm-social__link:hover {
	border-color: var(--sm-color-border-brand);
	background-color: var(--sm-color-primary-subtle);
	color: var(--sm-color-primary);
	transform: translateY(-2px);
}

/* Footer baseline */

.sm-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sm-space-4) var(--sm-space-6);
	padding-block: var(--sm-space-6);
	border-top: var(--sm-border-width) solid var(--sm-color-border-subtle);
}

.sm-footer__base-start,
.sm-footer__base-end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sm-space-3) var(--sm-space-5);
}

.sm-footer__totop {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-1-5);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-medium);
	color: var(--sm-color-text-subtle);
	transition: var(--sm-transition-colors);
}

.sm-footer__totop:hover {
	color: var(--sm-color-primary);
}

.sm-footer__totop .sm-icon {
	transition: var(--sm-transition-transform);
}

.sm-footer__totop:hover .sm-icon {
	transform: translateY(-2px);
}

@media (max-width: 639px) {
	.sm-footer__base {
		flex-direction: column;
		align-items: flex-start;
	}
}