/* =========================================================================
   DimensionNest Pro - site chrome
   -------------------------------------------------------------------------
   Header, footer and shared controls. Loaded on every page.

   Palette ("Cosmic Artistry"):
     #212A31  ink        darkest: headings, footer, hero base
     #2E3944  slate      body text on light, raised dark surfaces
     #124E66  teal       accent: buttons, links, kickers
     #748D92  steel      muted on dark, icons, decorative lines
     #D3D9D4  mist       light surfaces, light text on dark

   Two shades are derived rather than taken straight from the palette, both
   for contrast:
     #56696E  a darker steel for small text on white (5.8:1; #748D92 is only
              3.5:1, below the 4.5:1 minimum for body-size text)
     #EEF1EF  a lighter mist for full-width section backgrounds
   ========================================================================= */

:root {
	--dnp-ink: #212a31;
	--dnp-slate: #2e3944;
	--dnp-teal: #124e66;
	--dnp-teal-hi: #17607d;
	--dnp-steel: #748d92;
	--dnp-mist: #d3d9d4;

	--dnp-body: #2e3944;
	--dnp-muted: #56696e;
	--dnp-surface: #eef1ef;
	--dnp-white: #ffffff;

	--dnp-line: rgba(33, 42, 49, 0.12);
	--dnp-line-dark: rgba(211, 217, 212, 0.14);

	/* Kept for the homepage stylesheet, which refers to the accent by role. */
	--dnp-brand: var(--dnp-teal);
	--dnp-brand-hi: var(--dnp-teal-hi);

	--dnp-shell: 1440px;
	--dnp-gutter: clamp(18px, 4vw, 48px);
	--dnp-header-h: 78px;
	--dnp-ease: cubic-bezier(0.22, 0.68, 0.2, 1);
}

/* Kadence's own container width, so inner pages match the 1440px layout.
   html:root out-ranks the plain :root rule Kadence prints from the
   Customizer, so this holds even if that setting is changed later. */
html:root {
	--global-content-width: 1440px;
}

@media (max-width: 860px) {
	:root {
		--dnp-header-h: 66px;
	}
}

/* Our own chrome sets its own box model rather than relying on the parent
   theme to have done it. Without this, width: 100% plus padding overflows
   the viewport on phones. */
.dnp-header,
.dnp-header *,
.dnp-header *::before,
.dnp-header *::after,
.dnp-footer,
.dnp-footer *,
.dnp-footer *::before,
.dnp-footer *::after {
	box-sizing: border-box;
}

.dnp-skip {
	position: absolute;
	left: -9999px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--dnp-ink);
	color: #fff;
	border-radius: 0 0 8px 0;
}

.dnp-skip:focus {
	left: 0;
	top: 0;
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.dnp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9em 1.6em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.22s var(--dnp-ease),
		border-color 0.22s var(--dnp-ease),
		color 0.22s var(--dnp-ease),
		transform 0.22s var(--dnp-ease);
}

.dnp-btn--sm {
	padding: 0.72em 1.3em;
	font-size: 0.88rem;
}

.dnp-btn--solid,
a.dnp-btn--solid,
a.dnp-btn--solid:visited {
	background: var(--dnp-teal);
	color: #fff;
}

a.dnp-btn--solid:hover,
a.dnp-btn--solid:focus-visible,
.dnp-btn--solid:hover,
.dnp-btn--solid:focus-visible {
	background: var(--dnp-teal-hi);
	color: #fff;
	transform: translateY(-1px);
}

/* =========================================================================
   Header
   -------------------------------------------------------------------------
   Inner pages: solid white bar, black logo.

   Homepage: transparent over the hero with a white logo and white links,
   then frosted white with a black logo once the page scrolls (or the
   mobile drawer opens). The scrolled state is set by site.js.

   Without JS the homepage header is position: absolute, so it scrolls away
   with the hero instead of ending up transparent over white content, where
   white links would vanish.
   ========================================================================= */

