/* ==========================================================================
   DNH — block styles

   Ported from the old child theme's style.css, with the hardcoded greys and
   sizes swapped for theme.json tokens.
   ========================================================================== */

/* ==========================================================================
   Section container

   One rule so every section — core block or custom — lines up on the same
   gutters. Core's constrained layout puts the root padding on the outer element
   and caps the child at content-size, so its content measures a full 1140px.
   Our wrappers previously set max-width:1140px *including* their own padding,
   which made them 1092px — a 24px misalignment on each side against every core
   block on the page.
   ========================================================================== */

/* Only full-width sections need this. A block that sits inside the constrained
   post-content already has the page gutters from its parent -- adding them again
   would inset its contents by a further 24px (the signup form did exactly that). */
.dnh-hero__inner,
.dnh-split__inner,
.dnh-posts__inner {
	width: 100%;
	max-width: calc(
		var(--wp--style--global--content-size, 1140px)
		+ var(--wp--style--root--padding-left, 1.5rem)
		+ var(--wp--style--root--padding-right, 1.5rem)
	);
	margin-inline: auto;
	padding-inline:
		var(--wp--style--root--padding-left, 1.5rem)
		var(--wp--style--root--padding-right, 1.5rem);
}
/* --------------------------------------------------------------------------
   Downloads grid
   -------------------------------------------------------------------------- */

.dnh-dl-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.dnh-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.dnh-dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dnh-dl-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--base);
}

.dnh-dl-thumb-wrap {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--wp--preset--color--band);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
}

.dnh-dl-thumb-wrap:hover .dnh-dl-thumb {
	transform: scale(1.02);
}

.dnh-dl-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.dnh-dl-thumb--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--body);
}

.dnh-dl-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--30);
}

.dnh-dl-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.dnh-dl-desc {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.dnh-dl-desc p:last-child { margin-bottom: 0; }

.dnh-dl-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

.dnh-dl-button {
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dnh-dl-button:hover {
	color: var(--wp--preset--color--primary-deep);
	text-decoration-thickness: 2px;
}

.dnh-dl-empty {
	color: var(--wp--preset--color--body);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Share popover
   -------------------------------------------------------------------------- */

.dnh-dl-share {
	position: relative;
	flex-shrink: 0;
}

.dnh-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--body);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.dnh-share-btn:hover,
.dnh-share-btn[aria-expanded="true"] {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* The menu sits below the button with a small gap. Without bridging that gap
   the pointer leaves .dnh-dl-share on the way down, mouseleave fires and the
   menu closes before you can reach Facebook / LinkedIn / Email. */
.dnh-share-menu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -0.6rem;
	height: 0.6rem;
}

.dnh-share-menu {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	z-index: 20;
	min-width: 9rem;
	padding: 0.35rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(35, 31, 32, 0.12);
}

.dnh-share-menu a {
	display: block;
	padding: 0.5rem 0.65rem;
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.dnh-share-menu a:hover,
.dnh-share-menu a:focus-visible {
	background: var(--wp--preset--color--band);
	color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   Events table
   -------------------------------------------------------------------------- */

.dnh-events + .dnh-events { margin-top: var(--wp--preset--spacing--70); }

.dnh-events__heading {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-s);
}

.dnh-events__list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dnh-event {
	display: grid;
	grid-template-columns: minmax(7.5rem, auto) 1fr;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	border-left: 4px solid var(--wp--preset--color--primary);
}

.dnh-event--past {
	border-left-color: var(--wp--preset--color--line);
}

@media (max-width: 39.99em) {
	.dnh-event { grid-template-columns: 1fr; }
}

.dnh-event__when {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.dnh-event--past .dnh-event__when { color: var(--wp--preset--color--body); }

.dnh-event__name {
	margin: 0 0 0.2em;
	font-size: var(--wp--preset--font-size--large);
}

.dnh-event__meta {
	margin: 0;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.dnh-event__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.dnh-event__actions a {
	font-size: var(--wp--preset--font-size--small);
}

.dnh-events__empty {
	color: var(--wp--preset--color--body);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Section · Hero
   -------------------------------------------------------------------------- */

.dnh-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(20rem, 52vh, 34rem);
	overflow: hidden;
}

.dnh-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.dnh-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}

/* Dark scrim so the headline stays legible whatever the photograph does.
   Weighted to the left where the text sits. */
.dnh-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to right, rgba(35, 31, 32, 0.82) 0%, rgba(35, 31, 32, 0.66) 55%, rgba(35, 31, 32, 0.3) 100%),
		linear-gradient(to bottom, rgba(35, 31, 32, 0.25), rgba(35, 31, 32, 0.45));
}

.dnh-hero__inner {
	padding-block: var(--wp--preset--spacing--70);
}

.dnh-hero--image .dnh-hero__inner {
	color: var(--wp--preset--color--base);
}

/* Every other H1 on the site is uppercase and green (set in theme.json). The
   homepage hero is the deliberate exception — sentence case, white, over the
   photograph. */
.dnh-hero__heading {
	max-width: 18ch;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.08;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--wp--preset--color--ink);
}

.dnh-hero--image .dnh-hero__heading {
	color: var(--wp--preset--color--base);
	text-shadow: 0 1px 18px rgba(35, 31, 32, 0.35);
}

.dnh-hero__intro {
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--large);
}

