/* Capabilities Matrix (Aerospace SS4; the same synced pattern is referenced by
 * Defense/Space/Semiconductor). Figma master 33330:4432 (Space ref 33527:13109).
 * 1124px table inside a horizontal scroll wrapper; off-palette table surface
 * #263F6B and header hairline #D1D5DB are design-specified (not in theme.json).
 * Column grid: Location 188px + 26 capability columns at 36px = 1124px.
 * Rows: category header 44px, vertical sub-header 120px, body rows 69px. */
.cmp-cap-matrix-section {
	--cmp-matrix-surface: #263f6b;
	--cmp-matrix-line-head: #d1d5db;
	--cmp-matrix-line-body: var(--wp--preset--color--theme-05);
}

.cmp-cap-matrix-scroll {
	overflow-x: auto;
	border-radius: 8px;
}

/* core gives .wp-block-table its own overflow-x:auto; make the figure
 * transparent so .cmp-cap-matrix-scroll is the only scroll container
 * (it carries the border-radius clip) */
.cmp-cap-matrix-scroll .cmp-cap-matrix {
	margin: 0;
	overflow-x: visible;
}

.cmp-cap-matrix table {
	border-collapse: collapse;
	/* hidden outer border: in the collapsed model the cells' edge borders
	 * otherwise overhang the 1124px table box by 1px, which keeps the scroll
	 * wrapper permanently 1px scrollable (phantom scrollbar) */
	border-style: hidden;
	width: 1124px;
	min-width: 1124px;
	background: var(--cmp-matrix-surface);
	font-family: var(--wp--preset--font-family--dm-sans);
}

.cmp-cap-matrix th,
.cmp-cap-matrix td {
	color: var(--wp--preset--color--theme-01);
}

.cmp-cap-matrix thead th {
	border: 1px solid var(--cmp-matrix-line-head);
}

.cmp-cap-matrix tbody td {
	border: 1px solid var(--cmp-matrix-line-body);
}

.cmp-cap-matrix thead tr:first-child th {
	height: 44px;
	background: var(--wp--preset--color--theme-06);
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	padding: 12px 16px;
}

.cmp-cap-matrix thead tr:first-child th:first-child {
	text-align: left;
}

.cmp-cap-matrix thead tr:last-child th {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 11px;
	font-weight: 600;
	/* line-height fills the 35px content width (36px column minus 1px border)
	 * so the single vertical line of text self-centers horizontally */
	line-height: 35px;
	white-space: nowrap;
	height: 120px;
	vertical-align: bottom;
	text-align: left;
	padding: 12px 0;
	width: 36px;
	min-width: 36px;
}

.cmp-cap-matrix thead tr:last-child th:first-child {
	writing-mode: initial;
	transform: none;
	line-height: normal;
	width: 188px;
	min-width: 188px;
}

.cmp-cap-matrix tbody td {
	height: 69px;
	text-align: center;
	font-size: 15px;
	line-height: 1;
	padding: 8px 4px;
}

.cmp-cap-matrix tbody td:first-child {
	text-align: left;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	padding: 8px 10px 8px 16px;
	min-width: 188px;
}

.cmp-cap-matrix tbody td:first-child strong {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.cmp-cap-matrix tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--theme-04);
}

/* Markup round 2 pins 17/20/23/24 (2026-09-03): desktop moves to the wider
 * 1264px version (Figma Dev 33640:6883) — the location sits inline after the
 * facility name in a 328px first column and body rows tighten to 59px. The
 * mobile artboard (33527:12209) keeps the stacked name / city layout, so the
 * original 1124px geometry above stays as the <782px baseline. */
@media (min-width: 782px) {
	.cmp-cap-matrix table {
		width: 1264px;
		min-width: 1264px;
	}

	.cmp-cap-matrix thead tr:last-child th:first-child,
	.cmp-cap-matrix tbody td:first-child {
		width: 328px;
		min-width: 328px;
	}

	.cmp-cap-matrix tbody td {
		height: 59px;
	}

	.cmp-cap-matrix tbody td:first-child br {
		display: none;
	}

	.cmp-cap-matrix tbody td:first-child strong {
		margin-right: 16px;
	}
}

@media (max-width: 781px) {
	.cmp-cap-matrix-section {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}
}

/* --- Scroll + expand affordance (external markup round pin 88, 2026-09-10) --
 * "I nearly missed the scroll bar at the bottom and only knew to look because
 * I am familiar with the matrix." macOS hides overlay scrollbars until the
 * user is already scrolling, so a 1264px table in a 1280px content box gave
 * no clue that four Certifications columns sat off-screen at common laptop
 * widths. Three cues now, all added by initCapMatrix() in cmp-interactive.js
 * so the block markup stays untouched and editable:
 *   1. a toolbar above the table: a "Scroll sideways" hint (only while the
 *      table actually overflows) and an "Expand matrix" button;
 *   2. a permanent scrollbar track in the accent colour, plus edge fades on
 *      whichever side still has columns hidden;
 *   3. a full-screen dialog holding a copy of the table with zoom controls,
 *      built on the same <dialog> pattern as the leadership bios. */
.cmp-cap-matrix-section {
	--cmp-matrix-accent: #1897ff;
}

.cmp-cap-matrix-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 16px;
}

.cmp-cap-matrix-hint {
	display: none;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--wp--preset--color--theme-05);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
}

.cmp-cap-matrix-hint svg {
	flex: 0 0 auto;
	width: 22px;
	height: 14px;
	color: var(--cmp-matrix-accent);
}

