/* ═══════════════════════════════════════════════════════
   06_NATUUR.CSS — Burgerplatform  ·  organische "natuur"-look
   ───────────────────────────────────────────────────────
   In de natuur is niets recht: kaarten, tegels, afbeeldingen, velden en
   badges krijgen zachte, ongelijke ronde hoeken. Bewust NIET storend:
   - functionele pill-knoppen (hero-CTA's, share) blijven pill (geen !important
     op .btn, dus de specifiekere pill-regels winnen);
   - de footer-navigatie houdt z'n eigen vorm (specifiekere selector wint).
   Gebruikt de vorm-tokens uit 01_kleuren.css en draait op prefers-color-scheme.
═══════════════════════════════════════════════════════ */

/* ── Kaarten & tegels: de kern van de look ─────────────── */
.card,
.card-rounded,
.bp-card,
.bp-home-card,
.rekening-card,
.signup-card,
.bp-home .bp-pillar,
.tile-card {
    border-radius: var(--radius-organic-lg) !important;
    overflow: hidden;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* Afbeeldingen binnen kaarten vloeien mee (bovenhoeken) */
.card-img,
.card-img-top,
.bp-home .bp-newsgrid .card-img-top {
    border-radius: 22px 26px 0 0 !important;
}

/* Losse beeld-blokken subtieler organisch */
.bp-home .bp-split__img,
.bp-home .bp-hero__media {
    border-radius: var(--radius-organic-md) !important;
}

/* ── Velden & badges: subtiel organisch ────────────────── */
.form-control,
.form-select {
    border-radius: 12px 16px 10px 14px !important;
}
.form-control:focus,
.form-select:focus {
    border-radius: 14px 10px 16px 12px !important;
}
.badge {
    border-radius: 8px 12px 10px 6px !important;
}

/* ── Knoppen: zacht organisch, MAAR pills blijven pill ──
   Geen !important, zodat specifiekere pill-regels (hero-CTA's, share,
   sort/tag/taal) hun ronde vorm houden. Gewone knoppen worden organisch. */
.btn {
    border-radius: var(--radius-organic-sm);
    transition: all 0.2s ease-in-out;
}

/* ── Dropdowns & modals (topmenu/modals; footer blijft plat) ── */
.dropdown-menu,
.modal-content {
    border-radius: 16px 22px 20px 14px !important;
}

/* ── Dynamische tegelkleur (optioneel, voor .tile-card/.card-rounded) ── */
.tile-card,
.card-rounded {
    background-color: var(--tile-bg, var(--accent)) !important;
    color: var(--tile-color, #ffffff) !important;
}
.tile-card .card-title,
.tile-card .card-text,
.card-rounded .card-title,
.card-rounded .card-text {
    color: inherit;
}

/* Zweef-effect (drijvend op water) */
.card-rounded:hover,
.tile-card:hover {
    transform: translateY(-4px);
}

/* ── Dark mode: iets diepere schaduw & rustiger tegels ─── */
@media (prefers-color-scheme: dark) {
    .card,
    .dropdown-menu,
    .modal-content {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }
    .tile-card,
    .card-rounded {
        filter: brightness(0.88) saturate(1.05);
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
}