/* =====================================================
   Global stylesheet — BackofficeMS / Thinkedge
   ===================================================== */

/* --------------------- Fonts --------------------- */
@font-face {
  font-family: 'RecentGrotesk';
  src: url('/public/assets/fonts/RecentGrotesk-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RecentGrotesk';
  src: url('/public/assets/fonts/RecentGrotesk-Bold.woff') format('woff');
  font-weight: 600;
  font-style: bold;
  font-display: swap;
}

@font-face {
  font-family: 'BricolageGrotesque';
  src: url('/public/assets/fonts/BricolageGrotesque_24pt-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BricolageGrotesque';
  src: url('/public/assets/fonts/BricolageGrotesque_24pt-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BricolageGrotesque';
  src: url('/public/assets/fonts/BricolageGrotesque_24pt-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BricolageGrotesque';
  src: url('/public/assets/fonts/BricolageGrotesque_24pt-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BricolageGrotesque';
  src: url('/public/assets/fonts/BricolageGrotesque-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ayer';
  src: url('/public/assets/fonts/ayerposter-mediumitalic-webfont.woff2') format('woff2'),
       url('/public/assets/fonts/ayerposter-mediumitalic-webfont.woff') format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'Mairo';
  src: url('/public/assets/fonts/mairo-webfont.woff2') format('woff2'),
       url('/public/assets/fonts/mairo-webfont.woff') format('woff');
  font-style: normal;
}

@import url("https://use.typekit.net/pwm2gng.css");

/* --------------------- Reset --------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* --------------------- Kleuren (Ensuite) --------------------- */
:root {
  --oranje:       #963D2E; /* bruin — hoofdaccent (koppen, knoppen) */
  --light-green:       #FAF8F6; /* crème — lichte knoptekst/oppervlak */
  --beige:       #EAE2D8;
  --pink:       #EAE2D8;
  --dark-orange:       #6E2C20; /* donkerder bruin, voor eventuele hover/variant */
  --dark-green:       #963D2E; /* bruin — donkere knopachtergrond */
  --black:      #1A2215; /* zwart (warme tint) — hoofdtekstkleur */
  --grey:       #E5DED2;
  --green:      #FAF8F6;
  --yellow:     #D9B37C;
  --purple:     #963D2E;
}

/* --------------------- Global --------------------- */
:root {
  --border-radius:   20px;
  --interne-padding: 50px;
}

body {
  color: var(--black);
  margin: 0;
  padding: 0;
}

img {
  border-radius: var(--border-radius);
  max-width: 100%;
  display: block;
}

video {
  border-radius: var(--border-radius);
}

/* --------------------- Font styling --------------------- */
h1 {
  font-family: 'fabiola-capitals', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 8em;
  line-height: 1em;
  padding: 0;
  margin: 0;
  color: var(--oranje);
}

h2 {
  font-family: 'fabiola-capitals', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5.5em;
  line-height: 1em;
  padding: 0;
  margin: 0;
  color: var(--oranje);
}

.h2 {
  font-family: 'fabiola-capitals', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5.5em;
  line-height: 1em;
  padding: 0;
  margin: 0;
  color: var(--oranje);
}

h3 {
  font-family: 'fabiola-capitals', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  line-height: 1em;
  padding: 0;
  margin: 0;
  color: var(--oranje);
}

h4 {
  font-family: 'fabiola-capitals', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2em;
  line-height: 1em;
  padding: 0;
  margin: 0;
  color: var(--oranje);
}

p {
  font-family: 'open-sans', sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.4em;
}

.bold {
  font-weight: 600;
}

strong {
  font-weight: 600;
}

/* --------------------- Layout --------------------- */
.container {
  width: 80vw;
  max-width: 1200px;
  margin: 0 auto;
}

.container.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.split-1-3 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 100px;
}

.split-3-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 100px;
  align-items: center;
}

.sticky {
  position: sticky;
  top: 170px;
}

/* --------------------- Buttons --------------------- */
.btn {
  background-color: var(--dark-green);
  color: var(--light-green);
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  width: fit-content;

  font-family: 'open-sans', sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1.2em;
}

/* Inversed .btn op donkere achtergrond */
[style*="background-color:#002814"] .btn,
[style*="background-color: #002814"] .btn {
  background-color: var(--light-green);
  color: var(--dark-green);
}

.btn.full-width {
  width: stretch;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  font-size: 1.1em;

  font-family: 'open-sans', sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
}

.btn-outline {
  background-color: unset;
  color: var(--dark-green);
  border: 1px solid var(--dark-green);
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  
  font-family: 'open-sans', sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1.2em;
}

/* --------------------- Utility --------------------- */
.pil {
  color: var(--dark-green) !important;
  background-color: var(--light-green);
  padding: 5px 20px;
  border-radius: 50px;
  margin-bottom: 15px;
  font-family: bricolage;
  font-weight: 600;
  font-size: 0.8em;
  line-height: 1.4em;
}

.rounded {
  border-radius: var(--border-radius) !important;
}

.leeg {
  margin: 0;
}

.highlight {
  font-family: 'Ayer', serif;
  font-style: normal;
}

/* --------------------- Achtergronden --------------------- */
.bg-grey {
  background-color: var(--grey);
  color: var(--black);
}

.bg-grey.container {
  padding: 50px;
  border-radius: var(--border-radius);
}

.bg-yellow {
  background-color: var(--yellow);
  color: var(--black);
}

.bg-yellow.container {
  padding: 50px;
  border-radius: var(--border-radius);
}

.bg-black {
  background-color: var(--black);
  color: var(--green);
}

.bg-black.container {
  padding: 50px;
  border-radius: var(--border-radius);
}

.bg-purple {
  background-color: var(--purple);
  color: var(--green);
}

.bg-purple.container {
  padding: 50px;
  border-radius: var(--border-radius);
}

/* --------------------- Mediaquerries --------------------- */
@media screen and (max-width: 900px) {
  .container.split {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .split.breeder {
    grid-template-columns: 1fr !important;
    gap: 50px;
  }

  .split-1-3 {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .split-3-1 {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .container {
    width: 90vw;
  }

  .heading--groot {
    font-size: 2.8em;
  }

  h1{
    font-size: 6em;
  }

  h2{
    font-size: 4em;
  }

  h3{
    font-size: 2.5em;
  }

  h4{
    font-size: 1.875em;
  }
}

@media screen and (max-width: 750px) {
  :root {
    --interne-padding: 30px;
  }

  .heading--groot {
    font-size: 2em;
  }

  h1 {
    font-size: 4.375em;
  }

  h2 {
    font-size: 3.438em;
  }

  h3 {
    font-size: 2.188em;
  }

  h4 {
    font-size: 1.25em;
  }
}