/* ==========================================================================
   HireUA reusable hero styles: Dark / Electric Yellow / White  (v0.3.0)
   One definition, three ways to use it:
     1. Templates:   <section class="hu-hero hu-hero--dark|--yellow|--white">
     2. Case Study:  <section class="case-hero case-hero--dark|--yellow|--white">
     3. Gutenberg:   Group or Cover block > Styles > "HireUA Hero — Dark" /
                     "HireUA Hero — Electric Yellow" / "HireUA Hero — White"
                     (adds .is-style-hu-hero-dark|yellow|white; names unchanged
                     since v0.3.0, so existing content keeps working).
   Each style only sets --hero-* variables + background/colour. Layout comes
   from the template or block, so Position / Industry / Region / Case Study
   pages share colours without page-specific CSS. Loaded globally + in editor.
   ========================================================================== */

/* 1 · DARK: navy bg, white text, yellow CTA/highlight, blue secondary accents */
.hu-hero--dark,
.case-hero--dark,
.is-style-hu-hero-dark {
	--hero-bg: radial-gradient(circle at 86% 10%, rgba(var(--hu-blue-rgb), .32), transparent 31%), linear-gradient(130deg, var(--hu-navy), var(--hu-navy-mid) 70%, var(--hu-navy-glow));
	--hero-fg: var(--hu-white);
	--hero-heading: var(--hu-white);
	--hero-kicker: var(--hu-yellow);
	--hero-accent: var(--hu-yellow);
	--hero-secondary: var(--hu-blue);
	--hero-soft: var(--hu-on-dark);
	--hero-pill-bg: var(--hu-yellow);
	--hero-pill-fg: var(--hu-navy);
	--hero-cta-bg: var(--hu-cta-bg);
	--hero-cta-fg: var(--hu-cta-fg);
	--hero-cta-border: var(--hu-cta-border);
	--hero-cta-hover-bg: var(--hu-cta-hover-bg);
	--hero-cta-hover-fg: var(--hu-cta-hover-fg);
	--hero-link-hover: var(--hu-yellow);
	--hero-outline-hover-bg: rgba(var(--hu-white-rgb), .1);
	--hero-edge: transparent;
	/* Position hero component (v0.3.3) */
	--hero-panel-bg: rgba(var(--hu-white-rgb), .06);
	--hero-panel-border: rgba(var(--hu-white-rgb), .13);
	--hero-panel-fg: var(--hu-white);
	--hero-panel-shadow: none;
	--hero-stat-bg: rgba(var(--hu-white-rgb), .06);
	--hero-stat-line: rgba(var(--hu-white-rgb), .13);
	--hero-frame: rgba(var(--hu-white-rgb), .14);
	--hero-panel-muted: #AFC0D5;
	--hero-dots: rgba(var(--hu-white-rgb), .11);
	--hero-media-shadow: 0 28px 70px rgba(0, 0, 0, .38);
}

/* 2 · ELECTRIC YELLOW: yellow bg, navy text, blue highlights, navy CTA */
.hu-hero--yellow,
.case-hero--yellow,
.is-style-hu-hero-yellow {
	--hero-bg: var(--hu-yellow);
	--hero-fg: var(--hu-navy);
	--hero-heading: var(--hu-navy);
	--hero-kicker: var(--hu-blue);
	--hero-accent: var(--hu-blue);
	--hero-secondary: var(--hu-blue);
	--hero-soft: var(--hu-on-yellow);
	--hero-pill-bg: var(--hu-navy);
	--hero-pill-fg: var(--hu-white);
	--hero-cta-bg: var(--hu-btn-dark-bg);
	--hero-cta-fg: var(--hu-btn-dark-fg);
	--hero-cta-border: var(--hu-navy);
	--hero-cta-hover-bg: var(--hu-btn-dark-hover-bg); /* navy -> darker navy */
	--hero-cta-hover-fg: var(--hu-btn-dark-fg);       /* text unchanged */
	--hero-link-hover: var(--hu-blue);
	--hero-edge: rgba(var(--hu-navy-rgb), .15);
	--hero-outline-hover-bg: var(--hu-yellow-hover);
	/* Position hero component (v0.3.3) */
	--hero-panel-bg: var(--hu-white);
	--hero-panel-border: rgba(var(--hu-navy-rgb), .2);
	--hero-panel-fg: var(--hu-navy);
	--hero-panel-shadow: none;
	--hero-stat-bg: var(--hu-white);
	--hero-stat-line: var(--hu-line);
	--hero-frame: rgba(var(--hu-navy-rgb), .2);
	--hero-panel-muted: var(--hu-muted);
	--hero-dots: rgba(var(--hu-navy-rgb), .13);
	--hero-media-shadow: 0 24px 60px rgba(var(--hu-navy-rgb), .22);
}