.dnp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--dnp-white);
	border-bottom: 1px solid var(--dnp-line);
	transition:
		background-color 0.35s var(--dnp-ease),
		border-color 0.35s var(--dnp-ease),
		box-shadow 0.35s var(--dnp-ease);
}

.dnp-header.is-scrolled {
	box-shadow: 0 8px 28px -16px rgba(33, 42, 49, 0.35);
}

/* --- Homepage overlay ------------------------------------------------- */

.dnp-header--overlay {
	position: absolute;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
}

.js .dnp-header--overlay {
	position: fixed;
}

.dnp-header--overlay.is-scrolled,
.dnp-header--overlay.is-open {
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border-bottom-color: var(--dnp-line);
}

/* Browsers without backdrop-filter get a solid bar, never a see-through
   one with dark text over a busy background. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dnp-header--overlay.is-scrolled,
	.dnp-header--overlay.is-open {
		background: rgba(255, 255, 255, 0.97);
	}
}

/* Logged-in admin bar sits above the header. */
.admin-bar .dnp-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .dnp-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .dnp-header,
	.admin-bar .dnp-header--overlay {
		top: 0;
	}

	/* Below 600px the admin bar scrolls away, so a fixed header would leave
	   a 46px gap at the top. Keep it in flow there instead. */
	.admin-bar.js .dnp-header--overlay {
		position: absolute;
		top: 46px;
	}
}

.dnp-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	width: 100%;
	max-width: var(--dnp-shell);
	min-height: var(--dnp-header-h);
	margin-inline: auto;
	padding-inline: var(--dnp-gutter);
}

/* --- Logo ------------------------------------------------------------- */

.dnp-brand {
	flex: none;
	display: flex;
	align-items: center;
}

.dnp-brand .custom-logo-link,
.dnp-brand .dnp-logo,
.dnp-brand__text {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* A fixed height with width following the image's own proportions. A plain
   width/height: auto collapses to 0x0 for logos with no intrinsic size
   (SVG uploads), because the header sizes this box from its content.
   object-fit keeps the artwork undistorted if max-width ever caps it. */
.dnp-brand img,
.dnp-brand .custom-logo {
	display: block;
	height: clamp(26px, 2.4vw, 34px);
	width: auto;
	max-width: min(260px, 52vw);
	object-fit: contain;
	object-position: left center;
	/* The logo artwork is dark; force it to pure black on white bars. */
	filter: brightness(0);
	transition: filter 0.35s var(--dnp-ease);
}

/* The theme's own logo files are already the right colour for each
   ground, so they skip the filter used for an uploaded custom logo. Both
   versions share one grid cell and cross-fade on scroll. */
.dnp-brand .dnp-logo {
	display: inline-grid;
}

.dnp-brand .dnp-logo__img {
	grid-area: 1 / 1;
	filter: none;
	transition: opacity 0.35s var(--dnp-ease);
}

.dnp-brand .dnp-logo__img--white {
	opacity: 0;
}

/* Phones: a fixed 30px, about 170px wide, leaving the menu button room on
   the narrowest screens. */
@media (max-width: 860px) {
	.dnp-brand img,
	.dnp-brand .custom-logo {
		height: 30px;
		max-width: min(240px, 62vw);
	}
}

.dnp-brand__text {
	color: var(--dnp-ink);
	font-size: 1.24rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	transition: color 0.35s var(--dnp-ease);
}

/* White logo while transparent over the hero. */
.dnp-header--overlay:not(.is-scrolled):not(.is-open) .dnp-brand .dnp-logo__img--color {
	opacity: 0;
}

.dnp-header--overlay:not(.is-scrolled):not(.is-open) .dnp-brand .dnp-logo__img--white {
	opacity: 1;
}

/* An uploaded custom logo (fallback) is recoloured with a filter instead. */
.dnp-header--overlay:not(.is-scrolled):not(.is-open) .dnp-brand .custom-logo:not(.dnp-logo__img) {
	filter: brightness(0) invert(1);
}

.dnp-header--overlay:not(.is-scrolled):not(.is-open) .dnp-brand__text {
	color: #fff;
}

/* --- Navigation ------------------------------------------------------- */

.dnp-nav {
	margin-inline-start: auto;
}

.dnp-menu {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.2vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dnp-menu li {
	position: relative;
	margin: 0;
}

.dnp-menu > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	color: var(--dnp-ink);
	font-size: 0.96rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.25s var(--dnp-ease);
}

/* Underline marker for hover and the current page. Colour alone would not
   work on the transparent state, where teal disappears into the hero. */
.dnp-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--dnp-teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--dnp-ease), background-color 0.25s var(--dnp-ease);
}