.dnh-hero__intro p:last-child { margin-bottom: 0; }

.dnh-hero__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.dnh-hero__link {
	display: inline-block;
	padding: 0.8rem 1.4rem;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--button--radius);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.dnh-hero__link:hover,
.dnh-hero__link:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--accent);
}

.dnh-hero--image .dnh-hero__link:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Second and later links read as secondary. */
.dnh-hero__links li:not(:first-child) .dnh-hero__link {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.dnh-hero__links li:not(:first-child) .dnh-hero__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   Section · Latest posts
   -------------------------------------------------------------------------- */



.dnh-posts__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
}

.dnh-posts__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-m);
}

.dnh-posts__more {
	font-weight: 500;
	white-space: nowrap;
}

.dnh-posts__list {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

@media (min-width: 640px) {
	.dnh-posts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.dnh-posts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dnh-post-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border-radius: 6px;
	overflow: hidden;
}

.dnh-post-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--line);
}

.dnh-post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.dnh-post-card:hover .dnh-post-card__img { transform: scale(1.03); }

.dnh-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--40);
}

.dnh-post-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: 1.25;
}

.dnh-post-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.dnh-post-card__title a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.dnh-post-card__date {
	margin: 0;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.dnh-post-card__excerpt {
	margin: 0;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

/* Posts with no featured image keep the same card proportions so the grid
   stays even — 6 of the 17 imported posts have none. */
.dnh-post-card__media--empty {
	position: relative;
	background:
		linear-gradient(135deg, var(--wp--preset--color--band) 0%, var(--wp--preset--color--line) 100%);
}

.dnh-post-card__media--empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 45%, rgba(43, 108, 62, 0.08) 100%);
}

/* On a phone the headline, intro and two stacked CTAs filled the whole viewport,
   leaving the second button on the fold. Tighten the rhythm so both calls to
   action sit comfortably in view. */
@media (max-width: 39.99em) {
	.dnh-hero {
		min-height: 0;
	}

	.dnh-hero__inner {
		padding-block: var(--wp--preset--spacing--60);
	}

	.dnh-hero__intro {
		font-size: var(--wp--preset--font-size--medium);
	}

	.dnh-hero__links {
		flex-direction: column;
		align-items: stretch;
		margin-top: var(--wp--preset--spacing--40);
		gap: var(--wp--preset--spacing--20);
	}

	.dnh-hero__links li {
		width: 100%;
	}

	.dnh-hero__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   Section · Image and text
   -------------------------------------------------------------------------- */

.dnh-split__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	.dnh-split__inner {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 5vw, 4.5rem);
	}

	/* The toggle flips the visual order only — the image stays first in the DOM,
	   so the reading order is image then text either way. */
	.dnh-split--flipped .dnh-split__media { order: 2; }
	.dnh-split--flipped .dnh-split__body  { order: 1; }
}

/* A fixed ratio so a stack of these reads evenly, whatever the source images
   happen to be. Without it each section took its photograph's own aspect and
   the sections looked ragged against each other. */
.dnh-split__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
}

.dnh-split__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dnh-split__heading {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-m);
}

.dnh-split__text > :first-child { margin-top: 0; }
.dnh-split__text > :last-child  { margin-bottom: 0; }

.dnh-split__body .dnh-btn { margin-top: var(--wp--preset--spacing--40); }

.dnh-bg-primary .dnh-split__heading,
.dnh-bg-primary .dnh-split__text { color: var(--wp--preset--color--base); }

/* --------------------------------------------------------------------------
   Section · Signup form

   The HubSpot form itself lives in an iframe and is styled by
   assets/css/hsform.css, injected by assets/js/hsform.js. What is left to do
   out here is give it a container and a sensible measure — a form stretched to
   the full 1140px content width is uncomfortable to fill in, and floating on
   bare white it read as an afterthought rather than the point of the page.
   -------------------------------------------------------------------------- */

.dnh-signup__form {
	max-width: 40rem;
	margin-top: var(--wp--preset--spacing--50);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 4px solid var(--wp--preset--color--primary);
	border-radius: 8px;
	box-shadow: 0 2px 14px rgba(35, 31, 32, 0.05);
}

.dnh-signup__form iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Fallback shown when JavaScript is off. */
.dnh-signup__form noscript p {
	margin: 0;
	color: var(--wp--preset--color--body);
}

/* On a phone the hero copy spans the full width, but the desktop scrim fades to
   30% on the right — white text over bright sky there could fall below 4.5:1.
   A flat, stronger scrim keeps every line legible. (WCAG 1.4.3) */
@media (max-width: 47.99em) {
	.dnh-hero--image::before {
		background: rgba(35, 31, 32, 0.66);
	}
}