/* =========================================================
   Read More inline — awcf_readmore_inline
   De read-more-link erfde na het inline verplaatsen de tekststijl van de
   omschrijving (zwart/normaal). Hier herstellen we de bedoelde look:
   paars, bold, onderstreept (zoals in het oorspronkelijke widget).
   ========================================================= */
.term-description .more-link {
    color: #885f83;
    font-weight: 700;
    text-decoration: underline;
}

.term-description a:hover .more-link,
.term-description a:focus .more-link {
    color: #6f4b6a;
}

/* =========================================================
   Voorkom het "verspringen" van de read-more-link na het inladen.
   De link zit in een los Elementor-widget dat ONDER de omschrijving rendert;
   de module-JS verplaatst 'm pas op DOMContentLoaded inline en verbergt dan het
   lege widget → zichtbare sprong. We verbergen dat losse widget al vóór de JS:
   zolang de .more-link er nog in zit, staat het widget op display:none. Zodra
   de JS de link naar .term-description verplaatst, matcht deze regel niet meer,
   maar dan heeft de JS zelf al display:none op het widget gezet (blijft weg).
   Portabel: geen Elementor-ID, hangt aan de widget-soort + .more-link. De
   .term-description-widget zelf is géén text-editor, dus die blijft zichtbaar.
   ========================================================= */
.elementor-widget-text-editor:has(.more-link) {
    display: none !important;
}

/* =========================================================
   Mobiel: omschrijving visueel inkorten tot max 3 regels.
   De tekst zit (via de module-JS) in .term-description__clamp; die clampen
   we tot 3 regels. De "Lees de volledige categorie-informatie ›"-link staat
   ERNA (buiten de span) en blijft dus altijd zichtbaar, op een eigen regel
   direct onder de ingekorte tekst. Op desktop blijft de span inline.
   ========================================================= */
@media (max-width: 600px) {
    /* Clamp meteen op de laatste alinea ZELF, al vóór de module-JS draait.
       Zo verschijnt de tekst direct als 3 regels i.p.v. eerst volledig en
       daarna inklappend (geen "flits"). De clamp-span krijgt dezelfde clamp
       zodat er na de JS geen hoogte-sprong is. */
    .term-description p:last-of-type,
    .term-description__clamp {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }
    /* Zodra de JS de tekst in .term-description__clamp heeft gewikkeld en de
       link in de <p> heeft gehangen (markeer-class awcf-rm-inlined), laten we
       de <p> zelf los — anders zou de ingevoegde link binnen de clamp vallen
       en onzichtbaar zijn. De span blijft clampen → zelfde 3 regels. */
    .term-description p.awcf-rm-inlined {
        display: block;
        -webkit-line-clamp: none;
        line-clamp: none;
        overflow: visible;
    }
    /* Link op een eigen regel met wat lucht onder de ingekorte tekst. */
    .term-description__clamp + a,
    .term-description__clamp ~ a {
        display: inline-block;
        margin-top: 4px;
    }
}

/* =========================================================
   Mobiel: kop van de categorie-omschrijving compacter.
   ========================================================= */
@media (max-width: 768px) {
    .elementor-widget-woocommerce-archive-description h2 {
        font-size: 22px;
    }
}