/*
 * Header scroll-state / sticky behavior styling (Sprint 1). Relocated verbatim into layout/ — content unchanged.
 *
 * @package TFGadgets
 */

/**
 * Header shell: sticky hide/reveal-on-scroll behavior and the
 * search/dark-mode/menu action buttons. Component-specific styles
 * (announcement, ticker, search overlay, dark mode, progress) live in
 * their own files alongside this one.
 *
 * @package TFGadgets
 */

.site-header {
	transition: transform var(--duration-moderate) var(--ease-standard);
}
.site-header.is-hidden {
	transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
	.site-header {
		transition: none;
	}
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
/*
 * BUG FIX: was plain ".header-actions button", which also matched
 * .menu-toggle (a <button> inside .header-actions too). Two selector
 * parts (.header-actions + button = specificity 0,1,1) beat
 * .menu-toggle's one part (0,1,0), so this rule's "display: inline-flex"
 * was silently overriding .menu-toggle's "display: none" — making the
 * mobile menu button visible on every screen size, including desktop.
 */
.header-actions button:not(.menu-toggle) {
	background: none;
	border: 1px solid var(--line-strong);
	color: var(--text);
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: var(--radius-sm);
}
.header-actions button:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.header-actions svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
}