/*
Theme Name: Bold theme
Theme URI: https://www.boldonline.nl
Author: Bold Online
Author URI: https://www.boldonline.nl
Description: Bold Online
Version: 1.0
Template: hello-elementor
*/



/* Add your custom styles here */

/* Footer */
.ft-content a {
	color:#fff;
	text-decoration: none;
}
.ft-content a:hover {
	color:#E9C257;
}
.ft-sub a {
	color:#064F44;
}
.ft-sub a:hover {
	color:#E9C257;
}

/* Dienstblok hovers */
:root {
  /* button normaal */
  --btn-bg: #222;
  --btn-color: #fff;
  --btn-border: #222;

  /* button hover */
  --btn-hover-bg: #000;
  --btn-hover-color: #fff;
  --btn-hover-border: #000;
  --btn-hover-shadow: none;
  --btn-hover-transform: none;

  /* container normaal */
  --card-bg: transparent;
  --card-shadow: none;
  --card-transform: none;

  /* container hover */
  --card-hover-bg: #f8f8f8;
  --card-hover-shadow: 0 12px 24px rgba(0,0,0,.12);
  --card-hover-transform: translateY(-2px);
}

/* 1) Container basis, leest uit variabelen */
.elementor .bl-dienst {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transform: var(--card-transform);
  transition: background .2s, box-shadow .2s, transform .2s;
}

/* 2) Button basis met hoge specificiteit, wint van Elementor */
.elementor .bl-dienst a.elementor-button.bt-dienst,
.elementor .bl-dienst a.elementor-button-link.bt-dienst {
  background-color: var(--btn-bg) !important;
  color: var(--btn-color) !important;
  border-color: var(--btn-border) !important;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

/* 3) Echte button hover zet de hovervariabelen voor de button */
.elementor .bl-dienst a.elementor-button.bt-dienst:hover,
.elementor .bl-dienst a.elementor-button-link.bt-dienst:hover {
  --btn-bg: var(--btn-hover-bg);
  --btn-color: var(--btn-hover-color);
  --btn-border: var(--btn-hover-border);
}

/* 4) Container hover, button volgt automatisch via variabelen,
      én we forceren de buttonlook met !important voor inline styles */
.elementor .bl-dienst:hover {
  --btn-bg: var(--btn-hover-bg);
  --btn-color: var(--btn-hover-color);
  --btn-border: var(--btn-hover-border);

  background: var(--card-hover-bg);
  box-shadow: var(--card-hover-shadow);
  transform: var(--card-hover-transform);
}
.elementor .bl-dienst:hover a.elementor-button.bt-dienst,
.elementor .bl-dienst:hover a.elementor-button-link.bt-dienst {
  background-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-color) !important;
  border-color: var(--btn-hover-border) !important;
  box-shadow: var(--btn-hover-shadow) !important;
  transform: var(--btn-hover-transform) !important;
}

/* 5) Button hover activeert óók de containerhover, via :has,
      werkt in moderne browsers */
.elementor .bl-dienst:has(a.elementor-button.bt-dienst:hover),
.elementor .bl-dienst:has(a.elementor-button-link.bt-dienst:hover) {
  background: var(--card-hover-bg);
  box-shadow: var(--card-hover-shadow);
  transform: var(--card-hover-transform);
}
/* ===== EINDE BLOK ===== */

/* Blog */
/* Categoriestijlen binnen jouw widget met class .cat-stijl */
.cat-stijl .elementor-post-info__terms-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  font-size: 0;             /* verbergt de bestaande komma's */
}

.cat-stijl .elementor-post-info__terms-list-item {
  display: inline-block;
  font-size: 14px;          /* zet tekstgrootte weer terug */
  line-height: 1.3;
  padding: 4px 12px;         /* kleine padding per wens */
  background: #E9C257;      /* jouw kleur */
  border-radius: 8px;     /* ronde “pill” */
  color: #000;              /* leesbaar op de gele achtergrond */
  white-space: nowrap;      /* voorkomt afbreken binnen één pill */
	margin: 0 10px 10px 0;    /* 10px ruimte tussen de categorieën */
}

/* Als termen links zijn, stijl de link hetzelfde */
.cat-stijl .elementor-post-info__terms-list-item a {
  color: inherit;
  text-decoration: none;
}
.cat-stijl .elementor-post-info__terms-list-item a:hover,
.cat-stijl .elementor-post-info__terms-list-item a:focus {
  text-decoration: underline; /* optioneel, toegankelijkheid */
}

/* basis, nette overgang */
.blog-blok .elementor-heading-title,
.blog-blok .elementor-widget-theme-post-excerpt,
.blog-blok .elementor-widget-theme-post-excerpt * {
  transition: color .2s ease;
}

/* titel wit bij hover of focus op de hele kaart */
.blog-blok:hover .elementor-widget-theme-post-title .elementor-heading-title,
.blog-blok:focus-within .elementor-widget-theme-post-title .elementor-heading-title,
.blog-blok:hover .elementor-widget-theme-post-title .elementor-heading-title a,
.blog-blok:focus-within .elementor-widget-theme-post-title .elementor-heading-title a {
  color: #fff !important;
}

/* samenvatting wit bij hover of focus op de hele kaart */
.blog-blok:hover .elementor-widget-theme-post-excerpt,
.blog-blok:hover .elementor-widget-theme-post-excerpt *,
.blog-blok:focus-within .elementor-widget-theme-post-excerpt,
.blog-blok:focus-within .elementor-widget-theme-post-excerpt * {
  color: #fff !important;
}

/* optioneel, als jouw hover de hele kaart donker maakt, kun je links in de kaart ook wit forceren */
.blog-blok:hover a,
.blog-blok:focus-within a {
  color: #fff;
}

/* toegankelijkheid, minder animatie bij voorkeuren */
@media (prefers-reduced-motion: reduce) {
  .blog-blok .elementor-heading-title,
  .blog-blok .elementor-widget-theme-post-excerpt,
  .blog-blok .elementor-widget-theme-post-excerpt * {
    transition: none;
  }
}

.bl-content strong {
	font-size: 20px;
	color: #064F44;
    font-family: "superior-title", Sans-serif;
}

/* bullets vervangen door svg binnen .bl-content */
.bl-content ul {
  list-style: none;
  margin: 0 0 2em 0;
  padding: 0;
}

.bl-content ul li {
  position: relative;
  padding-left: 28px;         /* ruimte voor de custom bullet */
  margin: 0 0 .5em 0;
}

/* de custom bullet */
.bl-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;                  /* visueel centreren t.o.v. de tekst */
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("/wp-content/uploads/2025/10/bullet-tekst.svg") no-repeat center;
}

/* geneste lijsten krijgen iets kleinere bullet en extra inspringing */
.bl-content ul ul {
  margin-top: .5em;
}
.bl-content ul ul li {
  padding-left: 24px;
}
.bl-content ul ul li::before {
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
}
@media (min-width: 1025px) and (max-width: 1730px) {
  /* als de class op de widget-wrapper staat */
  .float-geel img { opacity: 0.3; }
}

.grecaptcha-badge {
    visibility: hidden !important;
}