/**
 * ScanModul — tenant theme
 *
 * Per the ScanModul-Belintra Brand Guidelines (11.2025):
 * - Navy:      #0C283B (dominant, 18/24), #0E3856 (second navy)
 * - Blue:      #699EED (ScanModul accent)
 * - Greys:     #DDDBD6, #F3F2F1
 * - Font:      Neue Haas Unica (Bold headings, Regular body). It's a licensed
 *              Monotype face with no free webfont, so the stack falls back to
 *              the near-identical Helvetica Neue / Helvetica until woff2 files
 *              are dropped into ../fonts/ with @font-face rules here.
 *
 * White on #699EED is ~2.6:1, so blue fills carry navy text instead.
 */

/* tenant-theme.css resets --brand-font to its Plus Jakarta Sans default and
   head.php re-emits --brand-dark as #272c35 after it, so the brand face is
   re-declared here (as in 06-headliners) and the navy gets its own var. */
:root {
  --brand-font: "Neue Haas Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sm-navy: #0C283B;
  --sm-navy-2: #0E3856;
  --sm-grey: #DDDBD6;
  --sm-grey-light: #F3F2F1;
}

/* ============================================================ Typography
   Brandbook: Neue Haas Unica Bold for headings, Regular for body — so two
   weights. The base CSS asks for 300 / 500 / 600 / 800 in different places,
   which made the same role look different from section to section.
   - 700: headings, titles, numbers, labels, buttons, emphasis
   - 400: running text */
h1, h2, h3, h4, h5, h6,
.display-3, .display-5, .hero-title, .hero-title span,
.job-title, .heading-section,
.footer .block-21 .heading, .footer .block-21 .heading a,
.section-counter .number,
.btn, label, .pagStep, .job-meta-value,
.float-sm .fl-fl div,
b, strong {
  font-family: var(--brand-font) !important;
  font-weight: 700 !important;
}

body, p, .lead, p.lead.lead-small, li, address, .caption, .nav-link,
.footer a, .footer p {
  font-weight: 400;
}

/* A lead directly above body text or a list differed from it by size only
   (18.4px vs 16px, same weight and colour), which read as a slip rather than
   an intro: match the body there. Leads that stand alone or sit with other
   leads (hero intro, CTA subtitle) keep their size. */
p.lead:has(+ p:not(.lead), + ul, + .row) {
  /* !important: custom.css sets p.lead's size with !important */
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

/* ® is superscript in the copy (<sup>® in locales/*.json, per the client).
   Like the logo: top of the mark level with the top of the capitals, not
   floating above them (vertical-align: super overshoots). Shifted from the
   baseline by (cap height × (1 − size)) ÷ size, in the sup's own em; cap
   height ≈ 0.72em in Helvetica Neue / Neue Haas Unica. line-height 0 keeps
   lines with a mark as tall as the rest. */
sup {
  font-size: 0.55em;          /* legible at body size */
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -0.59em;               /* 0.72 × 0.45 ÷ 0.55 */
  margin-left: 0.04em;
}
.hero-title sup {
  font-size: 0.32em;          /* logo proportion next to big caps */
  top: -1.53em;               /* 0.72 × 0.68 ÷ 0.32 */
}

/* custom.css hardcodes .text-brand to the Dunlop red */
.text-brand {
  color: var(--brand-primary) !important;
}

/* ============================================================ Hero */
/* Static image hero (no brand video): same box as the video, with a navy
   wash so the white logo and the search stay readable. */
.sm-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sm-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 40, 59, 0.55) 0%, rgba(12, 40, 59, 0.8) 100%);
}
.sm-hero-logo {
  width: 100%;
  max-width: 420px;
  max-height: 135px;
}
.sm-hero .hero-wrapper {
  position: relative;
}

/* ============================================================ Blue fills */
/* Navy text on the #699EED accent (buttons, filters, the CTA band) */
.btn-primary,
.btn.btn-primary,
.job-filter-active,
.filter-submit {
  color: var(--sm-navy) !important;
}
/* ...but custom.css fills hovered primary buttons with --brand-dark, which
   the navy text above would vanish into: hover/focus/active go brand navy
   with white text */
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-color: var(--sm-navy) !important;
  border-color: var(--sm-navy) !important;
  color: #fff !important;
}
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: var(--sm-navy) !important;
}
.section-brand-primary h2,
.section-brand-primary .lead,
.section-brand-primary .text-white {
  color: var(--sm-navy) !important;
}

/* ============================================================ Sections */
.bg-light {
  background-color: var(--sm-grey-light) !important;
}

.section-counter .number {
  color: var(--sm-navy);
}

/* "Part of a strong group": ScanModul, Belintra and Asker, logo over link */
.sm-partners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.sm-partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--sm-grey);
  border-radius: 6px;
  text-decoration: none !important;
  transition: border-color 0.2s;
}
.sm-partner:hover {
  border-color: var(--brand-primary);
}
.sm-partner img {
  width: 100%;
  max-width: 170px;
  height: 36px;
  object-fit: contain;
}
.sm-partner .btn {
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .sm-partners {
    grid-template-columns: 1fr;
  }
}

/* style.css hardcodes footer links to the Dunlop red */
.footer a {
  color: var(--brand-primary);
}