/*
 * dc-ltd - layout and states for R0. Every colour, size and space is a
 * theme.json preset from A0-2026-10-18 (x1-a0-tokens.json); the only
 * literal lengths are the lockup's geometry (A0 lockup: mark twice the cap
 * height, clear space t = 0.15 of the mark) and A0's focus ring.
 */
:root { color-scheme: dark; }

/* B10-2026-10-30: the menu scrolls the home page's sections, so the jump is smooth -
   and `auto` under reduced motion, which the rule at the foot of this file sets. */
html { scroll-behavior: smooth; }

/* Skip link: off-screen until focused. */
.dc-skip-link {
	position: absolute;
	left: var(--wp--preset--spacing--30);
	top: calc(-1 * var(--wp--preset--spacing--80));
	z-index: 100;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--text);
}
.dc-skip-link:focus { top: var(--wp--preset--spacing--30); }

/* A0: every focusable element shows a 3px accent ring, offset 3px. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* The header and footer take the root gutter, as the main does. */
header.wp-block-template-part,
footer.wp-block-template-part {
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

/* Header: the lockup and the main navigation. */
.dc-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--50);
}
/* B4-2026-10-29, brand guide Issue 3: the mark as high as the wordmark's capitals, its
   foot on the baseline, one word space before it. Baseline, so not flex; the lengths are
   x1-b4-header-lockup.css's, in em of the wordmark's own size.

   B8-2026-10-30, brand guide Issue 7: the lockup at twice the height, with the strapline
   beneath it inside the same home link. The size is B8's clamp - 48 px from a 1152 px
   viewport, twice B4's 24 px, and 30 px at 320 px, where twice would run off the screen.
   Everything below stays in em of the wordmark's own size, so the geometry rides the
   clamp unchanged. */
/* The size and the padding sit on the block, so the home link and the strapline beneath
   it share one left edge and one em. */
.dc-lockup-block {
	display: inline-block;
	padding: 0.2em;
	font-size: clamp(1.875rem, calc(1.4423rem + 2.1635vw), 3rem);
	line-height: 1;
}
.dc-lockup {
	display: block;
	font-size: inherit;
	line-height: 1;
	white-space: nowrap;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
/* The mark and the wordmark on a line of their own: B4's geometry is a relation between
   their ink, and the strapline must not sit in it. */
.dc-lockup__line { display: block; }
.dc-lockup:hover { color: var(--wp--preset--color--text); }
.dc-lockup:hover .dc-wordmark { text-decoration: underline; }
.dc-lockup__mark {
	display: inline-block;
	vertical-align: baseline;
	width: 0.6985em;   /* the cap height of Poppins 600's flat capitals */
	height: 0.6985em;
	margin-right: 0.393em; /* the word space 0.4620 less the D's left side bearing 0.0690 */
	letter-spacing: 0;
	fill: currentColor;
}
.dc-wordmark {
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
}
.dc-wordmark .io { color: var(--wp--preset--color--secondary); }

/* B8-2026-10-30: the strapline, in em of the wordmark's size, so it rides the clamp.
   At 1440 px its ink measures 399 px against the lockup's 401, and its ink top falls
   8.5 px below the wordmark's baseline against a quarter of the mark's height, 8.4. */
.dc-lockup__strap {
	display: block;
	font-size: 0.418em;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	margin-top: 0;
	color: var(--wp--preset--color--secondary);
}

.dc-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dc-nav a[aria-current="page"] { text-decoration-thickness: 3px; }
/* B8-2026-10-30: below 40rem the main menu's five items stand in rows of three and
   two, so Home never sits alone on a line of its own. */
@media (max-width: 39.999rem) {
	.dc-nav--primary .dc-nav__list {
		display: grid;
		grid-template-columns: repeat(3, max-content);
	}
}

/* Main. */
.dc-main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
}
.dc-main :where(p, li) { max-width: 68ch; }
.dc-eyebrow {
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}
.dc-eyebrow a { color: var(--wp--preset--color--secondary); }
.dc-main--sectors .wp-block-list { columns: 2 18rem; column-gap: var(--wp--preset--spacing--60); }
.dc-main--sectors .wp-block-list li { break-inside: avoid; }

/* Footer: the legal navigation and the particulars. */
.dc-footer {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--secondary);
}
.dc-footer .dc-nav__list { margin-block-end: var(--wp--preset--spacing--40); }
.dc-footer a { color: var(--wp--preset--color--text); }
.dc-footer a:hover { color: var(--wp--preset--color--accent); }

/* The certification block (B1-2026-10-27): DNV's full-colour artwork is made
   for a white ground, so it is never shown on the black one without this panel.

   The aspect ratio is x1-b3-dnv-ukas.svg's own, 114.66948 x 67.344215 mm, declared
   here so the browser reserves the mark's height BEFORE the file arrives. B3's pattern
   gives the img a width and no height, so until the SVG loaded the box was flat and
   the document grew by the mark's height when it landed. That shift is below the
   home page's first three sections, so it moved none of them - but it moved the FOOT
   of the document, and B10's menu entries for Sectors and Contact scroll to the end
   of the page: measured on staging 2026-10-30, reached from another page they stopped
   113 px short of where they belonged. The release file is not touched; the space is
   reserved from the theme's own stylesheet. */
.dc-cert-mark img {
	background: #ffffff;
	padding: 12px;
	box-sizing: content-box;
	aspect-ratio: 114.66948 / 67.344215;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
}