/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

.anna-image .elementor-widget-container:before {
    content: '';
    width: 500px;
    height: 600px;
    z-index: 0;
    background-image: url(../../img/online-marketing.png);
    top: -150px;
    left: -100px;
    position: absolute;
}

.anna-image img {
    position: relative;
}

#masthead {
    z-index: 99999999;
}

#page .footer-bottom {
    padding: 60px 0px;
}

.bb-footer .footer-socials a i {
    font-size: 40px;
	color: black;
}

.bb-course-items .ld-progress-stats, .bb-course-items .bb-course-excerpt {
	font-weight: 300;
}

.bb-learndash-banner {
    background: white;
}

.bb-learndash-banner:before {
    opacity: 0;
}

.bb-course-banner-inner {
	color: black;
}

.bb-course-points a.anchor-course-points, .bb-course-banner-inner .author-name {
    color: black;
	font-weight: 300;
}

.ld-tabs-content p, .ld-tabs-content p span[style="font-weight: 400;"] {
    font-weight: 300 !important;
}

/* Desktop-only styles (apply from 801px and up) */
@media screen and (min-width: 801px) {
  .site-header-container {
    position: relative; /* needed for absolutely centering the logo */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 40px;
    background: #fff;
  }

  /* Center logo in the header */
  #site-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* let underlying toggles still receive clicks */
    z-index: 5;
  }

  #site-logo a,
  #site-logo img {
    pointer-events: auto; /* keep the logo link clickable */
  }

  #site-logo .site-title,
  #site-logo a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bb-logo {
    max-height: 64px;
    width: auto;
    display: block;
  }

  /* Make nav sit to the left and header-aside to the right */
  .main-navigation {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  #header-aside {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
  }

  .bb-header-buttons {
    display: flex;
    gap: 18px;
    align-items: center;
  }

  /* Primary button - Aanmelden */
  .button.signup {
    background: #C5B48B; /* red */
    color: #fff !important;
    border: none;
    border-radius: 0px !important;
    padding: 10px 30px;
    text-decoration: none;
    line-height: 1;
    box-shadow: none;
  }
  .button.signup:hover,
  .button.signup:focus {
    background: #9f2016;
    color: #fff !important;
  }

  /* Secondary link - Inloggen */
  .button.signin-button {
    background: transparent;
    color: #777 !important;
    border: 2px solid transparent;
    border-radius: 28px;
    padding: 8px 22px;
  }
  .button.signin-button:hover,
  .button.signin-button:focus {
    color: #c62818 !important;
    border-color: rgba(198,40,24,0.15);
  }

  /* Beige variant if needed */
  .button.signup.beige,
  .button.signup.beige:link,
  .button.signup.beige:visited {
    background: #c8b68a;
    color: #fff !important;
  }

  /* Ensure toggles and header actions sit above the centered logo */
  .bb-toggle-panel,
  .header-aside,
  .bb-header-buttons {
    z-index: 10;
  }
}


/* container -> 1 column by default (mobile) */
.bb-course-items.grid-view.bb-grid #et_builder_outer_content {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;            /* adjust spacing as needed */
  align-items: start;
}

/* tablet -> 2 columns */
@media (min-width: 768px) {
  .bb-course-items.grid-view.bb-grid #et_builder_outer_content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* desktop -> 3 columns */
@media (min-width: 1024px) {
  .bb-course-items.grid-view.bb-grid #et_builder_outer_content {
    grid-template-columns: repeat(3, 1fr);
  }
}


.bb-course-items.grid-view.bb-grid #et_builder_outer_content .bb-course-item-wrap {
	height: 100%;
}