/* 3 · WHITE: white bg, navy text, blue highlights, yellow CTA */
.hu-hero--white,
.case-hero--white,
.is-style-hu-hero-white {
	--hero-bg: var(--hu-white);
	--hero-fg: var(--hu-navy);
	--hero-heading: var(--hu-navy);
	--hero-kicker: var(--hu-blue);
	--hero-accent: var(--hu-blue);
	--hero-secondary: var(--hu-blue);
	--hero-soft: var(--hu-muted);
	--hero-pill-bg: var(--hu-yellow);
	--hero-pill-fg: var(--hu-navy);
	--hero-cta-bg: var(--hu-cta-bg);
	--hero-cta-fg: var(--hu-cta-fg);
	--hero-cta-border: var(--hu-cta-border);
	--hero-cta-hover-bg: var(--hu-cta-hover-bg);
	--hero-cta-hover-fg: var(--hu-cta-hover-fg);
	--hero-link-hover: var(--hu-blue);
	--hero-edge: var(--hu-line);
	--hero-outline-hover-bg: var(--hu-white-hover);
	/* Position hero component (v0.3.3) */
	--hero-panel-bg: var(--hu-white);
	--hero-panel-border: var(--hu-line);
	--hero-panel-fg: var(--hu-navy);
	--hero-panel-shadow: 0 22px 60px rgba(var(--hu-navy-rgb), .13);
	--hero-stat-bg: var(--hu-white);
	--hero-stat-line: var(--hu-line);
	--hero-frame: var(--hu-line);
	--hero-panel-muted: var(--hu-muted);
	--hero-dots: rgba(var(--hu-blue-rgb), .16);
	--hero-media-shadow: 0 24px 65px rgba(var(--hu-navy-rgb), .18);
}

/* Surface */
.hu-hero--dark, .hu-hero--yellow, .hu-hero--white,
.case-hero--dark, .case-hero--yellow, .case-hero--white,
.wp-block-group.is-style-hu-hero-dark,
.wp-block-group.is-style-hu-hero-yellow,
.wp-block-group.is-style-hu-hero-white {
	background: var(--hero-bg);
	color: var(--hero-fg);
	border-bottom: 1px solid var(--hero-edge);
}

/* Gutenberg Group/Cover heroes get sensible default padding (block padding set
   in the editor is inline and still wins). */
.wp-block-group.is-style-hu-hero-dark,
.wp-block-group.is-style-hu-hero-yellow,
.wp-block-group.is-style-hu-hero-white {
	padding: clamp(48px, 7vw, 84px) clamp(20px, 4vw, 48px);
	border-radius: 0;
}
.wp-block-cover.is-style-hu-hero-dark > .wp-block-cover__background,
.wp-block-cover.is-style-hu-hero-yellow > .wp-block-cover__background,
.wp-block-cover.is-style-hu-hero-white > .wp-block-cover__background {
	background: var(--hero-bg) !important;
}
.wp-block-cover.is-style-hu-hero-dark:not(.has-text-color),
.wp-block-cover.is-style-hu-hero-yellow:not(.has-text-color),
.wp-block-cover.is-style-hu-hero-white:not(.has-text-color) {
	color: var(--hero-fg);
}

/* Shared hero vocabulary (works inside templates and Gutenberg blocks).
   :where() keeps specificity at zero so editor-picked colours still win. */
