/* ==========================================================================
   Header and Primary Navigation
   Floating/sticky header shell, logo sizing, nav links and active states.
   ========================================================================== */
.cm-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: clamp(0.7rem, 2vw, 1.2rem) var(--cm-shell-gutter);
	pointer-events: none;
}

.cm-header-shell {
	display: grid;
	grid-template-columns: minmax(150px, 260px) 1fr auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	max-width: 1280px;
	margin: 0 auto;
	padding: 0.85rem 1rem;
	background: rgba(251, 250, 247, 0.96);
	border: 1px solid rgba(7, 50, 54, 0.08);
	border-radius: 28px;
	box-shadow: var(--cm-strong-shadow);
	pointer-events: auto;
}

.cm-brand img {
	display: block;
	width: min(160px, 42vw);
	height: auto;
}

.cm-primary-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.6rem, 2vw, 1.8rem);
	font-family: var(--wp--preset--font-family--manrope, system-ui, sans-serif);
	font-size: 0.96rem;
}

/* Shared button foundation for header CTA and reusable theme buttons. */
.cm-primary-nav a,
.cm-header-cta,
.cm-site-footer a {
	text-decoration: none;
}

.cm-primary-nav a {
	position: relative;
	color: var(--cm-text);
	font-weight: 600;
}

.cm-primary-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.45rem;
	height: 2px;
	background: transparent;
}

.cm-primary-nav a:hover::after,
.cm-primary-nav a:focus-visible::after,
body.home .cm-nav-home::after,
body.blog .cm-nav-home::after,
body.cm-page-what-i-do .cm-nav-what::after,
body.cm-page-why-hire-me .cm-nav-why::after,
body.cm-page-about .cm-nav-about::after,
body.cm-page-insights .cm-nav-insights::after {
	background: var(--cm-teal);
}

.cm-header-cta,
.cm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 0.72rem 1.2rem;
	border-radius: 6px;
	background: var(--cm-dark-teal);
	color: var(--cm-soft-white);
	font-family: var(--wp--preset--font-family--manrope, system-ui, sans-serif);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(7, 50, 54, 0.16);
}

.cm-button:not(.cm-button-disabled)::after,
.cm-top-cards a::after,
.cm-help a::after,
.cm-section-heading a::after {
	content: "";
}

.cm-button-light {
	background: var(--cm-soft-white);
	color: var(--cm-dark-teal);
}

.cm-button-disabled {
	opacity: 0.72;
	cursor: not-allowed;
}

a:focus-visible,
button:focus-visible,
.cm-button:focus-visible {
	outline: 3px solid var(--cm-ash);
	outline-offset: 4px;
}