/**
 * Caltrop Defense — header and navigation
 *
 * The header is a normal block template part (parts/header.html). Every label,
 * link and description in the mega menu is an editable core block. This file
 * and assets/js/navigation.js turn that block markup into an accessible
 * desktop mega menu and a full-height mobile drawer.
 *
 *   1. Header shell
 *   2. Brand
 *   3. Desktop navigation bar
 *   4. Mega menu panels
 *   5. Header actions
 *   6. Mobile toggle and drawer
 *   7. Footer navigation columns
 */

/* ------------------------------------------------------------------ *
 * 1. Header shell
 * ------------------------------------------------------------------ */

.cds-header {
	position: sticky;
	top: 0;
	z-index: 120;
	width: 100%;
	background: rgba(11, 15, 20, 0.72);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid transparent;
	transition:
		background var(--cds-dur) var(--cds-ease),
		border-color var(--cds-dur) var(--cds-ease),
		box-shadow var(--cds-dur) var(--cds-ease);
}

.cds-header.is-scrolled,
.cds-header.is-nav-open {
	background: rgba(9, 12, 17, 0.97);
	border-bottom-color: var(--cds-line-soft);
	box-shadow: 0 18px 40px -32px rgba(0, 0, 0, 0.95);
}

.admin-bar .cds-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .cds-header {
		top: 46px;
	}
}

.cds-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	width: 100%;
	max-width: var(--cds-shell);
	margin-inline: auto;
	padding-inline: var(--cds-gutter);
	min-height: var(--cds-header-h);
	transition: min-height var(--cds-dur) var(--cds-ease);
}

.cds-header.is-scrolled .cds-header__inner {
	min-height: var(--cds-header-h-scrolled);
}

/* Thin blue seam at the very bottom edge of the header once scrolled. */
.cds-header.is-scrolled::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(47, 134, 255, 0.55) 30%, rgba(87, 215, 255, 0.35) 65%, transparent);
}

/* ------------------------------------------------------------------ *
 * 2. Brand
 * ------------------------------------------------------------------ */

.cds-header__brand {
	display: flex;
	align-items: center;
	flex: none;
	margin-right: auto;
}

.cds-header__brand .wp-block-site-logo,
.cds-header__brand .custom-logo-link {
	display: block;
	line-height: 0;
}

.cds-header__brand img {
	display: block;
	width: auto;
	height: 42px;
	max-width: none;
	transition: height var(--cds-dur) var(--cds-ease);
}

.cds-header.is-scrolled .cds-header__brand img {
	height: 36px;
}

/* The compact emblem replaces the full lockup on narrow screens. */
.cds-header__emblem {
	display: none;
}

.cds-header__emblem img,
.cds-header__emblem svg {
	height: 38px;
	width: auto;
	display: block;
}

/* ------------------------------------------------------------------ *
 * 3. Desktop navigation bar
 * ------------------------------------------------------------------ */

.cds-nav {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	flex-wrap: nowrap;
}

.cds-nav__item {
	position: static;
	display: flex;
	align-items: center;
	margin: 0;
}

.cds-nav__link,
.cds-nav__link p {
	margin: 0;
}

/* The label and the injected disclosure button share one line. Without this the
   button wraps beneath the link and doubles the height of the bar. */
.cds-nav__link {
	display: flex;
	align-items: center;
	gap: 0;
}

.cds-nav__link > a {
	flex: none;
}

.cds-nav__link > a,
a.cds-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0.45rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--cds-contrast);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--cds-radius-sm);
	transition: color var(--cds-dur-fast) var(--cds-ease), background var(--cds-dur-fast) var(--cds-ease);
}

.cds-nav__link > a:hover,
.cds-nav__link > a:focus-visible,
.cds-nav__item.is-open .cds-nav__link > a,
.cds-nav__item:hover .cds-nav__link > a {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
}

.cds-nav__item.is-current .cds-nav__link > a,
.cds-nav__link > a[aria-current="page"] {
	color: #fff;
}

.cds-nav__item.is-current .cds-nav__link > a::after {
	content: "";
	position: absolute;
}

/* Disclosure button injected by navigation.js beside each mega-menu label. */
.cds-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	margin-left: -0.3rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cds-muted);
	cursor: pointer;
	border-radius: 2px;
	transition: color var(--cds-dur-fast) var(--cds-ease), transform var(--cds-dur) var(--cds-ease);
}

