/*
 * embed.css — vormgeving van de insluitbare widgets.
 *
 * Uitgangspunt: de widget staat op andermans pagina en moet daar niet als een
 * advertentie uitzien. Dus neutrale systeemtypografie, transparante
 * achtergrond, geen merkkleur als vlak. De enige merkuiting is het logo in de
 * bronregel onderaan.
 *
 * DRIE thema-toestanden, niet twee. Dat onderscheid is de kern van dit bestand:
 *
 *   1. Geen data-embed-theme  -> volg prefers-color-scheme (de bezoeker beslist)
 *   2. data-embed-theme=light -> altijd licht, ook op een donker systeem
 *   3. data-embed-theme=dark  -> altijd donker, ook op een licht systeem
 *
 * Waarom (2) en (3) moeten bestaan: prefers-color-scheme volgt het systeem van
 * de bezóéker, maar wat telt is hoe de host-pagina eruitziet. Een site met een
 * permanent donker ontwerp krijgt bij een bezoeker in lichte modus anders een
 * wit blok op donkere grond. Die site zet ?theme=dark.
 *
 * Alle kleuren zijn daarom tokens op `.rf-embed`; componenten verwijzen nooit
 * rechtstreeks naar een kleur binnen een media-query. Een kleur die alleen
 * binnen `@media (prefers-color-scheme: dark)` bestaat, geldt niet in toestand
 * (3) — dan krijg je de tekst van het ene thema op de grond van het andere.
 *
 * --rf-embed-accent is de kleur die de insluitende site mag overschrijven
 * (via ?accent= op de embed-URL). Standaard is dat het Rechtfabriek-groen,
 * maar wie hem op zijn eigen huisstijl zet, houdt de widget langer staan.
 */

/*
 * De widget moet de hele iframe vullen, niet alleen zijn eigen inhoud.
 *
 * Een insluiter geeft het iframe een vaste hoogte, en die is bijna altijd
 * ruimer dan de inhoud. Blijft de widget dan zo hoog als zijn tekst, dan zie
 * je daaronder de kale iframe-body — bij een donker thema een wit vlak van
 * honderden pixels. Vandaar height:100% op de documentwortel en min-height op
 * de widget zelf: zijn achtergrond loopt dan door tot de onderrand.
 */
html, body { height: 100%; margin: 0; }

/*
 * Kleurtokens op :root, niet op de componentselectors.
 *
 * Twee eisen die elkaar bijten. De calculator-component draait ook los op
 * /griffierecht-berekenen, zonder .rf-embed-wrapper — daar moeten de tokens
 * dus ook gelden. Maar zet je ze óók op .gr-calculator, dan herdefinieert dat
 * kind binnen de widget de accentkleur die de server via een style-attribuut
 * op .rf-embed heeft gezet, en blijft een ingesloten widget met ?accent=
 * gewoon groen.
 *
 * :root lost beide op: overal beschikbaar, en de inline waarde op .rf-embed
 * wint binnen die subtree. De namen zijn geprefixt, dus lekken is onschadelijk.
 */
