/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

#aw-leesmeer-txt {
  max-height: 400px;
  overflow: hidden;
  transition: max-height 0.4s ease;

  &.open {
    max-height: none; /* genoeg ruimte voor alles */
  }
}

.aw-toggle-leesmeer {
  cursor: pointer;
  color: #fff !important;
  transition: opacity 0.2s ease;

	/* 	Als je een button gebruikt gaat de kleur niet altijd direct mee, vandaar deze extra span */
  span{
  }
}

/* Uniforme knopstijl cat-pagina's (klantverzoek 2026-07-23): de onderste
   "Lees meer"-knop (Elementor-button in deze widget) meesturen naar
   16px (14px mobiel); kleur/radius komen al uit Elementor (#00b1cf, 10px). */
.elementor-element.aw-toggle-leesmeer a.elementor-button {
  font-size: 16px;
  font-weight: 600 !important; /* Elementor-typografie van de widget zit anders voor */
  line-height: 1.4 !important; /* zelfde knophoogte (46px) als de module-knoppen (Elementor-kit zet 1) */
}

@media (max-width: 768px) {
  .elementor-element.aw-toggle-leesmeer a.elementor-button {
    font-size: 14px;
  }
}

/*
 * Categorie-introtekst bovenaan de archief-template (Elementor text-editor 22d785a,
 * het ACF-veld "korte_categorie..."). Op desktop blijft de tekst volledig zichtbaar.
 * Op mobiel korten we 'm in tot ~4 regels met een "Lees meer"-knop. De knop wordt
 * via JS toegevoegd en alleen getoond als de tekst daadwerkelijk wordt afgekapt.
 */
/* Intro "Lees meer/Lees minder" (klantverzoek 2026-07-23, bijgesteld):
   GEEN knop-opmaak — gewoon donkerblauwe tekst zonder padding/achtergrond.
   De knop bestaat alleen op mobiel (14px, conform de andere knoppen daar).
   !important op de achtergrond blijft nodig tegen thema-button-resets
   (voorheen een rode achtergrond). */
.aw-cat-intro-toggle {
  display: none; /* standaard verborgen; alleen op mobiel + indien afgekapt door JS getoond */
  align-self: flex-start; /* links uitlijnen binnen de flex-kolom (zowel "Lees meer" als "Lees minder") */
  margin-top: 8px;
  margin-right: auto; /* fallback: links uitlijnen ook buiten een flex-context */
  padding: 0;
  border: 0;
  background: none !important;
  font: inherit;
  font-size: 14px;
  font-weight: 600 !important; /* Elementor-typografie van de widget zit anders voor */
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  color: #123c57;
  text-decoration: none;
}

.aw-cat-intro-toggle:hover,
.aw-cat-intro-toggle:focus,
.aw-cat-intro-toggle:active {
  background: none !important;
  color: #123c57;
  outline: none;
}

@media (max-width: 767px) {
  .elementor-element-22d785a,
  .aw_cat_intro {
    max-height: 80px;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .elementor-element-22d785a.aw-cat-intro--open,
  .aw_cat_intro.aw-cat-intro--open {
    max-height: none;
  }
	.elementor-element-5ca94e0 button.aw-cat-intro-toggle,
	.aw_cat_intro_btnwrap button.aw-cat-intro-toggle {
    margin-top: 12px;
}
}