:where(.hu-hero, .is-style-hu-hero-dark, .is-style-hu-hero-yellow, .is-style-hu-hero-white) :where(h1, h2, h3, h4) {
	color: var(--hero-heading);
}
:where(.hu-hero, .is-style-hu-hero-dark, .is-style-hu-hero-yellow, .is-style-hu-hero-white) :where(p) {
	color: var(--hero-soft);
}
:where(.hu-hero, .case-hero, .is-style-hu-hero-dark, .is-style-hu-hero-yellow, .is-style-hu-hero-white) :where(mark, .hu-accent, .hu-highlight) {
	background: transparent;
	color: var(--hero-accent);
}
:where(.hu-hero, .is-style-hu-hero-dark, .is-style-hu-hero-yellow, .is-style-hu-hero-white) :where(.hu-kicker, .hu-eyebrow, .is-style-hu-kicker) {
	color: var(--hero-kicker);
}
:where(.hu-hero, .is-style-hu-hero-dark, .is-style-hu-hero-yellow, .is-style-hu-hero-white) :where(.hu-pill, .hire-pill) {
	background: var(--hero-pill-bg);
	color: var(--hero-pill-fg);
}

/* Hero CTA: core Button block or .hu-btn */
:is(.hu-hero, .is-style-hu-hero-dark, .is-style-hu-hero-yellow, .is-style-hu-hero-white) :is(.wp-block-button:not(.is-style-outline) > .wp-block-button__link, .hu-btn) {
	background: var(--hero-cta-bg);
	color: var(--hero-cta-fg);
	border: 1px solid var(--hero-cta-border);
	transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
:is(.hu-hero, .is-style-hu-hero-dark, .is-style-hu-hero-yellow, .is-style-hu-hero-white) :is(.wp-block-button:not(.is-style-outline) > .wp-block-button__link, .hu-btn):is(:hover, :focus-visible, :active) {
	background: var(--hero-cta-hover-bg);
	border-color: var(--hero-cta-hover-bg);
	color: var(--hero-cta-hover-fg);
}
:is(.hu-hero, .is-style-hu-hero-dark, .is-style-hu-hero-yellow, .is-style-hu-hero-white) .wp-block-button.is-style-outline > .wp-block-button__link {
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
/* Outline button: slightly darker on its own fill, text unchanged (v0.3.2) */
:is(.hu-hero, .is-style-hu-hero-dark, .is-style-hu-hero-yellow, .is-style-hu-hero-white) .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible, :active) {
	background: var(--hero-outline-hover-bg);
}
:is(.hu-hero, .is-style-hu-hero-dark, .is-style-hu-hero-yellow, .is-style-hu-hero-white) a:not(.wp-block-button__link):not(.hu-btn):hover {
	color: var(--hero-link-hover);
}

/* Paragraph > Styles > "Hero Kicker" (small caps label above a hero title) */
.is-style-hu-kicker {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .15em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ==========================================================================
   v0.3.3 PAGE HERO component (position + industry pages) (pattern "HireUA / Position Hero")
   ONE Group (.hu-page-hero) whose block style picks the treatment. Every
   colour below reads a --hero-* variable set by the selected style above, so
   switching Styles in the editor sidebar recolours background, text, the
   highlighted phrase, CTA, eyebrow, numbered badges, stats, borders and the
   panel/video frame together. Layout only lives here.
   ========================================================================== */
.wp-block-group.hu-page-hero {
	padding: 76px 0 64px;
	margin: 0;
}
.hu-page-hero .hu-wrap {
	width: min(1180px, calc(100% - 42px));
	margin-inline: auto;
}
.hu-page-hero .hu-hero-grid {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 58px;
	align-items: center;
}
.hu-page-hero .hu-hero-grid > *,
.hu-page-hero .hu-hero-copy > *,
.hu-page-hero .hu-hero-panel > * { margin-block: 0; }
.hu-page-hero .hu-eyebrow {
	margin: 0;
	color: var(--hero-kicker);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.hu-page-hero .hu-hero-title {
	margin: 14px 0 20px !important;
	max-width: 760px;
	color: var(--hero-heading);
	font-size: clamp(42px, 6.1vw, 84px);
	font-weight: 800;
	line-height: .94;
	letter-spacing: -.06em;
}
.hu-page-hero .hu-hero-title mark {
	background: transparent !important;
	color: var(--hero-accent);
}
.hu-page-hero .hu-hero-dek {
	margin: 0 !important;
	max-width: 700px;
	color: var(--hero-soft);
	font-size: 18px;
	line-height: 1.6;
}
.hu-page-hero .hu-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 17px;
	margin-top: 28px !important;
}
.hu-page-hero .hu-hero-actions > * { margin: 0; }
.hu-page-hero .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 21px;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 850;
	line-height: 1.2;
	text-decoration: none;
}
.hu-page-hero .hu-hero-link { font-size: 12px; font-weight: 750; }
.hu-page-hero .hu-hero-link a { color: inherit; text-decoration: none; }
.hu-page-hero .hu-hero-link a:hover { color: var(--hero-link-hover); }

/* Proof panel */
.hu-page-hero .hu-hero-panel {
	padding: 28px;
	border: 1px solid var(--hero-panel-border);
	border-radius: 10px;
	background: var(--hero-panel-bg);
	color: var(--hero-panel-fg);
	box-shadow: var(--hero-panel-shadow);
}
.hu-page-hero .hu-hero-panel-head {
	margin: 0 0 14px !important;
	color: inherit;
	font-size: 12px;
	font-weight: 850;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.hu-page-hero .hu-hero-checklist {
	counter-reset: hu-step;
	display: grid;
	gap: 12px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}
.hu-page-hero .hu-hero-checklist > li {
	counter-increment: hu-step;
	position: relative;
	min-height: 24px;
	padding-left: 36px;
	margin: 0;
	color: inherit;
	font-size: 14px;
	line-height: 1.4;
}
.hu-page-hero .hu-hero-checklist > li::before {
	content: counter(hu-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--hero-pill-bg);
	color: var(--hero-pill-fg);
	font-size: 10px;
	font-weight: 850;
}
.hu-page-hero .hu-hero-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-top: 22px !important;
	background: var(--hero-stat-line);
	border: 1px solid var(--hero-stat-line);
}
.hu-page-hero .hu-hero-stat {
	margin: 0 !important;
	padding: 14px;
	background: var(--hero-stat-bg);
	color: inherit;
	font-size: 9px;
	line-height: 1.3;
}
.hu-page-hero .hu-hero-stat strong {
	display: block;
	margin-bottom: 2px;
	font-size: 25px;
	font-weight: 850;
	line-height: 1.1;
	letter-spacing: -.04em;
}
/* Optional hero video (Wistia) gets the same frame as the panel */
.hu-page-hero .hu-video { border: 1px solid var(--hero-frame); border-radius: 10px; overflow: hidden; }

@media (max-width: 900px) {
	.wp-block-group.hu-page-hero { padding: 52px 0 48px; }
	.hu-page-hero .hu-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.hu-page-hero .hu-hero-dek { font-size: 16px; }
}
@media (max-width: 420px) {
	.hu-page-hero .hu-hero-panel { padding: 22px 18px; }
	.hu-page-hero .hu-hero-stat { padding: 12px 10px; }
	.hu-page-hero .hu-hero-stat strong { font-size: 21px; }
}

/* v0.3.4 Industry Hero panel: role board ("The eCommerce Pod").
   Core List block; each item = <strong>Role group</strong> + plain text.
   The item is a flex row, so the plain text becomes the right-hand detail. */
.hu-page-hero .hu-hero-panel:has(.hu-hero-roles) .hu-hero-panel-head {
	margin-bottom: 15px !important;
	color: var(--hero-kicker);
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .13em;
}
.hu-page-hero .hu-hero-roles {
	display: grid;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}
.hu-page-hero .hu-hero-roles > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--hero-stat-line);
	color: var(--hero-panel-muted);
	font-size: 10px;
	line-height: 1.35;
	text-align: right;
}
.hu-page-hero .hu-hero-roles > li:first-child { padding-top: 0; border-top: 0; }
.hu-page-hero .hu-hero-roles > li:last-child { padding-bottom: 0; }
.hu-page-hero .hu-hero-roles > li > strong {
	flex: 0 0 auto;
	color: var(--hero-panel-fg);
	font-size: 13px;
	font-weight: 800;
	text-align: left;
}
@media (max-width: 420px) {
	.hu-page-hero .hu-hero-roles > li { gap: 12px; }
	.hu-page-hero .hu-hero-roles > li > strong { font-size: 12.5px; }
}

