/* ====================================================================
 * nr-cta-fix.css — correcties voor het sitewide "Ready to deploy?"
 * pre-footer CTA-paneel (gerenderd in footer.php).
 *
 * 1. Sparkle-decoratie: de twee witte vierpunt-sterren (Ascone-
 *    signatuur, ::before/::after op .nr-footer__cta-grid in nr26.css)
 *    staan absoluut rechtsboven. Zodra de grid onder 992px naar een
 *    kolom klapt, loopt de kop over de volle breedte en vallen de
 *    sterren midden op "deploy?" en door de bodytekst. Onder die
 *    breakpoint gaan ze daarom uit; op desktop blijven ze staan.
 *
 * 2. Vlag-icoon bij Phone: het 18px webp-vlaggetje rendert in de bone
 *    contactkaart als een wazig wit rechthoekje (ghost). Het voegt op
 *    die maat niets toe en valt buiten de lijn-icoon designtaal, dus
 *    visueel uit. Het <img>-element blijft in de DOM staan zodat
 *    js/nr-geo.js zijn NL/US-swap ongewijzigd kan blijven doen.
 *
 * 3. Mobiele spacing: iets meer lucht tussen kop en sterhoek, en de
 *    kop krijgt op smalle viewports word-wrap-veiligheid.
 * ==================================================================== */

/* 1. Sparkles alleen tonen zolang de tekst in de linkerkolom blijft */
@media (max-width: 991.98px) {
    html body .nr-footer__cta-grid::before,
    html body .nr-footer__cta-grid::after {
        content: none !important;
        display: none !important;
    }
}

/* 1b. Desktop: de kleine ster stond op top:92/right:128 en sneed door
 *     de bovenrand van de bone contactkaart (naast de 24/7-tag). Zet
 *     hem naast de grote ster in de bovenstrook, en laat de kaart
 *     boven de sterren schilderen zodat ze op tussenbreedtes nooit
 *     over de kaart kunnen vallen. */
@media (min-width: 992px) {
    html body .nr-footer__cta-grid::after {
        top: 44px !important;
        right: 152px !important;
    }
    html body .nr-footer__cta-grid .nr-footer__contact,
    html body .nr-footer__cta-grid aside {
        position: relative;
        z-index: 1;
    }
}

/* 2. Ghost-vlaggetje voor het telefoonnummer verbergen */
html body .nr-footer__contact .nr-footer__contact-flag,
html body #nr-footer-phone-flag {
    display: none !important;
    box-shadow: none !important;
}

/* 3. Mobiele spacing en uitlijning binnen het pine-paneel */
@media (max-width: 767.98px) {
    html body .nr-footer__cta-grid {
        padding: 36px 24px 28px !important;
    }
    html body .nr-footer__cta-headline {
        overflow-wrap: break-word;
        margin-bottom: 12px;
    }
    html body .nr-footer__cta-sub {
        margin-bottom: 24px;
    }
    html body .nr-footer__contact {
        padding: 20px !important;
    }
}