/* Shared nav fixes, loaded last so they apply on top of every page's own
   stylesheet. Keeps the nav consistent across all pages and languages. */
.main-nav a { white-space: nowrap; }
.main-nav a.active { border-bottom-color: #f2a949; color: #f2a949; }

/* Dutch labels run longer than English; tighten nl nav spacing only. */
html[lang="nl-BE"] .header-row { gap: 16px; }
html[lang="nl-BE"] .main-nav { gap: 14px; }
html[lang="nl-BE"] .nav-right { gap: 14px; }
html[lang="nl-BE"] .main-nav a.nav-cta { padding: 10px 14px; margin-left: 4px; }
html[lang="nl-BE"] .nav-trust { padding: 0 6px; }

/* EN/NL language switcher in the header (mirrors the footer .lang toggle). */
.nav-lang { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; margin-left: 4px; }
.nav-lang a { color: #6b6b78; text-decoration: none; }
.nav-lang a:hover { color: #f2a949; }
.nav-lang .active { color: #f2a949; }
.nav-lang > * + *::before { content: "|"; color: #d5d5dd; margin-right: 6px; font-weight: 400; }

/* The global img{max-width:100%} reset caps the nav logo inside the grid header,
   squashing it (it renders ~90px wide at 72px tall instead of its natural 2.15:1).
   Let the logo keep its aspect ratio; width:auto + fixed height do the rest. */
.logo img { max-width: none; }

/* Header fit (10 Nov 2026). The EN/NL switcher made the one-row header wider
   than the old breakpoints allowed: with the trust quote it needs ~1,240px, and
   without it ~1,035px (EN) or ~1,095px (NL). Between 901px and ~1,300px the page
   scrolled sideways and pushed the switcher off-screen. Hide the quote below
   1,300px and switch to the Menu button below 1,120px (same rules as the
   existing 900px block in each page stylesheet). */
@media (max-width: 1299px) { .nav-trust .quote-text { display: none; } }
@media (min-width: 901px) and (max-width: 1119px) {
  .header-row { grid-template-columns: auto auto; }
  .nav-trust { display: none; }
  .nav-toggle { display: block; }
  .nav-right { position: relative; }
  .main-nav {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 50;
  }
  .main-nav.open { display: flex; }
  .main-nav a { width: 100%; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .main-nav a:last-child { border-bottom: none; }
  .main-nav a.nav-cta { margin: 6px 12px; width: auto; }
}

/* Page-body fit at mid widths (10 Nov 2026), same sideways-scroll fault:
   - hero: 55% + 45% columns PLUS a 48px gap is 48px wider than its container;
     fr columns share the space left after the gap instead.
   - client logo strip: six columns cannot fit below ~1,000px; use the
     three-column layout the 900px rule already uses.
   - free-episode inline form: two fields, the human check and the button
     cannot fit on one row below ~1,000px; stack them as the 900px rule does. */
@media (min-width: 901px) { .hero-grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); } }
@media (min-width: 601px) and (max-width: 1119px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 999px) { .fe-inline { flex-direction: column; align-items: stretch; } }
/* Phones: the two-column logo strip was ~35px wider than the screen. */
@media (max-width: 600px) {
  .logos { gap: 16px; }
  .logo-item { min-width: 0; padding: 8px; }
  .logo-item img { max-width: 100%; }
}