/* ==========================================================================
   Jongens van de Bar - stylesheet
   Plain CSS, geen build-stap. Designtokens uit Kleurenpalet + ontwerp mei.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "JongensVanDeBar";
  src: url("../fonts/JVDB font (1).otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-VariableItalic.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --cream: #e8e8db;
  --dark: #2f2b2a;
  --blue: #0e2dad;
  --blue-light: #80a4d6;
  --purple: #665ea8;
  --coral: #f05d41;
  --orange: #fba710;
  --green: #4fc64d;

  --font-display: "JongensVanDeBar", "Arial Black", sans-serif;
  --font-body: "Satoshi", system-ui, -apple-system, sans-serif;

  --maxw: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 14px;
  --radius-pill: 999px;
  --header-h: 96px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.55;
  color: var(--dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  /* Kolom over volledige schermhoogte zodat de footer altijd onderaan staat
     met zijn eigen, vaste hoogte (geen crème-strook eronder).
     dvh = de echt zichtbare hoogte (mobiel telt de browserbalk niet mee). */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* Vult de resterende schermhoogte op korte pagina's, zodat de footer
   onderaan plakt zonder gat. Padding krimpt mee met de schermhoogte, zodat
   de inhoud op lagere schermen vaker past en de footer zichtbaar blijft. */
.section--fill {
  flex: 1 0 auto;
  padding-block: clamp(2rem, 6vh, 5rem);
}
/* Lijnt de inhoud verticaal in het midden van de sectie uit */
.section--vcenter { display: flex; flex-direction: column; justify-content: center; }

/* ---------- Juridische tekst (algemene voorwaarden) ---------- */
.legal { max-width: 70ch; margin-inline: auto; }
.legal__intro { margin: 0 0 2.5rem; }
.legal h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.35rem;
  line-height: 1.1;
  margin: 2.75rem 0 0.85rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin: 0 0 1rem; }
.legal ol { margin: 0 0 1rem; padding-left: 1.4rem; list-style: decimal; }
.legal ol li { margin-bottom: 0.6rem; }
.legal ol ol { margin: 0.5rem 0 0; list-style: lower-alpha; }
.legal a { color: var(--blue); text-decoration: underline; }
.legal__meta {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid currentColor;
  font-size: 0.95rem;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Typografie ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}
