/**
 * Site footer.
 *
 * WHAT WAS WRONG, TWICE
 *
 * First: the top row was a flex container with `justifyContent: space-between` and
 * exactly two children — the brand block and the navigation. space-between puts
 * the first item against one edge and the last against the other and spreads
 * every pixel of slack between them, which with two children means ALL of it. On
 * a 1200px container that left roughly 1000px of empty dark space with the links
 * pinned to the far right, stacked one per line in a 240px-tall thread.
 *
 * That was fixed by making the links a block of columns instead of a thread, and
 * it went too far the other way: THREE columns of links, each a 1fr track spanning
 * the ~900px left over beside the brand. Links a third of the footer apart do not
 * read as one list — every column looked like a separate, unlabelled group, and
 * with eight items over three tracks the last column held two while the others
 * held three, so the block did not even square up.
 *
 * THE REAL PROBLEM WAS ARITHMETIC, not column count. The footer's content — a
 * 72px logo, two short lines, eight short links — comes to about 560px of the
 * 1200px available, and any two-block layout has to put the other 640px somewhere:
 * spread through the links (disjointed) or dropped in the middle (a void).
 *
 * So the footer is three blocks now, which is enough content to use the width
 * honestly, and each one is sized by its content rather than by a fraction:
 *
 *   brand (logo + tagline)   |   nav, two columns of four   |   address + phone
 *
 * `space-between` is safe here in a way it was not with two children: with three
 * max-content tracks the slack is halved into two gaps of ~150px, which reads as a
 * footer's breathing room rather than as a room with two people at opposite ends.
 * This is also roughly how the live site arranges its own footer.
 */

.pd-footer__top {
	display: grid;
	grid-template-columns: repeat( 3, max-content );
	justify-content: space-between;
	gap: var( --wp--preset--spacing--60 );
	align-items: start;
}

/**
 * Two columns of four links.
 *
 * Four and four, so both columns are full and the block is a rectangle — which is
 * what makes it read as one list rather than as groups. Fixed at 2 rather than
 * auto-fit: auto-fit sizes from available width, and this track is now sized from
 * the links themselves, so the two would fight over which decides.
 *
 * SELECTOR: the class lands ON the <ul>, not on an ancestor of it — the
 * navigation block puts its className on the container element itself, which is
 * the same list that carries wp-block-navigation__container. Written as a
 * descendant (`.pd-footer__nav .wp-block-navigation__container`) it matched
 * nothing at all and the links stayed in one column. Two classes on one element
 * also gives (0,2,0), which beats the block's own (0,1,0) layout rule.
 */
.pd-footer__nav.wp-block-navigation__container {
	display: grid;
	grid-template-columns: repeat( 2, max-content );

	/* Column gap is the space BETWEEN two columns of one list, so it is tighter
	   than the spacing that separates the footer's three blocks — otherwise the
	   two halves of the list look as separate as the blocks around them. */
	gap: 0.7rem 3rem;
}

/**
 * The tagline under the logo — the live site's, verbatim: "Proven, Precise,
 * Professional" over "Full Service Drilling Company".
 *
 * The first line gets the display face and letter-spacing because it is a motto
 * rather than a sentence; the second is small, plain and slightly recessed, as a
 * descriptor of the business. Together they give the brand column the vertical
 * weight to sit level with a two-column list of links, which a bare logo did not.
 */
.pd-footer__tagline {
	max-width: 22ch;
	margin-bottom: 0;

	font-family: var( --wp--preset--font-family--poppins );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var( --wp--preset--color--gold );
}

.pd-footer__tagline-sub {
	max-width: 24ch;
	margin-top: 0;
	line-height: 1.4;
	opacity: 0.78;
}

/**
 * The address block and the phone.
 *
 * The number is a tel: link — same words, but a footer phone number on a phone
 * should dial. It is styled as body text rather than as a link because it sits
 * directly under two plain address lines, and underlining one of them would
 * suggest the address is clickable too.
 */
.pd-footer__contact a[ href ^= "tel:" ] {
	color: inherit;
	text-decoration: none;
}

.pd-footer__contact a[ href ^= "tel:" ]:hover,
.pd-footer__contact a[ href ^= "tel:" ]:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/**
 * Two blocks, then one.
 *
 * At 900px the three tracks stop fitting side by side without the gaps closing to
 * nothing, so the contact block drops under the brand — the pairing it had before
 * this layout, and the one that survives narrowing best. Below 700px everything
 * stacks in reading order: brand, links, contact.
 *
 * The link columns stay `max-content` at every width: two columns of four short
 * labels are ~260px together, which fits a phone, and content-sized tracks keep
 * them tight beside each other instead of drifting apart as the screen widens —
 * which is the whole failure this file's second rewrite was about.
 */
@media ( max-width: 900px ) {
	.pd-footer__top {
		grid-template-columns: max-content max-content;
		justify-content: start;
		gap: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--70 );
	}

	/* Row 2 of column 1, under the brand. The nav spans both rows beside them. */
	.pd-footer__nav.wp-block-navigation {
		grid-row: 1 / span 2;
		grid-column: 2;
	}
}

@media ( max-width: 700px ) {
	.pd-footer__top {
		grid-template-columns: 1fr;
		gap: var( --wp--preset--spacing--50 );
	}

	.pd-footer__nav.wp-block-navigation {
		grid-row: auto;
		grid-column: auto;
	}
}

/**
 * The Equipment submenu was white text on a white panel.
 *
 * Core styles the flyout conditionally on what the navigation block itself
 * declares:
 *
 *   .wp-block-navigation:not(.has-background)  .…__submenu-container { background: #fff }
 *   .wp-block-navigation:not(.has-text-color)  .…__submenu-container { color: #000 }
 *
 * This nav sets a text colour (base, i.e. white) and no background. So the first
 * rule applied — white panel — and the second did not, leaving the links to
 * inherit white from the nav. Invisible, and only on hover, which is why it
 * survived every screenshot until someone moved a mouse.
 *
 * Fixed by stating both, rather than by removing the nav's text colour: the
 * footer links have to stay white against the dark band.
 *
 * SPECIFICITY: (0,4,0). Core's own rules here run to (0,3,0) and its block styles
 * are enqueued after the theme's, so a tie would go to core. `.pd-footer__nav`
 * lands on the <nav> alongside `.wp-block-navigation`, which is what makes a
 * four-class selector available without inventing a wrapper.
 */
.wp-block-navigation.pd-footer__nav .wp-block-navigation__submenu-container {
	background-color: #2E2C3A;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: 8px;
	color: var( --wp--preset--color--base );
}

/**
 * The page you are on — gold, not the blue used in the header.
 *
 * Primary blue on this dark band measures about 3.6:1, under the 4.5:1 that
 * small text needs; gold is roughly 8.8:1 on it. The header can afford blue
 * because it sits on white. Same idea, different background, different answer.
 */
.pd-footer__nav .wp-block-navigation-item__content.pd-nav-current {
	color: var( --wp--preset--color--gold );
	font-weight: 600;
}