.cmp-cap-matrix-frame.is-overflowing ~ .cmp-cap-matrix-toolbar .cmp-cap-matrix-hint,
.cmp-cap-matrix-toolbar.is-overflowing .cmp-cap-matrix-hint {
	display: inline-flex;
}

.cmp-cap-matrix-expand,
.cmp-matrix-modal__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 16px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--theme-01);
	border-radius: 4px;
	color: var(--wp--preset--color--theme-01);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.5;
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.cmp-cap-matrix-expand svg,
.cmp-matrix-modal__btn svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.cmp-cap-matrix-expand:hover,
.cmp-cap-matrix-expand:focus-visible,
.cmp-matrix-modal__btn:hover,
.cmp-matrix-modal__btn:focus-visible {
	border-color: var(--cmp-matrix-accent);
	color: var(--cmp-matrix-accent);
	outline: none;
}

.cmp-cap-matrix-expand:focus-visible,
.cmp-matrix-modal__btn:focus-visible {
	outline: 2px solid var(--cmp-matrix-accent);
	outline-offset: 2px;
}

/* Frame wraps the scroll group so the edge fades can sit outside the scroll
 * container (a pseudo-element inside it would scroll away with the table). */
.cmp-cap-matrix-frame {
	position: relative;
	border-radius: 8px;
}

.cmp-cap-matrix-frame::before,
.cmp-cap-matrix-frame::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 12px;
	width: 56px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 200ms ease;
	z-index: 1;
}

.cmp-cap-matrix-frame::before {
	left: 0;
	border-radius: 8px 0 0 8px;
	background: linear-gradient(90deg, rgb(4 11 32 / 85%), rgb(4 11 32 / 0%));
}

.cmp-cap-matrix-frame::after {
	right: 0;
	border-radius: 0 8px 8px 0;
	background: linear-gradient(270deg, rgb(4 11 32 / 85%), rgb(4 11 32 / 0%));
}

.cmp-cap-matrix-frame.has-more-left::before,
.cmp-cap-matrix-frame.has-more-right::after {
	opacity: 1;
}

/* Always-visible scrollbar: an explicit track defeats the macOS overlay
 * behaviour in WebKit/Chromium; Firefox honours scrollbar-color. */
.cmp-cap-matrix-frame .cmp-cap-matrix-scroll {
	padding-bottom: 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--cmp-matrix-accent) rgb(255 255 255 / 12%);
}

.cmp-cap-matrix-frame .cmp-cap-matrix-scroll::-webkit-scrollbar {
	height: 10px;
}

.cmp-cap-matrix-frame .cmp-cap-matrix-scroll::-webkit-scrollbar-track {
	background: rgb(255 255 255 / 12%);
	border-radius: 999px;
}

.cmp-cap-matrix-frame .cmp-cap-matrix-scroll::-webkit-scrollbar-thumb {
	background: var(--cmp-matrix-accent);
	border-radius: 999px;
}

/* --- Full-screen dialog --------------------------------------------------- */
.cmp-matrix-modal {
	--cmp-matrix-accent: #1897ff;
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #040b20;
	color: var(--wp--preset--color--theme-01, #fff);
	font-family: var(--wp--preset--font-family--dm-sans, "DM Sans", sans-serif);
}

.cmp-matrix-modal::backdrop {
	background: rgb(4 11 32 / 90%);
}

.cmp-matrix-modal__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cmp-matrix-modal__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 16px 24px;
	border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.cmp-matrix-modal__title {
	margin: 0 auto 0 0;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.cmp-matrix-modal__zoomgroup {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cmp-matrix-modal__level {
	min-width: 3.5em;
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--theme-05, #8d9fbd);
}

.cmp-matrix-modal__btn {
	padding: 8px 12px;
}

.cmp-matrix-modal__btn[disabled] {
	opacity: 0.4;
	cursor: default;
	border-color: var(--wp--preset--color--theme-01);
	color: var(--wp--preset--color--theme-01);
}

.cmp-matrix-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 24px;
	scrollbar-width: thin;
	scrollbar-color: var(--cmp-matrix-accent) rgb(255 255 255 / 12%);
	touch-action: pan-x pan-y pinch-zoom;
}

.cmp-matrix-modal__body::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.cmp-matrix-modal__body::-webkit-scrollbar-track {
	background: rgb(255 255 255 / 12%);
}

.cmp-matrix-modal__body::-webkit-scrollbar-thumb {
	background: var(--cmp-matrix-accent);
	border-radius: 999px;
}

/* The zoom wrapper takes the table's own width so the scroll area grows with
 * the scale factor; transform fallback for browsers without CSS zoom. */
.cmp-matrix-modal__zoom {
	width: max-content;
	transform-origin: 0 0;
}

.cmp-matrix-modal__zoom .cmp-cap-matrix {
	margin: 0;
	overflow: visible;
}

.cmp-matrix-modal__zoom .cmp-cap-matrix table {
	border-radius: 8px;
	overflow: hidden;
}

.cmp-matrix-modal .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.cmp-cap-matrix-toolbar {
		margin-bottom: 12px;
	}

	.cmp-matrix-modal__bar {
		padding: 12px 16px;
	}

	.cmp-matrix-modal__body {
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cmp-cap-matrix-frame::before,
	.cmp-cap-matrix-frame::after,
	.cmp-cap-matrix-expand,
	.cmp-matrix-modal__btn {
		transition: none;
	}
}

/* Location column facility names link out to each operating company's
 * site (markup pin 73, decided 2026-09-14). */
.cmp-cap-matrix tbody td a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.cmp-cap-matrix tbody td a:hover,
.cmp-cap-matrix tbody td a:focus-visible {
	text-decoration-color: var(--wp--preset--color--theme-02, #1897ff);
}