/* Premium light theme polish on top of Bootstrap */

:root {
  /* HireFlow SaaS palette — teal primary + subtle gold accents */
  --hf-text: #0f2a2e;
  --hf-teal: #1f4d52;
  --hf-teal-hover: #183d42;
  --hf-teal-active: #14363a;
  --hf-teal-soft: rgba(31, 77, 82, 0.1);
  --hf-teal-border: rgba(31, 77, 82, 0.3);
  --hf-gold: #c8a96a;
  --hf-gold-hover: #e3c889;
  --hf-gold-soft: rgba(200, 169, 106, 0.14);

  --amt-bg: #f8fafb;
  --amt-surface: #ffffff;
  --amt-card-bg: #f1f4f6;
  --amt-text: var(--hf-text);
  /* Muted body: readable on white; teal-gray */
  --amt-muted: #5a6b6e;
  --amt-border: #e2e8ec;
  --amt-shadow: 0 12px 30px rgba(15, 42, 46, 0.08);
  --amt-shadow-sm: 0 8px 18px rgba(15, 42, 46, 0.07);
  --amt-shadow-card-hover: 0 16px 44px rgba(15, 42, 46, 0.1);
  --amt-radius-card: 0.75rem;

  /* Brand interaction tokens (legacy --hf-* mapping preserved) */
  --hf-red: var(--hf-teal);
  --hf-red-hover: var(--hf-teal-hover);
  --hf-red-soft: var(--hf-teal-soft);
  --hf-red-border: var(--hf-teal-border);
  --hf-red-active: var(--hf-teal-active);
  --amt-accent-rgb: 31, 77, 82;

  --hf-red-solid: var(--hf-teal);
  --amt-primary-fg: var(--hf-teal);
  --amt-primary-fg-strong: var(--hf-teal);

  /* Bootstrap primary + links + .text-primary */
  --bs-primary: var(--hf-teal);
  --bs-primary-rgb: 31, 77, 82;
  --bs-primary-text-emphasis: var(--hf-teal);
  --bs-primary-bg-subtle: rgba(31, 77, 82, 0.08);
  --bs-primary-border-subtle: var(--hf-teal-border);
  --bs-link-color: var(--hf-teal);
  --bs-link-hover-color: var(--hf-teal-hover);
  --bs-focus-ring-color: rgba(31, 77, 82, 0.35);

  /* Neutrals + micro gold accent (separators, fallback mark edge) */
  --hf-ink: var(--hf-text);
  --hf-ink-soft: #3d5c62;
  --hf-safety: var(--hf-gold);
  --hf-safety-soft: var(--hf-gold-soft);

  /* Navbar strip height (logo + padding); used by layout min-heights */
  --hf-navbar-strip-h: clamp(5.2rem, 5.5vw + 2.85rem, 8.35rem);

  /* Stacking: watermark = 0 only; all real UI uses ≥10 so nothing sinks under the mark */
  --amt-z-watermark: 0;
  --amt-z-page: 10;
}

/* Primary text utility + default link accent = brand teal */
body .text-primary {
  color: var(--hf-red) !important;
}

a.link-primary,
.link-primary {
  color: var(--hf-red) !important;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  height: 100%;
}

body {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--amt-bg) 28rem);
  color: var(--amt-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  isolation: isolate;
}

/* Prevent rare page-level horizontal scroll from full-bleed 100vw bands and long unbroken tokens.
   Horizontal scrolling is still available inside dedicated wrappers (e.g. tables). */
html,
body {
  overflow-x: hidden;
}

/* Neutral premium hero background for marketing pages (replaces old photo assets). */
.hf-hero--gradient {
  background: radial-gradient(1200px 520px at 18% 22%, rgba(var(--amt-accent-rgb), 0.12) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(980px 480px at 78% 28%, rgba(30, 41, 59, 0.12) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 248, 251, 0.92) 100%);
}

/* Header / main / footer / skip — above global background layers */
body > header {
  position: relative;
  z-index: 1000;
  background: #ffffff;
}

body > main,
body > footer {
  position: relative;
  z-index: var(--amt-z-page);
  isolation: isolate;
}

/* Skip link — position required or z-index does not apply on <a> */
.amt-skip-link {
  position: relative;
  z-index: 1080;
  padding: 0.5rem 1rem;
  border-radius: 0.65rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--amt-primary-fg-strong);
  background: var(--amt-surface);
  border: 2px solid rgba(var(--amt-accent-rgb), 0.45);
  box-shadow: var(--amt-shadow-sm);
}

.amt-skip-link:focus {
  outline: none;
}

.amt-skip-link:focus-visible {
  outline: 3px solid rgba(var(--amt-accent-rgb), 0.45);
  outline-offset: 2px;
}

/* Focus visibility — keyboard and pointer */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-brand:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
summary:focus-visible,
.page-link:focus-visible {
  outline: 2px solid rgba(var(--amt-accent-rgb), 0.55);
  outline-offset: 2px;
}

.btn-close:focus-visible {
  outline: 2px solid rgba(var(--amt-accent-rgb), 0.55);
  outline-offset: 2px;
}

.stretched-link:focus-visible {
  outline-offset: 4px;
}

.amt-navbar {
  position: relative;
  z-index: 1050;
  background: #ffffff;
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
}

.amt-navbar-hf {
  border-bottom-color: rgba(30, 41, 59, 0.1);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04);
/* Strip height matches :root --hf-navbar-strip-h (room for larger horizontal logo) */
}

/* Top bar: logo + Menu; slogan is absolutely centered on the full-width nav (lg+) */
.amt-navbar-container-hf {
  min-height: 62px;
  padding-top: 0.42rem;
  padding-bottom: 0.42rem;
}

.hf-navbar-brand-layer,
.hf-navbar-actions-layer {
  position: relative;
  z-index: 3;
}

/* Compact EN / NL switcher (django.views.i18n.set_language) */
.hf-lang-switcher .hf-lang-btn {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  min-width: 2.25rem;
}

.hf-lang-switcher .hf-lang-btn--active {
  border-color: var(--hf-teal);
  color: var(--hf-teal);
  font-weight: 600;
  background: rgba(var(--amt-accent-rgb), 0.08);
}

/* Viewport-centered slogan — not in flex flow with links, so link width does not shift it */
.hf-navbar-slogan-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  max-width: min(72vw, 26rem);
  text-align: center;
}

