/**
 * Header and footer, from Kyle's design.
 *
 * This replaces legacy-chrome.css, which was the cancelled March design's
 * header and footer kept alive on life support. Nothing from that file survives.
 *
 * Every number here is measured off his export rather than chosen.
 */

/* ---------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------------
   sticky, white, 20px by 72px of padding, a 1px near black hairline at 10%
   underneath, logo 36px tall, nav 15px Light with 36px between items, and the
   contact button 12px by 24px at 14px Bold.

   Sticky rather than fixed is his choice and it is the better one: a sticky
   header takes up space in the flow, so content cannot end up underneath it.
   The fixed header this replaces needed a matching offset on .d4-main, and that
   offset was wrong twice on this build.
   --------------------------------------------------------------------------- */

.d4-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--wp--preset--color--paper);
	box-shadow: 0 1px 0 rgb(29 29 29 / 0.1);
}

/* Jumping to an anchor stops short of the sticky bar.
   -----------------------------------------------------------------------------
   DEVIATION from his design, and it is a bug in his design rather than a
   difference of opinion. He draws four in-page links. A browser scrolls the
   target to the very top of the window, the sticky header is sitting there, so
   the first 82px of that section goes underneath it. Three of his four have
   96px of top padding and get away with it. About's "Meet the founders" has 24
   and does not: driving HIS OWN prototype, the heading lands at 24px under an
   82px header and is unreadable.

   Sized from the token the bar itself is built from, so it cannot drift out of
   line with it. Only above 900px, because that is where the header stops being
   sticky and below it there is nothing to clear.

   Every id inside the page, not just the four, so a fifth anchor added later
   works without anyone remembering this. It also helps somewhere unrelated:
   when a browser scrolls to a form field that failed validation, that field no
   longer lands under the bar either. */
@media (min-width: 901px) {
	.d4-main [id] {
		scroll-margin-top: var(--d4-header-h);
	}
}

.d4-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--d4-max);
	margin-inline: auto;
	/* 20px by 72px on his wide pages, 16px by 20px on his phone sketch. The
	   vertical value is a token because the drawer has to open from the bottom
	   of the bar and needs the same number. */
	padding: var(--d4-header-pad) var(--d4-gutter);
}

.d4-header__logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.d4-header__logo-img {
	display: block;
	/* 36px on his wide header, 24px on his phone one. */
	height: var(--d4-logo-h);
	width: auto;
}

/* The white logo only comes out on the dark bar, which is the phone one. */
.d4-header__logo-img--light { display: none; }

.d4-header__nav {
	display: flex;
	align-items: center;
	gap: 36px;
}

.d4-nav {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.d4-nav__link {
	display: inline-block;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color var(--d4-transition);
}

.d4-nav__link:hover { color: var(--wp--preset--color--terracotta); }

/* The current page. This is the only difference between his eighteen headers. */
.d4-nav__link--active {
	color: var(--wp--preset--color--terracotta);
	font-weight: 700;
}

.d4-header__cta {
	/* His is 12px by 24px at 14px, slightly tighter than the buttons in the page
	   body, and it needs a 44px minimum so it is a reliable tap target. */
	padding: 12px 24px;
	font-size: 14px;
	min-height: 44px;
	flex-shrink: 0;
}

/* Tap to call lives in the drawer only. */
.d4-header__call { display: none; }

/* The hamburger, from his phone sketch: three 2px bars, 24px, 24px and 16px,
   the short one right aligned, 5px apart. */
.d4-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}

.d4-header__bars,
.d4-header__bars::before,
.d4-header__bars::after {
	display: block;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--d4-transition), opacity var(--d4-transition), width var(--d4-transition);
}

.d4-header__bars {
	position: relative;
	width: 24px;
}

.d4-header__bars::before,
.d4-header__bars::after {
	content: "";
	position: absolute;
	right: 0;
}

.d4-header__bars::before { top: -7px; width: 24px; }
.d4-header__bars::after  { top: 7px;  width: 16px; }

/* Open: the top and bottom bars cross, the middle one goes. */
.d4-header__toggle[aria-expanded="true"] .d4-header__bars { background-color: transparent; }
.d4-header__toggle[aria-expanded="true"] .d4-header__bars::before { top: 0; transform: rotate(45deg); }
.d4-header__toggle[aria-expanded="true"] .d4-header__bars::after  { top: 0; width: 24px; transform: rotate(-45deg); }

