/* Huisstijl van takenbord.online, geïnspireerd door de Steinerpedagogie: crème papier, warme aardetinten en de kleuren
   van blokwaskrijt (zie /img/logo.svg). De platformpagina's dragen de klasse .platform.

   Op een takenbord zet /js/theme.js --tb-primary, --tb-accent, --tb-background en --tb-font volgens de gekozen stijl;
   de afgeleide tinten worden hier berekend. Ook gedeclareerd op .tb-themed, zodat het voorbeeld in platformbeheer
   zijn eigen kleuren kan krijgen. */
:root {
    --brand-cream: #f7f1e3;
    --brand-paper: #fffdf8;
    --brand-ink: #3b2f25;
    --brand-muted: #7a6a5a;
    --brand-line: #e8dfcc;
    --brand-earth: #8a6a4a;
    --brand-green: #4a7438;
    --brand-red: #c8553d;
    --brand-ochre: #e2a33b;
    --brand-indigo: #4a7fb0;

    --tb-primary: var(--brand-green);
    --tb-primary-rgb: 74, 116, 56;
    --tb-accent: var(--brand-earth);
    --tb-background: var(--brand-cream);
    --tb-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

:root, .tb-themed {
    --tb-primary-dark: color-mix(in srgb, var(--tb-primary) 78%, black);
    --tb-primary-light: color-mix(in srgb, var(--tb-primary) 10%, white);
    --bs-primary: var(--tb-primary);
    --bs-primary-rgb: var(--tb-primary-rgb);
    --bs-link-color: var(--tb-primary);
    --bs-link-color-rgb: var(--tb-primary-rgb);
    --bs-link-hover-color: var(--tb-primary-dark);
}

body {
    background: var(--tb-background);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tb-themed, body.tb-themed { font-family: var(--tb-font); }

main { flex: 1; }

.btn-primary {
    --bs-btn-bg: var(--tb-primary);
    --bs-btn-border-color: var(--tb-primary);
    --bs-btn-hover-bg: var(--tb-primary-dark);
    --bs-btn-hover-border-color: var(--tb-primary-dark);
    --bs-btn-active-bg: var(--tb-primary-dark);
    --bs-btn-disabled-bg: var(--tb-primary);
    --bs-btn-disabled-border-color: var(--tb-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--tb-primary);
    --bs-btn-border-color: var(--tb-primary);
    --bs-btn-hover-bg: var(--tb-primary);
    --bs-btn-hover-border-color: var(--tb-primary);
    --bs-btn-active-bg: var(--tb-primary-dark);
}

.navbar-brand { color: var(--tb-primary) !important; font-weight: 600; }

.form-card { max-width: 480px; }
.form-card-wide { max-width: 640px; }

.slug-preview { font-family: var(--bs-font-monospace); }

footer { font-size: .875rem; }

/* ---------- Huisstijl op de platformpagina's ---------- */

.platform {
    font-family: var(--tb-font);
    color: var(--brand-ink);
    --bs-body-color: var(--brand-ink);
    --bs-secondary-color: var(--brand-muted);
    --bs-border-color: var(--brand-line);
    --bs-border-radius: .75rem;
    --bs-border-radius-lg: 1rem;
    --bs-card-bg: var(--brand-paper);
}

.platform h1, .platform h2, .platform h3, .platform .h3, .platform .h4, .platform .h5 { font-weight: 800; letter-spacing: -.01em; }

.platform .text-muted { color: var(--brand-muted) !important; }

/* Navigatiebalk: papier met onderaan een streep in de vier waskrijtkleuren */
.platform .navbar {
    background: var(--brand-paper) !important;
    border-bottom: 0 !important;
    box-shadow: inset 0 -1px 0 var(--brand-line);
    position: relative;
}

.platform .navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--brand-red) 0 25%, var(--brand-ochre) 25% 50%, var(--brand-green) 50% 75%, var(--brand-indigo) 75% 100%);
    opacity: .85;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--brand-ink) !important;
    text-decoration: none;
    letter-spacing: -.01em;
}