/* “builds on people” — typography + theme weight */
.hf-slogan {
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Menu trigger: opens premium nav offcanvas (all breakpoints) */
.hf-nav-menu-trigger {
  color: var(--hf-ink, #1e293b);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(30, 41, 59, 0.16);
  border-radius: 999px;
  padding: 0.35rem 0.95rem 0.35rem 0.65rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.hf-nav-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(30, 41, 59, 0.22);
  color: var(--hf-ink, #1e293b);
}

.hf-nav-menu-trigger:focus-visible {
  outline: 2px solid rgba(var(--amt-accent-rgb), 0.45);
  outline-offset: 2px;
}

/* Premium right-side nav panel (Bootstrap offcanvas, refined) */
.hf-nav-offcanvas.offcanvas {
  --bs-offcanvas-width: clamp(20rem, 36vw, 23.75rem);
  --bs-offcanvas-zindex: 1085;
  --hf-nav-offcanvas-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bs-offcanvas-transition: transform 0.22s var(--hf-nav-offcanvas-ease), opacity 0.2s ease-out,
    box-shadow 0.22s ease-out;
  width: clamp(20rem, 36vw, 23.75rem);
  max-width: min(23.75rem, 100vw);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border-left: 1px solid rgba(30, 41, 59, 0.07);
  box-shadow: -12px 0 40px -8px rgba(15, 23, 42, 0.12);
  opacity: 0;
}

.hf-nav-offcanvas.offcanvas.show {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hf-nav-offcanvas.offcanvas {
    --bs-offcanvas-transition: transform 0.15s ease-out;
    opacity: 1;
  }
}

@keyframes hf-nav-offcanvas-panel-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hf-nav-offcanvas.offcanvas.show .hf-nav-offcanvas-body,
.hf-nav-offcanvas.offcanvas.show .hf-nav-offcanvas-header {
  animation: hf-nav-offcanvas-panel-in 0.2s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .hf-nav-offcanvas.offcanvas.show .hf-nav-offcanvas-body,
  .hf-nav-offcanvas.offcanvas.show .hf-nav-offcanvas-header {
    animation: none;
  }
}

/* Softer dim behind menu (Bootstrap backdrop) */
.offcanvas-backdrop.fade.show {
  background-color: rgba(15, 23, 42, 0.24);
}

.offcanvas-backdrop.fade {
  transition: opacity 0.22s ease-out;
}

.hf-nav-offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(30, 41, 59, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

.hf-nav-offcanvas-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(30, 41, 59, 0.55);
}

.hf-nav-offcanvas-close {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.hf-nav-offcanvas-close:hover {
  opacity: 0.95;
}

.hf-nav-offcanvas-body {
  padding: 1.25rem 1.1rem 1.5rem;
}

.hf-nav-offcanvas-list {
  gap: 0.2rem;
}

.hf-nav-offcanvas-link {
  color: var(--hf-ink, #1e293b);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.65rem 1rem;
  border-radius: 0.65rem;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.hf-nav-offcanvas-link:hover,
.hf-nav-offcanvas-link:focus {
  background-color: rgba(30, 41, 59, 0.05);
  color: var(--hf-ink, #1e293b);
}

.hf-nav-offcanvas-link.active {
  background-color: rgba(var(--amt-accent-rgb), 0.08);
  color: var(--hf-ink, #1e293b);
  font-weight: 600;
}

.hf-nav-offcanvas-apply-wrap {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(30, 41, 59, 0.08);
}

.hf-nav-offcanvas-apply-btn {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  color: rgb(var(--amt-accent-rgb));
  background: rgba(var(--amt-accent-rgb), 0.08);
  border: 1px solid rgba(var(--amt-accent-rgb), 0.22);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hf-nav-offcanvas-apply-btn:hover {
  background: rgba(var(--amt-accent-rgb), 0.12);
  border-color: rgba(var(--amt-accent-rgb), 0.32);
  color: rgb(var(--amt-accent-rgb));
}

.hf-nav-offcanvas-apply-btn.active {
  background: rgba(var(--amt-accent-rgb), 0.14);
  border-color: rgba(var(--amt-accent-rgb), 0.35);
}

.amt-brand {
  letter-spacing: -0.02em;
}

/* Navbar brand image (see base.html onerror fallback) */
.hf-brand-mark {
  width: var(--hf-logo-h, 3.75rem);
  height: var(--hf-logo-h, 3.75rem);
  font-size: 1.65rem;
  color: #fff;
  background: linear-gradient(145deg, var(--hf-ink) 0%, var(--hf-ink-soft) 100%);
  border-left: 3px solid var(--hf-safety);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

/* “builds on people” — light Poppins lockup, centered (base.html .hf-navbar-tagline) */
.hf-brand-tagline-inner {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.26em;
  font-family: "Poppins", "Inter", Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.375rem, 2.85vw, 2.125rem);
  line-height: 1.12;
  text-transform: lowercase;
  white-space: nowrap;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hf-brand-tagline-muted {
  font-weight: 300;
  color: var(--hf-text);
  letter-spacing: 0.02em;
}

/* Navbar slogan — gold accent word (HireFlow brand) */
.hf-accent {
  color: #c8a96a;
}

.hf-brand-tagline-people {
  font-weight: 400;
  color: var(--hf-gold);
  letter-spacing: 0.018em;
}

/* Logo height token (children + fallback mark inherit); scales down on small screens */
.hf-brand-visual {
  /* ~2× prior cap at lg+: readable wordmark without crowding the menu */
  --hf-logo-h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--hf-logo-h);
  min-width: 0;
}

@media (min-width: 992px) {
  .hf-brand-visual {
    --hf-logo-h: 48px;
  }
}

.amt-navbar .navbar-brand.amt-brand-hf {
  column-gap: 0;
  flex-shrink: 0;
}

.hf-brand-logo-img,
.hf-brand-logo {
  flex-shrink: 0;
  /* Force a strong rendered size; do not let width caps under-scale the wordmark height. */
  height: var(--hf-logo-h);
  width: auto;
  /* Wide horizontal wordmark: width cap must not under-scale height (object-fit: contain). */
  max-width: min(92vw, 520px);
  object-fit: contain;
  object-position: left center;
}

/* Navbar brand: size the actual logo image only (no navbar/container sizing changes). */
.amt-navbar .navbar-brand.amt-brand.amt-brand-hf img.hf-brand-logo-img {
  height: 52px;
  width: auto;
  max-height: 100%;
}

@media (min-width: 992px) {
  .hf-brand-logo-img,
  .hf-brand-logo {
    height: var(--hf-logo-h);
    max-width: min(52vw, 560px);
  }
}

@media (max-width: 991.98px) {
  :root {
    --hf-navbar-strip-h: clamp(4.75rem, 4.85vw + 2.35rem, 6.25rem);
  }

  .amt-navbar-hf .amt-navbar-container-hf {
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
  }
}

.hf-brand-visual img.hf-brand-logo-img[data-hf-broken="1"] {
  display: none !important;
}

.amt-shell {
  min-height: calc(100vh - var(--hf-navbar-strip-h));
}

/*
 * Homepage surfaces (templates/core/home.html): full-width bands; transparent so global watermark shows through.
 */
.homepage-surface-section {
  width: 100%;
  background: transparent;
}

.homepage-surface-section--cta {
  background: transparent;
}

/* Certs row: full-width wrapper inside hero; keep transparent so hero art/scrim are unchanged */
.homepage-surface-section--hero-certs {
  background-color: transparent;
}

.amt-card {
  background: #ffffff;
  opacity: 1;
  border: 1px solid var(--amt-border);
  border-radius: var(--amt-radius-card);
  box-shadow: var(--amt-shadow-sm);
  transition: transform 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

.amt-card-hover {
  transition: transform 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .amt-card:not(.amt-card-hover):hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--amt-shadow-card-hover);
  }

  .amt-card-hover:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--amt-shadow-card-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .amt-card,
  .amt-card-hover {
    transition: none;
    will-change: auto;
  }

  .amt-card:hover,
  .amt-card-hover:hover {
    transform: none;
  }
}

.amt-hero {
  background: radial-gradient(1200px 400px at 15% 0%, rgba(var(--amt-accent-rgb), 0.09), transparent 60%),
    radial-gradient(900px 300px at 85% 10%, rgba(194, 65, 12, 0.07), transparent 55%);
}

.hf-home-hero-content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 992px) {
  .hf-home-hero-content {
    padding-top: 1.15rem;
    padding-bottom: 1.1rem;
  }
}

.hf-home-hero-inner h1.display-5,
.hf-jobs-page-hero-inner h1.display-5,
.hf-contact-page-hero-inner h1.display-5,
.hf-about-page-hero-inner h1.display-5 {
  letter-spacing: -0.025em;
  max-width: 48rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 1px rgba(255, 255, 255, 0.9), 0 2px 24px rgba(255, 255, 255, 0.55);
}

.hf-home-hero-inner .lead,
.hf-jobs-page-hero-inner .lead,
.hf-contact-page-hero-inner .lead,
.hf-about-page-hero-inner .lead {
  color: #0f172a;
  opacity: 0.92;
  font-weight: 500;
  max-width: 38rem;
  /* Light halo keeps copy legible where the scrim fades over the photo */
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.98),
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 14px rgba(255, 255, 255, 0.65);
}

@media (min-width: 992px) {
  .hf-home-hero-inner .lead,
  .hf-jobs-page-hero-inner .lead,
  .hf-contact-page-hero-inner .lead,
  .hf-about-page-hero-inner .lead {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

.hf-home-hero-content .btn-primary {
  box-shadow: 0 2px 10px rgba(var(--amt-accent-rgb), 0.22);
}

.hf-home-hero-content .btn-outline-primary {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  background-color: rgba(255, 255, 255, 0.94);
}

/* Jobs public list hero — same scale + scrim philosophy as .hf-home-hero (templates/jobs/public_list.html) */
.hf-jobs-page-hero {
  --hf-jobs-hero-min-h: clamp(26rem, 72vh, 38rem);
  width: 100%;
  min-height: var(--hf-jobs-hero-min-h);
  isolation: isolate;
}

.hf-jobs-hero {
  background-image: url("/static/img/hf/hireflow-jobs-hero.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

.hf-jobs-page-hero:not(.hf-home-hero) {
  --hf-jobs-hero-min-h: 550px;
  min-height: 550px;
  display: flex;
  align-items: center;
}

@media (min-width: 992px) {
  .hf-jobs-page-hero {
    --hf-jobs-hero-min-h: clamp(30rem, 64vh, 42rem);
  }
}

/* Match homepage: left-anchored light scrim for dark type + premium falloff */
.hf-jobs-page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(
      105% 82% at 30% 52%,
      rgba(247, 248, 251, 0.9) 0%,
      rgba(247, 248, 251, 0.74) 38%,
      rgba(247, 248, 251, 0.38) 52%,
      rgba(247, 248, 251, 0.14) 58%,
      rgba(247, 248, 251, 0) 62%
    ),
    linear-gradient(
      105deg,
      rgba(247, 248, 251, 0.92) 0%,
      rgba(247, 248, 251, 0.78) 26%,
      rgba(247, 248, 251, 0.42) 42%,
      rgba(247, 248, 251, 0.16) 50%,
      rgba(247, 248, 251, 0) 56%
    );
}

/* Jobs hero: match About hero overlay (full-background image stays clear on right) */
.hf-jobs-hero .hf-jobs-page-hero-scrim {
  background:
    linear-gradient(
      105deg,
      rgba(248, 250, 252, 0.98) 0%,
      rgba(247, 248, 251, 0.92) 28%,
      rgba(247, 248, 251, 0.62) 46%,
      rgba(247, 248, 251, 0.18) 64%,
      rgba(247, 248, 251, 0) 74%
    );
}

/* Homepage: at least viewport band; grows with content so certs strip is not clipped */
.hf-home-hero.hf-jobs-page-hero {
  --hf-hero-min-h: clamp(24rem, calc(100vh - var(--hf-navbar-strip-h)), 32rem);
  --hf-jobs-hero-min-h: var(--hf-hero-min-h);
  max-width: none;
  min-height: var(--hf-hero-min-h);
  background-color: #f7f8fb;
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding-top: 0.75rem;
  padding-bottom: 4rem;
  background-image: url("/static/img/hf/hero/home-hero-illustration.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Homepage-only: earlier curved fade, stronger left, clear right illustration */
.hf-home-hero .hf-jobs-page-hero-scrim {
  background-image:
    radial-gradient(
      112% 88% at 24% 50%,
      rgba(247, 248, 251, 0.88) 0%,
      rgba(247, 248, 251, 0.7) 34%,
      rgba(247, 248, 251, 0.3) 46%,
      rgba(247, 248, 251, 0.12) 52%,
      rgba(247, 248, 251, 0) 56%
    ),
    linear-gradient(
      105deg,
      rgba(247, 248, 251, 0.9) 0%,
      rgba(247, 248, 251, 0.72) 22%,
      rgba(247, 248, 251, 0.34) 36%,
      rgba(247, 248, 251, 0.12) 44%,
      rgba(247, 248, 251, 0) 50%
    );
}

/* Brand pills — same teal as CTAs (scoped: not all .badge — success/light stay semantic) */
.amt-badge,
.hf-home-hero-badge {
  color: var(--hf-teal);
  border: 1px solid var(--hf-red-border);
  background: var(--hf-red-soft);
}

.amt-muted {
  color: var(--amt-muted);
}

/* Bootstrap utility: align with app muted token (Bootstrap default can fail contrast on white) */
body .text-muted {
  color: var(--amt-muted) !important;
}

/*
 * Bootstrap 5.3 ships .btn-primary / .btn-outline-primary with hardcoded #0d6efd --bs-btn-* tokens.
 * HireFlow primary: teal fill; outline: teal border + light teal hover (no layout changes).
 */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hf-teal);
  --bs-btn-border-color: var(--hf-teal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hf-teal-hover);
  --bs-btn-hover-border-color: var(--hf-teal-hover);
  --bs-btn-focus-shadow-rgb: var(--amt-accent-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hf-teal-active);
  --bs-btn-active-border-color: var(--hf-teal-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(var(--amt-accent-rgb), 0.35);
  --bs-btn-disabled-border-color: rgba(var(--amt-accent-rgb), 0.35);
  background-color: var(--hf-teal);
  border-color: var(--hf-teal);
  transition: all 0.25s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--hf-gold);
  border-color: var(--hf-gold);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Outline: teal border → light teal fill on hover (premium SaaS) */
.btn-outline-primary {
  --bs-btn-color: var(--hf-teal);
  --bs-btn-border-color: var(--hf-teal);
  --bs-btn-hover-color: var(--hf-teal);
  --bs-btn-hover-bg: rgba(var(--amt-accent-rgb), 0.1);
  --bs-btn-hover-border-color: var(--hf-teal);
  --bs-btn-focus-shadow-rgb: var(--amt-accent-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hf-teal);
  --bs-btn-active-border-color: var(--hf-teal);
  --bs-btn-disabled-color: #94a3b8;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #cbd5e1;
  --bs-gradient: none;
  background-color: transparent;
  color: var(--hf-teal);
  border-color: var(--hf-teal);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  color: var(--hf-teal);
  background-color: rgba(var(--amt-accent-rgb), 0.12);
  border-color: var(--hf-teal);
}

/* Secondary outline: set Bootstrap button tokens so hover/active never use Bootstrap’s low-contrast pair on <a class="btn"> */
.btn-outline-secondary {
  --bs-btn-color: #374151;
  --bs-btn-border-color: #6b7280;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #4b5563;
  --bs-btn-hover-border-color: #4b5563;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #4b5563;
  --bs-btn-active-border-color: #4b5563;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background-color: transparent;
}

/* Bootstrap’s a.btn-outline-secondary:hover wins over .btn-outline-secondary:hover (higher specificity) — keep solid hover/focus fill + white text (AA). */
body .btn.btn-outline-secondary:hover,
body .btn.btn-outline-secondary:focus-visible {
  color: #ffffff;
  background-color: #4b5563;
  border-color: #4b5563;
}

.btn-outline-warning {
  color: #92400e;
  border-color: #d97706;
  background-color: transparent;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus-visible {
  color: #422006;
  background-color: #fde68a;
  border-color: #d97706;
}

/* Muted navigation links (back to dashboard, etc.): ensure link text meets contrast */
a.amt-muted {
  color: var(--amt-muted);
  text-decoration-color: rgba(71, 85, 105, 0.45);
}

a.amt-muted:hover {
  color: var(--amt-text);
  text-decoration-color: rgba(15, 23, 42, 0.35);
}

.amt-footer {
  border-top: 1px solid rgba(229, 231, 235, 0.9);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}

.amt-footer-hf {
  border-top-color: rgba(30, 41, 59, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(247, 248, 251, 0.95) 100%);
}

/* Global corporate footer (templates/base.html) — compact, solid ground */
.hf-global-footer {
  border-top: 1px solid rgba(30, 41, 59, 0.09);
  background: #f5f7f9;
  backdrop-filter: none;
}

.hf-global-footer-container {
  padding-top: clamp(1.35rem, 1rem + 1vw, 1.65rem) !important;
  padding-bottom: clamp(1.35rem, 1rem + 1vw, 1.65rem) !important;
}

@media (min-width: 992px) {
  .hf-global-footer-container {
    padding-top: clamp(1.65rem, 1.35rem + 0.6vw, 1.95rem) !important;
    padding-bottom: clamp(1.65rem, 1.35rem + 0.6vw, 1.95rem) !important;
  }
}

.hf-global-footer-brand {
  margin-bottom: 0.35rem;
}

@media (min-width: 1200px) {
  .hf-global-footer-brand {
    margin-bottom: 0;
    padding-right: 0.35rem;
  }
}

.hf-global-footer-brand .hf-global-footer-logo,
.hf-global-footer .hf-global-footer-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Force a clear rendered size (avoid "max-height ceiling" making it look weak). */
  height: 62px;
  width: auto;
  max-width: min(420px, 92vw);
  max-height: 70px;
  object-fit: contain;
  object-position: center;
}

.hf-global-footer-address {
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.48;
  color: var(--amt-muted);
}

.hf-global-footer-strong {
  font-weight: 600;
  color: var(--amt-text);
  font-size: 0.875rem;
}

.hf-global-footer-dl-row {
  margin-bottom: 0.5rem;
}

.hf-global-footer-dl-row:last-child {
  margin-bottom: 0;
}

.hf-global-footer-dl dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.08rem;
}

.hf-global-footer-dl dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.42;
  color: var(--amt-text);
}



.hf-global-footer-legal li + li {
  margin-top: 0.28rem;
}

.hf-global-footer-link {
  color: var(--amt-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 120ms ease, text-underline-offset 120ms ease;
}

.hf-global-footer-link:hover {
  color: var(--hf-red);
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.hf-global-footer-address .hf-global-footer-link {
  font-weight: 500;
}

.hf-global-footer-link:focus {
  outline: none;
}

.hf-global-footer-link:focus-visible {
  outline: 2px solid rgba(var(--amt-accent-rgb), 0.45);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

.hf-global-footer-certs {
  margin-top: 1.35rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

@media (min-width: 992px) {
  .hf-global-footer-certs {
    margin-top: 1.45rem;
    padding-top: 1.1rem;
  }
}

.hf-global-footer-certs-label {
  letter-spacing: 0.1em;
  color: #64748b;
  font-size: 0.7rem !important;
}

.hf-global-footer-certs-list {
  column-gap: clamp(0.7rem, 1.8vw, 1.35rem);
  row-gap: 0.65rem;
}

.hf-global-footer-cert-slot {
  flex-shrink: 0;
}

.hf-global-footer-cert-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 0.3rem;
}

.hf-global-footer-cert-link:focus {
  outline: none;
}

.hf-global-footer-cert-link:focus-visible {
  outline: 2px solid rgba(var(--amt-accent-rgb), 0.45);
  outline-offset: 2px;
}

.hf-global-footer-cert-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 34px;
  max-width: min(6.5rem, 28vw);
  object-fit: contain;
  object-position: center;
  opacity: 0.9;
  transition: opacity 120ms ease, transform 120ms ease;
}

@media (min-width: 768px) {
  .hf-global-footer-cert-logo {
    max-height: 38px;
    max-width: min(7rem, 22vw);
  }
}

.hf-global-footer-cert-link:hover .hf-global-footer-cert-logo,
.hf-global-footer-cert-link:focus-visible .hf-global-footer-cert-logo {
  opacity: 1;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .hf-global-footer-cert-logo {
    transition: none;
  }

  .hf-global-footer-cert-link:hover .hf-global-footer-cert-logo,
  .hf-global-footer-cert-link:focus-visible .hf-global-footer-cert-logo {
    transform: none;
  }
}

/* Slight per-mark balance in footer strip (smaller than homepage hero) */
.hf-global-footer .hf-global-footer-cert-logo.cert-logo--nbbu {
  max-height: 32px;
  max-width: min(5.75rem, 30vw);
}

/* About page — photo hero (Contact/home family) + main rhythm (templates/core/about.html) */
.hf-about-page-hero {
  --hf-about-hero-min-h: clamp(26rem, 78vh, 38rem);
  width: 100%;
  min-height: var(--hf-about-hero-min-h);
  isolation: isolate;
}

.hf-about-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background-image: url("/static/images/hero/about-hero.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

@media (min-width: 992px) {
  .hf-about-page-hero {
    --hf-about-hero-min-h: clamp(30rem, 68vh, 42rem);
  }
}

.hf-about-page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      rgba(248, 250, 252, 0.97) 0%,
      rgba(247, 248, 251, 0.9) 22%,
      rgba(247, 248, 251, 0.55) 44%,
      rgba(247, 248, 251, 0.14) 68%,
      rgba(15, 23, 42, 0.14) 100%
    ),
    linear-gradient(to top, rgba(15, 23, 42, 0.16) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.07) 0%, transparent 30%);
}

/* About hero: match homepage read band (keep right illustration crisp) */
.hf-about-hero .hf-about-page-hero-scrim {
  background:
    linear-gradient(
      105deg,
      rgba(248, 250, 252, 0.98) 0%,
      rgba(247, 248, 251, 0.92) 28%,
      rgba(247, 248, 251, 0.62) 46%,
      rgba(247, 248, 251, 0.18) 64%,
      rgba(247, 248, 251, 0) 74%
    );
}

.hf-about-page-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 2.35rem;
  padding-bottom: 3.75rem;
}

@media (min-width: 992px) {
  .hf-about-page-hero-content {
    padding-top: 2.65rem;
    padding-bottom: 4.5rem;
  }
}

.hf-about-page-hero-inner .lead.amt-muted {
  color: var(--amt-muted);
  opacity: 1;
  font-weight: 400;
}

/* About in-page nav — branded secondary nav (templates/core/about.html) */
.hf-about-page-nav {
  background: transparent;
}

.hf-about-page-nav-list {
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 0.65rem;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

@media (min-width: 576px) {
  .hf-about-page-nav-list {
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
  }
}

@media (min-width: 992px) {
  .hf-about-page-nav-list {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.hf-about-page-nav-item {
  display: flex;
  align-items: center;
}

.hf-about-page-nav-item + .hf-about-page-nav-item {
  border-left: 1px solid rgba(15, 23, 42, 0.12);
  padding-left: 1rem;
  margin-left: 1rem;
}

@media (max-width: 575.98px) {
  .hf-about-page-nav-item + .hf-about-page-nav-item {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }

  .hf-about-page-nav-list {
    column-gap: 1rem;
    row-gap: 0.5rem;
  }
}

.hf-about-page-nav-link {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hf-ink-soft);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.hf-about-page-nav-link:hover {
  color: var(--hf-red);
  border-bottom-color: rgba(var(--amt-accent-rgb), 0.45);
}

.hf-about-page-nav-link:focus-visible {
  outline: 2px solid rgba(var(--amt-accent-rgb), 0.45);
  outline-offset: 3px;
  border-radius: 0.2rem;
}

.hf-about-page section[id].hf-about-section {
  scroll-margin-top: 5.75rem;
}

@media (min-width: 992px) {
  .hf-about-page section[id].hf-about-section {
    scroll-margin-top: 6rem;
  }
}

.hf-about-page-main {
  background: linear-gradient(180deg, #fafbfc 0%, var(--amt-bg) 14rem);
}

.hf-about-page-prose {
  max-width: 54rem;
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

@media (min-width: 992px) {
  .hf-about-page-prose {
    padding-top: 3.5rem;
    padding-bottom: 3.75rem;
  }
}

.hf-about-section-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--amt-text);
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .hf-about-section-title {
    font-size: 1.4rem;
    margin-bottom: 1.15rem;
  }
}

.hf-about-section-title--lg {
  font-size: 1.5rem;
}

@media (min-width: 992px) {
  .hf-about-section-title--lg {
    font-size: 1.75rem;
    margin-bottom: 1.35rem;
  }
}

.hf-about-section-title--vision {
  font-size: 1.5rem;
  color: var(--hf-ink);
}

@media (min-width: 992px) {
  .hf-about-section-title--vision {
    font-size: 1.65rem;
  }
}

.hf-about-section + .hf-about-section {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

@media (min-width: 992px) {
  .hf-about-section + .hf-about-section {
    margin-top: 3rem;
    padding-top: 3rem;
  }
}

.hf-about-section-body p {
  max-width: 42rem;
  line-height: 1.68;
  font-size: 1.0625rem;
}

.hf-about-section--emphasis .hf-about-section-body--wide p {
  max-width: 48rem;
}

.hf-about-section--split .hf-about-section-body p {
  max-width: none;
}

@media (min-width: 992px) {
  .hf-about-section-body p {
    font-size: 1.075rem;
  }
}

.hf-about-section--intro .hf-about-section-body > p:first-of-type {
  font-size: 1.085rem;
}

@media (min-width: 992px) {
  .hf-about-section--intro .hf-about-section-body > p:first-of-type {
    font-size: 1.1rem;
  }
}

.hf-about-vision-panel {
  padding: 1.65rem 1.35rem;
  border-radius: 1rem;
  border: 1px solid rgba(var(--amt-accent-rgb), 0.2);
  background: linear-gradient(
    145deg,
    rgba(var(--amt-accent-rgb), 0.07) 0%,
    var(--amt-surface) 42%,
    #f8fafc 100%
  );
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

@media (min-width: 992px) {
  .hf-about-vision-panel {
    padding: 2rem 1.85rem;
  }
}

.hf-about-vision-panel .hf-about-section-title--vision {
  margin-bottom: 1.1rem;
}

.hf-about-accent-rail {
  padding-left: 1.25rem;
  border-left: 3px solid var(--hf-red);
}

@media (min-width: 992px) {
  .hf-about-accent-rail {
    padding-left: 1.5rem;
  }
}

.hf-about-page-cta {
  border-top: 1px solid var(--amt-border);
  background: var(--amt-surface);
  padding-top: 2.25rem;
}

@media (min-width: 992px) {
  .hf-about-page-cta {
    padding-top: 2.75rem;
  }
}

/* Contact page hero — homepage scale + layered scrim (light text column / photo read); not a 1:1 copy of home */
.hf-contact-page-hero {
  --hf-contact-hero-min-h: clamp(26rem, 78vh, 38rem);
  width: 100%;
  min-height: var(--hf-contact-hero-min-h);
  isolation: isolate;
}

.hf-contact-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background-image: url("/static/images/hero/contact-hero.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

@media (min-width: 992px) {
  .hf-contact-page-hero {
    --hf-contact-hero-min-h: clamp(30rem, 68vh, 42rem);
  }
}

/* Light left read (homepage family) + soft falloff into photo + gentle base + foot shadow */
.hf-contact-page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      rgba(248, 250, 252, 0.97) 0%,
      rgba(247, 248, 251, 0.9) 22%,
      rgba(247, 248, 251, 0.55) 44%,
      rgba(247, 248, 251, 0.14) 68%,
      rgba(15, 23, 42, 0.12) 100%
    ),
    linear-gradient(to top, rgba(15, 23, 42, 0.14) 0%, transparent 48%),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 0%, transparent 28%);
}

/* Contact hero: match About hero overlay (keep right illustration crisp) */
.hf-contact-hero .hf-contact-page-hero-scrim {
  background:
    linear-gradient(
      105deg,
      rgba(248, 250, 252, 0.98) 0%,
      rgba(247, 248, 251, 0.92) 28%,
      rgba(247, 248, 251, 0.62) 46%,
      rgba(247, 248, 251, 0.18) 64%,
      rgba(247, 248, 251, 0) 74%
    );
}

/* Hero subtitle — softer than main headline while keeping lead scale */
.hf-contact-page-hero-inner .lead.amt-muted {
  color: var(--amt-muted);
  opacity: 1;
  font-weight: 400;
}

/* Main contact column — wider readable band than default narrow col */
.hf-contact-page-body {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.hf-contact-page-intro h2 {
  letter-spacing: -0.02em;
}

.hf-contact-card {
  padding: 1.5rem 1.35rem;
}

@media (min-width: 576px) {
  .hf-contact-card {
    padding: 1.65rem 1.65rem;
  }
}

@media (min-width: 992px) {
  .hf-contact-card {
    padding: 2rem 2.15rem;
  }
}

@media (min-width: 1200px) {
  .hf-contact-card {
    padding: 2.2rem 2.45rem;
  }
}

.hf-contact-meta {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.hf-contact-map-link {
  margin-top: 0.85rem;
}

/* Contact page — office + Google Maps (templates/core/contact.html) */
.hf-contact-address {
  font-style: normal;
}

.hf-contact-map-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 1.25rem;
  border-radius: 0.65rem;
  overflow: hidden;
  background: #e2e8f0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  aspect-ratio: 4 / 3;
  min-height: 220px;
}

@media (min-width: 992px) {
  .hf-contact-map-wrap {
    aspect-ratio: 1 / 1;
    min-height: 260px;
    max-height: 320px;
  }
}

.hf-contact-map-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.amt-form-control {
  border-radius: 0.9rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.amt-field-anchor {
  scroll-margin-top: calc(var(--hf-navbar-strip-h, 5.75rem) + 1rem);
}

/* Contact form: small premium rhythm (public page only, no structure changes) */
.hf-contact-card .form-label {
  margin-bottom: 0.4rem;
}

.hf-contact-card .amt-form-control {
  min-height: 2.85rem;
}

.hf-contact-card textarea.amt-form-control {
  min-height: 7rem;
  line-height: 1.55;
}

.hf-contact-card button.btn {
  margin-top: 0.25rem;
}

/* Agency list search — first-class, easy to spot (local UI only) */
.amt-search-panel {
  border: 1px solid var(--hf-red-border);
  background: var(--hf-red-soft);
  border-radius: 0.9rem;
}

.amt-search-panel .form-control {
  min-height: 2.75rem;
  font-size: 1rem;
}

/* Export options — collapsible panel on agency lists */
.amt-export-details > summary {
  cursor: pointer;
  list-style: none;
}

.amt-export-details > summary::-webkit-details-marker {
  display: none;
}

.amt-btn-pill {
  border-radius: 999px;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

@media (hover: hover) and (pointer: fine) {
  .btn.amt-btn-pill {
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .btn.amt-btn-pill:not(.btn-primary):hover {
    transform: translateY(-1px);
  }
}

/* Site-wide Django messages (base.html) — card-like, brand-aligned (no default Bootstrap green wash) */
.amt-alert-site {
  margin-bottom: 0;
  border-radius: 0.625rem;
  border: 1px solid var(--amt-border);
  box-shadow: var(--amt-shadow-sm);
  font-size: 0.9375rem;
  line-height: 1.45;
  padding: 0.75rem 1rem 0.75rem 1rem;
}

.amt-alert-site--success {
  background: linear-gradient(105deg, #ffffff 0%, #f1f5f9 100%);
  color: var(--hf-ink);
  border-color: rgba(30, 41, 59, 0.12);
  border-left: 3px solid #0f766e;
}

.amt-alert-site--danger {
  background: linear-gradient(105deg, #fafcfc 0%, #eef6f7 100%);
  color: var(--hf-ink);
  border-color: var(--hf-teal-border);
  border-left: 3px solid var(--hf-teal-active);
}

.amt-alert-site--warning {
  background: linear-gradient(105deg, #fffdfb 0%, #fff7ed 100%);
  color: var(--hf-ink);
  border-color: rgba(200, 169, 106, 0.35);
  border-left: 3px solid var(--hf-gold);
}

.amt-alert-site--info {
  background: linear-gradient(105deg, #ffffff 0%, #f8fafc 100%);
  color: var(--hf-ink);
  border-color: rgba(51, 65, 85, 0.14);
  border-left: 3px solid #64748b;
}

/* Form-level flashes (templates keep .alert-danger etc.) — same visual language */
.amt-alert-flash.alert-success {
  background: linear-gradient(105deg, #ffffff 0%, #f1f5f9 100%);
  color: var(--hf-ink);
  border-color: rgba(30, 41, 59, 0.12) !important;
  border-left: 3px solid #0f766e !important;
}
.amt-alert-flash.alert-danger {
  background: rgba(var(--amt-accent-rgb), 0.09);
  color: var(--hf-text);
}
.amt-alert-flash.alert-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}
.amt-alert-flash.alert-info {
  background: rgba(71, 85, 105, 0.1);
  color: #334155;
}

/* Certification detail pages — trust / information layout (templates/core/certification_detail.html) */
.hf-cert-page {
  position: relative;
  isolation: isolate;
}

/* Breadcrumb: light, unobtrusive */
.hf-cert-page-breadcrumb {
  margin-bottom: 1.75rem;
}

@media (min-width: 992px) {
  .hf-cert-page-breadcrumb {
    margin-bottom: 2rem;
  }
}

.hf-cert-page-breadcrumb-list {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.hf-cert-page-breadcrumb-list .breadcrumb-item + .breadcrumb-item::before {
  color: #94a3b8;
}

.hf-cert-page-breadcrumb-link {
  color: var(--amt-muted);
  text-decoration: none;
}

.hf-cert-page-breadcrumb-link:hover {
  color: var(--amt-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hf-cert-page-breadcrumb-list .active {
  color: #64748b;
  font-weight: 500;
}

/* Header band: subtle depth, full-bleed wash behind title block */
.hf-cert-page-header {
  position: relative;
  padding-bottom: 2rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

@media (min-width: 992px) {
  .hf-cert-page-header {
    padding-bottom: 2.5rem;
    margin-bottom: 2.75rem;
  }
}

.hf-cert-page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: -0.5rem;
  bottom: -1px;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.92) 0%,
    rgba(247, 248, 251, 0.45) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.hf-cert-page-kicker {
  letter-spacing: 0.12em;
  color: #64748b;
}

.hf-cert-page-title {
  font-size: clamp(1.85rem, 1.1rem + 2.8vw, 2.65rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: min(100%, 22rem);
}

@media (min-width: 576px) {
  .hf-cert-page-title {
    max-width: min(100%, 36rem);
  }
}

.hf-cert-page-lede {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.55;
  font-weight: 500;
  max-width: 38rem;
}

/* Body copy: comfortable measure and rhythm */
.hf-cert-page-prose {
  max-width: 40rem;
}

.hf-cert-page-body {
  font-size: 1rem;
  line-height: 1.65;
}

.hf-cert-page-prose .hf-cert-page-body + .hf-cert-page-body {
  margin-top: 1.35rem;
}

@media (min-width: 992px) {
  .hf-cert-page-prose .hf-cert-page-body + .hf-cert-page-body {
    margin-top: 1.5rem;
  }
}

.hf-cert-page-back-wrap {
  margin-top: 2rem;
}

@media (min-width: 992px) {
  .hf-cert-page-grid > .order-lg-1 .hf-cert-page-back-wrap {
    margin-top: 1.75rem;
  }
}

.hf-cert-page-back-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--amt-muted);
  text-decoration: none;
}

.hf-cert-page-back-link:hover {
  color: var(--amt-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Logo panel: deliberate frame, no heavy chrome */
.hf-cert-page-logo-panel {
  min-height: clamp(10.5rem, 30vw, 15rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
  background: var(--amt-surface);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 1rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 6px 22px rgba(15, 23, 42, 0.045);
}

.hf-cert-page-aside .hf-cert-page-back-wrap {
  margin-top: 1.25rem;
}

@media (min-width: 992px) {
  .hf-cert-page-aside .hf-cert-page-back-wrap {
    margin-top: 1.5rem;
  }
}

.hf-cert-page .hf-cert-page-logo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(5rem, 15vw, 8.25rem);
  object-fit: contain;
  object-position: center;
}

@media (min-width: 992px) {
  .hf-cert-page .hf-cert-page-logo {
    max-height: clamp(6.25rem, 12vw, 9rem);
  }
}

/* -------------------------------------------------------------------------- */
/* Employee portal (flex workers) — dashboard shell; see employee_dashboard.html */
/* -------------------------------------------------------------------------- */

.hf-emp-portal {
  max-width: 75rem;
}

.hf-emp-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

.hf-emp-title {
  font-size: 2rem;
  font-weight: 600;
  color: #111827;
}

.hf-emp-portal-section-title {
  letter-spacing: 0.04em;
}

.hf-emp-dash-action-inner {
  padding: 1.25rem 1.35rem;
  min-height: 7.5rem;
}

.hf-emp-dash-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  border-radius: 0.65rem;
  background: rgba(var(--amt-accent-rgb), 0.08);
  font-size: 1.15rem;
}

.hf-emp-dash-action .stretched-link::after {
  border-radius: inherit;
}

.hf-emp-portal-roadmap {
  border: 1px solid rgba(15, 23, 42, 0.07);
}

.hf-emp-portal-roadmap-list li + li {
  margin-top: 0.35rem;
}

.hf-emp-portal-aside {
  border: 1px solid rgba(15, 23, 42, 0.07);
}

/* -------------------------------------------------------------------------- */
/* Employee portal — premium text links + focus (no default browser blue)   */
/* -------------------------------------------------------------------------- */

.hf-emp-portal {
  --hf-emp-link-fg: #64748b;
  --hf-emp-link-fg-hover: var(--hf-red);
  --hf-emp-focus-ring: 0 0 0 2px rgba(var(--amt-accent-rgb), 0.38);
}

/*
 * Text links: explicit .hf-emp-link plus Django ClearableFileInput output
 * ("Currently: <a href="…">filename</a>") which has no classes — scope with form a[…].
 */
.hf-emp-portal a.hf-emp-link,
.hf-emp-portal form a[href]:not(.btn):not(.stretched-link):not(.hf-emp-link) {
  color: var(--hf-emp-link-fg);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.hf-emp-portal a.hf-emp-link:hover,
.hf-emp-portal form a[href]:not(.btn):not(.stretched-link):not(.hf-emp-link):hover {
  color: var(--hf-emp-link-fg-hover);
}

.hf-emp-portal a.hf-emp-link:focus-visible,
.hf-emp-portal form a[href]:not(.btn):not(.stretched-link):not(.hf-emp-link):focus-visible {
  outline: none;
  box-shadow: var(--hf-emp-focus-ring);
  border-radius: 3px;
}

.hf-emp-portal a.hf-emp-link--back {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #64748b;
}

.hf-emp-portal a.hf-emp-link--back:hover {
  color: var(--hf-red);
}

.hf-emp-portal a.hf-emp-link--inline {
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.25rem;
  align-items: center;
}

.hf-emp-portal a.hf-emp-link--muted {
  font-weight: 500;
  color: #64748b;
}

.hf-emp-portal a.hf-emp-link--muted:hover {
  color: var(--hf-red);
}

/* Card hit targets: brand focus instead of browser default */
.hf-emp-portal a.stretched-link:focus-visible {
  outline: none;
  box-shadow: var(--hf-emp-focus-ring);
  border-radius: inherit;
}

/* Form fields: brand-tinted focus (replace Bootstrap blue ring inside portal) */
.hf-emp-portal .form-control:focus,
.hf-emp-portal .form-select:focus,
.hf-emp-portal textarea:focus,
.hf-emp-portal input[type="file"]:focus-visible {
  border-color: rgba(var(--amt-accent-rgb), 0.45);
  box-shadow: 0 0 0 0.2rem rgba(var(--amt-accent-rgb), 0.12);
}

/* Single premium focus cue: drop browser/Bootstrap outline so it does not stack with shadow */
.hf-emp-portal .btn:focus-visible {
  outline: none;
  box-shadow: var(--hf-emp-focus-ring);
}

/* -------------------------------------------------------------------------- */
/* Employee portal — forms, tables, uploads, empty states (premium polish)   */
/* -------------------------------------------------------------------------- */

.hf-emp-portal > header,
.hf-emp-portal header.hf-emp-page-header,
.hf-emp-portal header.hf-emp-portal-header {
  margin-bottom: 1.5rem;
}

.hf-emp-portal header .hf-emp-title {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.hf-emp-portal form > .alert {
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
}

.hf-emp-portal form .btn[type="submit"] {
  margin-top: 0.35rem;
}

.hf-emp-portal .form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #334155;
  margin-bottom: 0.35rem;
}

.hf-emp-portal form .mb-3 {
  margin-bottom: 1.125rem;
}

.hf-emp-portal .form-text {
  margin-top: 0.35rem;
  line-height: 1.45;
  color: #64748b;
}

.hf-emp-portal .invalid-feedback.d-block {
  margin-top: 0.35rem;
  padding: 0.35rem 0.35rem 0.35rem 0.65rem;
  border-left: 2px solid rgba(var(--amt-accent-rgb), 0.5);
  border-radius: 0 0.25rem 0.25rem 0;
  font-size: 0.8125rem;
  color: var(--hf-text);
  background: rgba(var(--amt-accent-rgb), 0.06);
}

.hf-emp-portal textarea.form-control {
  min-height: 5.75rem;
  line-height: 1.5;
}

/* File upload: calmer than flat Bootstrap file input */
.hf-emp-portal input[type="file"].form-control,
.hf-emp-portal input.form-control[type="file"] {
  cursor: pointer;
  line-height: 1.5;
  padding: 0.55rem 0.85rem;
  border-style: dashed;
  border-color: rgba(15, 23, 42, 0.16);
  background-color: rgba(248, 250, 252, 0.85);
  border-radius: 0.5rem;
}

.hf-emp-portal input[type="file"]::file-selector-button,
.hf-emp-portal input[type="file"]::-webkit-file-upload-button {
  margin-right: 1rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.35rem;
  background: #fff;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hf-emp-portal input[type="file"]::file-selector-button:hover,
.hf-emp-portal input[type="file"]::-webkit-file-upload-button:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.16);
  color: #1e293b;
}

/* Tables in portal cards: lighter chrome, clearer hierarchy */
.hf-emp-portal .table {
  --bs-table-border-color: rgba(15, 23, 42, 0.08);
}

.hf-emp-portal .table thead th {
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  background: rgba(248, 250, 252, 0.98) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  vertical-align: middle;
}

.hf-emp-portal .table tbody td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #1e293b;
}

.hf-emp-portal .table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: rgba(15, 23, 42, 0.035);
}

/* Card section title above forms */
.hf-emp-portal .amt-card > h2.h6 {
  color: #0f172a;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

/* Recent submissions sidebar list */
.hf-emp-portal .hf-emp-portal-aside li.border-bottom {
  border-color: rgba(15, 23, 42, 0.07) !important;
}

/* Empty states (payslips, documents): icon in soft disc */
.hf-emp-portal .amt-card.text-center [aria-hidden="true"].text-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-inline: auto;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: rgba(var(--amt-accent-rgb), 0.09);
  color: var(--hf-red);
}

.hf-emp-portal .amt-card.text-center h2.h6 {
  color: #0f172a;
}

/* Dashboard support cards: slightly calmer surface */
.hf-emp-portal .hf-emp-activity .small.text-break,
.hf-emp-portal .hf-emp-portal-roadmap .small {
  line-height: 1.5;
}

/* Dashboard: recent activity list */
.hf-emp-activity {
  border: 1px solid rgba(15, 23, 42, 0.07);
}

.hf-emp-activity-item-border {
  border-bottom: 1px solid rgba(30, 41, 59, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .hf-emp-portal a.hf-emp-link {
    transition: none;
  }

  .hf-emp-dash-action.amt-card-hover:hover {
    transform: none;
    box-shadow: var(--amt-shadow-sm);
  }
}

/* HireFlow UI: public chrome + page-level UI styles. */

/* —— RMS v1: public job + match score + application status —— */
.hf-public-job .job-description {
  line-height: 1.65;
  max-width: 46rem;
}

.hf-public-job-sticky {
  position: sticky;
  bottom: 0;
  z-index: 1020;
}

.hf-match-ring {
  --pct: 0;
  --ring-size: 5.5rem;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: conic-gradient(
    var(--hf-red) calc(var(--pct) * 1%),
    rgba(15, 23, 42, 0.08) 0
  );
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.hf-match-ring::after {
  content: "";
  width: calc(var(--ring-size) - 14px);
  height: calc(var(--ring-size) - 14px);
  border-radius: 50%;
  background: #fff;
  grid-area: 1 / 1;
}

.hf-match-ring__value {
  grid-area: 1 / 1;
  z-index: 1;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--hf-ink);
}

.hf-match-ring--lg {
  --ring-size: 7rem;
}

.hf-match-ring--lg .hf-match-ring__value {
  font-size: 1.35rem;
}

.hf-match-hero {
  border: 1px solid rgba(var(--amt-accent-rgb), 0.2);
  background: linear-gradient(135deg, rgba(var(--amt-accent-rgb), 0.06), #fff 55%);
  /* Allow long match summaries / titles to shrink inside flex rows (worst-case QA). */
  min-width: 0;
}

.hf-match-hero > .d-flex.min-w-0 {
  flex: 1 1 auto;
  min-width: 0;
}

/* Let long job titles + match summaries consume remaining row width instead of intrinsic min-content width. */
.hf-match-hero__text {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
}

.hf-match-summary--critical {
  color: #b91c1c;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hf-match-summary--neutral {
  color: var(--amt-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hf-match-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hf-status-pill {
  font-weight: 600;
  padding-inline: 0.65rem;
}

.hf-status-pill--new {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.hf-status-pill--contacted {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.hf-status-pill--interview {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.hf-status-pill--hired {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
  border: 1px solid rgba(22, 163, 74, 0.35);
}

.hf-status-pill--rejected {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  border: 1px solid rgba(100, 116, 139, 0.35);
}

tr.hf-app-row:hover {
  --bs-table-hover-bg: rgba(var(--amt-accent-rgb), 0.06);
  cursor: pointer;
}

tr.hf-app-row:focus {
  outline: 2px solid rgba(var(--amt-accent-rgb), 0.45);
  outline-offset: -2px;
}

/* Recruiter applications table: long emails stay scannable without widening the grid */
.hf-cell-clip {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Contain horizontal overflow inside the applications table card (not the whole page). */
.hf-app-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  /* IMPORTANT: do not clip vertically; let the table/card grow naturally. */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Keep a stable minimum grid width for desktop scanning; allow scroll on smaller viewports. */
.hf-app-table-wrap > table {
  width: 100%;
  min-width: 58rem;
}

/* Prevent long, unbroken job slugs/emails from forcing page-level overflow. */
.hf-app-table-wrap .font-monospace,
.hf-app-table-wrap .hf-cell-clip {
  max-width: 100%;
}

/*
 * Sticky table headers + overflow-x scroll containers can cause visual overlap/clipping
 * in some browsers/layouts. Prioritize correct rendering over stickiness on this page.
 */
@media (min-width: 768px) {
  .hf-app-table-wrap thead th {
    position: static;
    top: auto;
    z-index: auto;
    box-shadow: none;
  }
}

/* Homepage RMS sell block */
.hf-rms-eyebrow {
  color: var(--hf-red);
}

.hf-rms-benefit {
  background: #ffffff;
  opacity: 1;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--amt-shadow-sm);
  border-radius: var(--amt-radius-card);
  transition: transform 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .hf-rms-benefit:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--amt-shadow-card-hover);
  }
}