/* ==========================================================================
   Site header — fixed, headroom.js driven (template-parts/site-header.php)

   States (classes added by headroom.js / js/site-header.js):
   default / .headroom--top  transparent over the page; text colour follows
                             data-theme ("dark" = white text, "light" = dark)
   .headroom--unpinned       scrolled down: eases up a little and fades out
   .headroom--pinned
     .headroom--not-top      scrolled back up: returns as the solid dark bar
   .site-header--open        mobile menu open: always solid
   ========================================================================== */

:root {
	--site-header-h: 96px;
	--site-header-bg: #1f1d1f;
	--site-header-ink: #1f1d1f;
	--site-header-ease: cubic-bezier(.2, .7, .2, 1);
}

/* `header.` prefix beats the legacy `header { … }` rules in main.css. */
header.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: auto;
	width: auto;
	padding: 0;
	margin: 0;
	color: #fff;
	background-color: transparent;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
	will-change: transform, opacity;
	transition:
		transform .45s var(--site-header-ease),
		opacity .3s ease,
		background-color .3s ease,
		color .3s ease,
		box-shadow .3s ease;
}

/* At the top (and before JS runs): transparent, ink colour chosen from what
   is behind it. */
header.site-header[data-theme="light"] { color: var(--site-header-ink); }

/* Away from the top: the solid dark bar (the original header style). */
header.site-header.headroom--not-top {
	color: #fff;
	background-color: var(--site-header-bg);
}

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

/* Scrolled down: a short lift and fade rather than headroom's full slide.
   Colour/background switch to the solid styling only once it has faded out,
   so leaving the transparent state never flashes a dark bar. */
header.site-header.headroom--unpinned {
	transform: translateY(-16px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		transform .45s var(--site-header-ease),
		opacity .3s ease,
		visibility 0s linear .3s,
		background-color 0s linear .3s,
		color 0s linear .3s;
}

/* Scrolled back up: slides back in as the solid bar. */
header.site-header.headroom--pinned {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}
header.site-header.headroom--pinned.headroom--not-top {
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .18);
}

/* Mobile menu open: always solid, never hidden. */
header.site-header.site-header--open {
	color: #fff;
	background-color: var(--site-header-bg);
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--site-header-h);
	padding: 0 48px;
}

.site-header__brand {
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}
.site-header__brand:hover,
.site-header__brand:focus { color: inherit; opacity: .85; }

/* The mark is a mask filled with currentColor so it follows the text colour. */
.site-header__logo {
	display: block;
	width: 38px;
	height: 48px;
	background-color: currentColor;
	-webkit-mask: url(../images/drjo-mark-white-260922.svg) no-repeat 50% 50% / contain;
	mask: url(../images/drjo-mark-white-260922.svg) no-repeat 50% 50% / contain;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 32px;
}

.site-header__menu {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header__menu li { margin: 0; padding: 0; }
.site-header__menu a {
	color: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
}
.site-header__menu a:hover,
.site-header__menu a:focus { color: inherit; text-decoration: none; opacity: .75; }
.site-header__menu .current-menu-item > a,
.site-header__menu .current-menu-ancestor > a { font-weight: 600; }

/* Dropdown (Services) — always the dark panel. */
.site-header__menu li.menu-item-has-children { position: relative; }
.site-header__menu li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .2s ease;
}
.site-header__menu li.menu-item-has-children:hover > a::after,
.site-header__menu li.menu-item-has-children:focus-within > a::after {
	transform: translateY(0) rotate(-135deg);
}
.site-header__menu .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 250px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	color: #fff;
	background: var(--site-header-bg);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.site-header__menu li:hover > .sub-menu,
.site-header__menu li:focus-within > .sub-menu { display: block; }
/* Hover bridge across the gap between the link and the panel. */
.site-header__menu .sub-menu::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
}
.site-header__menu .sub-menu a {
	display: block;
	padding: 8px 22px;
	white-space: nowrap;
	font-size: 14px;
}