/* ==========================================================================
   v0.3.6 Region Hero + Video (About) Hero
   ========================================================================== */
/* Region Hero: same hero + style variations, plus a dotted "market map"
   texture on the right and a ruled "At A Glance" board, so Region pages read
   differently from Position / Industry pages. Colours follow the hero style. */
.wp-block-group.hu-page-hero--region { position: relative; overflow: hidden; isolation: isolate; }
.wp-block-group.hu-page-hero--region::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58%;
	background-image: radial-gradient(var(--hero-dots) 1.4px, transparent 1.6px);
	background-size: 16px 16px;
	-webkit-mask-image: radial-gradient(ellipse 70% 75% at 70% 45%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 75% at 70% 45%, #000 30%, transparent 75%);
	pointer-events: none;
}
.hu-page-hero--region .hu-hero-panel { position: relative; padding-top: 0; overflow: hidden; }
.hu-page-hero--region .hu-hero-panel:has(.hu-hero-roles) .hu-hero-panel-head {
	margin: 0 -28px 18px !important;
	padding: 14px 28px;
	border-bottom: 1px solid var(--hero-stat-line);
	background: var(--hero-stat-bg);
}
.hu-page-hero--region .hu-hero-roles > li > strong { min-width: 110px; }

/* Video Hero (About): core Embed (YouTube) block fills the media column. */
.hu-page-hero .wp-block-embed.hu-hero-media { margin: 0; }
.hu-page-hero .hu-hero-media .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: #020713;
	box-shadow: var(--hero-media-shadow);
}
.hu-page-hero .hu-hero-media .wp-block-embed__wrapper::before { content: none; display: none; }
.hu-page-hero .hu-hero-media iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
	clip-path: inset(0 round 12px);
}
.hu-page-hero .hu-hero-media figcaption,
.hu-page-hero .hu-hero-media .wp-element-caption {
	margin: 12px 0 0;
	color: var(--hero-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: left;
}
@media (max-width: 900px) {
	.wp-block-group.hu-page-hero--region::before { width: 100%; opacity: .6; }
	.hu-page-hero .hu-hero-media .wp-block-embed__wrapper { box-shadow: none; }
}
@media (max-width: 420px) {
	.hu-page-hero--region .hu-hero-panel:has(.hu-hero-roles) .hu-hero-panel-head { margin: 0 -18px 16px !important; padding: 12px 18px; }
	.hu-page-hero--region .hu-hero-roles > li > strong { min-width: 0; }
}

/* ---------- v0.3.8 Simple (copy-only) page hero ----------
   Archives (Case Studies, Testimonials, Resources), Directory hubs and the
   Generic page shell. Same Dark / Electric Yellow / White styles; one column,
   no panel or media. Pattern: "HireUA / Page Hero (Simple)". */
.wp-block-group.hu-page-hero--simple { padding: 72px 0 64px; }
.hu-page-hero--simple .hu-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hu-page-hero--simple .hu-hero-title { max-width: 980px; font-size: clamp(42px, 6vw, 82px); }
.hu-page-hero--simple .hu-hero-dek { max-width: 790px; }
@media (max-width: 900px) {
	.wp-block-group.hu-page-hero--simple { padding: 52px 0 46px; }
}

/* v0.3.55: phones only. Tighter top spacing and a slightly smaller title on page heroes
   so they match the homepage (header -> headline gap was ~80px). */
@media (max-width: 768px) {
	html body .wp-block-group.hu-page-hero,
	html body .wp-block-group.hu-page-hero--simple { padding-top: 24px; }
	html body .hu-page-hero .hu-hero-title { font-size: 36px; line-height: 1.06; }
}