/*
 * v0.3.14 Header blends into hero.
 * Loaded ONLY when Customizer > HireUA Header > "Header blends into hero" is on,
 * and every rule is scoped to body.hu-header-over-{dark|yellow|light}.
 * Turning the toggle off removes both, restoring the 0.3.13 header exactly.
 *
 * Overlay (dark / yellow): the sticky header keeps its place in the flow but
 * pulls the next element up by its own height (negative margin-bottom); the first
 * hero gets that height added to its top padding, so its single gradient runs
 * from the top of the viewport and every piece of content stays where it was.
 * NOTE: the padding values below mirror the heroes' own top padding
 * (home.css / heroes.css / case-study.css / founder-file.css). Keep in sync.
 */
body:is(.hu-header-over-dark, .hu-header-over-yellow, .hu-header-over-light) { --hu-hdr-h: 88px; }
@media (max-width: 960px) {
	body:is(.hu-header-over-dark, .hu-header-over-yellow, .hu-header-over-light) { --hu-hdr-h: 76px; }
}

/* ---------- overlay geometry (dark + yellow) ---------- */
body:is(.hu-header-over-dark, .hu-header-over-yellow) .hua-site-header { margin-bottom: calc(-1 * var(--hu-hdr-h)); }

/* Homepage hero (home.css: 80px, 66px at <=680px) */
body.hu-header-over-dark #hu-main > .hero:first-child { padding-top: calc(80px + var(--hu-hdr-h)); }
@media (max-width: 680px) {
	body.hu-header-over-dark #hu-main > .hero:first-child { padding-top: calc(66px + var(--hu-hdr-h)); }
}

/* Gutenberg page heroes + archive/hub heroes (heroes.css: 76 / simple 72, both 52 at <=900px) */
body:is(.hu-header-over-dark, .hu-header-over-yellow) :is(.hu-landing-content, .hu-archive) > .wp-block-group.hu-page-hero:first-child { padding-top: calc(76px + var(--hu-hdr-h)); }
body:is(.hu-header-over-dark, .hu-header-over-yellow) :is(.hu-landing-content, .hu-archive) > .wp-block-group.hu-page-hero--simple:first-child { padding-top: calc(72px + var(--hu-hdr-h)); }
/* any other Group with a HireUA Hero block style (heroes.css default padding) */
body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-landing-content > .wp-block-group:not(.hu-page-hero):first-child { padding-top: calc(clamp(48px, 7vw, 84px) + var(--hu-hdr-h)); }
@media (max-width: 900px) {
	body:is(.hu-header-over-dark, .hu-header-over-yellow) :is(.hu-landing-content, .hu-archive) > .wp-block-group.hu-page-hero:first-child { padding-top: calc(52px + var(--hu-hdr-h)); }
}

/* Case study single (case-study.css: 48, 32 at <=600px; v0.3.38) */
body:is(.hu-header-over-dark, .hu-header-over-yellow).single-case_study #hu-main > .case-hero:first-child { padding-top: calc(48px + var(--hu-hdr-h)); } /* v0.3.38: was 72px */
@media (max-width: 600px) {
	body:is(.hu-header-over-dark, .hu-header-over-yellow).single-case_study #hu-main > .case-hero:first-child { padding-top: calc(32px + var(--hu-hdr-h)); } /* v0.3.38: was 52px */
}

/* Founder File (founder-file.css: 76) */
body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-tpl-founder > .ff-hero:first-child { padding-top: calc(76px + var(--hu-hdr-h)); }

/* v0.3.18 hero styles: Guide (guide.css: 74 !important at all widths) when set to Dark / Yellow */
body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-tpl-guide > #hu-main > .article-hero:first-child { padding-top: calc(74px + var(--hu-hdr-h)) !important; }
/* v0.3.18 plain page with a hero band (heroes.css simple hero: 72, 52 at <=900px) */
body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-plain-page > .wp-block-group.hu-page-hero--simple:first-child { padding-top: calc(72px + var(--hu-hdr-h)); }
@media (max-width: 900px) {
	body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-plain-page > .wp-block-group.hu-page-hero--simple:first-child { padding-top: calc(52px + var(--hu-hdr-h)); }
}