.cds-nav__toggle svg {
	width: 11px;
	height: 11px;
	display: block;
}

.cds-nav__item:hover .cds-nav__toggle,
.cds-nav__toggle[aria-expanded="true"] {
	color: var(--cds-blue-bright);
}

.cds-nav__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------ *
 * 4. Mega menu panels
 * ------------------------------------------------------------------ */

.cds-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	width: min(var(--cds-shell), calc(100vw - 2.5rem));
	padding: clamp(1.5rem, 2vw, 2.25rem);
	background:
		linear-gradient(150deg, rgba(0, 97, 252, 0.09), transparent 42%),
		linear-gradient(180deg, #101720 0%, #0b0f14 100%);
	border: 1px solid var(--cds-line-soft);
	border-top: 2px solid var(--cds-blue);
	border-radius: 0 0 var(--cds-radius-lg) var(--cds-radius-lg);
	box-shadow: 0 44px 90px -46px rgba(0, 0, 0, 0.95);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--cds-dur) var(--cds-ease),
		transform var(--cds-dur) var(--cds-ease),
		visibility 0s linear var(--cds-dur);
	z-index: 20;
}

/* Hover, keyboard focus and the JS toggle all resolve to the same state. */
/* Pointer users get the panel on hover, keyboard users through the disclosure
   button, which sets .is-open. :focus-within is deliberately not used here: it
   would pin the panel open while the button itself has focus, making Escape
   impossible to observe. The .is-hover-off flag lets Escape dismiss a
   hover-opened panel, as WCAG 2.2 SC 1.4.13 requires. */
.cds-nav:not(.is-hover-off) .cds-nav__item:hover > .cds-mega,
.cds-nav__item.is-open > .cds-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}

/* Grid of service entries inside a panel. */
.cds-mega__grid {
	display: grid;
	gap: 0.35rem 1.25rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cds-mega__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cds-mega__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cds-mega__item {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 0.9rem;
	align-items: start;
	padding: 0.8rem 0.85rem;
	border: 1px solid transparent;
	border-radius: var(--cds-radius-sm);
	transition: background var(--cds-dur-fast) var(--cds-ease), border-color var(--cds-dur-fast) var(--cds-ease);
}

.cds-mega__item:hover,
.cds-mega__item:focus-within {
	background: rgba(47, 134, 255, 0.08);
	border-color: rgba(47, 134, 255, 0.25);
}

.cds-mega__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--cds-blue-bright);
	background: rgba(47, 134, 255, 0.1);
	border: 1px solid rgba(47, 134, 255, 0.22);
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
	transition: color var(--cds-dur-fast) var(--cds-ease);
}

.cds-mega__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.cds-mega__item:hover .cds-mega__icon {
	color: var(--cds-cyan);
}

.cds-mega__title,
.cds-mega__title p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9688rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.006em;
	color: var(--cds-contrast);
}

.cds-mega__title a {
	color: inherit;
	text-decoration: none;
}

.cds-mega__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.cds-mega__item:hover .cds-mega__title a {
	color: #fff;
}

.cds-mega__desc,
.cds-mega__desc p {
	margin: 0.2rem 0 0;
	font-size: 0.8438rem;
	line-height: 1.5;
	color: var(--cds-muted);
}

/* Compact link columns (industries, company, resources). */
.cds-mega__col {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.cds-mega__heading,
.cds-mega__heading p {
	margin: 0 0 0.65rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--cds-muted);
}

.cds-mega__links,
.cds-mega__links p {
	margin: 0;
}

.cds-mega__links a,
a.cds-mega__link {
	display: block;
	padding: 0.42rem 0.6rem;
	margin-left: -0.6rem;
	font-size: 0.9063rem;
	line-height: 1.35;
	color: var(--cds-contrast);
	text-decoration: none;
	border-radius: var(--cds-radius-sm);
	border-left: 2px solid transparent;
	transition: background var(--cds-dur-fast) var(--cds-ease), border-color var(--cds-dur-fast) var(--cds-ease), color var(--cds-dur-fast) var(--cds-ease);
}

.cds-mega__links a:hover,
a.cds-mega__link:hover {
	background: rgba(47, 134, 255, 0.1);
	border-left-color: var(--cds-blue);
	color: #fff;
	text-decoration: none;
}

