/* ==========================================================================
   HPA TIPKADER
   Gedeelde stijl voor: .tipbox (ACF-blok hpa/tipbox, templates) en
   core/group met .is-style-hpa-tip / .is-style-hpa-let-op (blogposts).
   Geladen via inc/blocks.php: op blogposts (frontend), in de blokeditor, en
   als dependency van hpa-core-design (hpa-design.css) op de hub-, situatie-
   en alternatief-templates.
   ========================================================================== */

/* .tipbox.tipbox: dubbele klasse, zodat de marge .mb-l (hpa-design.css, dat
   na deze stylesheet geladen wordt) overschrijft. Anders wordt de marge-onder
   64px op de alternatief-templates. */
.tipbox.tipbox,
.is-style-hpa-tip,
.is-style-hpa-let-op{margin:28px 0}
.tipbox,
.is-style-hpa-tip,
.is-style-hpa-let-op{
  --tip-rand:#5A8F3C;
  --tip-vlak:#EEF5E6;
  --tip-titel:#24391E;
  --tip-link:#3B5E1F;
  padding:24px 32px;
  border-left:5px solid var(--tip-rand);
  border-radius:14px;
  background:var(--tip-vlak);
  color:inherit;
}
.is-style-hpa-let-op{
  --tip-rand:#E8B93C;
  --tip-vlak:#FDF3D7;
}
.tipbox h4,
.is-style-hpa-tip .hpa-tip__titel,
.is-style-hpa-let-op .hpa-tip__titel{
  font-family:"League Spartan",sans-serif;
  font-weight:700;
  font-size:1.05rem;
  line-height:1.2;
  color:var(--tip-titel);
  margin:0 0 6px;
}
.tipbox p,
.is-style-hpa-tip p,
.is-style-hpa-let-op p{
  font-family:"Lora",serif;
  font-size:.95rem;
  line-height:1.7;
  color:inherit;
  margin:0 0 .6em;
}
.tipbox > :last-child,
.is-style-hpa-tip > :last-child,
.is-style-hpa-let-op > :last-child{margin-bottom:0}
/* Dubbele klasse / wp-block-group: overschrijft .elementor-kit-7 a (zelfde
   specificiteit, later in de cascade). Alleen links binnen de kaders. */
.tipbox.tipbox a,
.wp-block-group.is-style-hpa-tip a,
.wp-block-group.is-style-hpa-let-op a{color:var(--tip-link);text-decoration:underline}
/* Lege blokken in een kader nemen geen ruimte in (bijv. een leeg blok dat de editor laat staan). */
:where(.is-style-hpa-tip, .is-style-hpa-let-op, .tipbox) > :empty { display: none; }
@media(max-width:599px){
  .tipbox,
  .is-style-hpa-tip,
  .is-style-hpa-let-op{padding:18px 20px}
}