/*
 * HR Score promo — timed popup + floating button.
 * Standalone: not part of the sass build, everything namespaced .hrs-
 * so it cannot collide with style.css.
 */

.hrs-root-vars,
:root {
	--hrs-magenta: #a71580;   /* $purple-4 */
	--hrs-magenta-dark: #8d1169;
	--hrs-purple: #723b91;    /* $purple-1 */
	--hrs-body: #625c67;      /* modal-specific; theme $light-grey is #707070 */
	--hrs-white: #fff;
	--hrs-radius: 14px;
	--hrs-font-book: 'gotham-book', 'HelveticaNeueW01-45Ligh', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--hrs-font-bold: 'gotham-bold', 'HelveticaNeueW01-45Ligh', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--hrs-font-medium: 'gotham-medium', 'HelveticaNeueW01-45Ligh', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*
 * Own the box model for everything in this component. The theme has no global
 * border-box rule, so without this the circle's padding is added to its width
 * (170px + 2x18px = 206px). Scoped to .hrs- so nothing else is affected.
 */
.hrs-overlay,
.hrs-overlay *,
.hrs-fab,
.hrs-fab * {
	box-sizing: border-box;
}

/* ---------- Overlay + modal ---------- */

.hrs-overlay {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 18px;
	background: rgba(38, 20, 42, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .32s ease, visibility .32s ease;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
}

.hrs-overlay[hidden] { display: none; }

.hrs-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.hrs-modal {
	position: relative;
	width: 100%;
	/* Client's XD desktop spec. width:100% above keeps it shrinking to fit
	   on narrow viewports rather than overflowing. */
	max-width: 645px;
	background: var(--hrs-white);
	border-radius: var(--hrs-radius);
	box-shadow: 0 18px 60px -12px rgba(28, 12, 32, .45);
	transform: translateY(14px) scale(.97);
	transition: transform .34s cubic-bezier(.2, .8, .3, 1);
	margin: auto;
}

.hrs-overlay.is-open .hrs-modal { transform: none; }

/* Sits inside the 645px box, so the card measures 645px including padding. */
.hrs-modal__inner { padding: 40px 44px 32px; }

.hrs-modal__title {
	margin: 0 0 16px;
	font-family: var(--hrs-font-medium);
	/* the face carries its own weight — never let the browser synthesise bold */
	font-weight: normal;
	font-size: 40px;
	line-height: 1.15;
	color: var(--hrs-magenta);
	letter-spacing: -.005em;
}

/* "HR" is picked out in the medium cut. */
.hrs-modal__title strong,
.hrs-modal__title b {
	font-family: var(--hrs-font-bold);
	font-weight: normal;
}

/* The face is Book by default so only the emphasised word carries weight. */
.hrs-modal__title { font-family: var(--hrs-font-book); }

.hrs-modal__media {
	margin: 0 0 26px;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	background: #f6f4fb;
}

/*
 * Fixed ~2:1 window matching the XD design. Without this the modal's height
 * is whatever aspect ratio the editor happens to upload — a portrait image
 * pushes the card past the viewport and forces the overlay to scroll.
 */
.hrs-modal__media {
	aspect-ratio: 2 / 1;
}

.hrs-modal__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ---------- Code-drawn gauge (shown when no image is uploaded) ---------- */

/*
 * Built on the client's HR_Speedo_02.gif canvas (1648 x 939) so every measure
 * below is in that artwork's units, taken from the GIF's final frame. The SVG
 * scales to the panel, so at the 645px modal (539px panel) 1 unit = 0.327px:
 * label 96 = ~31px, verdict 78 = ~25px, number 260 = ~85px, stroke 45 = ~15px.
 */
.hrs-modal__media--gauge {
	aspect-ratio: auto;
	padding: 0;
	border-radius: 16px;
	background: #f8f6ff;
}

.hrs-gauge {
	display: block;
	width: 100%;
	/* 90%: shrinks the whole drawing 10% inside its panel */
	max-width: 90%;
	margin: 0 auto;
	height: auto;
}

.hrs-gauge__track,
.hrs-gauge__fill {
	fill: none;
	stroke-width: 45;
}

.hrs-gauge__track { stroke: #dccce5; }

.hrs-gauge__fill {
	stroke: #7d0080;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

.hrs-gauge.is-animating .hrs-gauge__fill {
	stroke-dashoffset: calc(100 - var(--hrs-score, 75));
	transition: stroke-dashoffset 1.8s cubic-bezier(.25, .6, .3, 1);
}

.hrs-gauge__num {
	font-family: var(--hrs-font-bold);
	font-size: 262px;
	letter-spacing: 22px;
	fill: #7d0080;
}

.hrs-gauge__label {
	font-family: var(--hrs-font-medium);
	font-size: 97px;
	fill: #5b4c9c;
}

.hrs-gauge__verdict {
	font-family: var(--hrs-font-medium);
	font-size: 77.7px;
	fill: #7d0080;
	opacity: 0;
}

.hrs-gauge__verdict-key { font-family: var(--hrs-font-bold); }

.hrs-gauge.is-done .hrs-gauge__verdict {
	opacity: 1;
	transition: opacity .6s ease;
}

.hrs-modal__subtitle {
	margin: 0 0 14px;
	font-family: var(--hrs-font-medium);
	font-weight: normal;
	font-size: 18px;
	letter-spacing: -.1rem;
	line-height: 1.4;
	color: var(--hrs-purple);
}

.hrs-modal__body {
	font-family: var(--hrs-font-book);
	font-weight: normal;
	font-size: 16px;
	line-height: 1.55;
	color: var(--hrs-body);
}

.hrs-modal__body p { margin: 0 0 .8em; padding-bottom: 0; }
.hrs-modal__body p:last-child { margin-bottom: 0; }

/* "Your score covers:" lead-in — medium cut, same 18px. */
.hrs-modal__body strong,
.hrs-modal__body b {
	font-family: var(--hrs-font-bold);
	font-weight: normal;
}

.hrs-modal__body ul {
	margin: 0;
	padding: 0;
	list-style: none;
	/* two columns on anything above phone width */
	columns: 2;
	column-gap: 24px;
}

.hrs-modal__body li {
	position: relative;
	margin: 0 0 .1em;
	padding-left: 20px;
	break-inside: avoid;
}

.hrs-modal__body li:last-child { margin-bottom: 0; }

.hrs-modal__body li::before {
	content: "\2022";
	position: absolute;
	left: 0;
	color: var(--hrs-purple);
}

/* Closing "100% confidential" line, straight after the list. */
.hrs-modal__body ul + p {
	margin-top: 1.2em;
	font-family: var(--hrs-font-medium);
	font-size: 18px;
	letter-spacing: -.1rem;
	line-height: 1.4;
	color: var(--hrs-purple);
}

.hrs-modal__cta {
	display: block;
	margin-top: 28px;
	padding: 16px 24px;
	background: var(--hrs-magenta);
	color: var(--hrs-white);
	/* real Gotham Bold face — weight stays normal so the browser doesn't fake it */
	font-family: var(--hrs-font-bold);
	font-weight: normal;
	font-size: 22px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	/* fully rounded ends — pill */
	border-radius: 999px;
	transition: background .25s ease, transform .25s ease;
}

.hrs-modal__cta:hover,
.hrs-modal__cta:focus {
	background: var(--hrs-magenta-dark);
	color: var(--hrs-white);
	transform: translateY(-1px);
}

/* Close — clears the panel entirely, sitting off its top-right corner */
.hrs-close {
	position: absolute;
	top: -38px;
	/* Overhangs the panel's right edge so it doesn't read as part of it. */
	right: -16px;
	width: 26px;
	height: 26px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--hrs-white);
	border-radius: 50%;
	color: var(--hrs-white);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

/* Fills solid on hover, with the glyph flipping to the brand pink. */
.hrs-close:hover,
.hrs-close:focus {
	background: var(--hrs-white);
	color: var(--hrs-magenta);
}

/* ---------- Floating button ---------- */

/* Sits in the upper half of the viewport, clear of the cookie bar and footer. */
.hrs-fab {
	position: fixed;
	right: 26px;
	top: 30%;
	z-index: 99997;
	width: 170px;
	height: 170px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	border-radius: 50%;
	background: var(--hrs-magenta);
	color: var(--hrs-white);
	text-decoration: none;
	text-align: center;
	box-shadow: 0 10px 30px -4px rgba(38, 8, 40, .55), 0 3px 10px -2px rgba(38, 8, 40, .4);
	transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease, background .28s ease;
}

.hrs-fab__label {
	font-family: var(--hrs-font-book);
	font-weight: normal;
	font-size: 28px;
	line-height: 1.15;
	color: var(--hrs-white);
}

.hrs-fab:hover,
.hrs-fab:focus {
	background: var(--hrs-magenta-dark);
	color: var(--hrs-white);
	transform: scale(1.06);
	box-shadow: 0 18px 42px -6px rgba(38, 8, 40, .62), 0 4px 12px -2px rgba(38, 8, 40, .45);
}

/* ---------- Mobile sticky bar ---------- */

/* Hidden by default — the circle handles everything above the mobile
   breakpoint. Both are swapped in the media query at the bottom. */
.hrs-bar,
.hrs-bar-sentinel {
	display: none;
}

.hrs-bar,
.hrs-bar * {
	box-sizing: border-box;
}

.hrs-bar__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 18px;
	background: var(--hrs-magenta);
	color: var(--hrs-white);
	text-decoration: none;
	transition: background .25s ease;
}

.hrs-bar__link:hover,
.hrs-bar__link:focus {
	background: var(--hrs-magenta-dark);
	color: var(--hrs-white);
}

.hrs-bar__label {
	font-family: var(--hrs-font-book);
	font-weight: normal;
	font-size: 19px;
	line-height: 1.2;
	color: var(--hrs-white);
}

.hrs-bar__chev {
	font-size: 26px;
	line-height: 1;
	margin-top: -3px;
	transition: transform .25s ease;
}

.hrs-bar__link:hover .hrs-bar__chev { transform: translateX(3px); }

/* Lift once it has docked to the top, so it reads as floating over content. */
.hrs-bar.is-docked .hrs-bar__link {
	box-shadow: 0 6px 18px -4px rgba(38, 8, 40, .45);
}

/* One-off attention nudge, fired from JS shortly after load. */
@keyframes hrs-nudge {
	0%, 62%, 100% { transform: none; }
	66% { transform: rotate(-7deg) scale(1.03); }
	72% { transform: rotate(6deg) scale(1.03); }
	78% { transform: rotate(-4deg) scale(1.02); }
	84% { transform: rotate(3deg) scale(1.01); }
	90% { transform: rotate(-1.5deg); }
}

.hrs-fab.is-nudging { animation: hrs-nudge 2.4s ease-in-out 1; }

/* Keyboard focus needs to stay visible on both elements. */
.hrs-fab:focus-visible,
.hrs-close:focus-visible,
.hrs-modal__cta:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Stop background scroll while the modal is up. */
body.hrs-locked { overflow: hidden; }

/* ---------- Responsive ---------- */

/* Tablet — step the circle down before the full mobile size. */
@media only screen and (max-width: 900px) and (min-width: 601px) {
	.hrs-fab {
		width: 144px;
		height: 144px;
		padding: 15px;
	}
	.hrs-fab__label { font-size: 24px; }
}

@media only screen and (max-width: 600px) {
	/* The circle is too heavy on a phone — swap it for the sticky bar. */
	.hrs-fab { display: none; }

	.hrs-bar {
		display: block;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 99996;
	}
	/* Zero-height marker just above the bar; when it scrolls out of view the
	   bar has docked, and JS flips .is-docked for the shadow. */
	.hrs-bar-sentinel {
		display: block;
		height: 1px;
		margin-bottom: -1px;
	}

	.hrs-modal { max-width: 100%; }
	.hrs-modal__inner { padding: 26px 20px 22px; }
	.hrs-modal__title { font-size: 26px; }
	.hrs-modal__subtitle { font-size: 15px; letter-spacing: -.05rem; }
	.hrs-modal__body { font-size: 14px; }
	.hrs-modal__body ul { columns: 1; }
	.hrs-modal__body ul + p { font-size: 15px; letter-spacing: -.05rem; }
	.hrs-modal__cta { font-size: 18px; }
	.hrs-overlay { padding-top: 52px; }
}

/*
 * Short desktop viewports (laptops). The card is ~1000px tall at full size, so
 * step it down in two tiers rather than making people scroll the overlay.
 * The overlay's top padding keeps room for the close button, which sits
 * 38px above the panel.
 */
@media only screen and (min-width: 601px) and (max-height: 900px) {
	.hrs-overlay { padding: 46px 18px 16px; }
	.hrs-modal__inner { padding: 28px 40px 26px; }
	.hrs-modal__title { font-size: 33px; margin-bottom: 10px; }
	.hrs-modal__media { margin-bottom: 16px; }
	.hrs-gauge { max-width: 378px; margin: 0 auto; }
	.hrs-modal__subtitle { font-size: 16px; line-height: 1.35; letter-spacing: -.05rem; margin-bottom: 10px; }
	.hrs-modal__body { font-size: 14px; line-height: 1.45; }
	.hrs-modal__body p { margin-bottom: .5em; }
	.hrs-modal__body li { margin-bottom: .1em; }
	.hrs-modal__body ul + p { margin-top: .8em; font-size: 16px; letter-spacing: -.05rem; }
	.hrs-modal__cta { margin-top: 18px; padding: 12px 24px; font-size: 19px; }
}

@media only screen and (min-width: 601px) and (max-height: 760px) {
	.hrs-overlay { padding-top: 42px; }
	.hrs-modal__inner { padding: 20px 32px 20px; }
	.hrs-modal__title { font-size: 28px; margin-bottom: 8px; }
	.hrs-modal__media { margin-bottom: 12px; }
	.hrs-gauge { max-width: 306px; }
	.hrs-modal__subtitle { font-size: 14px; margin-bottom: 8px; }
	.hrs-modal__body { font-size: 13px; line-height: 1.4; }
	.hrs-modal__body ul + p { font-size: 14px; margin-top: .6em; }
	.hrs-modal__cta { margin-top: 14px; padding: 10px 24px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.hrs-gauge__fill,
	.hrs-gauge__verdict,
	.hrs-overlay,
	.hrs-modal,
	.hrs-modal__cta,
	.hrs-fab,
	.hrs-close {
		transition: none;
	}
	.hrs-fab.is-nudging { animation: none; }
}