/* ------------------------------------
   Eigen styling bovenop Bootstrap
   Laad dit bestand ná bootstrap.min.css
   ------------------------------------ */

:root {
  /* Pas hier je merk-kleur aan; overschrijft Bootstrap's primary */
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --bs-body-font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--bs-body-font-family);
  background: url("images/bg.svg") center / cover no-repeat fixed;
}

.header .logo {
  height: 3.5rem;
  width: auto;
}

/* Material Symbols basisinstellingen */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
  vertical-align: middle;
}

/* Icon-grootte in de feature-cards */
.feature-icon {
  font-size: 3rem;
  color: var(--bs-primary);
  display: inline-block;
}

/* Hero */
.hero {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

.content {
  padding: 4rem;
}

/* Tekstlinks in de header: paars icoon + donkergroene tekst */
.header-link {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: #002a21;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.125rem;
  margin-left: 2rem;
}

.header-link .material-symbols-outlined {
  color: #a08eff;
  font-variation-settings:
    "FILL" 0,
    "wght" 500,
    "GRAD" 0,
    "opsz" 24;
}

.header-link:hover {
  color: #a08eff;
}

/* Hero-content onderin */
.hero-content {
  max-width: 40rem;
}

.hero-title {
  font-weight: 500;
  color: #15332a;
  font-size: 5.6rem;
}

.hero-text {
  font-weight: 500;
  color: #15332a;
  font-size: 1.4rem;
  margin: 4rem 0;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background-color: #b6fc6a;
  color: #002a21;
  font-weight: 500;
  font-size: 1.125rem;
  border-radius: 0;
  padding: 1.2rem 1.8rem;
  border: 0;
}

.btn-cta:hover {
  background-color: #a5ef58;
  color: #002a21;
}

.visual {
  width: auto;
  height: calc(100vh - 4rem);
  padding: 2rem;
  box-sizing: content-box;
  display: block;
}

/* Mobiel: logo/knoppen bovenaan, dan de visual, daaronder de hero-content */
@media (max-width: 991.98px) {
  /* Achtergrondpatroon kleiner dan 'cover' (dat zoomt op staande schermen sterk in);
     repeat-y vult de resterende hoogte */
  body {
    background: url("images/bg.svg") top center / 150% auto repeat-y fixed;
  }

  .page {
    flex-direction: column;
  }

  /* .content lost op in de kolom, zodat header, visual en hero
     als broertjes geordend kunnen worden (!important vanwege Bootstrap's .d-flex) */
  .content {
    display: contents !important;
  }

  .header {
    order: 1;
    margin: 1.5rem 1.5rem 0;
  }

  /* Kleiner logo zodat de links er rechts naast passen */
  .header .logo {
    height: 2rem;
  }

  /* Links onder elkaar, rechts uitgelijnd */
  .header .gap-4 {
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem !important;
  }

  .header-link {
    margin-left: 0;
    font-size: 1rem;
  }

  .page .ms-auto {
    order: 2;
    margin-left: 0 !important;
  }

  .hero-content {
    order: 3;
    margin: 0 1.5rem 2.5rem;
    max-width: none;
  }

  .visual {
    width: 100%;
    height: auto;
    aspect-ratio: 417.32 / 556.43;
    box-sizing: border-box;
    padding: 1.5rem;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-text {
    font-size: 1.125rem;
    margin: 1.5rem 0 2rem;
  }
}