/**
 * Digicore mega navigation.
 * Header row follows the Figma design; the dropdown panel follows the
 * Trackunit pattern of grouped columns with a title and a line of context.
 */

/* ---- Site measure ----
 * Page content sits in a 1440 column: the header, and every section added
 * later. The hero is the one exception and runs wider, see --dc-hero-max in
 * solution-finder.css. The header carries the page gutter inside its own
 * padding, so it is capped 40px wider than the measure to put its content box
 * on exactly the column edges.
 */
:root {
	/* Page ground. Slightly warm of white so the salt panels and the photography
	   sit on something, rather than on a clinical #fff. Lives here with the rest
	   of the palette: Elementor's Site Settings background does not survive being
	   written headlessly, so this is the single source of truth. */
	--dc-ground: #fffffb;

	--dc-max: 1440px;
	/* The 16in MacBook Pro is 1728px at its default scaling, so the hero stays
	   edge to edge on every laptop and only stops growing on a larger display. */
	--dc-hero-max: 1728px;
}

body { background-color: var(--dc-ground); }

[data-elementor-type="header"] > .e-con {
	max-width: calc(var(--dc-max) + 40px);
	margin-inline: auto;
}

.dc-nav {
	--dc-orange: #d8592e;
	--dc-ink: #1a1d21;
	--dc-charcoal: #262626;
	--dc-grey: #6b7280;
	--dc-line: #d5d8dc;
	--dc-white: #fff;
	--dc-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--dc-display: "Circular Std", "Inter", system-ui, sans-serif;

	position: relative;
	font-family: var(--dc-display);
}

.dc-nav *,
.dc-nav *::before,
.dc-nav *::after { box-sizing: border-box; }

.dc-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-nav__item { position: static; }

.dc-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--dc-charcoal);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 16px;
	cursor: pointer;
}

.dc-nav .dc-nav__link:hover,
.dc-nav .dc-nav__link:focus {
	background: none;
	color: var(--dc-orange);
}

.dc-nav .dc-nav__link:focus-visible {
	outline: 2px solid var(--dc-orange);
	outline-offset: 4px;
}

.dc-nav__caret {
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.18s ease;
}

.dc-nav__link[aria-expanded="true"] { color: var(--dc-orange); }
.dc-nav__link[aria-expanded="true"] .dc-nav__caret { transform: translateY(1px) rotate(-135deg); }

/* ---- Panel ---- */

.dc-nav__panel {
	/* Full bleed. The nav sits left of centre, so the usual left:50% /
	   translateX(-50%) trick would hang the panel off the left edge; the script
	   measures the nav and pins the panel to the viewport instead. */
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	width: 100%;
	margin-top: 12px;
	background: var(--dc-white);
	box-shadow: 0 1px 2px rgba(26, 29, 33, 0.04), 0 24px 48px rgba(26, 29, 33, 0.12);
	animation: dc-nav-drop 0.34s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes dc-nav-drop {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dc-nav__panel { animation: none; }
	.dc-nav__entry { transition: none; }
}

.dc-nav__panel[hidden] { display: none; }

.dc-nav__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 40px 32px;
}

/* Each group spans the width and lays its entries out left to right, rather
   than stacking them in vertical columns to be read downwards. */
.dc-nav__col + .dc-nav__col { margin-top: 32px; }

.dc-nav__entries {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 4px 40px;
}

