/*
 * citeerblok.css — bronvermelding met kopieerknop op de rekentool-pagina's.
 *
 * Kleuren komen uit de bestaande RF-variabelen in main.css; hier staan geen
 * losse hexwaarden.
 */

.rf-citeerblok {
    border: 1px solid var(--rf-light-gray);
    border-left: 3px solid var(--rf-green);
    border-radius: 0 4px 4px 0;
    background: var(--rf-white);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rf-citeerblok-kop {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--rf-text-dark);
}

.rf-citeerblok-kop .bi { color: var(--rf-green); }

.rf-citeerblok-bron {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--rf-text-secondary);
    background: var(--rf-grey);
    border-radius: 4px;
    padding: 10px 14px;
    word-break: break-word;
}

.rf-citeerblok-acties {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.rf-citeerblok-knop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--rf-green);
    border: 1px solid var(--rf-green);
    color: var(--rf-text-light);
    font-size: 14.5px;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 999px;
    cursor: pointer;
}

.rf-citeerblok-knop:hover { background: var(--rf-green-dark); border-color: var(--rf-green-dark); }

.rf-citeerblok-knop:focus-visible {
    outline: 2px solid var(--rf-green-dark);
    outline-offset: 2px;
}

.rf-citeerblok-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    color: var(--rf-green-dark);
    text-decoration: none;
    font-weight: 600;
}

.rf-citeerblok-link:hover { text-decoration: underline; }

.rf-citeerblok-voorwaarde {
    margin: 0;
    font-size: 13.5px;
    color: var(--rf-text-secondary);
}

/* ---------------------------------------------------------------------------
 * Insluitcode — het aanbod om een rekentool op je eigen site te zetten.
 * Zelfde bouwstenen als het citeerblok; staat hier omdat beide één
 * kopieerknop-implementatie delen (static/js/tools/kopieerknop.js).
 * ------------------------------------------------------------------------- */

.rf-insluitcode {
    border: 1px solid var(--rf-light-gray);
    border-radius: 6px;
    background: var(--rf-white);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.rf-insluitcode-titel {
    font-size: 17px;
    font-weight: 650;
    margin: 0;
    color: var(--rf-text-dark);
}

.rf-insluitcode-code {
    margin: 0;
    background: var(--rf-dark);
    color: var(--rf-light);
    border-radius: 4px;
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

.rf-insluitcode-code code { color: inherit; background: none; padding: 0; }

.rf-insluitcode-acties {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: auto;
}

.rf-insluitcode-knop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--rf-green);
    border: 1px solid var(--rf-green);
    color: var(--rf-text-light);
    font-size: 14.5px;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 999px;
    cursor: pointer;
}

.rf-insluitcode-knop:hover { background: var(--rf-green-dark); border-color: var(--rf-green-dark); }

.rf-insluitcode-knop:focus-visible {
    outline: 2px solid var(--rf-green-dark);
    outline-offset: 2px;
}

.rf-insluitcode-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    color: var(--rf-green-dark);
    text-decoration: none;
    font-weight: 600;
}

.rf-insluitcode-link:hover { text-decoration: underline; }

/* --- configurator: thema- en kleurkeuze --------------------------------- */

.rf-insluitcode-opties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.rf-insluitcode-optie { display: flex; flex-direction: column; gap: 6px; }

.rf-insluitcode-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rf-text-dark);
    letter-spacing: .02em;
}

.rf-insluitcode-keuzes { display: flex; flex-wrap: wrap; gap: 6px; }

.rf-insluitcode-keuze {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--rf-light-gray);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 14px;
    cursor: pointer;
    background: var(--rf-white);
    color: var(--rf-text-secondary);
}

.rf-insluitcode-keuze:hover { border-color: var(--rf-green); }

/* De aangevinkte keuze krijgt de merkkleur; :has houdt de markup schoon
   (geen extra class die JS moet bijhouden). */
.rf-insluitcode-keuze:has(input:checked) {
    border-color: var(--rf-green);
    background: var(--rf-light-green);
    color: var(--rf-green-dark);
    font-weight: 600;
}

.rf-insluitcode-keuze:has(input:focus-visible) {
    outline: 2px solid var(--rf-green-dark);
    outline-offset: 2px;
}

.rf-insluitcode-keuze input { margin: 0; }

.rf-insluitcode-kleur { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.rf-insluitcode-kleur input[type="color"] {
    inline-size: 44px;
    block-size: 32px;
    padding: 2px;
    border: 1px solid var(--rf-light-gray);
    border-radius: 4px;
    background: var(--rf-white);
    cursor: pointer;
}

.rf-insluitcode-kleur code {
    font-size: 13px;
    color: var(--rf-text-secondary);
    text-transform: lowercase;
}

.rf-insluitcode-herstel {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: var(--rf-green-dark);
    text-decoration: underline;
    cursor: pointer;
}

.rf-insluitcode-herstel:focus-visible { outline: 2px solid var(--rf-green-dark); outline-offset: 2px; }

.rf-insluitcode-hint { margin: 0; font-size: 12.5px; color: var(--rf-text-secondary); }

.rf-insluitcode-preview { display: flex; flex-direction: column; gap: 6px; }

/* Geen eigen achtergrond: de widget is in de automatische stand transparant en
   moet in het voorbeeld dezelfde grond krijgen als hier op de pagina. Zet je er
   wit onder, dan liegt het voorbeeld over hoe hij op een donkere site oogt. */
.rf-insluitcode-preview iframe {
    border: 1px dashed var(--rf-light-gray);
    border-radius: 4px;
}