.site-header__cta {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid currentColor;
	color: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.site-header__cta:hover,
.site-header__cta:focus { color: inherit; text-decoration: none; background-color: rgba(127, 127, 127, .15); }

.site-header__toggle {
	display: none;
	background: none;
	border: 0;
	padding: 8px;
	margin-right: -8px;
	color: inherit;
	cursor: pointer;
}
.site-header__toggle span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 5px 0;
	background: currentColor;
	transition: transform .25s ease, opacity .25s ease;
}
.site-header--open .site-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header--open .site-header__toggle span:nth-child(2) { opacity: 0; }
.site-header--open .site-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Page offset: content starts below the header unless the page opens with a
   full-bleed block that the header should sit over. */
body.site-header-offset { padding-top: var(--site-header-h); }
.flex-hero { --flex-hero-offset: var(--site-header-h); }
.site-header-overlay .flex-hero { --flex-hero-offset: 0px; }

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

	.site-header__inner { padding: 0 20px; }
	.site-header__logo { width: 27px; height: 34px; }
	.site-header__toggle { display: block; }

	.site-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--site-header-h));
		max-height: calc(100dvh - var(--site-header-h));
		overflow-y: auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		/* Horizontal spacing lives on the children: main.css forces
		   nav { padding-left/right: 0 !important } at this width. */
		padding: 8px 0 28px;
		background: var(--site-header-bg);
	}
	.site-header--open .site-header__nav { display: flex; }

	.site-header__menu { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 0 20px; }
	.site-header__menu > li { width: 100%; border-top: 1px solid rgba(255, 255, 255, .1); }
	.site-header__menu > li:first-child { border-top: 0; }
	.site-header__menu a { display: block; padding: 12px 0; font-size: 16px; }
	.site-header__menu .sub-menu {
		display: block;
		position: static;
		transform: none;
		min-width: 0;
		padding: 0 0 8px 18px;
		background: transparent;
		box-shadow: none;
	}
	.site-header__menu .sub-menu a { padding: 7px 0; font-size: 14px; }
	.site-header__menu li.menu-item-has-children > a::after { display: none; }
	.site-header__cta { margin: 18px 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
	header.site-header,
	header.site-header.headroom--unpinned { transition: none; }
	header.site-header.headroom--unpinned { transform: none; }
}

/* --------------------------------------------------------------------------
   Megamenu (desktop) — replaces the dropdown on top-level items with
   children. Markup from DJP_Mega_Walker (inc/site-header.php); opened by
   js/site-header.js adding .is-open to the li.

   The panel slides down from behind the bar, the page dims, then the
   content fades in and the big title rises letter by letter. Hovering a
   service swaps the image and description; leaving the list restores the
   parent's defaults.
   -------------------------------------------------------------------------- */

:root {
	--site-mega-bg: #32234a;
	--site-mega-accent: #b8a8c9;
}

.site-mega { display: none; }