/* ---------------------------------------------------------------------------
   Header on a phone
   ---------------------------------------------------------------------------
   One of the three media queries in the whole stylesheet, and it earns its
   place: a horizontal bar of eight links has no intrinsic version, it has to
   become a drawer at some point.

   900px is where his eight nav items plus the button stop fitting on one line.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
	/* His phone header is the dark bar, not the white one. */
	.d4-header {
		background-color: var(--wp--preset--color--ink);
		box-shadow: none;
	}

	.d4-header__logo-img--dark  { display: none; }
	.d4-header__logo-img--light { display: block; }

	.d4-header__toggle {
		display: inline-flex;
		color: var(--wp--preset--color--paper);
		order: 3;
	}

	.d4-header__nav {
		position: fixed;
		/* Opens from the bottom of the bar. Derived from the same two tokens
		   the bar is built from, so it cannot drift out of line with it. */
		inset: var(--d4-header-h) 0 0 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 8px var(--d4-gutter) 40px;
		background-color: var(--wp--preset--color--ink);
		overflow-y: auto;
		/* Hidden from the keyboard and from a screen reader when shut, not just
		   moved off screen. A drawer you can tab into but cannot see is worse
		   than no drawer. */
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity var(--d4-transition), transform var(--d4-transition), visibility var(--d4-transition);
	}

	.d4-header__nav.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.d4-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.d4-nav__item { border-bottom: 1px solid var(--d4-rule-on-dark); }

	.d4-nav__link {
		display: block;
		/* 44px minimum plus room to hit it without aiming. */
		padding: 16px 0;
		font-size: 18px;
		color: var(--wp--preset--color--paper);
	}

	.d4-nav__link--active { color: var(--wp--preset--color--terracotta); }

	.d4-header__call {
		display: block;
		padding: 20px 0 16px;
		font-size: 22px;
		font-weight: 700;
		color: var(--wp--preset--color--terracotta);
		text-decoration: none;
	}

	.d4-header__cta {
		width: 100%;
		/* Terracotta on the dark bar, which is what his phone sketch does. */
		background-color: var(--wp--preset--color--terracotta);
		color: var(--wp--preset--color--paper);
	}

	/* Nothing behind the drawer should scroll while it is open. */
	body.d4-nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------------
   Near black, 80px top and 32px bottom, columns at 1.1fr 1fr 1fr 1fr auto with
   48px between, a hairline under them after 56px, column headings 20px Bold with
   28px clear, body 14px on 1.65, and the outline mark 150px wide at half
   opacity, bottom aligned.
   --------------------------------------------------------------------------- */

.d4-footer {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-weight: 300;
	padding-block: clamp(48px, 7vw, 80px) 32px;
}

.d4-footer .d4-container,
.d4-footer .d4-container--wide {
	max-width: var(--d4-max);
	margin-inline: auto;
	padding-inline: var(--d4-gutter);
}

.d4-footer__grid {
	display: grid;
	/* His fixed five columns, but each with a floor, so they fold to three, two
	   and one on their own rather than squeezing to 60px each on a phone. */
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 48px;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--d4-rule-on-dark);
}

/* The contact column is 1.1fr in his layout, a shade wider than the rest. */
.d4-footer__contact { grid-column: span 1; }

.d4-footer h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0 0 28px;
	color: var(--wp--preset--color--paper);
}

.d4-footer p,
.d4-footer address,
.d4-footer li {
	font-size: 14px;
	line-height: 1.65;
	font-style: normal;
	margin: 0 0 16px;
	max-width: 260px;
}

.d4-footer p:last-child,
.d4-footer address:last-child { margin-bottom: 0; }

.d4-footer a {
	color: inherit;
	text-decoration: none;
	transition: color var(--d4-transition);
}

.d4-footer a:hover { color: var(--wp--preset--color--terracotta); }

/* The phone number and email are terracotta in his footer, and they are the only
   two links in it that are. */
.d4-footer__contact a { color: var(--wp--preset--color--terracotta); }
.d4-footer__contact a:hover { text-decoration: underline; }

.d4-footer__note { max-width: 260px; }

.d4-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.d4-footer__menu li { margin: 0; }

/* 44px of hit area without 44px of visual gap, so the column still looks like
   his while being usable with a thumb. */
.d4-footer__menu a {
	display: inline-block;
	padding-block: 6px;
	margin-block: -6px;
}

.d4-footer__icons {
	display: flex;
	gap: 24px;
	align-items: center;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.d4-footer__icons li { margin: 0; }

.d4-footer__icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* His icons are 21px, which is a 21px tap target. */
	width: 44px;
	height: 44px;
	margin: -11px;
}

.d4-footer__icons svg {
	width: 21px;
	height: 21px;
	fill: var(--wp--preset--color--grey);
	transition: fill var(--d4-transition);
}

.d4-footer__icons a:hover svg { fill: var(--wp--preset--color--terracotta); }

.d4-footer__mark {
	align-self: end;
	justify-self: end;
	line-height: 0;
}