.dnp-menu > li > a:hover::after,
.dnp-menu > li > a:focus-visible::after,
.dnp-menu > .current-menu-item > a::after,
.dnp-menu > .current_page_item > a::after,
.dnp-menu > .current-menu-ancestor > a::after,
.dnp-menu > .current-menu-parent > a::after {
	transform: scaleX(1);
}

.dnp-menu > li > a:hover,
.dnp-menu > .current-menu-item > a {
	color: var(--dnp-teal);
}

/* Transparent state: white links, mist underline. */
.dnp-header--overlay:not(.is-scrolled):not(.is-open) .dnp-menu > li > a {
	color: #fff;
}

.dnp-header--overlay:not(.is-scrolled):not(.is-open) .dnp-menu > li > a::after {
	background: var(--dnp-mist);
}

/* Chevron on items with a dropdown. */
.dnp-menu > .menu-item-has-children > a::before {
	content: "";
	order: 2;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
}

/* Second level. Always a white panel, in either header state. */
.dnp-menu .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: -14px;
	z-index: 10;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--dnp-white);
	border: 1px solid var(--dnp-line);
	border-radius: 14px;
	box-shadow: 0 22px 48px -24px rgba(33, 42, 49, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s var(--dnp-ease), transform 0.2s var(--dnp-ease), visibility 0.2s;
}

/* Hover bridge, so moving the pointer down into the panel does not close it. */
.dnp-menu .sub-menu::before {
	content: "";
	position: absolute;
	inset: -10px 0 auto;
	height: 10px;
}

.dnp-menu li:hover > .sub-menu,
.dnp-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dnp-menu .sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 9px;
	color: var(--dnp-body);
	font-size: 0.93rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s var(--dnp-ease), color 0.2s var(--dnp-ease);
}

.dnp-menu .sub-menu a:hover,
.dnp-menu .sub-menu .current-menu-item > a {
	background: var(--dnp-surface);
	color: var(--dnp-teal);
}

.dnp-header__end {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* --- Burger ----------------------------------------------------------- */

.dnp-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dnp-line);
	border-radius: 12px;
	background: transparent;
	color: var(--dnp-ink);
	cursor: pointer;
	transition: color 0.3s var(--dnp-ease), border-color 0.3s var(--dnp-ease);
}