:root {
    /* rf-green-dark uit de huisstijl, niet rf-green. Het lichtere #428f4c
       haalt met witte tekst maar 3,99 contrast; deze tint 5,76. Zo blijft de
       knop wit-op-groen zonder de toegankelijkheidsnorm te schenden. */
    --rf-embed-accent: #327339;

    /* Wordt server-side overschreven zodra een site zelf een accentkleur
       kiest: bij een lichte keuze moet de knoptekst donker worden. Zie
       core/kleur.py en _tekstkleur_bij in blueprints/embed/routes.py. */
    --rf-embed-accent-tekst: #ffffff;

    --rf-embed-ground: transparent;
    --rf-embed-surface: #ffffff;
    --rf-embed-ink: #1c1f2b;
    --rf-embed-ink-soft: #4a5152;
    --rf-embed-muted: #6e7670;
    --rf-embed-line: #dfe1e3;
    --rf-embed-line-soft: #eceeeb;
    --rf-embed-highlight: #e6f9ec;

    /* Het accent als TEKSTkleur is iets anders dan het accent als vlak.
       Een knop met een donkergroen vlak en witte letters werkt op elke grond;
       diezelfde donkergroene kleur als losse linktekst op een donkere grond
       niet. In het donkere thema wordt deze daarom opgelicht — via color-mix,
       zodat het ook klopt als de insluiter met ?accent= een eigen kleur kiest. */
    --rf-embed-accent-ink: var(--rf-embed-accent);

    /* De transitievergoeding-component brengt zijn eigen stylesheet mee
       (components/tools/transitievergoeding-calculator.css) en gebruikt daarin
       --rf-red uit main.css. Die laadt hier niet mee, waardoor de variabele
       leeg zou zijn en de tekst zijn kleur van de ouder erfde. Hier mappen we
       hem op de accentkleur van de widget. */
    --rf-red: var(--rf-embed-accent-ink);

    --rf-embed-fout-ink: #9e190e;
    --rf-embed-fout-grond: #f9efef;
    --rf-embed-fout-lijn: #e3b7b2;

    /* Het logo is zwart met rode accenten en verdwijnt op donkere grond.
       invert() maakt het zwart wit, maar zou het rood cyaan maken;
       hue-rotate(180deg) draait die kleuromslag terug. Netto: witte letters
       met het rood ongeveer intact — zonder dat er een aparte lichte
       logovariant hoeft te bestaan. */
    --rf-embed-logo-filter-dark: invert(1) hue-rotate(180deg);

    /* Dropdown-pijl; zelfde donkergrijs als Bootstrap op de site. */
    --rf-embed-select-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}

/* Alleen de widget zelf: op een landingpage moet de component juist de
   typografie van de pagina volgen, niet die van de kale iframe. */
