/* ================== FONTS ================== */
@import url("https://fonts.googleapis.com/css?family=Indie+Flower|Open+Sans:400,400italic,700,700italic");

/* ================== TYPOGRAPHY ================== */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  text-align: left;
}

h1, h2 {
  font-family: 'Indie Flower', cursive;
  text-shadow: grey 0.03em 0.03em 0.05em;
  margin: 0.5rem 0;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2.5rem); padding-top: 15px; }
h3 { font-size: 1.5rem; font-family: cursive; text-shadow: #e0e0e0 0.03em 0.03em 0.05em; padding-top: 1.25rem; }
h4, h5 { padding-top: 1.25rem; }

/* ================== IMAGE STYLING ================== */
img {
  padding: 1rem;
  border-radius: 1.5rem;
  max-width: 100%;
}

/* ================== BREADCRUMBS ================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  list-style: none;
  background-image: linear-gradient(#e4e4e4, #eee 50%, white);
  border-radius: 0.25rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #777;
  content: "/";
}

/* ================== NAVBAR ================== */
.navbar .nav-link, .navbar .navbar-brand {
  text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
  transition: color 0.2s ease-in-out;
}

.navbar.bg-primary {
  background-image: linear-gradient(#249038, #155320 50%, #11431a);
  border: 1px solid #0b2a10;
}

.navbar-dark .navbar-brand { color: #ffaf4d; }
.navbar-dark .navbar-brand:hover { color: #ffddb3; }

.navbar-dark .navbar-nav .nav-link { color: #fff; }
.navbar-dark .navbar-nav .nav-link:hover { color: #ffddb3; }
.navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255,255,255,0.25); }

@media (min-width: 992px) {
  .navbar .nav-item .dropdown-menu { display: none; }
  .navbar .nav-item:hover .dropdown-menu { display: block; margin-top: 0; }
}

/* ================== BUTTONS ================== */
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: all 0.15s ease-in-out;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}
.btn-link { text-shadow: none; }

/* PRIMARY BUTTON */
.btn-primary {
  color: #fff;
  background-image: linear-gradient(#249038, #155320 50%, #11431a);
  border: 1px solid #0b2a10;
}
.btn-primary:hover { background-image: linear-gradient(#208031, #11431a 50%, #0d3213); }
.btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(21,83,32,0.5); }

/* SECONDARY BUTTON */
.btn-secondary {
  color: #2d2d2d;
  background-image: linear-gradient(#bfbfbf, #999 50%, #8f8f8f);
  border: 1px solid gray;
}
.btn-secondary:hover { background-image: linear-gradient(#b5b5b5, #8f8f8f 50%, #858585); }
.btn-secondary:focus { box-shadow: 0 0 0 0.2rem rgba(137,137,137,0.5); }

/* SUCCESS BUTTON */
.btn-success {
  color: #fff;
  background-image: linear-gradient(#61dd45, #3CB521 50%, #36a41e);
  border: 1px solid #2e8a19;
}
.btn-success:hover { background-image: linear-gradient(#52da34, #36a41e 50%, #31921b); }
.btn-success:focus { box-shadow: 0 0 0 0.2rem rgba(60,181,33,0.5); }

/* INFO BUTTON */
.btn-info {
  color: #fff;
  background-image: linear-gradient(#7bbdf7, #3399F3 50%, #208ff2);
  border: 1px solid #0e80e6;
}
.btn-info:hover { background-image: linear-gradient(#68b3f6, #208ff2 50%, #0e86ef); }
.btn-info:focus { box-shadow: 0 0 0 0.2rem rgba(51,153,243,0.5); }

/* WARNING BUTTON */
.btn-warning {
  color: #fff;
  background-image: linear-gradient(#ff9c22, #D47500 50%, #c06a00);
  border: 1px solid #a15900;
}
.btn-warning:hover { background-image: linear-gradient(#ff930d, #c06a00 50%, #ab5e00); color: #fff;}
.btn-warning:focus { box-shadow: 0 0 0 0.2rem rgba(212,117,0,0.5); }

/* DANGER BUTTON */
.btn-danger {
  color: #fff;
  background-image: linear-gradient(#ff1d1b, #CD0200 50%, #b90200);
  border: 1px solid #9a0200;
}
.btn-danger:hover { background-image: linear-gradient(#ff0906, #b90200 50%, #a40200); }
.btn-danger:focus { box-shadow: 0 0 0 0.2rem rgba(205,2,0,0.5); }

/* LIGHT BUTTON */
.btn-light {
  color: #2d2d2d;
  background-image: linear-gradient(white, #eee 50%, #e4e4e4);
  border: 1px solid #d5d5d5;
}
.btn-light:hover { background-image: linear-gradient(white, #e4e4e4 50%, #dadada); }
.btn-light:focus { box-shadow: 0 0 0 0.2rem rgba(238,238,238,0.5); }

/* DARK BUTTON */
.btn-dark {
  color: #fff;
  background-image: linear-gradient(#595959, #333 50%, #292929);
  border: 1px solid #1a1a1a;
}
.btn-dark:hover { background-image: linear-gradient(#4f4f4f, #292929 50%, #1f1f1f); }
.btn-dark:focus { box-shadow: 0 0 0 0.2rem rgba(82,82,82,0.5); }

/* ================== OUTLINE LIGHT BUTTON ================== */
.btn-outline-light {
  color: #fff;
  background-color: transparent;
  background-image: none;
  border: 1px solid #fff;
  transition: all 0.2s ease-in-out;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.btn-outline-light:hover {
  color: #2d2d2d;
  background-color: #fff;
  border-color: #fff;
}

.btn-outline-light:focus {
  box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.5);
}

/* ================== Active buttons ================== */
.nav-link.active {
  color: #198754;
  font-weight: 600;
  background-color: rgba(25, 135, 84, 0.06);
  border-left: 4px solid #198754;
  padding-left: 0.75rem;
}

.nav-link.active i {
  color: #198754;
}



/* ================== HERO HEADER ================== */
.indy_flower_white {text-shadow: black 0.05em 0.05em 0.05em;}
.indy_flower_grey {text-shadow: black 0.05em 0.05em 0.05em;}

.hero-header {
  min-height: 200px;
  height: 30vh;
  max-height: 420px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  filter: brightness(0.95) saturate(0.9);
}

.hero-overlay {
  position: absolute;
  inset: 0;
background: linear-gradient(
  rgba(5,25,10,0.65),
  rgba(5,25,10,0.25)
);

 /* background: rgba(5,25,10,0.65);*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-content h1 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: #fff;
  margin-bottom: 0.75rem;
}

.hero-content h2 {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: #e0e0e0;
  font-weight: 300;
}

@media (max-width: 576px) {
  .hero-header { min-height: 240px; }
}

/* ================== CARDS ================== */
.card-header-gradient {
  background: linear-gradient(135deg, #F5DEB3, #249038);
  color: white;
  font-weight: 600;
}

.card {
  transition: all 0.3s ease-in-out;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

.lesson-card {
  border: 1px solid #e6e1d8;
  background: #faf9f6;
  transition: box-shadow 0.3s ease;
}

.lesson-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem;
  border: 0;
  background: transparent;
  text-align: left;
}

.lesson-toggle:hover {
  background: linear-gradient(135deg, #e6dcc7, #c4d6c8);
}

.lesson-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d8cbb2, #9bb2a2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2f3a33;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.lesson-number { font-size: 1rem; color: #8a8f7a; letter-spacing: 0.05em; }
.lesson-content { padding: 0.25rem 1.25rem 1.25rem; font-size: 0.95rem; color: #444; }

/* ================== SHADOWS / OVERLAYS ================== */
.opacity {
  background-color: rgba(0,0,0,0.2);
  box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.2);
}


/* ================== anti veld ================== */
.hp-field {
  position: fixed !important;
  top: -100vh !important;
  left: -100vw !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hover-shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

.summary-bar {
  background: #f6f8f6;
  font-size: 0.95rem;
}


/* ================== contact formulier ================== 
.contact-card {
  background: #ffffff;
  border-radius: 1rem;
}

.input-group-soft .input-group-text {
  background: #f5f7f6;
  border: 0;
  color: #6c757d;
}

.input-group-soft .form-control {
  border: 0;
  background: #f9faf9;
}

.form-control-soft {
  background: #f9faf9;
  border: 0;
}

.form-control:focus {
  box-shadow: none;
  background: #ffffff;
}

*/