/**
 * Project:   Xanti CMS - kvpaform.nl / hrtoolbox.nl
 * File:      /css/main.css
 *
 * Design tokens taken from the KvPA main site (www.kvpa.nl):
 * brand yellow #f5ca1b, cream page background #fdf6e3 with white cards, dark headings #101828.
 * The hrtoolbox host keeps its own blue via the body.brand-hrtoolbox overrides.
 */

:root {
    --brand:       #f5ca1b;
    --brand-dark:  #d9b216;
    --brand-muted: #fdf6e3;
    --brand-focus: rgba(245, 202, 27, .35);
    --heading:     #101828;
    --text:        #57534e;
}

body.brand-hrtoolbox {
    --brand:       #0066cc;
    --brand-dark:  #0052a3;
    --brand-muted: #edf3fe;
    --brand-focus: rgba(0, 102, 204, .25);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    background-color: var(--brand-muted);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { color: var(--heading); font-weight: 700; }
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

a {
    color: var(--heading);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-underline-offset: 3px;
}
a:hover { color: var(--brand-dark); text-decoration-color: var(--brand-dark); }

/* header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1);
    padding: 1rem 0;
}
.site-header .site-logo img { height: 56px; width: auto; max-width: 100%; }
@media (max-width: 575.98px) {
    .site-header .site-logo img { height: 40px; }
}

/* white rounded card on the cream page background */
.site-main { flex: 1 0 auto; padding: 2.5rem 0 3rem; }

.content-card {
    background-color: #fff;
    border-radius: 2rem;
    padding: 2rem 1.5rem;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
}
@media (min-width: 992px) {
    .content-card { padding: 3rem; }
}

/* the homepage text still contains its own logo image; the header already shows it */
.site-main img[src*="kvpa_nieuw_logo"] { display: none; }

/* buttons: square and bold, as on kvpa.nl */
.btn { border-radius: 0; font-weight: 700; }
a.btn { text-decoration: none; }
.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
    padding: 12px 28px;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem var(--brand-focus); }
.btn-outline-secondary { color: var(--heading); border-color: #d6d3d1; }
.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: #f5f5f4;
    border-color: #d6d3d1;
    color: var(--heading);
}

/* forms */
.form-control { border-color: #d6d3d1; border-radius: .5rem; color: var(--heading); }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem var(--brand-focus); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--brand); border-color: var(--brand); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem var(--brand-focus); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--brand); }

/* question form progress bar */
.progress { background-color: rgba(16, 24, 40, .08); border-radius: 999px; }
.progress-bar { background-color: var(--brand); color: var(--heading); font-weight: 700; }

#pagenumber { text-align: center; font-weight: 700; color: var(--heading); }

#question .question_title { font-weight: 700; color: var(--heading); }
#question .question_text { line-height: 1.6em; margin-bottom: 1em; }
#question .feedback_text { line-height: 1.6em; margin-top: 1em; }
#question .choice { color: var(--heading); }
#question .choice:hover { color: var(--brand-dark); }

/* footer */
.site-footer { background-color: #fff; padding: 2rem 0; }
.site-footer a, .site-footer .nav-link { color: #4a5565; font-weight: 500; text-decoration: none; }
.site-footer a:hover { color: var(--heading); text-decoration: underline; text-decoration-color: var(--brand); }

/* legacy tables (overviews and results) */
table.homepage {
    empty-cells: show;
    border-right: 1px solid #e7e5e4;
    border-bottom: 1px solid #e7e5e4;
}
table.homepage td {
    border-top: 1px solid #e7e5e4;
    border-left: 1px solid #e7e5e4;
}
table.homepage tr { cursor: pointer }
table.homepage tr.light { background-color: #fff }
table.homepage tr.dark { background-color: rgba(16, 24, 40, .04) }
table.homepage tr.light:hover,
table.homepage tr.dark:hover { background-color: var(--brand-muted) }

table.cycle { empty-cells: show; border-right: 1px solid #e7e5e4; border-bottom: 1px solid #e7e5e4 }
table.cycle td { border-left: 1px solid #e7e5e4 }
table.cycle tr.header { background-color: var(--brand); color: var(--heading) }
table.cycle tr.header a { color: var(--heading) }
table.cycle tr.light { background-color: #fff }
table.cycle tr.dark { background-color: rgba(16, 24, 40, .04) }
table.cycle tr.lightred { background-color: #FF9999 }
table.cycle tr.darkred { background-color: #FF6666 }
table.border td { border-top: 1px solid #e7e5e4 }
table.hidelinks a { color: var(--heading); text-decoration: none }
table.hidelinks a:hover { text-decoration: underline }
table.noborder td { border: none }