/* Feature rail: the promoted column on the left of a panel. */
.cds-mega__feature {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	background: linear-gradient(160deg, rgba(0, 97, 252, 0.16), rgba(11, 15, 20, 0.2));
	border: 1px solid rgba(47, 134, 255, 0.28);
	border-radius: var(--cds-radius-md);
	overflow: hidden;
}

.cds-mega__feature::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(159, 173, 189, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(159, 173, 189, 0.06) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: linear-gradient(160deg, #000, transparent 70%);
	-webkit-mask-image: linear-gradient(160deg, #000, transparent 70%);
}

.cds-mega__feature > * {
	position: relative;
	z-index: 1;
}

.cds-mega__feature h3,
.cds-mega__feature .cds-mega__feature-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
}

.cds-mega__feature p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(230, 238, 246, 0.82);
}

/* Two-region panel: feature rail plus the link grid. */
.cds-mega__layout {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: clamp(1.25rem, 2vw, 2rem);
	align-items: start;
}

.cds-mega__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--cds-line-soft);
	font-size: 0.875rem;
	color: var(--cds-muted);
}

.cds-mega__footer p {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

/* ------------------------------------------------------------------ *
 * 5. Header actions
 * ------------------------------------------------------------------ */

.cds-header__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
	margin-left: 0.35rem;
}

.cds-header__actions .wp-block-buttons {
	gap: 0.5rem;
	margin: 0;
}

.cds-header__actions .wp-block-button__link {
	padding: 0.68rem 1.15rem;
	font-size: 0.875rem;
}

.cds-header__search .wp-block-search__button,
.cds-header__search .wp-block-search__input {
	font-size: 0.875rem;
}

/* ------------------------------------------------------------------ *
 * 6. Mobile toggle and drawer
 * ------------------------------------------------------------------ */

.cds-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--cds-line-soft);
	border-radius: var(--cds-radius-sm);
	color: var(--cds-contrast);
	cursor: pointer;
	transition: background var(--cds-dur-fast) var(--cds-ease), border-color var(--cds-dur-fast) var(--cds-ease);
}

.cds-burger:hover {
	background: rgba(47, 134, 255, 0.14);
	border-color: rgba(47, 134, 255, 0.4);
}

.cds-burger__bars {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}

.cds-burger__bars span {
	position: absolute;
	left: 0;
	height: 2px;
	width: 100%;
	background: currentColor;
	transition: transform var(--cds-dur) var(--cds-ease), opacity var(--cds-dur-fast) var(--cds-ease), width var(--cds-dur) var(--cds-ease);
}

.cds-burger__bars span:nth-child(1) { top: 0; }
.cds-burger__bars span:nth-child(2) { top: 6px; width: 14px; }
.cds-burger__bars span:nth-child(3) { top: 12px; }

.cds-burger[aria-expanded="true"] .cds-burger__bars span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.cds-burger[aria-expanded="true"] .cds-burger__bars span:nth-child(2) {
	opacity: 0;
}

.cds-burger[aria-expanded="true"] .cds-burger__bars span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Drawer -------------------------------------------------------------- */

.cds-drawer {
	position: fixed;
	inset: 0;
	z-index: 115;
	display: flex;
	justify-content: flex-end;
	visibility: hidden;
	pointer-events: none;
}

.cds-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.cds-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(5, 8, 11, 0.7);
	opacity: 0;
	transition: opacity var(--cds-dur) var(--cds-ease);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.cds-drawer.is-open .cds-drawer__scrim {
	opacity: 1;
}