.dnp-header--overlay:not(.is-scrolled):not(.is-open) .dnp-burger {
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.dnp-burger__box {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
}

.dnp-burger__bar,
.dnp-burger__bar::before,
.dnp-burger__bar::after {
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.25s var(--dnp-ease), background-color 0.2s linear;
}

.dnp-burger__bar::before,
.dnp-burger__bar::after {
	content: "";
}

.dnp-burger__bar::before { transform: translateY(-6px); }
.dnp-burger__bar::after  { transform: translateY(6px); }

.dnp-burger[aria-expanded="true"] .dnp-burger__bar { background: transparent; }
.dnp-burger[aria-expanded="true"] .dnp-burger__bar::before { transform: rotate(45deg); }
.dnp-burger[aria-expanded="true"] .dnp-burger__bar::after  { transform: rotate(-45deg); }

/* --- Drawer ----------------------------------------------------------- */

.dnp-drawer {
	display: none;
	max-height: calc(100vh - var(--dnp-header-h));
	max-height: calc(100svh - var(--dnp-header-h));
	overflow-y: auto;
	border-top: 1px solid var(--dnp-line);
	background: var(--dnp-white);
}

.dnp-drawer__inner {
	display: grid;
	gap: 18px;
	justify-items: start;
	max-width: var(--dnp-shell);
	margin-inline: auto;
	padding: 18px var(--dnp-gutter) 28px;
}

.dnp-drawer__menu,
.dnp-drawer__menu .sub-menu {
	display: grid;
	gap: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each top-level row carries the divider, so a link and its arrow button
   share one line. */
.dnp-drawer__menu > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	margin: 0;
	border-bottom: 1px solid var(--dnp-line);
}

.dnp-drawer__menu a {
	display: block;
	padding: 14px 0;
	color: var(--dnp-ink);
	font-size: 1.02rem;
	font-weight: 600;
	text-decoration: none;
}

.dnp-drawer__menu a:hover,
.dnp-drawer__menu .current-menu-item > a {
	color: var(--dnp-teal);
}

/* Sub-menu: full row width under its parent, collapsed until the arrow is
   tapped. The arrow buttons are added by site.js; the drawer itself only
   exists with JS, so there is no script-less state to cover here. */
.dnp-drawer__menu .sub-menu {
	grid-column: 1 / -1;
	margin: 0 0 10px;
	padding: 4px 0 4px 14px;
	border-left: 2px solid var(--dnp-mist);
}

.dnp-drawer__menu .sub-menu[hidden] {
	display: none;
}

.dnp-drawer__menu .sub-menu li {
	margin: 0;
}

.dnp-drawer__menu .sub-menu a {
	padding: 10px 0;
	color: var(--dnp-body);
	font-size: 0.96rem;
	font-weight: 500;
}

/* The arrow. A 44px square: Apple and Google's minimum comfortable tap
   target, so it is easy to hit without opening the link beside it. */
.dnp-subtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--dnp-ink);
	cursor: pointer;
	transition: background-color 0.2s var(--dnp-ease), color 0.2s var(--dnp-ease);
}

.dnp-subtoggle:hover,
.dnp-subtoggle[aria-expanded="true"] {
	background: var(--dnp-surface);
	color: var(--dnp-teal);
}

.dnp-subtoggle__icon {
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s var(--dnp-ease);
}

.dnp-subtoggle[aria-expanded="true"] .dnp-subtoggle__icon {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.dnp-subtoggle:focus-visible {
	outline: 2px solid var(--dnp-teal);
	outline-offset: -2px;
}

/* Mobile with JS: burger + drawer. */
@media (max-width: 860px) {
	.js .dnp-nav,
	.js .dnp-header__cta {
		display: none;
	}

	.js .dnp-burger {
		display: inline-flex;
	}

	.dnp-header__end {
		margin-inline-start: auto;
	}

	/* :not([hidden]) matters: a plain display rule here would beat the
	   browser's own [hidden] style and leave the drawer open on load. */
	.js .dnp-drawer:not([hidden]) {
		display: block;
	}

	/* Mobile without JS: the menu wraps onto its own row under the logo,
	   so navigation still works when scripts are blocked or delayed. */
	.no-js .dnp-header__inner {
		flex-wrap: wrap;
		row-gap: 0;
	}

	.no-js .dnp-nav {
		order: 3;
		width: 100%;
		margin: 0;
		padding-bottom: 12px;
	}

	.no-js .dnp-menu {
		flex-wrap: wrap;
		gap: 4px 18px;
	}

	.no-js .dnp-menu .sub-menu,
	.no-js .dnp-menu > .menu-item-has-children > a::before {
		display: none;
	}
}

/* Short pages still push the footer down to a sensible distance. */
#inner-wrap {
	min-height: 40vh;
}

/* =========================================================================
   Footer
   ========================================================================= */

.dnp-footer {
	background: var(--dnp-ink);
	color: rgba(211, 217, 212, 0.82);
}

.dnp-footer__inner {
	display: grid;
	gap: clamp(32px, 4vw, 56px);
	grid-template-columns: 1fr;
	max-width: var(--dnp-shell);
	margin-inline: auto;
	padding: clamp(48px, 8vh, 84px) var(--dnp-gutter);
}

@media (min-width: 600px) {
	.dnp-footer__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dnp-footer__brand {
		grid-column: 1 / -1;
	}
}

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

	.dnp-footer__brand {
		grid-column: auto;
	}
}