.brand img { width: 36px; height: 36px; margin-right: .55rem; }
.brand span { font-weight: 600; color: var(--brand-earth); }

.platform .card {
    border-color: var(--brand-line);
    border-radius: 1rem;
    background: var(--brand-paper);
    box-shadow: 0 1px 2px rgba(59, 47, 37, .04), 0 6px 20px rgba(59, 47, 37, .05) !important;
}

.platform .btn { border-radius: 2rem; font-weight: 700; padding-left: 1.1rem; padding-right: 1.1rem; }
.platform .btn-sm { padding-left: .8rem; padding-right: .8rem; }

.platform .form-control, .platform .form-select {
    border-color: var(--brand-line);
    border-radius: .65rem;
    background-color: #fff;
}

.platform .form-control:focus, .platform .form-select:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 .2rem rgba(74, 116, 56, .18);
}

.platform .alert { border-radius: .85rem; }

/* Tips bij het kiezen van een naam (nieuw takenbord) */
.name-tips {
    background: var(--brand-cream);
    border-left: 4px solid var(--brand-ochre);
    border-radius: .6rem;
    padding: .6rem .85rem;
    font-size: .875rem;
    color: var(--brand-ink);
}
.name-tips ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.name-tips code { color: var(--brand-earth); background: var(--brand-paper); padding: 0 .25rem; border-radius: .25rem; }

.platform .list-group { --bs-list-group-bg: var(--brand-paper); --bs-list-group-border-color: var(--brand-line); }

.platform .table { --bs-table-bg: var(--brand-paper); }

.platform footer { color: var(--brand-muted); }
.platform footer a { color: var(--brand-earth); }

/* Een markering als een streep waskrijt onder een woord */
.crayon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.1' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='4'/%3E%3C/filter%3E%3Crect x='2' y='6' width='196' height='9' rx='4.5' fill='%23e2a33b' opacity='.75' filter='url(%23k)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% .5em;
    background-position: 0 92%;
    padding: 0 .1em;
}

/* ---------- Landingspagina ---------- */

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 34% 55% at 80% 45%, rgba(226, 163, 59, .20), transparent 70%),
        radial-gradient(ellipse 22% 35% at 94% 88%, rgba(200, 85, 61, .10), transparent 70%),
        var(--brand-cream);
}

.hero .lead { color: var(--brand-muted); }

.hero-logo { width: min(280px, 70vw); height: auto; filter: drop-shadow(0 10px 18px rgba(59, 47, 37, .12)); }

.feature-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
}

.feature-icon.red { background: var(--brand-red); }
.feature-icon.ochre { background: var(--brand-ochre); }
.feature-icon.indigo { background: var(--brand-indigo); }

.steps { list-style: none; padding: 0; margin: 0; counter-reset: stap; }

.steps li {
    counter-increment: stap;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: .9rem 0;
    border-bottom: 1px dashed var(--brand-line);
}

.steps li:last-child { border-bottom: 0; }

.steps li::before {
    content: counter(stap);
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    background: var(--brand-green);
}

.steps li:nth-child(4n+1)::before { background: var(--brand-red); }
.steps li:nth-child(4n+2)::before { background: var(--brand-ochre); }
.steps li:nth-child(4n+3)::before { background: var(--brand-green); }
.steps li:nth-child(4n+4)::before { background: var(--brand-indigo); }

/* Meldingen en de knop "Ingeschreven" in de huisstijlkleuren in plaats van die van Bootstrap */
.platform .toast.text-bg-info { background-color: var(--brand-indigo) !important; color: #fff !important; }
.platform .toast.text-bg-success { background-color: var(--tb-primary) !important; color: #fff !important; }
.platform .toast.text-bg-warning { background-color: var(--brand-ochre) !important; color: var(--brand-ink) !important; }
.platform .toast.text-bg-danger { background-color: var(--brand-red) !important; color: #fff !important; }
.platform .btn-success {
    --bs-btn-bg: var(--tb-primary);
    --bs-btn-border-color: var(--tb-primary);
    --bs-btn-disabled-bg: var(--tb-primary);
    --bs-btn-disabled-border-color: var(--tb-primary);
}