h1.display { font-size: clamp(3rem, 8vw, 7rem); }
h2.display { font-size: clamp(2.25rem, 5.5vw, 4.5rem); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.5; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--dark { background: var(--dark); color: var(--cream); }
.section--blue { background: var(--blue-light); color: var(--cream); }
.section--cream { background: var(--cream); color: var(--dark); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  height: var(--header-h);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.logo { display: inline-flex; align-items: center; }
.logo img,
.logo svg { height: clamp(40px, 3.4vw, 47px); width: auto; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.nav a { text-decoration: none; font-weight: 500; }
.nav a:not(.btn):hover { color: var(--blue-light); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--green { background: var(--green); color: var(--dark); }
.btn--green:hover { background: #43b341; }
.btn--green svg { width: 0.8em; height: 0.8em; }
.btn--outline { background: transparent; border-color: currentColor; }
.btn--outline:hover { background: currentColor; }
.btn--outline:hover span { color: var(--dark); }
.section--dark .btn--outline:hover span { color: var(--dark); }
.btn--lg { padding: 1rem 2rem; font-size: 1.1rem; }
.btn--block { display: flex; justify-content: center; width: 100%; }
/* Rechthoekige knop met de hoekafronding uit het logo (~12% van de hoogte),
   gelijk aan de tag-knop: 6px normaal, 8px bij btn--lg. */
.btn--rect { border-radius: 6px; }
.btn--rect.btn--lg { border-radius: 8px; }
/* Tag-/pijlvorm uit het logo, in twee stukken zodat niets vervormt:
   - body: gewone afgeronde hoeken (border-radius), altijd perfect rond.
     6px op ~50px hoog = ~11,8% = exact de hoekstraal uit logo.svg.
   - punt: losse SVG (button-point.svg) die alleen met de hoogte meeschaalt,
     verhouding 23:80 = de puntdiepte uit het logo. Kleur + hover via background. */
.btn--tag {
  position: relative;
  border-radius: 6px 0 0 6px;   /* alleen links; rechts recht, valt onder de punt */
  margin-right: 0.9rem;         /* ruimte voor de uitstekende punt */
}
.btn--tag::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;                    /* punt over de volle hoogte */
  left: 100%;
  margin-left: -1px;            /* 1px overlap tegen een haarnaadje */
  aspect-ratio: 23 / 80;        /* = puntverhouding uit het logo, schaalt met hoogte */
  background: inherit;          /* zelfde groen, ook bij hover */
  -webkit-mask: url(../img/button-point.svg) center / 100% 100% no-repeat;
          mask: url(../img/button-point.svg) center / 100% 100% no-repeat;
}
.btn--tag.btn--lg {
  border-radius: 8px 0 0 8px;   /* iets groter, zelfde ~11,8% bij de grotere knop */
  margin-right: 1.1rem;
}

/* Inschrijven-knop als kant-en-klare SVG (groene tag, letters uitgespaard).
   De letters laten de header-achtergrond zien. Hoogte in em, zodat de
   ingebakken tekst meeschaalt met de overige nav-tekst. */
.btn-inschrijven { display: inline-flex; align-items: center; }
.btn-inschrijven img { height: 1.8em; width: auto; display: block; }
.btn-inschrijven:hover { filter: brightness(0.92); }

/* Contact-knop als kant-en-klare SVG (groene omlijnde tag met 'contact').
   Hoogte ~ gelijk aan de oude btn--lg contactknop. */
.btn-contact { display: inline-flex; align-items: center; }
.btn-contact img { height: 3.25rem; width: auto; display: block; }
.btn-contact:hover { filter: brightness(0.92); }
/* Grotere variant als losse call-to-action (bijv. op de werkgevers-hero) */
.btn-inschrijven--hero img { height: clamp(40px, 4.5vw, 52px); }

/* ---------- Mobiel menu toggle ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
}
.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ==========================================================================
   Home - split slider
   ========================================================================== */
.hero-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Vult de ruimte tussen header en footer in plaats van een vaste
     100vh-header, zodat header + hero + footer samen in één scherm passen
     en de footer zichtbaar blijft zonder scrollen. */
  flex: 1 0 auto;
  min-height: 0;
  isolation: isolate;          /* eigen stacking-context voor de wiggen */
  overflow: hidden;
}
/* Schuine scheiding: twee gekleurde wiggen achter de inhoud. Boven op 52%,
   onder op 48% -> de grens loopt licht schuin als een /. */
.hero-split::before,
.hero-split::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* Licht schuine rechte scheiding: boven op 52%, onder op 48% -> een zachte /. */
.hero-split::before { background: var(--dark); clip-path: polygon(0 0, 52% 0, 48% 100%, 0 100%); }
.hero-split::after  { background: var(--blue-light); clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%); }
.hero-split__pane {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 6rem);
}
.hero-split__pane--dark { color: var(--cream); }
.hero-split__pane--blue { color: var(--cream); }
/* Schaalt vloeiend mee met de schermbreedte (5,5vw) zodat de tekst grote
   schermen vult; afgetopt op 8rem zodat hij op ultrawide niet absurd wordt.
   13ch houdt "personeel" heel, overflow-wrap voorkomt overlopen naar het
   andere vlak. */
.hero-split__pane h2 {
  max-width: 13ch;
  font-size: clamp(2.25rem, 5.85vw, 5.2rem); /* ~83px cap = even groot als de gefitte de-jongens-kop */
  overflow-wrap: break-word;
}
/* Werkgevers-hero (h1) even groot als de homepage-kop hierboven */
h1.display--stack { font-size: clamp(2.25rem, 5.85vw, 5.2rem); }
/* Rechterkolom van de werkgevers-hero iets kleiner zodat tekst + knop
   netter uitlijnen met de grote kop links */
.werkgevers-hero .lead { font-size: clamp(1rem, 1.2vw, 1.15rem); }
.werkgevers-hero .btn-contact img { height: 2.5rem; }
/* Rechterkolom even hoog als de kop links: tekst bovenaan, knop onderaan */
.werkgevers-hero .split-2col { align-items: stretch; }
.werkgevers-hero .split-2col > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.werkgevers-hero .split-2col > div:last-child > .lead { margin-top: 0; }
/* Knop iets omhoog van de onderlijn */
.werkgevers-hero .split-2col > div:last-child > p:last-child { margin-bottom: 1.5rem; }
/* Drie regels: bovenste en onderste vast, middelste (--var) wisselt */
.display--stack .display__line { display: block; }
/* Middelste regel houdt altijd 1 regelhoogte aan, ook als hij leeg is
   tijdens het typen, zodat de tekst eronder niet verspringt. */
.display__line--var { min-height: 1em; overflow-wrap: break-word; }
/* Typcursor: knippert achter het middenwoord, alleen tijdens de animatie
   (JS zet .typing). steps(1) geeft een harde aan/uit-knippering. */
.display__line--var.typing::after {
  content: "";
  display: inline-block;
  width: 0.07em;
  height: 0.8em;
  margin-left: 0.05em;
  background: currentColor;
  vertical-align: -0.02em;
  animation: caret-blink 1.05s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .display__line--var.typing::after { animation: none; }
  .logo-marquee__track { animation: none; }
}
.slider-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}
.slider-controls button {
  background: none;
  border: 0;
  color: var(--cream);
  font-size: 2.5rem;
  line-height: 1;
  padding: 0.25rem 0.75rem;
  opacity: 0.85;
}
.slider-controls button:hover { opacity: 1; }

