/*
Theme Name: HireUA
Theme URI: https://hire-ua.com/
Author: HireUA
Description: Standalone lightweight classic theme for HireUA. No page builder. One global header component (hireua-global-header) shared by every template.
Version: 0.3.128
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: hireua
*/

/* Global base only. Template-specific CSS lives in assets/css/*.css and is
   enqueued per template. Element styles are scoped to .hu-main so nothing
   leaks into the global header. */
:root {
	/* Brand colour tokens live in assets/css/tokens.css (enqueued first). */
	--hu-max: 1180px;
	--hu-font: Inter, "Inter Fallback", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--hu-white); color: var(--hu-ink); font-family: var(--hu-font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; }

.hu-main h1, .hu-main h2, .hu-main h3, .hu-main h4 { line-height: 1.2; font-weight: 700; margin: 1.6em 0 .6em; letter-spacing: -.01em; }
.hu-main h1 { font-size: clamp(2rem, 4vw, 3rem); }
.hu-main h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.hu-main h3 { font-size: 1.35rem; }
.hu-main p, .hu-main ul, .hu-main ol, .hu-main blockquote, .hu-main figure { margin: 0 0 1.2em; }
.hu-main a { color: inherit; text-decoration-color: var(--hu-blue); text-underline-offset: 3px; }
.hu-main a:hover { color: var(--hu-blue); }
.hu-main blockquote { border-left: 3px solid var(--hu-yellow); padding-left: 1em; color: var(--hu-muted); }