.rf-embed {
    min-height: 100%;
    background: var(--rf-embed-ground);
    color: var(--rf-embed-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    padding: 4px;
}

/* Toestand 1: systeemvoorkeur volgen — maar niet als de site expliciet licht koos. */
@media (prefers-color-scheme: dark) {
    .rf-embed:not([data-embed-theme="light"]) {
        --rf-embed-surface: #191d24;
        --rf-embed-ink: #e7eae5;
        --rf-embed-ink-soft: #bcc3bc;
        --rf-embed-muted: #8e968d;
        --rf-embed-line: #2c333a;
        --rf-embed-line-soft: #232931;
        --rf-embed-highlight: #1b2a20;
        --rf-embed-accent-ink: color-mix(in srgb, var(--rf-embed-accent) 55%, #ffffff);
        --rf-embed-select-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238e968d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    --rf-embed-fout-ink: #e58275;
        --rf-embed-fout-grond: #2b1d1b;
        --rf-embed-fout-lijn: #5a2c26;
    }

    .rf-embed:not([data-embed-theme="light"]) .rf-embed-logo {
        filter: var(--rf-embed-logo-filter-dark);
    }
}

/*
 * Een expliciet gekozen thema krijgt óók een expliciete achtergrond.
 *
 * In de automatische stand is de widget transparant: hij neemt de grond van de
 * host-pagina over, en dat is precies de bedoeling. Maar wie ?theme=dark zet,
 * kiest donker terwijl de host-pagina licht kan zijn — dan levert transparant
 * lichte tekst op lichte grond op. Bij een expliciete keuze verft de widget
 * dus zijn eigen ondergrond.
 */
.rf-embed[data-embed-theme="light"] { --rf-embed-ground: #ffffff; }
.rf-embed[data-embed-theme="dark"] { --rf-embed-ground: #14171f; }

/* Eigen grond betekent zichtbare randen, dus wat meer lucht eromheen. */
.rf-embed[data-embed-theme] { padding: 14px 16px; }

/* Toestand 3: de site zet donker vast, ongeacht het systeem van de bezoeker. */
.rf-embed[data-embed-theme="dark"] {
    --rf-embed-surface: #191d24;
    --rf-embed-ink: #e7eae5;
    --rf-embed-ink-soft: #bcc3bc;
    --rf-embed-muted: #8e968d;
    --rf-embed-line: #2c333a;
    --rf-embed-line-soft: #232931;
    --rf-embed-highlight: #1b2a20;
    --rf-embed-accent-ink: color-mix(in srgb, var(--rf-embed-accent) 55%, #ffffff);
    --rf-embed-select-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238e968d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    --rf-embed-fout-ink: #e58275;
    --rf-embed-fout-grond: #2b1d1b;
    --rf-embed-fout-lijn: #5a2c26;
}

.rf-embed[data-embed-theme="dark"] .rf-embed-logo {
    filter: var(--rf-embed-logo-filter-dark);
}

/* ---------- inhoud ---------- */

.rf-embed-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rf-embed h2 {
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
    margin: 0;
    color: var(--rf-embed-ink);
}

.rf-embed p { margin: 0; }

.rf-embed .rf-embed-uitleg,
.gr-calculator .rf-embed-uitleg {
    font-size: 13.5px;
    color: var(--rf-embed-muted);
}

/* ---------- formulier ---------- */

.rf-embed .form-label {
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--rf-embed-ink-soft);
}

.rf-embed .form-control,
.rf-embed .form-select,
.rf-embed .input-group-text {
    background-color: var(--rf-embed-surface);
    border-color: var(--rf-embed-line);
    color: var(--rf-embed-ink);
    font-size: 15px;
}

.rf-embed .form-control:focus,
.rf-embed .form-select:focus {
    border-color: var(--rf-embed-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-embed-accent) 22%, transparent);
}

.rf-embed .input-group-text { color: var(--rf-embed-muted); }

/*
 * Keuzelijsten in de widget hun pijltje geven.
 *
 * Alleen binnen .rf-embed: op een landingpage laadt main.css mee en regelt die
 * het al (zie de toelichting daar bij "Keuzelijsten hun dropdown-pijltje
 * teruggeven"). Twee bronnen voor dezelfde pijl zou betekenen dat ze uit elkaar
 * gaan lopen.
 *
 * De widget heeft wel een eigen pijl nodig, want main.css laadt niet mee in het
 * iframe. De kleur volgt het thema: Bootstrap's donkergrijs is op een donkere
 * ondergrond niet te zien.
 */
.rf-embed .form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--rf-embed-select-pijl);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px;
    padding-right: 36px;
}

.rf-embed .form-text,
.rf-embed .form-check-label { color: var(--rf-embed-muted); font-size: 13px; }

/* Ook .rf-btn: de transitievergoeding-component komt van een landingpage en
   gebruikt de rf-btn-classes uit landing-components.css. Die stylesheet laadt
   hier bewust niet mee (te veel, en niet neutraal), dus geven we die knoppen
   hier hun embed-uiterlijk. */
.rf-embed .btn-rf-embed,
.rf-embed .rf-btn {
    display: inline-block;
    background-color: var(--rf-embed-accent);
    border: 1px solid var(--rf-embed-accent);
    color: var(--rf-embed-accent-tekst);
    font-size: 15px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

.rf-embed .btn-rf-embed:hover,
.rf-embed .btn-rf-embed:focus,
.rf-embed .rf-btn:hover,
.rf-embed .rf-btn:focus {
    filter: brightness(.92);
    color: var(--rf-embed-accent-tekst);
}

.rf-embed .btn-rf-embed:focus-visible,
.rf-embed .rf-btn:focus-visible {
    outline: 2px solid var(--rf-embed-accent);
    outline-offset: 2px;
}

.rf-embed .rf-btn-pill { border-radius: 999px; }

/* Tekstknoppen die secties open- en dichtklappen ('Ik weet alleen mijn
   uurloon', 'Is er een vaste eindejaarsuitkering'). Bootstrap maakt hier
   felblauwe links van; die vallen uit de toon en zijn op donker slecht
   leesbaar. */
.rf-embed .btn-link-inline,
.rf-embed .btn.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rf-embed-accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rf-embed .btn-link-inline:hover,
.rf-embed .btn.btn-link:hover { filter: brightness(1.1); }

.rf-embed .btn-link-inline:focus-visible,
.rf-embed .btn.btn-link:focus-visible {
    outline: 2px solid var(--rf-embed-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Aankruisvakjes krijgen op donkere grond anders een wit vlak. */
.rf-embed .form-check-input {
    background-color: var(--rf-embed-surface);
    border-color: var(--rf-embed-line);
}

.rf-embed .form-check-input:checked {
    background-color: var(--rf-embed-accent);
    border-color: var(--rf-embed-accent);
}

.rf-embed .form-check-input:focus {
    border-color: var(--rf-embed-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-embed-accent) 22%, transparent);
}

/* ---------- tabel ----------
   Ook onder .gr-calculator: de component kan met toon_tabel=true op een
   landingpage staan, en dan is er geen .rf-embed-wrapper. */

.rf-embed-tabelwrap { overflow-x: auto; }

.rf-embed table,
.gr-calculator table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
}

.rf-embed thead th,
.gr-calculator thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rf-embed-muted);
    border-bottom: 1px solid var(--rf-embed-line);
    padding: 8px 12px;
    white-space: nowrap;
}