/* ==========================================================================
   Werkgevers
   ========================================================================== */
.split-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.media-placeholder {
  background: #4a4542;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(232, 232, 219, 0.5);
  font-size: 0.85rem;
}
.media {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  justify-self: center;
}

.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem;
}
.quote-card {
  background: #423d3b;
  border-radius: var(--radius);
  padding: 2rem 1.75rem 1.75rem;
  position: relative;
  margin-top: 36px;
}
.quote-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--blue-light);
  position: absolute;
  top: -36px;
  left: 1.75rem;
  border: 4px solid #423d3b;
}
.quote-card p { margin: 0.5rem 0; font-size: 0.95rem; }
.quote-card__name { font-weight: 700; margin-top: 1rem; }
.quote-card__role { font-size: 0.85rem; opacity: 0.7; }

/* Logostrip */
.client-logo {
  height: 104px;
  width: 190px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Logo's zijn creme op transparant en staan direct op de blauwe band.
   object-fit: contain houdt elke verhouding heel, ongeacht of het logo breed of vierkant is. */
.client-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Oneindige logo-marquee: twee identieke groepen, track schuift naar links
   en springt bij -50% terug. Omdat de tweede groep gelijk is aan de eerste,
   is die sprong onzichtbaar. */
.logo-marquee {
  overflow: hidden;
  width: 100%;
}
.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: logo-scroll 30s linear infinite;
}
.logo-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Zo gefixt - stappen accordion */
.badge {
  display: inline-block;
  border: 2px solid var(--dark);
  border-radius: var(--radius);
  padding: 0.5rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.steps { margin-top: 2rem; display: grid; gap: 1rem; }
.step {
  border: 2px solid var(--dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.step__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: none;
  border: 0;
  color: inherit;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 600;
}
.step__num { font-family: var(--font-display); font-size: 1.5rem; }
.step__plus { margin-left: auto; font-size: 1.5rem; transition: transform 0.2s ease; }
.step[aria-expanded="true"] .step__plus { transform: rotate(45deg); }
.step__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.step__body p { margin: 0; padding: 0 1.5rem 1.5rem 4rem; }
/* Accordion op een blauwe sectie (vacatures): rand en plus in de tekstkleur. */
.section--blue .step { border-color: currentColor; }
/* Variant zonder nummer: body lijnt uit met de titel i.p.v. onder een cijfer. */
.steps--plain .step__body p { padding-left: 1.5rem; }

/* Kennismaking / Cal.com embed.
   LET OP: Cal geeft het iframe dat het injecteert de class .cal-embed. Deze regel
   valt dus op dat iframe. We zetten de achtergrond op het sectie-blauw, zodat de
   band rond de kalender opgaat in de section--blue en de witte kaart blijft staan. */
.cal-embed { background: var(--blue-light); }

/* ==========================================================================
   De Jongens - teamgrid
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.team-card__photo {
  background: #b9b9ad;
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  margin-bottom: 0.85rem;
  overflow: hidden;
}
/* Foto vult het vierkante vlak; bij staande foto's bijsnijden met focus
   iets boven het midden, zodat het gezicht in beeld blijft. */
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.team-card__name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.team-card__role { font-size: 0.9rem; opacity: 0.7; margin-top: 0.25rem; }

/* ==========================================================================
   Kantoor vacatures + Contact
   ========================================================================== */
.hero-text {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.hero-text__actions { display: grid; gap: 1rem; align-content: start; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.contact-block + .contact-block { margin-top: 2.5rem; }
.contact-block .btn { margin-bottom: 1rem; }
.contact-block a.inline { color: var(--blue-light); text-decoration: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--cream); padding-block: 1.5rem; }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-footer a { text-decoration: none; opacity: 0.75; }
.site-footer a:hover { opacity: 1; }
.socials { display: flex; gap: 1rem; align-items: center; }
.socials a svg { width: 20px; height: 20px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  :root { --header-h: 72px; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--cream);
    padding: 1.5rem var(--gutter) 2rem;
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    transform: translateY(-120%);
    transition: transform 0.25s ease;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav-toggle { display: flex; }

  .hero-split { grid-template-columns: 1fr; }
  .slider-controls { display: none; }
  /* Gestapeld op mobiel: schuine wiggen uit, vlakken krijgen hun eigen vlakke kleur */
  .hero-split::before,
  .hero-split::after { display: none; }
  .hero-split__pane--dark { background: var(--dark); }
  .hero-split__pane--blue { background: var(--blue-light); }

  .split-2col,
  .quote-grid,
  .hero-text,
  .contact-grid { grid-template-columns: 1fr; }

  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-strip { justify-content: center; }
}

@media (max-width: 460px) {
  .team-grid { grid-template-columns: 1fr; }
}