/**
 * Knoppen voor Trekhaak Noord.
 *
 * De tekst en het pijltje zijn twee gevulde pillen. Een SVG-filter laat ze aan
 * elkaar plakken; bij hover schiet het pijlrondje los en draait de pijl recht.
 *
 * Standaard zijn de knoppen geel. Met de klasse "btn-secondary" worden ze wit.
 *
 * liquid-button.js zet de klasse en het pijltje klaar.
 */

.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn {
    /* --- Hier tune je de knoppen --- */
    --btn-pad-y: 16px;           /* ruimte boven en onder de tekst */
    --btn-pad-x: 24px;           /* ruimte links en rechts */
    --btn-radius: 3rem;
    --btn-bg: #FFB703;           /* kleur van de pillen */
    --btn-fg: #0C2B3B;           /* kleur van tekst en pijl */
    --liquid-gap: -.4rem;        /* overlap tussen tekst en pijl */
    --liquid-move: 1rem;       /* hoe ver de pijl wegschuift bij hover; ruim
                                    genoeg zodat de hals altijd netjes breekt */
    --liquid-turn: 45deg;        /* draaiing van de pijl bij hover */
    --liquid-speed: .7s;
    --liquid-ease: cubic-bezier(.19, 1, .22, 1);

    /* De knop is niet breder dan zijn inhoud, zodat je er niet naast kunt
       klikken. De nadruk is nodig omdat knoppen in Elementor een eigen
       achtergrond en breedte kunnen hebben. */
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 0;
    background: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: url("#thn-liquid");
}

/* Witte variant: zet in Elementor de klasse "btn-secondary" op de knop. */
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn--secondary {
    --btn-bg: #FFFDF6;
}

.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:hover,
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:focus,
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:active {
    background: none !important;
    border: 0;
    box-shadow: none;
}

/* Pijltje rechts van de tekst. Elementor zet hier zelf 12px tussenruimte neer
   en laadt dat ná deze stylesheet; vandaar de nadruk. De afstand regelen we
   met --liquid-gap. */
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .elementor-button-content-wrapper,
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .thn-liquid__wrap {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: 0 !important;
}

/* De tekstpil. */
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .elementor-button-text,
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .thn-liquid__text {
    display: flex;
    align-items: center;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border-radius: var(--btn-radius);
    line-height: 1;
    white-space: nowrap;
}

/* Het ronde pijlvlak, even hoog als de tekstpil. */
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .elementor-button-icon,
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .thn-liquid__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Even breed als de tekstpil hoog is: tweemaal de padding plus de regel.
       Een vaste breedte, want een breedte die uit de hoogte volgt telt niet
       mee als de browser de breedte van de knop bepaalt. */
    width: calc(2 * var(--btn-pad-y) + 1em);
    margin: 0 0 0 var(--liquid-gap);
    padding: 0;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border-radius: 10rem;
    transition: transform var(--liquid-speed) var(--liquid-ease);
}

/* De pijl staat schuin omhoog en draait bij hover met de klok mee recht. */
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .elementor-button-icon svg,
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .thn-liquid__icon svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    transition: transform var(--liquid-speed) var(--liquid-ease);
}

.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:hover .elementor-button-icon svg,
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:hover .thn-liquid__icon svg {
    transform: rotate(var(--liquid-turn));
}

/* Bij hover schiet het pijlrondje los en rekt het filter de pillen uit. */
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:hover .elementor-button-icon,
.elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:hover .thn-liquid__icon {
    transform: translateX(var(--liquid-move));
}

/* Icoontje van de tertiary button draait 45 graden bij hover. */
.elementor-widget-button.btn-tertiary .thn-btn .elementor-button-icon svg {
    transition: transform .7s cubic-bezier(.19, 1, .22, 1);
}

.elementor-widget-button.btn-tertiary .thn-btn:hover .elementor-button-icon svg {
    transform: rotate(45deg);
}


/* Wie minder beweging wil, ziet de knop stil staan. */
@media (prefers-reduced-motion: reduce) {
    .elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .elementor-button-icon,
    .elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .thn-liquid__icon,
    .elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .elementor-button-icon svg,
    .elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn .thn-liquid__icon svg {
        transition: none;
    }

    .elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:hover .elementor-button-icon,
    .elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:hover .thn-liquid__icon,
    .elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:hover .elementor-button-icon svg,
    .elementor-widget-button:not(.btn-tertiary) .thn-btn.thn-btn:hover .thn-liquid__icon svg {
        transform: none;
    }
}