/**
 * Root-level blocks sit flush against each other.
 *
 * WordPress spaces the top-level blocks of a template with
 *   :where(.wp-site-blocks) > * { margin-block-start: var(--wp--style--block-gap) }
 * which is 1.5rem here. Every band in this theme is full-bleed and owns its own
 * padding, so that gap does nothing but insert a stripe of page background between
 * them — most visibly as 24px of white between the header and the page hero on
 * every interior template.
 *
 * It did not show on the homepage because front-page.html happens to nest its hero
 * inside <main> and sets margin-top:0 on that group inline. This replaces that
 * one-off with a rule that covers every template, including the ones where the
 * hero is a root-level block.
 *
 * Specificity: core's selector computes to (0,0,0) — :where() contributes nothing
 * and the universal selector contributes nothing — so a single class wins outright
 * regardless of load order.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/**
 * The same problem one level down, which the rule above never reached.
 *
 * A page's bands are not root-level blocks — they are children of the post
 * content, which is itself a flow layout. So core applied the global block gap
 * between them too: a 16px stripe of page background between every band on every
 * marketing page. Between two bands of different colours it reads as a seam;
 * between two of the same colour it is just height nobody asked for.
 *
 * SCOPED TO `.alignfull` deliberately. Full-bleed bands own their vertical
 * padding — that is the whole convention this theme is built on — so the gap is
 * always wrong for them. Ordinary blocks inside post content are paragraphs and
 * headings that need their rhythm, and this must not touch those. The one thing
 * it does catch is a full-bleed image inside a blog post, which would sit flush
 * against the paragraph above it; that is the right answer for a full-bleed image
 * anyway.
 */
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
}

/**
 * Shared section header — title, gold rule, lede.
 *
 * Extracted when the rigs section needed the identical treatment already written
 * for the services section. One definition, so the two can't drift.
 *
 * SPECIFICITY: selectors are tag-qualified (h2.pd-section-title, p.pd-section-lede)
 * rather than bare classes. theme.json emits `:root :where(h2)` and core's
 * layout emits `:root :where(.is-layout-*) > :where(*)`, both (0,1,0) — a lone
 * class only ties those, and ties go to core because core's styles are enqueued
 * after the theme's. The tag adds the element specificity that wins.
 *
 * NOTE: the lede must NOT carry a block font-size preset. WordPress emits
 * .has-large-font-size etc. with !important, which no rule here can override —
 * so leave fontSize off the paragraph block and let this file own it.
 */

/**
 * Small uppercase lead-in above a section title.
 *
 * NOTE: the hero, about and specialize sections each still carry their own
 * near-identical kicker rule (.pd-hero-kicker, .pd-about__kicker,
 * .pd-specialize__kicker). Those predate this shared class and are deliberately
 * left alone for now — migrating them is a safe mechanical change, but it touches
 * three already-approved sections, so it belongs in its own pass.
 */
p.pd-kicker {
	margin-top: 0;
	margin-bottom: 0;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
}

h2.pd-section-title {
	/* Holds a long section heading to two balanced lines instead of one wide
	   stretched line. Tune per section if a heading is much shorter or longer. */
	max-width: 26ch;
	margin-inline: auto;

	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Gold rule under the title, echoing the hero panel's accent edge. */
h2.pd-section-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 1.35rem auto 0;
	background-color: var( --wp--preset--color--gold );
}

p.pd-section-lede {
	max-width: 56ch;
	margin-inline: auto;

	/* Pulls in from the section's blockGap: the lede belongs to the title, rather
	   than floating halfway between it and the content below. */
	margin-top: 1.25rem;

	font-size: 1.125rem;
	line-height: 1.6;

	/* Recedes slightly so the title clearly leads. */
	opacity: 0.82;
}

/**
 * Tap highlight and focus rings, site-wide.
 *
 * Mobile Safari and Chrome paint a translucent blue-grey box over any element
 * they consider tappable the moment it is touched, and Chrome leaves a focus ring
 * on a <button> after a mouse click. Between them, every menu item, button and
 * card link on this site flashed a blue rectangle on interaction — which reads as
 * a rendering fault rather than feedback, because nothing else about the design
 * uses that colour or that shape.
 *
 * KEYBOARD FOCUS IS NOT REMOVED, and must not be. The ring is suppressed only for
 * :focus:not(:focus-visible) — that is, pointer and touch interactions, where the
 * browser itself judges a visible ring unnecessary. Tab to any of these and the
 * ring below appears, in the theme's own blue rather than the UA's.
 */
a,
button,
summary,
input,
select,
textarea,
[ role="button" ] {
	-webkit-tap-highlight-color: transparent;
}

:focus:not( :focus-visible ) {
	outline: none;
}

:focus-visible {
	outline: 3px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

/**
 * A photograph presented as a card — matted, rounded and lifted.
 *
 * Extracted when the New Clients page needed the frame already written for the
 * About page intro. One definition, so the two can't drift.
 *
 * THE MAT IS WHAT MAKES THE SHADOW LEGIBLE. On a white or cream section, a shadow
 * cast directly by a photograph's own edge reads as a dark smudge under the
 * picture; with a band of section-white between the image and the edge of the
 * card, the card has an edge of its own and the lift is unambiguous.
 *
 * THE CALLER OWNS THE CROP. No aspect-ratio here: every use of this frame sits
 * beside a different amount of copy, and the ratio is how the photograph is made
 * to stand at about the height of the words next to it. Set `aspect-ratio` and
 * `object-position` on the block's own class.
 */
figure.pd-photo-card {
	margin: 0;
	padding: 0.75rem;

	background-color: var( --wp--preset--color--base );
	border-radius: 16px;
	box-shadow:
		0 1px 3px rgba( 0, 0, 0, 0.06 ),
		0 16px 34px rgba( 0, 0, 0, 0.13 );
}

/* Tag-qualified at (0,1,2): core sets `.wp-block-image img { height: auto }` at
   (0,1,1), and its block styles load after the theme's, so a tie loses. */
figure.pd-photo-card img {
	display: block;
	width: 100%;
	object-fit: cover;

	/* Shows through while the photo loads rather than a white gap the size of the
	   frame — the box is already the right size, so nothing moves when it lands. */
	background-color: var( --wp--preset--color--cream );

	/* Concentric with the card's 16px, minus the 12px mat. */
	border-radius: 8px;
}

/**
 * Full-bleed photograph band.
 *
 * A section that is only a picture — no heading, no copy, nothing to read. It
 * comes from the live homepage, where a wide photograph sits between the service
 * cards and the fleet and does the job a paragraph would do badly: it shows the
 * work rather than describing it, and it gives the eye somewhere to rest between
 * two dense grids.
 *
 * Ratio rather than natural height: full-bleed, a 1599x1374 photograph would be
 * over a thousand pixels tall on a wide screen. The band is a slice of it.
 */
.pd-band__media {
	margin: 0;

	/* Shows through while the photo loads rather than a white gap the height of
	   the band. */
	background-color: var( --wp--preset--color--cream );
}

/* Tag-qualified at (0,1,2): core sets `.wp-block-image img { height: auto }` at
   (0,1,1) and its block styles load after the theme's, so a tie loses. */
figure.pd-band__media img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;

	/* The crew and the rig sit in the upper half; a centred crop takes water. */
	object-position: center 42%;
}

/**
 * Taller and squarer on a phone. At 21:9 across 400px the band is 170px — too
 * shallow to read as a photograph of anything, and the two people in it vanish.
 */
@media ( max-width: 700px ) {
	figure.pd-band__media img {
		aspect-ratio: 3 / 2;
	}
}