.dc-nav__col-title {
	margin: 0 0 14px;
	color: var(--dc-orange);
	font-family: var(--dc-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

.dc-nav__entry {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.dc-nav .dc-nav__entry:hover,
.dc-nav .dc-nav__entry:focus-visible {
	background: rgba(216, 89, 46, 0.06);
	transform: translateY(-1px);
}

.dc-nav__entry-title {
	display: block;
	color: var(--dc-ink);
	font-family: var(--dc-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.dc-nav__entry-desc {
	display: block;
	margin-top: 4px;
	color: var(--dc-grey);
	font-family: var(--dc-ui);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

.dc-nav .dc-nav__entry:hover .dc-nav__entry-title,
.dc-nav .dc-nav__entry:focus .dc-nav__entry-title { color: var(--dc-orange); }

.dc-nav__all {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var(--dc-line);
}

.dc-nav__all a {
	color: var(--dc-ink);
	font-family: var(--dc-ui);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.dc-nav .dc-nav__all a:hover { color: var(--dc-orange); }

.dc-nav__notice {
	padding: 8px 12px;
	border: 1px dashed currentColor;
	font-size: 14px;
}

/* ---- Small screens: the panel becomes an inline accordion ---- */

/* -------------------------------------------------------------------------
 * Burger and drawer
 *
 * Above the breakpoint the drawer is not a box at all, so the list lays out
 * exactly as it always has. Below it the whole menu, plus the header's action
 * group, collapses behind the burger.
 * ---------------------------------------------------------------------- */

.dc-nav__burger { display: none; }
.dc-nav__drawer { display: contents; }
.dc-nav__drawer-foot { display: none; }

/* Visible to a screen reader, not on the page. */
.dc-nav__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 1024px) {

	.dc-nav .dc-nav__burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: var(--dc-ink);
		cursor: pointer;
	}

	.dc-nav .dc-nav__burger:hover { background: rgba(26, 29, 33, 0.06); color: var(--dc-ink); }

	.dc-nav__burger-box {
		position: relative;
		display: block;
		width: 20px;
		height: 12px;
	}

	/* Two bars that cross into a close icon, rather than swapping glyphs. */
	.dc-nav__burger-bar {
		position: absolute;
		left: 0;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
	}

	.dc-nav__burger-bar:first-child { top: 0; }
	.dc-nav__burger-bar:last-child  { bottom: 0; }

	body.dc-nav-open .dc-nav__burger-bar:first-child { transform: translateY(5px) rotate(45deg); }
	body.dc-nav-open .dc-nav__burger-bar:last-child  { transform: translateY(-5px) rotate(-45deg); }

	@media (prefers-reduced-motion: reduce) {
		.dc-nav__burger-bar { transition: none; }
	}

	/* ---- The drawer ---- */

	.dc-nav__drawer {
		position: fixed;
		inset: 0;
		/* The drawer lives inside the header, so it paints in the header's own
		   stacking context. Keeping it at 1 and lifting the lockup and the burger
		   to 2 leaves those two sitting on top of it, which is what makes the bar
		   still read as a bar with the drawer open. */
		z-index: 1;
		display: flex;
		flex-direction: column;
		visibility: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: calc(var(--dc-header-h, 76px) + 8px) 20px 40px;
		background: var(--dc-white);
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity 0.28s ease,
		            transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
		            visibility 0.28s;
	}

	body.dc-nav-open .dc-nav__drawer {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.dc-nav__drawer { transition: none; }
	}

	body.dc-nav-open { overflow: hidden; }

	[data-elementor-type="header"] .dc-logo,
	.dc-nav .dc-nav__burger {
		position: relative;
		z-index: 2;
	}

	.dc-nav__drawer-foot {
		display: block;
		margin-top: auto;
		padding-top: 28px;
	}

	/* The moved Elementor group lays out as a row of links here rather than the
	   stack Elementor would otherwise give it at this width. */
	.dc-nav__drawer-foot > .e-con {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 18px;
		width: 100% !important;
		max-width: none !important;
	}

	.dc-nav__drawer-foot > .e-con > .elementor-widget { width: auto !important; }

	/* ---- The bar itself: lockup on the left, burger on the right ---- */

	[data-elementor-type="header"] > .e-con {
		flex-direction: row !important;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	[data-elementor-type="header"] > .e-con > .e-con {
		flex: 1 1 auto;
		flex-direction: row !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: auto !important;
	}

	[data-elementor-type="header"] > .e-con > .e-con > .elementor-widget { width: auto !important; }

	.dc-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

	.dc-nav__item { border-bottom: 1px solid var(--dc-line); }

	.dc-nav__link { justify-content: space-between; width: 100%; padding: 14px 0; }

	.dc-nav__panel {
		position: static;
		left: auto !important;
		width: auto !important;
		margin: 0;
		transform: none;
		border-top: 0;
		box-shadow: none;
	}

	.dc-nav__inner { padding: 4px 0 20px; }
	.dc-nav__entries { grid-template-columns: 1fr; gap: 2px; }
	.dc-nav__entry { padding: 10px 0; }
}


/* -------------------------------------------------------------------------
 * Condensing sticky header
 *
 * Full height at rest, compacting to a slim bar once the page moves, with the
 * lockup scaling down with it. The bar frosts rather than going solid so the
 * page reads as continuing underneath it.
 * ---------------------------------------------------------------------- */

[data-elementor-type="header"] {
	position: sticky;
	top: 0;
	z-index: 300;
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

[data-elementor-type="header"] .e-con,
[data-elementor-type="header"] .e-con-inner {
	transition: padding 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}

.dc-logo svg {
	transition: width 0.34s cubic-bezier(0.32, 0.72, 0, 1),
	            height 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}

/* The lockup's artwork is sized in CSS, but the boxes around it were still
   being measured from the SVG's natural ratio: 107px of box around 130px of
   artwork. The logo overflowed its own widget by 23px, and since a flex gap is
   measured from the box and not from the ink, only 9px of the container's 32px
   gap was left before the first menu item. Sizing both boxes to max-content
   makes them track the artwork at either size, so the gap you set is the gap
   you see, at rest and condensed. */
[data-elementor-type="header"] .dc-logo-widget,
[data-elementor-type="header"] .dc-logo {
	flex: 0 0 auto;
	width: max-content;
}

body.dc-scrolled [data-elementor-type="header"] {
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 1px 0 rgba(26, 29, 33, 0.06), 0 8px 28px rgba(26, 29, 33, 0.08);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	body.dc-scrolled [data-elementor-type="header"] {
		-webkit-backdrop-filter: blur(20px) saturate(1.6);
		backdrop-filter: blur(20px) saturate(1.6);
	}
	body.dc-scrolled [data-elementor-type="header"] > .e-con { background-color: transparent !important; }
}

/* Elementor drives container padding through custom properties, so set those
   as well as the longhand or the override never lands.

   The bar sits on 32px top and bottom at rest and halves to 16px once the page
   moves. The 32 is set in Elementor on the header container, not here, so it
   stays editable; the same 32 is the gap under the header on the page, which is
   the spacing new sections should use. */
body.dc-scrolled [data-elementor-type="header"] > .e-con {
	--padding-block-start: 16px !important;
	--padding-block-end: 16px !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

body.dc-scrolled .dc-logo svg { width: 104px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
	[data-elementor-type="header"] .e-con,
	[data-elementor-type="header"] .e-con-inner,
	.dc-logo svg { transition: none; }
}