/*
 * Referral programme: /referrals/, /referrals/terms/, and the award chip,
 * callout and refer prompt on the careers pages (docs/specs/referral-program.md).
 * Layout follows the standalone Site; colours and type follow the theme
 * (same values as themes/cb5/css/cb5-careers.css, repeated as fallbacks
 * because that file is not loaded on the referral pages).
 */
.cb5r-page, .cb5r-callout, .cb5r-card-award, .cb5r-chip-award, .cb5r-refer {
	--cb5r-orange: var(--cb5-orange, #F1701D);
	--cb5r-orange-dark: var(--cb5-orange-dark, #D96626);
	--cb5r-ink: var(--cb5-ink, #14252D);
	--cb5r-navy: var(--cb5-navy, #0B212A);
	--cb5r-blue: var(--cb5-blue, #1F5291);
	--cb5r-muted: var(--cb5-muted, #5B6A71);
	--cb5r-line: var(--cb5-line, #E1EAF3);
	--cb5r-tint: var(--cb5-tint, #F5FBFF);
	--cb5r-tint-2: var(--cb5-tint-2, #ECF8FF);
	--cb5r-serif: var(--cb5-serif, "Lustria", Georgia, serif);
	--cb5r-sans: var(--cb5-sans, "Exo 2", "Segoe UI", Arial, sans-serif);
	--cb5r-caps: var(--cb5-caps, "BenchNine", "Arial Narrow", sans-serif);
	--cb5r-radius: var(--cb5-radius, 6px);
}

/* ===================================================== careers hooks ==== */
.cb5r-callout {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem;
	margin: -.5rem 0 1.5rem; padding: .85rem 1.1rem;
	background: var(--cb5r-tint); border-left: 3px solid var(--cb5r-orange); border-radius: 0 var(--cb5r-radius) var(--cb5r-radius) 0;
	font-family: var(--cb5r-sans); font-size: 1rem; color: var(--cb5r-ink);
}
.cb5r-callout-link, .cb5r-refer-link {
	font-family: var(--cb5r-caps); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	font-size: 1rem; color: var(--cb5r-orange); text-decoration: none; white-space: nowrap;
}
.cb5r-callout-link:hover, .cb5r-refer-link:hover { color: var(--cb5r-orange-dark); text-decoration: underline; }

.cb5r-card-award {
	align-self: flex-start; margin: 0 0 .75rem;
	font-family: var(--cb5r-sans); font-size: .8rem; font-weight: 600; color: var(--cb5r-orange-dark);
	background: #FFF4EC; border-radius: 999px; padding: .2em .75em;
}

.cb5-chip.cb5r-chip-award { padding: 0; border-color: #F6D3BC; background: #FFF4EC; }
.cb5r-chip-award a {
	display: block; padding: .35em .85em; border-radius: 999px;
	color: var(--cb5r-orange-dark); font-weight: 600; text-decoration: none;
}
.cb5r-chip-award a:hover { text-decoration: underline; }

.cb5r-refer {
	margin: 1.5rem auto 0; max-width: 34em; text-align: center;
	font-family: var(--cb5r-sans); color: var(--cb5r-muted);
}
.cb5r-refer p { margin: 0 0 .5rem; }

.cb5r-callout-link:focus-visible, .cb5r-refer-link:focus-visible, .cb5r-chip-award a:focus-visible,
.cb5r a:focus-visible, .cb5r-submit:focus-visible, .cb5r input:focus-visible, .cb5r select:focus-visible, .cb5r textarea:focus-visible {
	outline: 3px solid var(--cb5r-blue); outline-offset: 2px;
}

/* ================================================================ band ==== */
.section-banner-wrapper.cb5r-band {
	min-height: 0 !important;
	padding-top: 150px; padding-bottom: 2.25rem;
	background: radial-gradient(ellipse at center, rgba(25,49,62,1) 0%, rgba(11,33,42,1) 100%);
	color: #fff;
}
@media (min-width: 768px) { .section-banner-wrapper.cb5r-band { padding-top: 220px; padding-bottom: 2.75rem; } }
/* Own eyebrow, not the theme's .section-banner-heading (animated in by the theme's scripts). */
.cb5r-eyebrow {
	font-family: var(--cb5r-caps); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	font-size: 1rem; color: var(--cb5r-orange); margin: 0 0 .75rem;
}
.cb5r-band-title {
	font-family: var(--cb5r-serif); font-weight: 400; color: #fff;
	font-size: 2.25rem; line-height: 1.15; margin: 0 0 .35em; max-width: 18em;
}
@media (min-width: 768px) { .cb5r-band-title { font-size: 3rem; } }
.cb5r-band-intro { font-family: var(--cb5r-sans); font-size: 1.1rem; color: #C9D6DD; margin: 0; max-width: 40em; }

/* ================================================================ form ==== */
.cb5r { font-family: var(--cb5r-sans); color: var(--cb5r-ink); }
/* .cb5r prefix: the theme's .container sets padding and must not win. */
.cb5r .cb5r-grid {
	display: grid; grid-template-columns: 1fr; gap: 2.5rem;
	padding-top: 2.5rem; padding-bottom: 4rem; align-items: start;
}
@media (min-width: 960px) {
	.cb5r .cb5r-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 4rem; padding-top: 3.5rem; padding-bottom: 5rem; }
}

.cb5r-rule { width: 47px; height: 4px; background: var(--cb5r-orange); margin: 0 0 1.5rem; }
.cb5r-overline, .cb5r-kicker {
	font-family: var(--cb5r-caps); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	font-size: 1rem; color: var(--cb5r-orange); margin: 0 0 .5rem;
}
.cb5r-intro h2 { font-family: var(--cb5r-serif); font-weight: 400; color: var(--cb5r-navy); font-size: 1.9rem; line-height: 1.2; margin: 0 0 1rem; }
.cb5r-intro > p { font-size: 1.02rem; line-height: 1.7; color: var(--cb5r-muted); }
.cb5r-link, .cb5r-terms-link a {
	font-family: var(--cb5r-caps); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	font-size: 1.05rem; color: var(--cb5r-orange); text-decoration: none;
}
.cb5r-link:hover, .cb5r-terms-link a:hover { color: var(--cb5r-orange-dark); text-decoration: underline; }
.cb5r-aside { border-left: 3px solid var(--cb5r-orange); background: var(--cb5r-tint); padding: 1rem 1.15rem; margin: 2rem 0 1.5rem; }
.cb5r-aside strong { font-size: 1rem; color: var(--cb5r-navy); }
.cb5r-aside p { font-size: .95rem; line-height: 1.6; color: var(--cb5r-muted); margin: .4rem 0 0; }

.cb5r-card {
	background: #fff; border: 1px solid var(--cb5r-line); border-top: 4px solid var(--cb5r-orange);
	border-radius: var(--cb5r-radius); box-shadow: 0 16px 48px rgba(11,33,42,.07);
	padding: 1.75rem 1.35rem 2rem; scroll-margin-top: 140px;
}
@media (min-width: 640px) { .cb5r-card { padding: 2.25rem 2.5rem 2.5rem; } }
.cb5r-form-heading { border-bottom: 1px solid var(--cb5r-line); padding-bottom: 1.25rem; }
.cb5r-form-heading h2 { font-family: var(--cb5r-serif); font-weight: 400; color: var(--cb5r-navy); font-size: 1.65rem; line-height: 1.2; margin: 0 0 .25rem; }
.cb5r-form-heading p:last-child { color: var(--cb5r-muted); font-size: .9rem; margin: 0; }

.cb5r fieldset { padding: 0; margin: 1.75rem 0 0; border: 0; min-width: 0; }
.cb5r legend { font-weight: 700; font-size: 1.05rem; color: var(--cb5r-navy); padding: 0 0 1rem; width: 100%; }
.cb5r legend span {
	display: inline-grid; place-items: center; width: 29px; height: 29px; margin-right: .6rem;
	border-radius: 50%; background: #FFF4EC; color: var(--cb5r-orange-dark); font-size: .75rem;
}
.cb5r-field-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 560px) { .cb5r-field-grid { grid-template-columns: 1fr 1fr; } }
.cb5r-field { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; font-size: .9rem; color: #304B5C; margin: 0; }
.cb5r-field-full { grid-column: 1 / -1; }
fieldset > .cb5r-field-full { margin-top: 1.1rem; }
.cb5r-field em, .cb5r-consent em { font-style: normal; color: var(--cb5r-orange-dark); }
.cb5r-field small { font-weight: 400; color: var(--cb5r-muted); }
/* Doubled class: the theme styles input[type=text|email] with a grey fill. */
.cb5r.cb5r .cb5r-field input, .cb5r.cb5r .cb5r-field select, .cb5r.cb5r .cb5r-field textarea {
	width: 100%; box-sizing: border-box; margin: 0;
	border: 1px solid #CBD9E2; border-radius: 3px; background: #FBFDFE; box-shadow: none;
	font-family: var(--cb5r-sans); font-size: 1rem; font-weight: 400; color: var(--cb5r-ink);
	height: 45px; padding: .5rem .75rem;
}
.cb5r.cb5r .cb5r-field textarea { height: auto; min-height: 110px; resize: vertical; line-height: 1.5; }
.cb5r.cb5r .cb5r-field input:focus, .cb5r.cb5r .cb5r-field select:focus, .cb5r.cb5r .cb5r-field textarea:focus { border-color: var(--cb5r-blue); }
.cb5r-field input::placeholder, .cb5r-field textarea::placeholder { color: #8FA2AC; }

.cb5r-consent { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.25rem; }
.cb5r-consent:first-of-type { margin-top: 1.75rem; }
.cb5r-consent input { flex: none; width: 19px; height: 19px; margin: .2rem 0 0; accent-color: var(--cb5r-orange); }
.cb5r-consent label { font-size: .9rem; line-height: 1.55; color: #344E5E; cursor: pointer; margin: 0; }
.cb5r-consent a { color: var(--cb5r-blue); text-decoration: underline; text-underline-offset: 2px; }

.cb5r-honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cb5r-fine-print { font-size: .82rem; line-height: 1.55; color: var(--cb5r-muted); margin: 1.1rem 0 0; }
.cb5r-error { background: #FFF2ED; border: 1px solid #EDC7B8; color: #9F3525; padding: .75rem; font-size: .9rem; margin: 1rem 0 0; }

.cb5r-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	width: 100%; margin-top: 1.5rem; min-height: 50px; padding: .8em 1.6em;
	background: var(--cb5r-orange); color: #fff !important; border: 0; border-radius: var(--cb5r-radius); cursor: pointer;
	font-family: var(--cb5r-caps); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase;
	text-decoration: none; line-height: 1; transition: background-color .15s ease;
}
.cb5r-submit:hover { background: var(--cb5r-orange-dark); }
.cb5r-submit[disabled] { opacity: .7; cursor: progress; }

.cb5r-success { padding: 2.5rem .5rem; text-align: center; outline: none; }
.cb5r-success-icon {
	display: inline-grid; place-items: center; width: 62px; height: 62px; margin-bottom: 1.25rem;
	border-radius: 50%; background: #DCF2E9; color: #167D58;
}
.cb5r-success-icon svg { width: 30px; height: 30px; }
.cb5r-success h2 { font-family: var(--cb5r-serif); font-weight: 400; color: var(--cb5r-navy); font-size: 1.8rem; margin: .5rem 0; }
.cb5r-success p { color: var(--cb5r-muted); }
.cb5r-reference { display: block; padding: .75rem; background: var(--cb5r-tint-2); font-size: 1.25rem; letter-spacing: .07em; color: var(--cb5r-navy); }
.cb5r-general-note {
	margin: 0; padding: .75rem .9rem; font-size: .88rem; line-height: 1.55;
	background: var(--cb5r-tint); border-left: 3px solid var(--cb5r-blue); color: #344E5E;
}
.cb5r [hidden] { display: none !important; }
.cb5r-contact { font-size: .95rem; color: var(--cb5r-muted); }
.cb5r-contact a { color: var(--cb5r-blue); }

/* =============================================================== terms ==== */
.cb5r .cb5r-terms { max-width: 850px; margin: 0 auto; padding-top: 2.5rem; padding-bottom: 5rem; font-size: 1rem; line-height: 1.7; color: #435D6B; }
.cb5r-terms-back { margin: 0 0 1.5rem; font-size: .9rem; }
.cb5r-terms-back a { color: var(--cb5r-blue); text-decoration: none; }
.cb5r-terms-back a:hover { text-decoration: underline; }
.cb5r-terms-subtitle { font-family: var(--cb5r-serif); font-size: 1.5rem; color: var(--cb5r-navy); margin: 0 0 1rem; }
.cb5r-terms-meta { font-size: .95rem; color: var(--cb5r-muted); margin: 0 0 .15rem; }
.cb5r-terms h2 {
	font-family: var(--cb5r-sans); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--cb5r-navy);
	border-top: 1px solid var(--cb5r-line); padding-top: 1.5rem; margin: 1.9rem 0 .8rem;
}
.cb5r-terms p { white-space: pre-wrap; tab-size: 4; margin: 0 0 .75rem; }
.cb5r-terms .cb5r-terms-bullet { display: flex; gap: .6rem; padding-left: 1.4rem; margin: 0 0 .45rem; }
.cb5r-terms .cb5r-terms-bullet span { flex: none; color: var(--cb5r-orange); }
.cb5r-terms .cb5r-link { display: inline-block; margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) { .cb5r-submit { transition: none; } }