@media (min-width: 861px) {
	/* Positioned against the header, not the li. */
	.site-header__menu li.has-mega { position: static; }
	.site-header__menu li.has-mega > .sub-menu { display: none; }

	.site-header__menu li.has-mega:hover > a::after,
	.site-header__menu li.has-mega:focus-within > a::after { transform: translateY(-3px) rotate(45deg); }
	.site-header__menu li.has-mega.is-open > a::after { transform: translateY(0) rotate(-135deg); }

	/* Sits behind the bar (z-index -1 inside the header's stacking context)
	   and is as tall as the viewport so the mask can dim the page. Not
	   interactive itself, so moving the pointer onto the dimmed page leaves
	   the li and closes the menu. */
	.site-mega {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100vh;
		height: 100dvh;
		z-index: -1;
		color: #fff;
		text-align: left;
		pointer-events: none;
		/* Keeps closed panels' links out of the tab order; delayed so the
		   close animation can finish. */
		visibility: hidden;
		transition: visibility 0s linear .7s;
	}

	.site-mega__mask {
		position: absolute;
		inset: 0;
		background: rgba(20, 14, 28, .55);
		opacity: 0;
		transition: opacity .6s ease;
	}

	.site-mega__panel {
		position: relative;
		max-height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--site-mega-bg);
		transform: translateY(-100%);
		transition: transform .35s var(--site-header-ease) .25s;
	}

	.site-mega__content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
		column-gap: 8vw;
		padding: calc(var(--site-header-h) + 40px) 48px 56px;
		opacity: 0;
		transition: opacity .25s ease;
	}

	.site-header__menu li.has-mega.is-open > .site-mega {
		visibility: visible;
		transition-delay: 0s;
	}
	.is-open > .site-mega .site-mega__mask { opacity: 1; }
	.is-open > .site-mega .site-mega__panel {
		transform: none;
		pointer-events: auto;
		transition-delay: 0s;
	}
	.is-open > .site-mega .site-mega__content {
		opacity: 1;
		transition-delay: .3s;
	}

	/* Service links */
	.site-mega__nav {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 40px;
	}
	.site-mega__list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}
	.site-header__menu .site-mega__list li {
		border-bottom: 1px solid rgba(255, 255, 255, .14);
		opacity: 0;
		transform: translateY(12px);
		transition: opacity .3s ease, transform .3s ease;
	}
	.is-open > .site-mega .site-mega__list li {
		opacity: 1;
		transform: none;
		transition:
			opacity .5s ease calc(.35s + var(--i) * 60ms),
			transform .6s var(--site-header-ease) calc(.35s + var(--i) * 60ms);
	}

	.site-header__menu .site-mega__link {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 16px 0;
		overflow: hidden;
		color: #fff;
		font-size: 26px;
		font-weight: 300;
		line-height: 1.3;
	}
	.site-header__menu .site-mega__link:hover,
	.site-header__menu .site-mega__link:focus { color: #fff; opacity: 1; }
	.site-header__menu .site-mega__link.is-current { font-weight: 400; }

	/* Arrow slides in from the left and pushes the label across. */
	.site-mega__arrow,
	.site-mega__label {
		transform: translateX(-38px);
		transition: transform .5s var(--site-header-ease), opacity .4s ease;
	}
	.site-mega__arrow {
		display: flex;
		flex: none;
		width: 22px;
		color: var(--site-mega-accent);
		opacity: 0;
	}
	.site-mega__arrow svg { display: block; width: 100%; height: auto; }
	.site-mega__link:hover span,
	.site-mega__link:focus-visible span,
	.site-mega__link.is-active span {
		transform: none;
		opacity: 1;
	}

	/* Description: stacked in one grid cell so swapping never shifts layout. */
	.site-mega__texts {
		display: grid;
		max-width: 480px;
	}
	.site-mega__text {
		grid-area: 1 / 1;
		color: rgba(255, 255, 255, .75);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.7;
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .3s ease, transform .5s var(--site-header-ease);
	}
	.site-mega__text.is-active {
		opacity: 1;
		transform: none;
		transition-delay: .1s;
	}

	/* Image: crossfade with a slow settle from a slight zoom. */
	.site-mega__media {
		position: relative;
		/* Most service photos are portrait: a 4:3 frame cropped towards the
		   top keeps faces in, capped so the panel fits a laptop screen. */
		aspect-ratio: 4 / 3;
		max-height: 50vh;
		overflow: hidden;
		border-radius: 8px;
		background: rgba(255, 255, 255, .06);
	}
	.site-mega__image {
		position: absolute;
		inset: 0;
		opacity: 0;
		transform: scale(1.08);
		transition: opacity .6s ease, transform 1.2s var(--site-header-ease);
	}
	.site-mega__image.is-active {
		z-index: 1;
		opacity: 1;
		transform: none;
	}
	.site-mega__image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 25%;
	}

	/* Big title, each letter rising into view in turn. */
	.site-header__menu .site-mega__title {
		margin: 28px 0 0;
		padding-bottom: .06em;
		overflow: hidden;
		color: var(--site-mega-accent);
		font-size: clamp(56px, 7vw, 112px);
		font-weight: 300;
		line-height: .95;
		letter-spacing: -.01em;
		text-align: right;
	}
	.site-mega__title span {
		display: inline-block;
		transform: translateY(110%);
		transition: transform .5s var(--site-header-ease);
	}
	.is-open > .site-mega .site-mega__title span {
		transform: none;
		transition-delay: calc(.55s + var(--i) * 45ms);
	}

	.site-mega--no-media .site-mega__title { margin-top: 0; }

	/* The bar joins the panel while it is open. */
	header.site-header.site-header--mega,
	header.site-header.headroom--pinned.site-header--mega {
		color: #fff;
		background-color: var(--site-mega-bg);
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-mega,
	.site-mega *,
	.site-mega__title span { transition-duration: 0s !important; transition-delay: 0s !important; }
}