.hu-container { width: min(var(--hu-max), calc(100% - 40px)); margin: 0 auto; }
.hu-narrow { max-width: 760px; }
.hu-main { padding: 56px 0 80px; min-height: 50vh; }
.hu-entry-header { margin-bottom: 1.5em; }
.hu-entry-title { margin-top: 0; }
.hu-meta { color: var(--hu-muted); font-size: .9rem; }
.hu-post-list { list-style: none; padding: 0; }
.hu-post-list li { padding: 1.2em 0; border-bottom: 1px solid var(--hu-line); }
.hu-post-list h2 { margin: 0 0 .3em; font-size: 1.4rem; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.screen-reader-text:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 100000; padding: 10px 14px; background: var(--hu-white); color: var(--hu-ink); }
.alignwide { max-width: 1100px; } .alignfull { width: 100%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption { color: var(--hu-muted); font-size: .9rem; }

/* v0.3.13: button labels stay on one line site-wide; the arrow stays beside the text */
.wp-block-button__link, .hu-btn, .hu-hero-cta a, .hu-filter, .hu-loadmore, .ff-optin-form button, .hu-card-link, .inline-hiring-cta-link a { white-space: nowrap; }
@media (max-width: 680px) {
	.wp-block-button__link { max-width: 100%; padding-left: 16px; padding-right: 16px; font-size: clamp(13px, 3.9vw, 16px); }
}

/* v0.3.23 Wistia click-to-load facade (inc/performance.php): same tag + classes, poster + play button */
wistia-player.hu-wf:not(:defined){display:block;position:relative;overflow:hidden;cursor:pointer;filter:none!important;padding-top:0!important;aspect-ratio:var(--hu-wf-ar,16/9);background-color:#000!important}
wistia-player.hu-wf--poster:not(:defined){background-image:none!important}
.hu-wf-poster{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;margin:0;border:0}
.hu-wf-poster--contain{object-fit:contain;background:#000}
.hu-wf-play{position:absolute;z-index:1;top:50%;left:50%;width:clamp(56px,19.6%,125px);aspect-ratio:125/80;margin:0;padding:0;border:0;border-radius:0;background:rgba(var(--hu-yellow-rgb),.86);transform:translate(-50%,-50%);cursor:pointer;transition:background-color .16s ease}
.hu-wf-play::before{content:"";position:absolute;top:50%;left:51%;width:19%;height:41%;background:rgba(0,0,0,.55);clip-path:polygon(0 0,100% 50%,0 100%);transform:translate(-50%,-50%)}
wistia-player.hu-wf:hover .hu-wf-play,.hu-wf-play:is(:hover,:focus-visible,:active){background:var(--hu-yellow-hover)}
.hu-wf-play:focus-visible{outline:3px solid var(--hu-navy);outline-offset:2px}
wistia-player.hu-wf.is-loading .hu-wf-play{animation:hu-wf-pulse .9s ease-in-out infinite alternate}
@keyframes hu-wf-pulse{to{opacity:.55}}
/* v0.3.75: clicked facade plays Wistia's iframe in place; the box keeps its aspect-ratio (no layout shift). */
wistia-player.hu-wf>.hu-wf-frame{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;border:0;margin:0;background:#000}
wistia-player.hu-wf.is-playing .hu-wf-play{visibility:hidden}

/* v0.3.23 YouTube click-to-load facade, global (was video.css only) */
.hu-video-frame{position:relative;aspect-ratio:16/9;background:var(--hu-navy-hover)}
.hu-video-frame iframe,.hu-video-frame img,.hu-video-facade{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.hu-video-frame img{object-fit:cover}
.hu-video-facade{cursor:pointer}
.hu-video-play{position:absolute;z-index:2;top:50%;left:50%;width:88px;height:88px;border-radius:999px;background:var(--hu-yellow);box-shadow:0 15px 40px rgba(0,0,0,.3);transform:translate(-50%,-50%);transition:background-color .16s ease,transform .16s ease}
.hu-video-play::before{content:"";position:absolute;top:50%;left:54%;border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent var(--hu-navy);transform:translate(-50%,-50%)}
.hu-video-facade:is(:hover,:focus-visible) .hu-video-play{background:var(--hu-yellow-hover);transform:translate(-50%,-50%) scale(1.04)}
.hu-video-facade:focus-visible{outline:3px solid var(--hu-yellow);outline-offset:-3px}
@media (max-width:600px){.hu-video-play{width:64px;height:64px}.hu-video-play::before{border-width:11px 0 11px 18px}}

/* v0.3.23 Footer seam: Thrive Leads' end-of-content marker must not draw a strip above the footer;
   landing pages end flush so a dark last section butts onto the footer. */
#tve_leads_end_content{display:block!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;line-height:0!important}
main.hu-landing,.hu-landing>.hu-landing-content{margin-bottom:0!important;padding-bottom:0!important}
.hu-landing>.hu-landing-content>:last-child{margin-bottom:0!important}

/* v0.3.30 plain YouTube embeds (no theme facade) */
.wp-block-embed.is-provider-youtube iframe{max-width:100%}

/* v0.3.45: standard yellow CTA button in blog posts (legacy red wp:buttons converted to .hu-cs-cta). Case studies keep their own rule in case-study.css. */
.hu-cs-cta { margin: 32px 0; }
.hu-cs-cta a.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 15px; max-width: 100%; min-height: 50px; padding: 12px 24px; border: 1px solid var(--hu-cta-border); border-radius: 5px; background: var(--hu-cta-bg); color: var(--hu-cta-fg); font-size: 14px; font-weight: 850; line-height: 1.25; text-align: center; text-decoration: none; transition: background-color .16s ease, color .16s ease, transform .16s ease, border-color .16s ease; }
.hu-cs-cta a.btn-primary:is(:hover, :focus-visible, :active) { background: var(--hu-cta-hover-bg); border-color: var(--hu-cta-hover-bg); color: var(--hu-cta-hover-fg); text-decoration: none; transform: translateY(-1px); }
.hu-cs-cta a.btn-primary:focus-visible { outline: 3px solid var(--hu-navy); outline-offset: 2px; }

/* v0.3.54 No-image card placeholder (hireua_noimg_art): navy, subtle dot grid, real stacked lockup ~58% wide,
   near-solid white wordmark + solid yellow tagline. Parent thumb boxes are position:relative + overflow:hidden. */
.hu-guide-media, .hu-blog-thumb, .hu-guide-thumb, .hu-cat-feature-media { position: relative; }
.hu-noimg {
	position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(rgba(var(--hu-white-rgb), .055) .9px, transparent 1.1px) 0 0 / 11px 11px,
		radial-gradient(circle at 82% 18%, rgba(var(--hu-blue-rgb), .42), transparent 48%),
		linear-gradient(135deg, var(--hu-navy), var(--hu-navy-2) 60%, var(--hu-navy-glow));
}
.hu-noimg .hu-noimg-logo { display: block; width: 58%; max-width: 440px; height: auto; opacity: 1; }
.hu-noimg .hu-noimg-logo path[fill="#FFFFFF"] { fill-opacity: .95; }
.hu-blog-thumb.is-fallback::after { z-index: 1; }

/* v0.3.70: TCF / Founder Files yellow buttons (.tcf-btn, .tcf-dl, .tcf-dl-btn; CSS lives in page content)
   hover like the standard site buttons: darker shade of their own colour only, no lift, no extra shadow. */
html body .tcf-wrap :is(.tcf-btn, .tcf-dl, .tcf-dl-btn):is(:hover, :focus-visible, :active) { transform: none; }
html body .tcf-wrap .tcf-btn:is(:hover, :focus-visible, :active) { box-shadow: 0 12px 30px rgba(7,21,42,.16); }
html body .tcf-wrap :is(.tcf-dl, .tcf-dl-btn):is(:hover, :focus-visible, :active) { box-shadow: none; }

/* v0.3.72 mobile TBT: let the browser skip layout of below-the-fold sections until they near the
   viewport. contain-intrinsic-size "auto" remembers each section's real height once rendered.
   html.hu-cv-off (set for #anchor jumps) renders everything so anchor targets land exactly. */
@media (max-width: 960px) {
	html:not(.hu-cv-off) #hu-main > section:nth-of-type(n+3),
	html:not(.hu-cv-off) .hu-landing-content > section.hu-section:nth-of-type(n+3) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
}

/* v0.3.79 QA: resized/centred core images must never widen the page on mobile (core sets .aligncenter{display:table}) */
.wp-block-image,
.wp-block-image figure,
.wp-block-image .aligncenter { max-width: 100%; }
@media (max-width: 782px) {
	.wp-block-image .aligncenter, .wp-block-image figure.is-resized { display: block; }
	.wp-block-image img { max-width: 100% !important; height: auto !important; }
}

/* v0.3.128 Calendly popup (desktop "Book" popup). Calendly's widget.css caps the popup at 1000px wide x 700px tall, and Calendly picks its
   layout from the iframe width. Measured time-button width: 1000-1119px = 3 columns with the time column squeezed to ~65px boxes (the bug);
   1120px and up = 3 columns with full-width time bars; under 1000px = Calendly's stacked layout, also full-width bars.
   So only the WIDTH changes: up to 1240px wherever the window is 1150px or wider, else 980px max (never the 1000-1119px dead zone).
   Height, position and centring stay Calendly's own (v0.3.127 height overrides removed). The iframe stays 100% of the popup. */
@media (min-width: 769px) {
	html body .calendly-overlay .calendly-popup {
		width: min(980px, 95vw);
		min-width: 0;
		max-width: 95vw;
	}
	html body .calendly-overlay .calendly-popup .calendly-popup-content,
	html body .calendly-overlay .calendly-popup iframe {
		width: 100%;
	}
}
@media (min-width: 1150px) {
	html body .calendly-overlay .calendly-popup {
		width: min(1240px, calc(100vw - 24px));
		max-width: none;
	}
}
/* Phones / narrow windows: full-screen sheet with a clearly visible close button (white X on a dark circle, above the iframe). */
@media (max-width: 768px) {
	html body .calendly-overlay .calendly-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: none;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		max-width: none;
		height: 100%;
		min-height: 0;
		max-height: none !important;
		border-radius: 0;
		background: #fff;
	}
	html body .calendly-overlay .calendly-popup .calendly-popup-content {
		height: 100%;
	}
	html body .calendly-overlay .calendly-popup-close {
		position: fixed;
		top: max(10px, env(safe-area-inset-top));
		right: 10px;
		width: 40px;
		height: 40px;
		z-index: 10000;
		border-radius: 50%;
		background-color: #0b1f3a;
		background-position: center;
		background-size: 16px 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	}
}
@supports (height: 100dvh) {
	@media (max-width: 768px) {
		html body .calendly-overlay .calendly-popup {
			height: 100dvh;
		}
	}
}