/* ---------- top state (before the scroll threshold) ---------- */
body:is(.hu-header-over-dark, .hu-header-over-yellow) .hua-site-header:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}
body.hu-header-over-light .hua-site-header:not(.is-scrolled) {
	background: var(--hu-white, #FFFFFF);
	border-bottom-color: transparent;
	box-shadow: none;
}

/* Yellow + light: navy logo and navy nav on the top bar */
body:is(.hu-header-over-yellow, .hu-header-over-light) .hua-site-header:not(.is-scrolled) .hua-logo-light { opacity: 0; }
body:is(.hu-header-over-yellow, .hu-header-over-light) .hua-site-header:not(.is-scrolled) .hua-logo-dark { opacity: 1; }
@media (min-width: 961px) {
	/* same visible wordmark size as the white logo (header's own 112px rule for the pill) */
	body:is(.hu-header-over-yellow, .hu-header-over-light) .hua-site-header:not(.is-scrolled) .hua-logo-dark { width: 112px; height: 36px; }
}
body:is(.hu-header-over-yellow, .hu-header-over-light) .hua-site-header:not(.is-scrolled) .hua-nav-link { color: var(--hua-navy); }
body.hu-header-over-light .hua-site-header:not(.is-scrolled) .hua-nav-link:is(:hover, :focus-visible) { color: var(--hua-blue); }
body.hu-header-over-yellow .hua-site-header:not(.is-scrolled) .hua-nav-link:is(:hover, :focus-visible) { color: var(--hua-blue-dark); }
body.hu-header-over-light .hua-site-header:not(.is-scrolled) .hua-chevron-badge { border-color: rgba(var(--hu-blue-rgb), .52); }
body.hu-header-over-light .hua-site-header:not(.is-scrolled) .hua-chevron-badge::before { border-right-color: var(--hua-blue); border-bottom-color: var(--hua-blue); }
body.hu-header-over-yellow .hua-site-header:not(.is-scrolled) .hua-chevron-badge { border-color: rgba(var(--hu-navy-rgb), .55); }
body.hu-header-over-yellow .hua-site-header:not(.is-scrolled) .hua-chevron-badge::before { border-right-color: var(--hua-navy); border-bottom-color: var(--hua-navy); }

/* Yellow: the yellow CTA would vanish on the yellow hero -> navy for this state only (darker navy on hover) */
body.hu-header-over-yellow .hua-site-header:not(.is-scrolled) .hua-start-hiring { background: var(--hua-navy); border-color: var(--hua-navy); color: var(--hu-white, #FFFFFF); }
body.hu-header-over-yellow .hua-site-header:not(.is-scrolled) .hua-start-hiring:is(:hover, :focus-visible, :active) { background: var(--hu-navy-hover, #030B17); border-color: var(--hu-navy-hover, #030B17); color: var(--hu-white, #FFFFFF); }
body.hu-header-over-yellow .hua-site-header:not(.is-scrolled) .hua-start-hiring * { color: inherit; }

/* Mobile toggle */
@media (max-width: 960px) {
	body.hu-header-over-yellow .hua-site-header:not(.is-scrolled) .hua-mobile-toggle { color: var(--hua-navy); border-color: var(--hua-navy); }
	body.hu-header-over-light .hua-site-header:not(.is-scrolled) .hua-mobile-toggle { color: var(--hua-navy); border-color: var(--hua-line); }
}

/* v0.3.15 ON-YELLOW LOGO — the yellow square becomes navy while the header sits on
   yellow. The <img> is only rendered for body.hu-header-over-yellow (see
   site-header.php); hidden by default, swapped in for the dark logo before scrolling,
   back to the normal dark logo in the scrolled white bar. */
body.hu-header-over-yellow .hua-site-header .hua-logo-onyellow { opacity: 0; width: 112px; height: 36px; }
body.hu-header-over-yellow .hua-site-header:not(.is-scrolled) .hua-logo-onyellow { opacity: 1; }
body.hu-header-over-yellow .hua-site-header:not(.is-scrolled) .hua-logo-dark { opacity: 0; }

/* v0.3.18 Video post hero (dark) + Book hero (cream overlay, light header). */
body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-tpl-video > .hu-video-hero:first-child { padding-top: calc(58px + var(--hu-hdr-h)); }
@media (max-width: 600px) {
	body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-tpl-video > .hu-video-hero:first-child { padding-top: calc(36px + var(--hu-hdr-h)); }
}
/* Book Hero (book.css: 54px, 28px at <=900px): cream runs up behind a transparent light header. */
body.hu-header-over-light.hu-header-overlay .hua-site-header { margin-bottom: calc(-1 * var(--hu-hdr-h)); }
body.hu-header-over-light.hu-header-overlay .hua-site-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; box-shadow: none; }
body.hu-header-overlay .hu-landing-content > .wp-block-group.hu-book-hero:first-child { padding-top: calc(54px + var(--hu-hdr-h)); }
@media (max-width: 900px) {
	body.hu-header-overlay .hu-landing-content > .wp-block-group.hu-book-hero:first-child { padding-top: calc(28px + var(--hu-hdr-h)); }
}

/* v0.3.19/0.3.21 Start Hiring hero: same as the other page heroes (76, 52 at <=900) */
body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-landing-content > .wp-block-group.hu-page-hero.hu-page-hero--start:first-child { padding-top: calc(76px + var(--hu-hdr-h)); }
@media (max-width: 900px) { body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-landing-content > .wp-block-group.hu-page-hero.hu-page-hero--start:first-child { padding-top: calc(52px + var(--hu-hdr-h)); } }


/* v0.3.55 (Kyle): phones only (<=768px). Much tighter header -> headline gap on overlaid heroes.
   Values are the space below the 76px bar. Desktop/tablet unchanged. */
@media (max-width: 768px) {
	body.hu-header-over-dark #hu-main > .hero:first-child { padding-top: calc(40px + var(--hu-hdr-h)) !important; } /* v0.3.57: was 20px */
	body:is(.hu-header-over-dark, .hu-header-over-yellow) :is(.hu-landing-content, .hu-archive, .hu-plain-page) > .wp-block-group.hu-page-hero:first-child,
	body:is(.hu-header-over-dark, .hu-header-over-yellow) :is(.hu-landing-content, .hu-archive, .hu-plain-page) > .wp-block-group.hu-page-hero--simple:first-child { padding-top: calc(24px + var(--hu-hdr-h)) !important; }
	body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-landing-content > .wp-block-group:not(.hu-page-hero):first-child { padding-top: calc(28px + var(--hu-hdr-h)) !important; }
	body:is(.hu-header-over-dark, .hu-header-over-yellow).single-case_study #hu-main > .case-hero:first-child { padding-top: calc(24px + var(--hu-hdr-h)) !important; }
	body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-tpl-founder > .ff-hero:first-child,
	body:is(.hu-header-over-dark, .hu-header-over-yellow) .hu-tpl-guide > #hu-main > .article-hero:first-child { padding-top: calc(28px + var(--hu-hdr-h)) !important; }
}