.dnp-footer__logo {
	display: inline-flex;
	margin-bottom: 18px;
	text-decoration: none;
}

.dnp-footer__logo img,
.dnp-footer__logo .custom-logo {
	display: block;
	height: 46px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	object-position: left center;
	/* An uploaded custom logo (fallback) is dark artwork; turn it white. */
	filter: brightness(0) invert(1);
}

.dnp-footer__logo .dnp-logo__img {
	filter: none;
}

.dnp-footer .dnp-brand__text {
	color: #fff;
}

.dnp-footer__tagline {
	margin: 0;
	max-width: 34ch;
	color: rgba(211, 217, 212, 0.75);
	font-size: 0.98rem;
	line-height: 1.6;
}

/* Social / share icons */

.dnp-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.dnp-social li {
	margin: 0;
}

.dnp-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--dnp-line-dark);
	border-radius: 50%;
	background: var(--dnp-slate);
	color: var(--dnp-mist);
	text-decoration: none;
	transition:
		background-color 0.22s var(--dnp-ease),
		border-color 0.22s var(--dnp-ease),
		color 0.22s var(--dnp-ease),
		transform 0.22s var(--dnp-ease);
}

.dnp-social a:hover,
.dnp-social a:focus-visible {
	border-color: var(--dnp-teal);
	background: var(--dnp-teal);
	color: #fff;
	transform: translateY(-2px);
}

.dnp-social svg {
	width: 17px;
	height: 17px;
}

/* Link columns */

.dnp-footer__title {
	margin: 0 0 18px;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.dnp-footer__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dnp-footer__list li {
	margin: 0;
}

.dnp-footer__list a {
	color: rgba(211, 217, 212, 0.82);
	font-size: 0.98rem;
	text-decoration: none;
	transition: color 0.2s var(--dnp-ease);
}

.dnp-footer__list a:hover,
.dnp-footer__list a:focus-visible {
	color: #fff;
}

/* Bottom bar */

.dnp-footer__bar {
	border-top: 1px solid var(--dnp-line-dark);
}

.dnp-footer__barinner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	max-width: var(--dnp-shell);
	margin-inline: auto;
	padding: 22px var(--dnp-gutter);
	color: rgba(211, 217, 212, 0.62);
	font-size: 0.88rem;
}

.dnp-footer__barinner p {
	margin: 0;
}

.dnp-footer__barinner a {
	color: rgba(211, 217, 212, 0.82);
	text-decoration: none;
	transition: color 0.2s var(--dnp-ease);
}

.dnp-footer__barinner a:hover,
.dnp-footer__barinner a:focus-visible {
	color: #fff;
}

/* Phones: one column, everything centred, logo and icons included, so the
   stack reads as one block instead of a ragged left edge. */
@media (max-width: 599px) {
	.dnp-footer__inner {
		justify-items: center;
		text-align: center;
	}

	.dnp-footer__logo {
		justify-content: center;
	}

	.dnp-footer__logo img,
	.dnp-footer__logo .custom-logo {
		object-position: center;
	}

	.dnp-footer__tagline {
		margin-inline: auto;
	}

	.dnp-social {
		justify-content: center;
	}

	.dnp-footer__list {
		justify-items: center;
	}

	.dnp-footer__barinner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
   Focus and motion
   ---------------------------------------------------------------------- */

.dnp-header a:focus-visible,
.dnp-burger:focus-visible {
	outline: 2px solid var(--dnp-teal);
	outline-offset: 3px;
}

.dnp-header--overlay:not(.is-scrolled):not(.is-open) a:focus-visible,
.dnp-header--overlay:not(.is-scrolled):not(.is-open) .dnp-burger:focus-visible {
	outline-color: var(--dnp-mist);
}

.dnp-footer a:focus-visible {
	outline: 2px solid var(--dnp-mist);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.dnp-header,
	.dnp-header *,
	.dnp-btn,
	.dnp-social a {
		transition-duration: 0.001ms !important;
	}
}