/* Careers page (page-careers.php) — scoped under .savvy-sa.
   Hero is a dark photo banner (SimplySecurity-style); the rest are the usual
   light/grey editorial bands. Base components (.eyebrow, .btn, .btn-on-dark,
   .chip, .sec-head) come from service-areas.css / industry.css. The application
   form (CF7) is added in a later step at the #apply section. */

/* ── Hero (light) ─────────────────────────────────────────────────────── */
.savvy-sa .cr-hero {
  background-color: var(--surface); color: var(--ink);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
}
.savvy-sa .cr-hero__inner { max-width: var(--container); margin: 0 auto; padding: var(--space-24) var(--space-8); }
.savvy-sa .cr-hero .eyebrow { color: var(--ink); }
.savvy-sa .cr-hero h1 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-hero);
  line-height: 1.04; letter-spacing: var(--tracking-display); color: var(--ink);
  margin: 18px 0 0; max-width: 18ch; font-optical-sizing: auto; text-wrap: balance;
}
.savvy-sa .cr-hero__sub {
  font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.55;
  color: var(--text-muted); margin: 22px 0 0; max-width: 60ch; text-wrap: pretty;
}
.savvy-sa .cr-hero .hero-actions { margin-top: var(--space-8); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.savvy-sa .cr-hero .btn-link { color: var(--ink); }

/* ── Shared section shell ────────────────────────────────────────────── */
.savvy-sa .cr-sec__inner { max-width: var(--container); margin: 0 auto; padding: var(--space-24) var(--space-8); }
.savvy-sa .cr-offer  { background: var(--surface); border-bottom: 1px solid var(--border); }
.savvy-sa .cr-values { background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.savvy-sa .cr-roles  { background: var(--surface); border-bottom: 1px solid var(--border); }
.savvy-sa .cr-check  { background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.savvy-sa .cr-sec__lede {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  color: var(--text-muted); margin: 16px 0 0; max-width: 60ch; text-wrap: pretty;
}

/* ── SAVVY values ────────────────────────────────────────────────────── */
.savvy-sa .cr-values__grid { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }
.savvy-sa .cr-value { display: flex; flex-direction: column; gap: var(--space-3); }
.savvy-sa .cr-value__icon { width: 28px; height: 28px; color: var(--ink); }
.savvy-sa .cr-value__icon svg { width: 28px; height: 28px; display: block; }
.savvy-sa .cr-value__word { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); color: var(--ink); font-optical-sizing: auto; }
.savvy-sa .cr-value__word b { color: var(--ink); font-weight: 600; }
.savvy-sa .cr-value__def { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); margin: 0; }
/* Closing mission line — used on the About page where this values section was moved (2026-06-11). */
.savvy-sa .cr-values__mission { margin: var(--space-12) 0 0; max-width: 72ch; font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--text); }

/* ── Roles ───────────────────────────────────────────────────────────── */
.savvy-sa .cr-roles__list { margin-top: var(--space-12); border-top: 1px solid var(--border-strong); }
.savvy-sa .cr-role { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-6); padding: 22px 0; border-bottom: 1px solid var(--border); }
.savvy-sa .cr-role__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); letter-spacing: var(--tracking-tight); color: var(--ink); font-optical-sizing: auto; }
.savvy-sa .cr-role__desc { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }

/* ── Before you apply (checklist) ────────────────────────────────────── */
.savvy-sa .cr-check__list { margin-top: var(--space-12); list-style: none; padding: 0; margin-bottom: 0; max-width: 760px; }
.savvy-sa .cr-check__item { display: flex; gap: var(--space-3); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--border); }
.savvy-sa .cr-check__item:last-child { border-bottom: none; }
.savvy-sa .cr-check__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 8px; }
.savvy-sa .cr-check__text { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--ink); }

/* ── Apply (light) — holds the CF7 application form ──────────────────── */
.savvy-sa .cr-apply { background: var(--surface); scroll-margin-top: 80px; }
.savvy-sa .cr-apply__inner { max-width: var(--container); margin: 0 auto; padding: var(--space-24) var(--space-8); }
.savvy-sa .cr-apply .sec-head { max-width: 760px; }
.savvy-sa .cr-sec__lede a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--border-strong); }
.savvy-sa .cr-sec__lede a:hover { text-decoration-color: var(--ink); }
.savvy-sa .cr-apply__form { max-width: 760px; margin-top: var(--space-12); }
/* File uploads — not covered by the shared text/select input rules */
.savvy-sa .savvy-contact-block__form input[type="file"] {
  display: block; width: 100%; margin-top: var(--space-2);
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-base); border: 1px dashed var(--border-strong); border-radius: 6px; cursor: pointer;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .savvy-sa .cr-values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .savvy-sa .cr-hero__inner, .savvy-sa .cr-sec__inner, .savvy-sa .cr-apply__inner { padding: var(--space-16) var(--space-6); }
  .savvy-sa .cr-values__grid { grid-template-columns: 1fr; }
  .savvy-sa .cr-role { grid-template-columns: 1fr; gap: 4px; }
  .savvy-sa .savvy-contact-block__form .savvy-form__row--2 { grid-template-columns: 1fr; }
}

/* --- Referral fields: revealed only when "I know someone who works there" --- */
/* The row is display:grid, so the plain [hidden] attribute is overridden.
   Attribute + class beats the .savvy-form__row--2 grid rule on specificity. */
.savvy-form__row[hidden] { display: none; }

/* --- Address autocomplete dropdown (careers form, Google Places New) --- */
.savvy-addr { position: relative; }
.savvy-addr__list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 40;
	margin: 4px 0 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	max-height: 260px;
	overflow-y: auto;
	display: none;
}
.savvy-addr__list.is-open { display: block; }
.savvy-addr__item {
	padding: 10px 14px;
	font-size: 0.95rem;
	line-height: 1.35;
	color: #111;
	cursor: pointer;
}
.savvy-addr__item:hover,
.savvy-addr__item.is-active { background: #f2f2f3; }

/* Confirmation panel — replaces the form after a successful application send
   (see the duplicate-submission guard in page-careers.php). Mirrors the card
   tone used elsewhere on the page; monochrome, one accent tick. */
.savvy-sa .cr-apply__done {
	max-width: 640px;
	margin: var(--space-8) 0 0;
	padding: var(--space-12) var(--space-8);
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 4px);
	text-align: center;
}
.savvy-sa .cr-apply__done h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-xl);
	letter-spacing: var(--tracking-tight);
	color: var(--ink);
	margin: 0;
}
.savvy-sa .cr-apply__done p {
	font-family: var(--font-sans);
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	color: var(--text-muted);
	margin: var(--space-3) auto 0;
	max-width: 48ch;
	text-wrap: pretty;
}