/* ── HR Blizz · Nav v2 additions ──────────────────────────────────
   Ported from design/js/site-nav.jsx (InfoBar + fixed/blur nav +
   active-page indicators) — that JSX is the real source for these
   pieces, not home.css's own .nav/.infobar rules, which are dead
   weight relative to this theme's nav.php (hand-built with Tailwind
   utility classes, not those design classes).

   This is real custom CSS rather than more Tailwind utility classes
   because this theme's Tailwind is pre-compiled to style.css with no
   build step shipped — any arbitrary-value utility not already in
   that compiled file (checked before writing this) would silently
   fail to apply. `hrb-nav-*`/`hrb-infobar-*` prefixes avoid colliding
   with Tailwind's own class names or other plugins.
   ────────────────────────────────────────────────────────────────── */

body { padding-top: 68px; }
html.hrb-has-infobar body { padding-top: 112px; }
html.hrb-has-infobar.hrb-infobar-up body { padding-top: 68px; }

@media (max-width: 720px) {
	html.hrb-has-infobar body { padding-top: 108px; }
	html.hrb-has-infobar.hrb-infobar-up body { padding-top: 68px; }
}

[data-nav-entry] {
	transition: top 0.55s cubic-bezier(0.16, 0.84, 0.24, 1);
	will-change: top;
}
html.hrb-has-infobar [data-nav-entry] { top: 44px; }
html.hrb-has-infobar.hrb-infobar-up [data-nav-entry] { top: 0; }
html.hrb-page-scrolled [data-nav-entry] {
	background: rgba(255, 255, 255, 0.97) !important;
	box-shadow: 0 6px 20px -16px rgba(0, 23, 56, 0.4);
}

/* ── Announcement bar ─────────────────────────────────────────── */
.hrb-infobar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 24px;
	background: linear-gradient(90deg, #001024 0%, #001738 42%, #10305F 100%);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	will-change: transform;
	transition: transform 0.55s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.hrb-infobar::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(50% 200% at 82% 50%, rgba(255, 95, 31, 0.32), transparent 70%);
}
html.hrb-infobar-up .hrb-infobar { transform: translateY(-100%); }
.hrb-infobar-in {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.hrb-infobar-tag {
	flex: none;
	padding: 5px 10px;
	border-radius: 999px;
	background: linear-gradient(120deg, #FF5F1F, #FF8A50);
	font: 700 10.5px/1 var(--font-mono, ui-monospace, monospace);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}
.hrb-infobar-txt {
	font: 500 15px/1 var(--font-body, "Source Sans 3", sans-serif);
	color: rgba(255, 255, 255, 0.92);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hrb-infobar-go {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 700 14.5px/1 var(--font-body, "Source Sans 3", sans-serif);
	color: #FFB48C;
}
.hrb-infobar-go svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.hrb-infobar-in:hover .hrb-infobar-go { color: #fff; }
.hrb-infobar-in:hover .hrb-infobar-go svg { transform: translateX(3px); }
.hrb-infobar-x {
	position: absolute;
	right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.hrb-infobar-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

@media (max-width: 720px) {
	.hrb-infobar { height: 40px; gap: 0; padding: 0 44px 0 16px; }
	.hrb-infobar-in { gap: 9px; }
	.hrb-infobar-txt { font-size: 13.5px; }
	.hrb-infobar-go { display: none; }
}

/* ── Mobile drawer: full-height panel below the fixed header ──
   The header (68px) is what's fixed; the drawer is just its in-flow
   child, so sizing this to the remaining viewport height makes the
   header (and its white background) stretch all the way to the
   bottom of the screen. Contact us then pins to the bottom via the
   flex column's margin-top:auto, matching the has-infobar states
   already handled above for [data-nav-entry]. */
[data-nav-mobile-body] { height: calc(100vh - 68px); }
html.hrb-has-infobar [data-nav-mobile-body] { height: calc(100vh - 112px); }
html.hrb-has-infobar.hrb-infobar-up [data-nav-mobile-body] { height: calc(100vh - 68px); }

/* While the mobile drawer is open, lock the page underneath it — plain
   :has() reacting to the `hidden` attribute javascript/home.js's initNav()
   already toggles, so there's no separate open/close state to keep in
   sync in JS. Both html and body: browsers disagree on which one is
   `document.scrollingElement`, so both need to actually stop it. */
html:has([data-nav-mobile]:not([hidden])),
body:has([data-nav-mobile]:not([hidden])) { overflow: hidden; }

/* ── Active top-level nav item (pill + underline) ────────────── */
.hrb-nav-is-active {
	color: #E5541A !important;
	background: #FFF9F6 !important;
	position: relative;
}
.hrb-nav-is-active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 20px;
	height: 2.5px;
	border-radius: 999px;
	background: #FF5F1F;
	transform: translateX(-50%);
}
.hrb-nav-is-active:hover { background: #FFEFE7 !important; color: #E5541A !important; }