/**
 * header.css — header, primary nav, CTA, theme toggle, mobile trigger, and
 * the mobile-navigation overlay. Transparent-over-hero on Home, solid from
 * load on inner pages; condenses 88px → 64px on scroll via the
 * [data-scrolled] attribute set by header-scroll.js.
 */

.ditechted-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--ditechted-header-height);
	display: flex;
	align-items: center;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: height var(--ditechted-transition-base) var(--ditechted-easing-inout),
		background-color var(--ditechted-transition-base) var(--ditechted-easing-inout),
		border-color var(--ditechted-transition-base) var(--ditechted-easing-inout);
}

/* Inner pages: solid from initial load. body carries this class via
   body_class() plus a small template check — see inc/enqueue.php note;
   simplest reliable signal is "not the front page". */
body:not(.home) .ditechted-header {
	background: var(--ditechted-bg-default);
	border-bottom-color: var(--ditechted-border-default);
}

.ditechted-header[data-scrolled="true"] {
	height: var(--ditechted-header-height-condensed);
	background: var(--ditechted-bg-default);
	border-bottom-color: var(--ditechted-border-default);
}

.ditechted-header__inner {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: var(--ditechted-margin);
	gap: var(--wp--preset--spacing--md);
}

.ditechted-logo {
	font-family: var(--wp--preset--font-family--ditechted-display);
	font-weight: 600;
	text-decoration: none;
	color: var(--ditechted-text-primary);
}

.ditechted-nav__list,
.ditechted-nav ul {
	display: flex;
	gap: var(--wp--preset--spacing--md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ditechted-nav a,
.ditechted-nav__list a {
	font-family: var(--wp--preset--font-family--ditechted-text);
	font-size: var(--wp--preset--font-size--navigation);
	font-weight: 500;
	text-decoration: none;
	color: var(--ditechted-text-primary);
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}

.ditechted-nav a:hover,
.ditechted-nav a[aria-current="page"],
.ditechted-nav__list a:hover {
	color: var(--ditechted-brand-primary);
	border-bottom-color: var(--ditechted-brand-accent);
}

.ditechted-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

.ditechted-theme-toggle,
.ditechted-mobile-nav-trigger {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--wp--preset--spacing--2xs);
	color: var(--ditechted-text-primary);
}

.ditechted-mobile-nav-trigger {
	display: none;
}

/* Desktop nav hidden below 768px; mobile trigger shown instead. */
@media (max-width: 767px) {
	.ditechted-nav {
		display: none;
	}
	.ditechted-mobile-nav-trigger {
		display: inline-flex;
	}
}

/* --- Mobile navigation overlay ------------------------------------- */
.ditechted-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--ditechted-bg-default);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--lg);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--ditechted-transition-base) var(--ditechted-easing-out),
		transform var(--ditechted-transition-base) var(--ditechted-easing-out);
}

.ditechted-mobile-nav:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
}

.ditechted-mobile-nav__close {
	position: absolute;
	top: var(--wp--preset--spacing--md);
	right: var(--wp--preset--spacing--md);
	background: none;
	border: none;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ditechted-text-primary);
}

.ditechted-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	text-align: center;
}

.ditechted-mobile-nav__list a {
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 500;
	text-decoration: none;
	color: var(--ditechted-text-primary);
}