/* @custom-gratisqrcode: F-landing-styling - Tolkin-look unified styling voor alle scan landing-pages
 * Toegepast op: text, pdf, image, audio, video, review, multilink, landingpage, vcard,
 *               coupon, event, whatsapp_dynamic, app_store, photo_collection.
 * Buiten scope: biolink (eigen wrapper + theming), splash/paywall pages.
 *
 * Per-QR overrides gebeuren via CSS-variabelen geset in een inline <style>-blok in
 * vcard_wrapper.php op basis van settings.styling.* (Feature 2).
 */

body.landing-body {
    background: var(--landing-bg, #f0f2f5);
    margin: 0;
    padding: 20px 16px;
    font-family: var(--landing-font, inherit);
    color: var(--landing-text, #1a1a1a);
    min-height: 100vh;
}

.landing-card {
    background: var(--landing-card-bg, #ffffff);
    border-radius: var(--landing-card-radius, 16px);
    padding: 20px 24px;
    box-shadow: var(--landing-card-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
    max-width: var(--landing-card-width, 480px);
    margin: 0 auto 12px auto;
    overflow: hidden;
}

.landing-card h1,
.landing-card h2,
.landing-card h3 {
    color: var(--landing-text, #1a1a1a);
}

/* Op kleine schermen iets minder horizontaal padding zodat content niet te smal wordt */
@media (max-width: 540px) {
    body.landing-body {
        padding: 12px 8px;
    }

    .landing-card {
        padding: 16px 18px;
        border-radius: 14px;
    }
}

/* Seamless modifier: outer .landing-card transparant voor types met eigen volledige
   theming (vcard classic/modern). Body-bg blijft uniform grijs; thema-card rendert
   visueel ongestoord. */
body.landing-body--seamless .landing-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}

/* Reset het volledige paginafundament — overschrijft eventuele oude Bootstrap-card overflow
   die in legacy partials voorkomt. Geen card-in-card meer. */
.landing-card > .container,
.landing-card > .container-fluid {
    padding: 0;
    max-width: none;
}

/* Image/video/PDF landings tonen vaak een media-element direct in de card.
   Zorg dat ze niet onder de border-radius uitkomen. */
.landing-card img,
.landing-card video,
.landing-card iframe {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.landing-card .pdf-viewer-container iframe,
.landing-card .pdf-viewer-container embed {
    width: 100%;
    border-radius: 8px;
}

/* Footer-partial _guest_branding_footer.php komt buiten .landing-card.
   Een lichte styling zodat het visueel rust op de grijze body-bg. */
.landing-body > main > .guest-branding-footer,
.landing-body .guest-branding-footer {
    max-width: var(--landing-card-width, 480px);
    margin: 8px auto 16px auto;
    padding: 0 8px;
    text-align: center;
    font-size: 0.85em;
    color: #6c757d;
}

/* Force light theme voor scan-landings — dark-mode geldt alleen voor dashboard + biolink. */
body.landing-body[data-theme-style="dark"] {
    background: var(--landing-bg, #f0f2f5);
    color: var(--landing-text, #1a1a1a);
}