.cds-drawer__panel {
	position: relative;
	width: min(430px, 100%);
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: calc(var(--cds-header-h) + 1rem) 1.25rem 2.5rem;
	background: linear-gradient(180deg, #0e1620 0%, #0b0f14 60%);
	border-left: 1px solid var(--cds-line-soft);
	transform: translateX(102%);
	transition: transform var(--cds-dur-slow) var(--cds-ease);
}

.admin-bar .cds-drawer__panel {
	padding-top: calc(var(--cds-header-h) + 3rem);
}

.cds-drawer.is-open .cds-drawer__panel {
	transform: translateX(0);
}

.cds-drawer__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(159, 173, 189, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(159, 173, 189, 0.05) 1px, transparent 1px);
	background-size: 52px 52px;
	mask-image: linear-gradient(200deg, #000, transparent 60%);
	-webkit-mask-image: linear-gradient(200deg, #000, transparent 60%);
}

.cds-drawer__inner {
	position: relative;
	z-index: 1;
}

.cds-drawer__section {
	border-bottom: 1px solid var(--cds-line-soft);
}

.cds-drawer__row {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.cds-drawer__link {
	flex: 1;
	display: block;
	padding: 1rem 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--cds-contrast);
	text-decoration: none;
}

.cds-drawer__link:hover {
	color: var(--cds-blue-bright);
	text-decoration: none;
}

.cds-drawer__toggle {
	flex: none;
	width: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-left: 1px solid var(--cds-line-soft);
	color: var(--cds-muted);
	cursor: pointer;
	transition: color var(--cds-dur-fast) var(--cds-ease), background var(--cds-dur-fast) var(--cds-ease);
}

.cds-drawer__toggle svg {
	width: 13px;
	height: 13px;
	transition: transform var(--cds-dur) var(--cds-ease);
}

.cds-drawer__toggle[aria-expanded="true"] {
	color: var(--cds-blue-bright);
	background: rgba(47, 134, 255, 0.08);
}

.cds-drawer__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.cds-drawer__sub {
	display: none;
	padding: 0.25rem 0 1rem 0.85rem;
	border-left: 1px solid rgba(47, 134, 255, 0.3);
	margin-left: 0.25rem;
}

.cds-drawer__sub.is-open {
	display: block;
}

.cds-drawer__sub a {
	display: block;
	padding: 0.68rem 0.5rem;
	font-size: 0.9375rem;
	color: var(--cds-muted);
	text-decoration: none;
	border-radius: var(--cds-radius-sm);
}

.cds-drawer__sub a:hover {
	color: #fff;
	background: rgba(47, 134, 255, 0.1);
	text-decoration: none;
}

.cds-drawer__sub-heading {
	margin: 0.9rem 0 0.15rem;
	padding-left: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: rgba(159, 173, 189, 0.7);
}

.cds-drawer__actions {
	margin-top: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cds-drawer__actions .cds-drawer__cta {
	display: block;
	text-align: center;
	padding: 0.95rem 1.25rem;
	background: var(--cds-blue);
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: var(--cds-radius-sm);
	clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}

.cds-drawer__actions .cds-drawer__cta:hover {
	background: var(--cds-blue-bright);
	text-decoration: none;
}

.cds-drawer__actions .cds-drawer__cta--ghost {
	background: transparent;
	border: 1px solid var(--cds-line-strong);
	color: var(--cds-contrast);
}

.cds-drawer__actions .cds-drawer__cta--ghost:hover {
	background: rgba(47, 134, 255, 0.12);
	border-color: var(--cds-blue-bright);
}

/* ------------------------------------------------------------------ *
 * Breakpoint: hand the navigation over to the drawer
 * ------------------------------------------------------------------ */

@media (max-width: 1180px) {
	.cds-nav__link > a {
		padding-inline: 0.55rem;
		font-size: 0.9063rem;
	}

	.cds-header__actions .wp-block-button__link {
		padding: 0.62rem 0.95rem;
	}
}

@media (max-width: 1024px) {
	.cds-nav,
	.cds-header__actions {
		display: none;
	}

	.cds-burger {
		display: inline-flex;
	}

	.cds-header__brand {
		margin-right: auto;
	}
}

@media (max-width: 560px) {
	.cds-header__brand img {
		height: 34px;
	}

	.cds-header.is-scrolled .cds-header__brand img {
		height: 30px;
	}

	.cds-drawer__panel {
		width: 100%;
		border-left: 0;
	}
}

/* Keep the drawer usable in landscape on short viewports. */
@media (max-height: 520px) {
	.cds-drawer__panel {
		padding-top: calc(var(--cds-header-h) + 0.5rem);
	}

	.cds-drawer__link {
		padding-block: 0.7rem;
	}
}

/* ------------------------------------------------------------------ *
 * 7. Footer navigation columns
 * ------------------------------------------------------------------ */

.cds-footer {
	position: relative;
	background: linear-gradient(180deg, #0a0e13 0%, #080b0f 100%);
	border-top: 1px solid var(--cds-line-soft);
	padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}

.cds-footer__inner {
	width: 100%;
	max-width: var(--cds-shell);
	margin-inline: auto;
	padding-inline: var(--cds-gutter);
}

.cds-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.cds-footer__brand img {
	height: 46px;
	width: auto;
	margin-bottom: 1.15rem;
}

.cds-footer__brand p {
	font-size: 0.9375rem;
	line-height: 1.62;
	color: var(--cds-muted);
	max-width: 38ch;
	margin: 0 0 1.25rem;
}

.cds-footer__col h2,
.cds-footer__col .cds-footer__heading {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--cds-contrast);
}

.cds-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.cds-footer__col a {
	font-size: 0.9063rem;
	color: var(--cds-muted);
	text-decoration: none;
	transition: color var(--cds-dur-fast) var(--cds-ease);
}

.cds-footer__col a:hover {
	color: var(--cds-blue-bright);
	text-decoration: none;
}

.cds-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.35rem;
	border-top: 1px solid var(--cds-line-soft);
	font-size: 0.8438rem;
	color: rgba(159, 173, 189, 0.8);
}

.cds-footer__bottom p {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.cds-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cds-footer__legal a {
	color: rgba(159, 173, 189, 0.85);
	text-decoration: none;
	font-size: inherit;
}

.cds-footer__legal a:hover {
	color: var(--cds-blue-bright);
	text-decoration: underline;
}

/* Footer contact rows hide themselves when the owner has not filled them in. */
.cds-footer .cds-info__row {
	grid-template-columns: 34px minmax(0, 1fr);
	padding-bottom: 0.75rem;
}

@media (max-width: 1080px) {
	.cds-footer__top {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cds-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 700px) {
	.cds-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.cds-footer__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.cds-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Four-column and compact mega panels -------------------------------------- */

.cds-mega__grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cds-mega__grid--compact {
	gap: 2px var(--cds-space-4, 1.5rem);
}

.cds-mega__compact {
	margin: 0;
}

.cds-mega__compact a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	color: var(--wp--preset--color--light);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	border-radius: 2px;
	transition: background-color var(--cds-duration) var(--cds-ease), color var(--cds-duration) var(--cds-ease);
}

.cds-mega__compact a:hover,
.cds-mega__compact a:focus-visible {
	background-color: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--contrast);
}

.cds-mega__icon--sm svg {
	width: 20px;
	height: 20px;
}

/* Fitting the bar --------------------------------------------------------- *
   Eight top-level items, a logo and the action group have to share the shell
   width. Below 1400px the bar tightens; below 1200px the standalone Support
   link folds away, since Support also appears in the Company panel and the
   footer. The drawer takes over entirely at 1024px. */

@media (max-width: 1200px) {
	.cds-header__support {
		display: none;
	}

	.cds-nav__link > a,
	a.cds-nav__link {
		padding-inline: 0.35rem;
		font-size: 0.8438rem;
	}

	.cds-header__cta .wp-block-button__link {
		padding-inline: 1rem;
	}
}

/* Site logo ---------------------------------------------------------------- *
   The Site Logo block renders whatever size the image happens to be, so the
   header constrains it by height and lets the width follow the aspect ratio.
   That keeps the bar a predictable height whichever artwork the owner sets. */

.cds-brand,
.cds-header .wp-block-site-logo {
	flex: none;
	display: flex;
	align-items: center;
	margin: 0;
}

.cds-brand img,
.cds-header .wp-block-site-logo img {
	display: block;
	width: auto;
	max-width: none;
	height: clamp(28px, 2.6vw, 38px);
	transition: height var(--cds-dur) var(--cds-ease);
}

.cds-header.is-scrolled .cds-brand img,
.cds-header.is-scrolled .wp-block-site-logo img {
	height: clamp(24px, 2.1vw, 30px);
}

@media (prefers-reduced-motion: reduce) {
	.cds-brand img,
	.cds-header .wp-block-site-logo img {
		transition: none;
	}
}

/* The three header groups must stay on one row; the drawer handles narrow
   viewports, so wrapping here would only ever look like a mistake. */
.cds-header__inner {
	flex-wrap: nowrap;
	gap: clamp(0.75rem, 2vw, 1.75rem);
}

.cds-header__actions {
	flex: none;
}

.cds-nav {
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
}

/* Mega item grid placement -------------------------------------------------- *
   The item is a two-column grid: icon, then text. Both the title and the
   description belong in the text column, otherwise the description falls
   underneath the icon and wraps to one word per line. */

.cds-mega__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.cds-mega__title {
	grid-column: 2;
	grid-row: 1;
}

.cds-mega__desc {
	grid-column: 2;
	grid-row: 2;
	margin: 0.3rem 0 0;
	font-size: 0.8438rem;
	line-height: 1.5;
	color: var(--cds-muted);
}

.cds-mega__item:hover .cds-mega__desc {
	color: rgba(238, 242, 247, 0.9);
}

/* A panel must never run past the bottom of the window with no way to reach
   the rest of it. Capping the height and scrolling inside keeps every entry
   reachable on short laptop screens. */
.cds-mega {
	max-height: calc(100vh - var(--cds-header-h) - 1.25rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cds-mega::-webkit-scrollbar {
	width: 10px;
}

.cds-mega::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.14);
	border-radius: 10px;
}

@media (min-width: 1025px) {
	.cds-mega__item {
		padding-block: 0.65rem;
	}

	.cds-mega__head {
		padding-bottom: 0.35rem;
	}
}


/* ------------------------------------------------------------------ *
 * 1.1.4 — persistent header brand
 * ------------------------------------------------------------------ *
 * The block theme previously depended on WordPress having a Site Logo saved.
 * The PHP renderer now guarantees the supplied full Caltrop lockup in the
 * header, preserving the artwork as one image instead of reconstructing it.
 */
.cds-header-brand {
	flex: 0 0 auto;
	margin: 0 auto 0 0;
}

.cds-header-brand__link {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
	color: #ffffff;
	text-decoration: none;
	line-height: 1;
}

.cds-header-brand__link:hover,
.cds-header-brand__link:focus-visible {
	color: #ffffff;
	text-decoration: none;
}

.cds-header-brand__mark {
	display: block;
	flex: 0 0 auto;
	width: 40px !important;
	height: 40px !important;
	max-width: 40px !important;
	object-fit: contain;
	transition: width var(--cds-dur) var(--cds-ease), height var(--cds-dur) var(--cds-ease);
}

.cds-header-brand__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.18rem;
	white-space: nowrap;
}

.cds-header-brand__name {
	font-family: var(--wp--preset--font-family--heading, "Archivo", sans-serif);
	font-size: 1.02rem;
	font-weight: 750;
	letter-spacing: 0.075em;
	line-height: 0.95;
}

.cds-header-brand__sub {
	font-family: var(--wp--preset--font-family--body, "IBM Plex Sans", sans-serif);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1;
	color: #70a9ff;
}

.cds-header-brand--lockup .cds-header-brand__link {
	line-height: 0;
}

.cds-header-brand__lockup {
	display: block;
	width: auto !important;
	height: 42px !important;
	max-width: 220px !important;
	object-fit: contain;
}

.cds-header.is-scrolled .cds-header-brand__mark {
	width: 34px !important;
	height: 34px !important;
}

.cds-header.is-scrolled .cds-header-brand__lockup {
	height: 36px !important;
}

@media (max-width: 1180px) {
	.cds-header-brand__link {
		gap: 0.55rem;
	}

	.cds-header-brand__mark {
		width: 36px !important;
		height: 36px !important;
	}

	.cds-header-brand__name {
		font-size: 0.9rem;
	}

	.cds-header-brand__sub {
		font-size: 0.5rem;
		letter-spacing: 0.17em;
	}
}

@media (max-width: 560px) {
	.cds-header-brand__mark,
	.cds-header.is-scrolled .cds-header-brand__mark {
		width: 32px !important;
		height: 32px !important;
	}

	.cds-header-brand__name {
		font-size: 0.82rem;
	}

	.cds-header-brand__sub {
		font-size: 0.46rem;
		letter-spacing: 0.14em;
	}

	.cds-header-brand__lockup,
	.cds-header.is-scrolled .cds-header-brand__lockup {
		height: 32px !important;
		max-width: 175px !important;
	}
}


/* ------------------------------------------------------------------ *
 * 1.1.5 — full-width desktop header alignment
 * ------------------------------------------------------------------ *
 * Page content remains on the 1240px shell, but the brand should read as a
 * viewport-edge identity rather than another item in the navigation cluster.
 * On desktop the header spans the viewport with a modest safety gutter; the
 * flexible nav then consumes the middle space and keeps its links/actions on
 * the right, leaving deliberate breathing room after the Caltrop lockup.
 */
@media (min-width: 1025px) {
	.cds-header__inner {
		max-width: none;
		margin-inline: 0;
		padding-left: clamp(0.9rem, 1.4vw, 1.6rem);
		padding-right: clamp(0.9rem, 1.4vw, 1.6rem);
	}

	.cds-header-brand {
		margin-left: 0;
		margin-right: auto;
	}

	.cds-nav {
		flex: 0 1 auto;
		margin-left: clamp(2rem, 4vw, 5rem);
		justify-content: flex-end;
	}
}

/* ------------------------------------------------------------------ *
 * 1.1.6 — canonical supplied header lockup
 * ------------------------------------------------------------------ *
 * The header now renders the supplied full logo PNG as one image. Keep it
 * large enough for the DEFENSE GROUP line to remain legible without changing
 * the header's established height or the far-left alignment from 1.1.5.
 */
.cds-header-brand--lockup .cds-header-brand__lockup {
	height: 48px !important;
	max-width: 250px !important;
	width: auto !important;
}

.cds-header.is-scrolled .cds-header-brand--lockup .cds-header-brand__lockup {
	height: 40px !important;
}

@media (max-width: 560px) {
	.cds-header-brand--lockup .cds-header-brand__lockup,
	.cds-header.is-scrolled .cds-header-brand--lockup .cds-header-brand__lockup {
		height: 34px !important;
		max-width: 190px !important;
	}
}

/* ------------------------------------------------------------------ *
 * 1.1.7 — larger, legible canonical header lockup
 * ------------------------------------------------------------------ *
 * The approved logo includes a deliberately smaller DEFENSE GROUP line. At
 * the previous 48px render height that subtitle became too small to read.
 * Give the supplied artwork enough physical space to remain legible while
 * preserving the far-left alignment and scaling it down progressively on
 * narrower screens.
 */
@media (min-width: 1280px) {
	.cds-header {
		--cds-header-h: 116px;
		--cds-header-h-scrolled: 98px;
	}

	.cds-header-brand--lockup .cds-header-brand__lockup {
		height: 96px !important;
		max-width: 300px !important;
	}

	.cds-header.is-scrolled .cds-header-brand--lockup .cds-header-brand__lockup {
		height: 80px !important;
	}
}

@media (min-width: 1025px) and (max-width: 1279px) {
	.cds-header {
		--cds-header-h: 100px;
		--cds-header-h-scrolled: 86px;
	}

	.cds-header-brand--lockup .cds-header-brand__lockup {
		height: 82px !important;
		max-width: 265px !important;
	}

	.cds-header.is-scrolled .cds-header-brand--lockup .cds-header-brand__lockup {
		height: 70px !important;
	}
}

@media (min-width: 561px) and (max-width: 1024px) {
	.cds-header {
		--cds-header-h: 90px;
		--cds-header-h-scrolled: 78px;
	}

	.cds-header-brand--lockup .cds-header-brand__lockup {
		height: 70px !important;
		max-width: 235px !important;
	}

	.cds-header.is-scrolled .cds-header-brand--lockup .cds-header-brand__lockup {
		height: 60px !important;
	}
}

@media (max-width: 560px) {
	.cds-header-brand--lockup .cds-header-brand__lockup,
	.cds-header.is-scrolled .cds-header-brand--lockup .cds-header-brand__lockup {
		height: 44px !important;
		max-width: 185px !important;
	}
}


/* ------------------------------------------------------------------ *
 * 1.2.1 — mega panel height and rendering cost
 * ------------------------------------------------------------------ */

/*
 * Height
 * ------
 * The panel was running past the bottom of the window, taking the footer row
 * ("All services" / "Request a consultation") with it. Two things caused it.
 *
 * First, the block editor emits its own block-gap rule for every wp-block-group
 * with layout support. That rule carries the same specificity as the classes
 * below and is printed after the theme stylesheet, so it won, and each mega
 * item picked up roughly 24px of extra margin between its title and its
 * description. Six items across two rows is around 150px of height that was
 * never designed in. Raising the specificity here settles it either way.
 */
.cds-mega .cds-mega__item > .cds-mega__title,
.cds-mega .cds-mega__item > .cds-mega__icon {
	margin-block: 0;
}

.cds-mega .cds-mega__item > .cds-mega__desc {
	margin: 0.25rem 0 0;
}

.cds-mega .cds-mega__item {
	row-gap: 0;
}

.cds-mega .cds-mega__col > *,
.cds-mega .cds-mega__links > * {
	margin-block: 0;
}

.cds-mega .cds-mega__footer > * {
	margin-block: 0;
}

/*
 * Second, the cap that stops the panel overflowing the window needs to survive
 * a short viewport and mobile browser chrome. dvh is used where supported, and
 * the scroll container gets its own bottom padding so the footer row is never
 * flush against the clipping edge with no visual cue that more is below.
 */
.cds-mega {
	max-height: calc(100vh - var(--cds-header-h) - 1.5rem);
	max-height: calc(100dvh - var(--cds-header-h) - 1.5rem);
	padding-bottom: clamp(1.5rem, 2vw, 2.25rem);
	scrollbar-width: thin;
}

.cds-mega__footer {
	margin-bottom: 0;
}

/* On a short window, tighten the panel rather than forcing the reader to
   scroll inside a hover menu, which is awkward with a pointer. */
@media (max-height: 860px) {
	.cds-mega {
		padding-block: 1.25rem;
	}

	.cds-mega .cds-mega__item {
		padding-block: 0.45rem;
	}

	.cds-mega .cds-mega__head {
		padding-bottom: 0.25rem;
	}

	.cds-mega .cds-mega__footer {
		margin-top: 0.85rem;
		padding-top: 0.75rem;
	}
}

@media (max-height: 720px) {
	.cds-mega .cds-mega__desc {
		display: none;
	}

	.cds-mega .cds-mega__icon {
		width: 32px;
		height: 32px;
	}
}

/*
 * Rendering cost
 * --------------
 * Every mega panel sits in the DOM at all times. Hidden with visibility alone
 * they were still laid out, styled and composited, so eight panels' worth of
 * items, icons and gradients were being maintained while the pointer moved
 * along the nav bar — which is what made moving between menus feel sticky.
 *
 * content-visibility drops the subtree out of rendering entirely while the
 * panel is closed, and contain stops an open panel from invalidating layout
 * further up the page. The opacity and transform transitions still run on the
 * panel box itself, so the animation is unchanged.
 */
@media (min-width: 1025px) {
	.cds-mega {
		content-visibility: hidden;
		contain: layout paint;
	}

	.cds-nav:not(.is-hover-off) .cds-nav__item:hover > .cds-mega,
	.cds-nav__item.is-open > .cds-mega {
		content-visibility: visible;
	}
}

/* A 90px blur across a 1240px panel is an expensive repaint on every open and
   close. This is visually near-identical and much cheaper. */
.cds-mega {
	box-shadow: 0 26px 54px -34px rgba(0, 0, 0, 0.9);
}

/* Hovering an item repainted the whole panel because the transition covered
   background and border together on a transparent border. Keeping the border
   present at all times and only changing its colour avoids the reflow. */
.cds-mega__item {
	border-color: rgba(47, 134, 255, 0);
	will-change: auto;
}


/* ------------------------------------------------------------------ *
 * 1.2.4 — mobile header: desktop nav was not hiding
 * ------------------------------------------------------------------ *
 * .cds-nav and .cds-header__actions are the only two elements in the header
 * declared as a block group with flex layout. WordPress generates a container
 * class for each of those — .wp-container-core-group-is-layout-<hash> — that
 * carries display: flex, and prints it in the core-block-supports inline
 * stylesheet in the head, after the theme's stylesheets.
 *
 * That class has the same specificity as .cds-nav, so being later in the
 * cascade it won, and the display: none in the max-width: 1024px block never
 * took effect. Being inside a media query does not raise specificity. The
 * burger has no layout class, so it appeared as intended — which is why the
 * mobile header showed the burger and the full desktop navigation at once,
 * overflowing sideways.
 *
 * Qualifying with the header raises specificity above the generated class
 * without resorting to !important.
 */
@media (max-width: 1024px) {
	.cds-header .cds-nav,
	.cds-header .cds-header__actions {
		display: none;
	}

	.cds-header .cds-burger {
		display: inline-flex;
	}

	/* Nothing in the header may make the page scroll sideways. */
	.cds-header,
	.cds-header .cds-header__inner {
		max-width: 100%;
		overflow-x: clip;
	}

	.cds-header .cds-header__inner {
		gap: 0.75rem;
	}

	.cds-header-brand {
		min-width: 0;
	}
}