/*
 * HD site header. Values follow the approved header mockup (v10, Oct 16).
 * Plum on every page. Sticky at the same height. Panels start hidden, so the script never shifts layout.
 */

/* The template part wrapper is the sticky element; it sits below the admin bar when logged in. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.hd-header {
	--hd-line: #4E2338;
	--hd-line-strong: #6E3D55;
	position: relative;
	background: var(--wp--preset--color--plum-dark);
	color: #FFFFFF;
	border-bottom: 1px solid var(--hd-line);
	font-family: var(--wp--preset--font-family--hanken);
}

.hd-header, .hd-header *, .hd-header *::before, .hd-header *::after { box-sizing: border-box; }

.hd-header .hd-wrap {
	max-width: calc(var(--wp--style--global--content-size, 1240px) + 2 * var(--wp--preset--spacing--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
}

.hd-header ul { list-style: none; margin: 0; padding: 0; }
.hd-header p { margin: 0; }

/* ---------- Bar ---------- */

.hd-header .hdr { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.hd-header .logo { display: inline-flex; align-items: center; border-radius: 4px; flex: none; }
.hd-header .logo img { display: block; height: 32px; width: auto; }
.hd-header .logo:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 6px; }

.hd-header .nav { display: flex; align-items: center; gap: 4px; }
.hd-header .nav-list { display: flex; align-items: center; gap: 4px; }
.hd-header .nav-link {
	display: inline-flex; align-items: center; gap: 6px;
	font: 500 15px/1 var(--wp--preset--font-family--hanken);
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none; background: none; border: 0; border-radius: 6px;
	padding: 12px 14px; cursor: pointer; position: relative;
}
.hd-header .nav-link:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }
.hd-header .nav-link:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }
.hd-header .nav-link.is-current::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
	height: 2px; background: var(--wp--preset--color--gold); border-radius: 2px;
}
.hd-header button.nav-link.is-current::after { right: 30px; }
.hd-header .nav-link[aria-expanded="true"] { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }

.hd-header .chev { width: 10px; height: 10px; transition: transform 0.2s ease; }
.hd-header [aria-expanded="true"] > .chev { transform: rotate(180deg); }

.hd-header .btn {
	font: 600 16px/1 var(--wp--preset--font-family--hanken);
	padding: 14px 22px; border-radius: 6px; text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid transparent;
}
.hd-header .btn--primary { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--plum-dark); }
.hd-header .btn--primary:hover { background: #CDB262; color: var(--wp--preset--color--plum-dark); }
.hd-header .btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.hd-header .hdr-cta { margin-left: 12px; }

.hd-header .burger {
	display: none; width: 44px; height: 44px; padding: 0;
	border-radius: 8px; border: 1px solid var(--hd-line-strong);
	background: transparent; color: #FFFFFF; cursor: pointer; place-items: center;
}
.hd-header .burger:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }
.hd-header .burger svg { width: 20px; height: 20px; }
.hd-header .burger .x { display: none; }
.hd-header .burger[aria-expanded="true"] .x { display: block; }
.hd-header .burger[aria-expanded="true"] .lines { display: none; }

/* ---------- Solutions panel (desktop) ---------- */

