/* Raya Careers type layer. Font variables are supplied by next/font in the app shell. */
:root {
  --raya-heading: var(--font-inter), "Inter", RayaSegoe, "Segoe UI", Arial, sans-serif;
  --raya-subheading: var(--font-jetbrains-mono), "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

body {
  font-family: var(--raya-heading);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--raya-heading);
}

.kicker,
.section-index,
.route-kicker,
.account-preview-label,
.job-card-company,
.detail-kicker,
.jobs-brand-option-count,
.jobs-filter-label,
.hero-counter,
.hero-scroll-hint,
.site-header .raya-logo span,
.site-footer,
.newsletter-note {
  font-family: var(--raya-subheading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* The jobs explorer keeps its original RayaSegoe rhythm. Its compact cards,
   filters and metadata were intentionally tuned around that face. */
body.jobs-page,
body.jobs-page h1,
body.jobs-page h2,
body.jobs-page h3,
body.jobs-page h4,
body.jobs-page input,
body.jobs-page select,
body.jobs-page button {
  font-family: RayaSegoe, "Segoe UI", Arial, sans-serif;
}

/* Keep the inner-page shell aligned with the homepage header system. */
.route-header {
  min-height: 76px;
  height: 76px;
  padding: 0 5vw;
  align-items: center;
  background: var(--blue);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.route-logo {
  gap: 0;
}

.route-logo img {
  width: 116px;
}

.route-logo span {
  margin-top: 7px;
  color: var(--orange);
  font-family: RayaSegoe, "Segoe UI", Arial, sans-serif;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.route-nav {
  gap: clamp(14px, 2vw, 28px);
  font-family: RayaSegoe, "Segoe UI", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.route-nav a {
  text-decoration: none;
}

.route-primary-links,
.route-utility-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}

.route-utility-links {
  gap: clamp(10px, 1.4vw, 20px);
  padding-left: clamp(12px, 1.8vw, 24px);
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.route-employee-link {
  color: var(--orange) !important;
}

@media (max-width: 700px) {
  .route-header {
    min-height: 68px;
    height: auto;
    padding: 16px 6vw 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .route-logo img {
    width: 104px;
  }

  .route-nav,
  .route-primary-links,
  .route-utility-links {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .route-nav {
    gap: 14px 18px;
    font-size: 0.68rem;
  }

  .route-primary-links,
  .route-utility-links {
    gap: 10px 16px;
  }

  .route-utility-links {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
  }
}

.kicker,
.section-index,
.route-kicker,
.account-preview-label,
.job-card-company,
.detail-kicker,
.jobs-brand-option-count,
.jobs-filter-label {
  font-weight: 600;
}