.d4-footer__mark img {
	width: 150px;
	height: auto;
	opacity: 0.5;
}

.d4-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 24px;
	padding-top: 24px;
	font-size: 13px;
}

.d4-footer__bottom p { font-size: 13px; margin: 0; max-width: none; }

.d4-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

@media (max-width: 700px) {
	/* The mark is decoration and it is the first thing to go when the columns
	   stack, or it sits alone in a row of its own taking up half a screen. */
	.d4-footer__mark { display: none; }
}

/* ---------------------------------------------------------------------------
   Which header, and the panel behind his hamburger
   ---------------------------------------------------------------------------
   Both headers are in the markup on every page and this decides which one is
   on. Done in CSS rather than in PHP or JavaScript so the right one is there
   before anything runs: swapping on a media query means no flash, no layout
   shift, and it stays correct when somebody rotates a phone.

   900px is where the transcribed pages stop fitting. Measured, not chosen:
   nothing overflows at 1024 and only two elements do at 768.
   --------------------------------------------------------------------------- */

/* Doubled up on purpose, and it has to be.

   His own transcribed class sets display:flex on both bars, and shapes.css is
   loaded after this file, so a single class here scores the same 0,1,0 and
   loses on order. Both markers sit on the same element, so .d4-shape.d4-x is
   0,2,0 and wins without needing !important. Without this, both headers render
   at once on a phone and his desktop nav hangs 100px off the side. */
.d4-shape.d4-site-header-mobile,
.d4-menu {
	display: none;
}

@media (max-width: 900px) {
	.d4-shape.d4-site-header { display: none; }
	.d4-shape.d4-site-header-mobile { display: flex; }
}

/* The sticky bar slid under the WordPress admin bar and lost 32px of itself.
   ---------------------------------------------------------------------------
   Emily and Alex, 17 Aug 2026: the header "shrinks" on scroll and the top of
   the logo is cut off.

   IT DOES NOT SHRINK. Measured logged out at 1440: 82px at the top of the page
   and 82px scrolled to the bottom, logo never clipped. There is no shrink rule
   anywhere in the theme and never was.

   What happens is that the admin bar is position:fixed at top 0 and his header
   is position:sticky at top 0, so once it sticks it is sitting behind it. At
   the top of the page they do not overlap, because WordPress pushes the whole
   document down by 32px, which is why it only starts once you scroll. Measured
   logged in at 1440: header 82px, 32px of it behind the admin bar, 50px
   visible, logo cut off. Those numbers are the screenshot exactly.

   SO NO VISITOR HAS EVER SEEN THIS. It is only ever Kyle, Emily and Alex, which
   is also why it went unnoticed until one of them scrolled a case study.

   Doubled up for the same reason as the rule above: his .d4x9eed51b6 sets top:0
   and lives in shapes.css, which loads after this file, so a single class here
   would score the same and lose on order.

   32px is the admin bar above 782px. Below that it is 46, and below 600 it goes
   position:absolute and scrolls away so nothing is needed. His desktop bar is
   hidden under 901 anyway, so only the first of the three can ever fire today;
   the others are here so this stays right if that breakpoint ever moves. */
.admin-bar .d4-shape.d4-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .d4-shape.d4-site-header {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .d4-shape.d4-site-header {
		top: 0;
	}
}

/* His hamburger, made operable. The three bars and their spacing are his. */
.d4-burger {
	border: 0;
	background: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	/* 44px is the smallest thing a thumb reliably hits. His bars are 24px wide
	   inside 6px of padding, so the box is padded out rather than redrawn. */
	min-width: 44px;
	min-height: 44px;
	align-items: flex-end;
	justify-content: center;
}

.d4-burger:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
}

/* The panel. His dark, his terracotta, nothing new.

   position: fixed with inset: 0 rather than a height: 100vh, because on iOS
   Safari 100vh is the height of the window with the address bar hidden, so a
   panel sized that way is always taller than the screen and its last link sits
   under the browser chrome where nobody can reach it. */
.d4-menu[data-open] {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 60;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
	background-color: var(--wp--preset--color--ink);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.d4-menu__nav {
	display: flex;
	flex-direction: column;
}

.d4-menu__link {
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.2;
	/* Full width and tall, so the target is the row rather than the word. */
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.d4-menu__link.d4-current,
.d4-menu__link:hover,
.d4-menu__link:focus-visible {
	color: var(--wp--preset--color--terracotta);
}

.d4-menu__cta {
	margin-top: 24px;
	padding: 16px 24px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--terracotta);
}

/* The page underneath must not scroll while the panel is over it. */
body.d4-menu-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.d4-menu[data-open] { animation: d4-menu-in 0.2s var(--d4-ease); }
	@keyframes d4-menu-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}