.hd-header .mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--wp--preset--color--white); color: var(--wp--preset--color--body);
	border-top: 1px solid var(--wp--preset--color--hairline);
	box-shadow: 0 24px 48px rgba(48, 11, 31, 0.18);
}
.hd-header .mega[hidden] { display: none; }
.hd-header .mega-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--column-gap); padding-block: 32px 36px; }
.hd-header .mega-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; align-content: start; }
.hd-header .sol { display: grid; gap: 4px; padding: 16px; border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid transparent; }
.hd-header .sol:hover { background: var(--wp--preset--color--tint); border-color: var(--wp--preset--color--hairline); }
.hd-header .sol:focus-visible { outline: 2px solid var(--wp--preset--color--magenta); outline-offset: 2px; }
.hd-header .sol .for { font: 500 13px/1.3 var(--wp--preset--font-family--hanken); color: var(--wp--preset--color--magenta); }
.hd-header .sol .name { font: 600 18px/1.25 var(--wp--preset--font-family--hanken); letter-spacing: -0.01em; color: var(--wp--preset--color--ink); }
.hd-header .sol .job { font: 400 15px/1.5 var(--wp--preset--font-family--hanken); color: var(--wp--preset--color--body); }
.hd-header .mega-foot {
	grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px;
	align-items: center; justify-content: space-between;
	padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--wp--preset--color--hairline);
}
.hd-header .mega-foot p { font-size: 15px; color: var(--wp--preset--color--muted); }
.hd-header .link { font-weight: 600; font-size: 15.5px; color: var(--wp--preset--color--magenta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hd-header .link:hover { color: var(--wp--preset--color--ink); }
.hd-header .link:focus-visible { outline: 2px solid var(--wp--preset--color--magenta); outline-offset: 3px; border-radius: 2px; }

/* Featured case study card: whatever blocks the editor puts inside. */
.hd-header .feature {
	background: var(--wp--preset--color--plum-dark); color: rgba(255, 255, 255, 0.86);
	border-radius: 12px; padding: 24px; display: grid; gap: 10px; align-content: start;
}
.hd-header .feature > * { margin: 0; }
.hd-header .feature .wp-block-image { justify-self: start; margin-bottom: 6px; }
.hd-header .feature .wp-block-image img { display: block; height: 26px; width: auto; max-width: 100%; }
.hd-header .feature .is-style-label { font: 500 14px/1.3 var(--wp--preset--font-family--hanken); color: #E79BCB; }
.hd-header .feature h2, .hd-header .feature h3, .hd-header .feature h4 { font: 600 20px/1.3 var(--wp--preset--font-family--hanken); letter-spacing: -0.01em; color: #FFFFFF; }
.hd-header .feature p { font-size: 15px; line-height: 1.5; }
.hd-header .feature .is-style-stat { font: 700 30px/1.05 var(--wp--preset--font-family--hanken); letter-spacing: -0.03em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.hd-header .feature a { color: #E79BCB; font-weight: 600; font-size: 15px; }
.hd-header .feature a:hover { color: #FFFFFF; }
.hd-header .feature a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* ---------- Phone menu ---------- */

.hd-header .mobile {
	position: absolute; left: 0; right: 0; top: 100%;
	height: calc(100dvh - 68px - var(--wp-admin--admin-bar--height, 0px));
	overflow-y: auto; overscroll-behavior: contain;
	background: var(--wp--preset--color--plum-dark); border-top: 1px solid var(--hd-line);
}
.hd-header .mobile[hidden] { display: none; }
.hd-header .mobile-in { display: grid; gap: 8px; padding-block: 16px 32px; }
.hd-header .m-list { display: grid; }
.hd-header .m-list > li { border-bottom: 1px solid var(--hd-line); }
.hd-header .m-link {
	width: 100%; display: flex; justify-content: space-between; align-items: center;
	font: 600 20px/1.2 var(--wp--preset--font-family--hanken); color: #FFFFFF;
	text-decoration: none; background: none; border: 0; padding: 18px 0; cursor: pointer; text-align: left;
}
.hd-header .m-link:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }
.hd-header .m-link[aria-current="page"] { color: var(--wp--preset--color--gold); }
.hd-header .m-link .chev { width: 14px; height: 14px; }
.hd-header .m-sub { display: grid; gap: 4px; padding: 0 0 16px; }
.hd-header .m-sub[hidden] { display: none; }
.hd-header .m-sub a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.hd-header .m-sub a:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }
.hd-header .m-sub .name { font: 600 16.5px/1.3 var(--wp--preset--font-family--hanken); color: #FFFFFF; }
.hd-header .m-sub .for { font: 400 14px/1.35 var(--wp--preset--font-family--hanken); color: #C9AABA; }
.hd-header .m-sub .all { font: 600 15px/1.3 var(--wp--preset--font-family--hanken); color: #E79BCB; }
.hd-header .mobile .btn { width: 100%; margin-top: 16px; padding-block: 17px; }

html.hd-menu-open { overflow: hidden; }

@media (max-width: 980px) {
	.hd-header .nav, .hd-header .hdr-cta { display: none; }
	.hd-header .burger { display: grid; }
	.hd-header .hdr { min-height: 68px; }
	.hd-header .logo img { height: 28px; }
	.hd-header .mega { display: none; }
}
@media (min-width: 981px) {
	.hd-header .mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hd-header .chev { transition: none; }
}

/* ---------- WordPress skip link, styled as in the mockup ---------- */

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--plum-dark);
	font: 600 15px/1 var(--wp--preset--font-family--hanken);
	padding: 12px 14px;
	border-radius: 6px;
	box-shadow: none;
	text-decoration: none;
	top: 12px;
	left: 16px;
}