/*
 * De pagina's Alle functies (/functies), Meldingen en Rapporten en marge. Bovenop app.css en site.css.
 * Kleuren en de groepen (.s-group, .s-icon, .s-tone-*) komen uit site.css.
 */

/* Springen binnen de pagina */

.f-jump {
    background: #fff;
    border-bottom: 1px solid var(--bk-line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.f-jump .container {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding-block: .6rem;
    scrollbar-width: none;
}

.f-jump a {
    border-radius: 999px;
    color: var(--bk-ink);
    flex: none;
    font-size: .9375rem;
    font-weight: 600;
    padding: .4rem .9rem;
    text-decoration: none;
}

.f-jump a:hover,
.f-jump a:focus-visible {
    background: var(--s-sky);
    color: var(--s-blue-ink);
}

section[id] {
    scroll-margin-top: 4rem;
}

/* Bij elke bestelling, vanzelf (de kaart bovenaan Alle functies) */

.f-flow-card {
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 1.1rem;
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(15, 31, 58, .3);
    padding: 1.5rem 1.5rem 1.25rem;
}

.f-flow-title {
    color: var(--bk-muted);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.f-flow {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.f-flow li {
    display: grid;
    gap: .9rem;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    padding-bottom: 1rem;
    position: relative;
}

.f-flow li:not(:last-child)::before {
    background: var(--bk-line);
    bottom: 0;
    content: "";
    left: 1.05rem;
    position: absolute;
    top: 2.1rem;
    width: 2px;
}

.f-flow-icon {
    align-items: center;
    background: var(--s-sky);
    border-radius: 50%;
    color: var(--s-blue-ink);
    display: inline-flex;
    height: 2.1rem;
    justify-content: center;
    position: relative;
    width: 2.1rem;
}

.f-flow strong {
    display: block;
    font-family: var(--bk-font-display);
}

.f-flow div > span {
    color: var(--bk-muted);
    display: block;
    font-size: .9rem;
    line-height: 1.45;
}

/* Groepen met tegels */

.f-group-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    max-width: 46rem;
}

.f-group-head .s-icon {
    height: 3rem;
    margin-top: .2rem;
    width: 3rem;
}

.f-group-head h2 {
    margin-bottom: .4rem;
}

.f-group-head .bk-lead {
    margin: 0;
}

.f-tiles {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.f-tile {
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 1rem;
    border-top: 4px solid var(--tone-strong, var(--s-blue));
    color: var(--bk-ink);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.3rem 1.1rem;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}

.f-tile:hover,
.f-tile:focus-visible {
    box-shadow: 0 1rem 2rem -1rem rgba(15, 31, 58, .28);
    transform: translateY(-2px);
}

.f-tile h3 {
    font-size: 1.125rem;
    margin-bottom: .45rem;
}

.f-tile p {
    color: var(--bk-muted);
    font-size: .9375rem;
    margin-bottom: .9rem;
}

.f-tile-more {
    align-items: center;
    color: var(--tone, var(--s-blue-ink));
    display: inline-flex;
    font-size: .9rem;
    font-weight: 600;
    gap: .2rem;
    margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
    .f-tile {
        transition: none;
    }

    .f-tile:hover {
        transform: none;
    }
}

/* Kaarten, kolommen en losse blokken */

.f-card,
.f-columns-3 > div {
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 1rem;
    padding: 1.25rem 1.3rem;
}

.f-card h3,
.f-columns-3 h3 {
    font-size: 1.15rem;
    margin: .8rem 0 .4rem;
}

.f-card p,
.f-columns-3 p {
    color: var(--bk-muted);
    margin: 0;
}

.f-split {
    display: grid;
    gap: 2rem 3rem;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 2.5rem;
}

.f-split h3 {
    font-size: 1.2rem;
}

.f-pricing-band .f-split {
    align-items: center;
    margin-top: 0;
}

.f-formula {
    background: var(--s-mint-tint);
    border-left: 4px solid var(--s-mint);
    border-radius: .5rem;
    color: var(--s-mint-ink);
    font-weight: 600;
    padding: .8rem 1rem;
}

.f-indicators {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.f-indicators li {
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: .85rem;
    padding: 1rem 1.1rem;
}

.f-indicators strong {
    display: block;
    margin-bottom: .2rem;
}

.f-indicators span {
    color: var(--bk-muted);
    font-size: .9rem;
}

.f-note {
    color: var(--bk-muted);
    font-size: .9rem;
    margin-top: 1.25rem;
}

/* Getekende voorbeelden: meldingen en het weekrapport */

.f-alerts-panel {
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(15, 31, 58, .3);
    overflow: hidden;
}

.f-alerts-head {
    align-items: center;
    border-bottom: 1px solid var(--bk-line);
    display: flex;
    gap: .6rem;
    padding: .9rem 1.2rem;
}

.f-alerts-sub {
    color: var(--bk-muted);
    font-size: .875rem;
    margin-left: auto;
}

.f-bell {
    color: var(--bk-ink);
    display: inline-flex;
    margin-right: .35rem;
    position: relative;
}

.f-bell b {
    background: #d93025;
    border-radius: 999px;
    color: #fff;
    font-size: .65rem;
    line-height: 1;
    padding: .15rem .3rem;
    position: absolute;
    right: -.55rem;
    top: -.4rem;
}

.f-alerts ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.f-alert {
    display: grid;
    gap: .8rem;
    grid-template-columns: 2rem minmax(0, 1fr);
    padding: .9rem 1.2rem;
}

.f-alert + .f-alert {
    border-top: 1px solid var(--bk-line);
}

.f-alert p {
    font-size: .9rem;
    margin: 0;
}

.f-alert-icon {
    align-items: center;
    border-radius: .6rem;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.f-alert-red .f-alert-icon { background: #fdecea; color: #b3261e; }
.f-alert-sun .f-alert-icon { background: var(--s-sun-tint); color: var(--s-sun-ink); }
.f-alert-green .f-alert-icon { background: var(--s-mint-tint); color: var(--s-mint-ink); }

.f-alert .f-alert-title {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .15rem;
}

.f-alert-title span {
    color: var(--bk-muted);
    float: right;
    font-size: .8rem;
    font-weight: 400;
}

.f-alert .f-alert-mail {
    align-items: center;
    color: var(--bk-muted);
    display: flex;
    font-size: .8rem;
    gap: .3rem;
    margin-top: .3rem;
}

.f-report .bk-mail {
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(15, 31, 58, .3);
    overflow: hidden;
    padding: 0;
}

.f-report-body {
    padding: 1.1rem 1.5rem 1.4rem;
}

.f-report-body p {
    font-size: .9rem;
    margin-bottom: .5rem;
}

.f-report-range {
    color: var(--bk-muted);
}

.f-report-lines {
    display: grid;
    margin: 0 0 1rem;
}

.f-report-lines div {
    border-bottom: 1px solid var(--bk-line);
    display: flex;
    font-size: .9rem;
    gap: 1rem;
    justify-content: space-between;
    padding: .45rem 0;
}

.f-report-lines dt {
    color: var(--bk-muted);
    font-weight: 400;
}

.f-report-lines dd {
    margin: 0;
    text-align: right;
}

.f-delta {
    color: var(--bk-muted);
    font-size: .8rem;
    margin-left: .3rem;
}

.f-delta.is-up {
    color: var(--s-mint-ink);
    font-weight: 600;
}

.f-report-body .f-report-h {
    font-weight: 700;
    margin: .9rem 0 .25rem;
}

.f-report-attention {
    align-items: center;
    display: flex;
    gap: .4rem;
}

.f-report-btn {
    background: var(--s-blue);
    border-radius: .5rem;
    color: #fff;
    display: inline-block;
    font-size: .875rem;
    font-weight: 600;
    margin-top: .6rem;
    padding: .5rem .9rem;
}

.f-alerts figcaption,
.f-report figcaption {
    color: var(--bk-muted);
    font-size: .8125rem;
    margin-top: .75rem;
}

/* Breder scherm */

@media (min-width: 768px) {
    .f-tiles,
    .f-indicators {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .f-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .f-tiles.f-tiles-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .f-hero .bk-hero-grid,
    .bk-hero .bk-hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    }

    .f-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .f-feature-2,
    .f-feature-shot {
        align-items: start;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .f-feature-shot {
        align-items: center;
    }

    .f-indicators {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .s-suite.f-suite-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}