.rf-embed tbody td,
.gr-calculator tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--rf-embed-line-soft);
    color: var(--rf-embed-ink-soft);
}

.rf-embed tbody tr:last-child td,
.gr-calculator tbody tr:last-child td { border-bottom: none; }

.rf-embed td.rf-embed-bedrag,
.gr-calculator td.rf-embed-bedrag { text-align: right; font-weight: 600; color: var(--rf-embed-ink); }

/* De rij die bij het ingevulde bedrag hoort. */
.rf-embed tbody tr.is-actief td,
.gr-calculator tbody tr.is-actief td {
    background: var(--rf-embed-highlight);
    color: var(--rf-embed-ink);
}

.rf-embed tbody tr.is-actief td:first-child,
.gr-calculator tbody tr.is-actief td:first-child {
    box-shadow: inset 3px 0 0 var(--rf-embed-accent);
}

/* ---------- uitkomst ---------- */

.rf-embed-uitkomst {
    border: 1px solid var(--rf-embed-line);
    border-left: 3px solid var(--rf-embed-accent);
    border-radius: 0 4px 4px 0;
    padding: 12px 16px;
    background: var(--rf-embed-surface);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rf-embed-uitkomst-bedrag {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--rf-embed-ink);
    font-variant-numeric: tabular-nums;
}

.rf-embed-uitkomst-toelichting { font-size: 13.5px; color: var(--rf-embed-muted); }

.rf-embed-fout {
    border: 1px solid var(--rf-embed-fout-lijn);
    background: var(--rf-embed-fout-grond);
    color: var(--rf-embed-fout-ink);
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 14px;
}

/* ---------- bronregel ---------- */

.rf-embed-bron {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--rf-embed-line-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--rf-embed-muted);
}

.rf-embed-bron-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    opacity: .85;
}

.rf-embed-bron-link:hover,
.rf-embed-bron-link:focus-visible { opacity: 1; }

.rf-embed-bron-link:focus-visible {
    outline: 2px solid var(--rf-embed-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* 34px: bij de brede logoverhouding (2,8:1) is dit de kleinste maat waarop
   "rechtfabriek" nog vlot leesbaar is. Kleiner en de merknaam wordt een vlek. */
.rf-embed-logo { display: block; height: 34px; width: auto; }

.rf-embed-bron-tekst { line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
    .rf-embed * { transition: none !important; animation: none !important; }
}