/**
 * NSI Clean Water Solutions — tenant theme
 *
 * Design language taken from https://gruenbeckwaterbehandeling.com/ (now in
 * the Nijhuis Saur Industries identity)
 * - Navy:      #003B5C (logo wordmark, headings, footer)
 * - Yellow:    #FFCD00 (logo mark, buttons with navy text)
 * - Slate:     #41505A (photo washes)
 * - Headings:  Larken on the client site (commercial) → Fraunces here
 * - Body:      Noto Sans (same as the client site)
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Noto+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap");

/* 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: "Noto Sans", Arial, sans-serif;
  --nsi-heading-font: "Fraunces", Georgia, serif;
  --nsi-navy: #003B5C;
  --nsi-yellow: #FFCD00;
}

/* ============================================================ Typography
   One system, two faces, three weights — exactly what the @import loads:
   - Fraunces 600:  headings, titles, numbers
   - Noto Sans 600: labels, UI, emphasis
   - Noto Sans 400: running text
   The base CSS asks for 300 / 500 / 700 / 800 in different places, which
   either aren't loaded (the browser fakes or substitutes them) or make the
   same role look different from section to section. */
h1, h2, h3, h4,
.display-3, .display-5, .hero-title, .hero-title span,
.job-title,
.footer .block-21 .heading, .footer .block-21 .heading a,
.section-counter .number,
.nsi-motto div {
  font-family: var(--nsi-heading-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* footer section headings ("LAATSTE VACATURES") are uppercase labels */
.footer .heading-section,
h5, h6,
.btn, label,
.job-meta-value,
.nsi-quote-label,
.pagStep,
.float-sm .fl-fl div,
b, strong {
  font-family: var(--brand-font) !important;
  font-weight: 600 !important;
}

body, p, .lead, li, address, .caption, .nav-link,
p.lead.lead-small,
.nsi-quote blockquote 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;
}
h2, h3 {
  color: var(--nsi-navy);
}

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

/* The second hero-title line sits on white below the video, where yellow
   text is unreadable */
.hero-title .text-brand {
  color: var(--nsi-navy) !important;
}

/* Yellow fills need navy text to stay readable (as on the client site) */
.btn-primary,
.btn.btn-primary,
.job-filter-active,
.filter-submit {
  color: var(--nsi-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(--nsi-navy) !important;
  border-color: var(--nsi-navy) !important;
  color: #fff !important;
}
/* custom.css paints outline buttons in the accent (!important); yellow text
   on white is unreadable, so keep the yellow border and use navy text.
   .btn-outline is the jobs page's Filter / Clear all filters button. */
.btn-outline,
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: var(--nsi-navy) !important;
}

/* ============================================================ Hero */
.nsi-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Navy wash over the video so the white logo and the search stay readable */
.nsi-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 59, 92, 0.45) 0%, rgba(0, 59, 92, 0.8) 100%);
}
.nsi-hero-logo {
  width: 100%;
  max-width: 420px;
  max-height: 150px;
}
.nsi-hero .hero-wrapper {
  position: relative;
  z-index: 1;
}

/* ============================================================ Sections */
.section-counter .number {
  color: var(--nsi-navy);
}

/* "German quality / Dutch thinking" pair from the client site */
.nsi-motto {
  gap: 2.5rem;
}
.nsi-motto div {
  display: flex;
  flex-direction: column;
  font-family: var(--nsi-heading-font);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--nsi-navy);
  padding-left: 1rem;
  border-left: 4px solid var(--nsi-yellow);
}

.nsi-quote,
.nsi-quote blockquote p {
  color: #fff;
}
.nsi-quote blockquote p {
  font-size: 1.2rem;
}
.nsi-quote-label {
  color: var(--nsi-yellow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
.nsi-quote-photo {
  border-radius: 50%;
  border: 4px solid var(--nsi-yellow);
  max-width: 220px;
}

/* Yellow CTA band: navy text instead of white */
.section-brand-primary h2,
.section-brand-primary .lead {
  color: var(--nsi-navy) !important;
}

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