/*
 * ATKB brand theme, extracted from https://at-kb.nl/aquatische-ecologie
 * (colors and font families sampled from the site's stylesheets).
 * Loaded after bootstrap/main.css so these rules take precedence.
 */

:root {
    --atkb-cream: #ECE2D1;
    --atkb-cream-light: #F6F3EC;
    --atkb-grey: #726E66;
    --atkb-dark: #282828;
    --atkb-blue: #1B61A2;
    --atkb-blue-dark: #144A7E;
    --atkb-white: #FFFFFF;

    --atkb-font-heading: "Libre Baskerville", Georgia, serif;
    --atkb-font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--atkb-font-body);
    background-color: var(--atkb-white) !important;
    color: var(--atkb-dark);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--atkb-dark);
}

/* Libre Baskerville reads well at large page-title sizes, but looks heavy
   and out of place on smaller card/section titles - keep those in Poppins. */
h1, h2 {
    font-family: var(--atkb-font-heading);
}
h3, h4, h5, h6 {
    font-family: var(--atkb-font-body);
    font-weight: 600;
}

a {
    color: var(--atkb-blue);
}
a:hover, a:focus {
    color: var(--atkb-blue-dark);
}

/* Navbar */
.navbar {
    background-color: var(--atkb-white) !important;
    border-bottom: 1px solid var(--atkb-cream);
}
.navbar a, .navbar .navbar-text {
    color: var(--atkb-dark);
}
.navbar .nav-link:hover {
    color: var(--atkb-blue);
}

/* Panels / cards */
.jumbotron, #showcase {
    background-color: var(--atkb-cream);
    border: none;
}
.container-fluid:not(.project-page) {
    background-color: var(--atkb-white);
}

/* Buttons - remap Bootstrap variants onto the ATKB palette */
.btn-warning {
    background-color: var(--atkb-blue) !important;
    border-color: var(--atkb-blue) !important;
    color: var(--atkb-white) !important;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: var(--atkb-blue-dark) !important;
    border-color: var(--atkb-blue-dark) !important;
}
.btn-success {
    background-color: var(--atkb-grey) !important;
    border-color: var(--atkb-grey) !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: var(--atkb-dark) !important;
    border-color: var(--atkb-dark) !important;
}
.btn-primary {
    background-color: var(--atkb-blue) !important;
    border-color: var(--atkb-blue) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--atkb-blue-dark) !important;
    border-color: var(--atkb-blue-dark) !important;
}

/* Project detail page keeps a dark surface, tuned to the ATKB dark tone */
.project-page {
    background-color: var(--atkb-dark) !important;
}