/*       BOEKENDROP.NL       */
/* Thema bovenop Bootstrap 5.3 */

@font-face {
    font-family: Lub;
    src: url(../fonts/lub-font.woff) format("woff");
    font-display: swap;
}

:root {
    --bd-rood: #991b1e;
    --bd-rood-donker: #691315;
    --bd-rood-licht: #e7696c;
    --bd-geel: #ffd551;
    --bd-geel-rand: #e1ad1f;
    --bd-creme: #fffbed;
    --bd-antraciet: #2b2b2b;
    --bd-tekst: #555;
    --bd-kop: #404041;

    --bs-body-font-family: Arial, Helvetica, sans-serif;
    --bs-body-color: var(--bd-tekst);
    --bs-link-color: var(--bd-rood);
    --bs-link-color-rgb: 153, 27, 30;
    --bs-link-hover-color: var(--bd-rood-donker);
    --bs-link-hover-color-rgb: 105, 19, 21;
}

body {
    background: #fdbf2d url("../img/bg.jpg") no-repeat 50% 0 fixed;
    background-size: cover;
    min-height: 100vh;
}

h1, h2, h3, h4, h5 {
    font-family: Lub, Helvetica, sans-serif;
    text-transform: uppercase;
    color: var(--bd-kop);
}

h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 1.9rem);
    margin-bottom: 1.25rem;
}

/* Boekwinkeltjes-balk bovenaan */
#bw-more {
    max-width: 1000px;
    width: auto;
    padding: 0 1rem;
}

/* PAGINA */
.site {
    max-width: 1000px;
    padding-bottom: 2rem;
}

.site-header {
    padding: 2.5rem 0 2rem;
    text-align: center;
}

.site-logo {
    max-width: min(485px, 85%);
    height: auto;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .15));
}

/* NAVIGATIE */
.site-nav {
    position: relative;
    background: linear-gradient(to bottom, #4a4a4a 0%, var(--bd-antraciet) 55%, #1d1d1d 100%);
    border: 1px solid #1a1a1a;
    border-radius: .5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 6px rgba(0, 0, 0, .25);
    padding: .25rem .5rem;
    margin-bottom: .75rem;
}

.site-nav .navbar-brand {
    font-family: Lub, Helvetica, sans-serif;
    text-transform: uppercase;
}

.site-nav .nav-link {
    color: #fff;
    text-shadow: #000 1px 1px 1px;
    font-size: .95rem;
    padding: .6rem 1rem;
    border-radius: .375rem;
    transition: background-color .15s ease-in-out;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible,
.site-nav .nav-link.active {
    color: #fff;
    background: var(--bd-rood);
    box-shadow: inset 0 0 0 1px var(--bd-rood-licht);
}

.site-nav-lezer {
    position: absolute;
    right: -20px;
    bottom: 3px;
    width: 269px;
    height: 215px;
    background: url("../img/menu_extra_image.png") no-repeat;
    pointer-events: none;
}

/* CONTENT-KADER (geel met crème binnenvlak) */
.site-frame {
    border: 1px solid #feca2e;
    border-radius: .5rem;
    background: var(--bd-geel);
    padding: .5rem;
    box-shadow: inset 0 0 0 1px #fedf77;
}

.site-content {
    background: var(--bd-creme);
    border: 1px solid var(--bd-geel-rand);
    border-radius: .25rem;
    padding: clamp(1rem, 3vw, 2.5rem);
    line-height: 1.6;
}

.site-content article + article {
    margin-top: 2.5rem;
}

.site-content img {
    max-width: 100%;
    height: auto;
}

/* FOOTER */
.site-footer {
    padding: 1.5rem .5rem 0;
}

/* FLASHMESSAGES */
.flashmessenger .alert a {
    font-weight: 600;
}

/* KNOPPEN */
.btn-boekendrop {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bd-rood);
    --bs-btn-border-color: #640d0d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bd-rood-donker);
    --bs-btn-hover-border-color: #a83739;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bd-rood-donker);
    --bs-btn-active-border-color: #640d0d;
    --bs-btn-focus-shadow-rgb: 153, 27, 30;
    text-shadow: #000 1px 1px 1px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* FORMULIEREN */
.form-control:focus {
    border-color: #ff9600;
    box-shadow: 0 0 0 .25rem rgba(255, 150, 0, .25);
}

.form-label {
    font-weight: 600;
    color: #2c2c2c;
}

.contact-adres {
    background: #fff;
    border-color: var(--bd-geel-rand);
}

.contact-adres h2 {
    font-size: 1.15rem;
}

/* VERKOOPPUNTEN */
.verkooppunten-tabel th a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.verkooppunten-tabel th a:hover,
.verkooppunten-tabel th a.actief {
    color: var(--bd-rood);
}

.verkooppunten-tabel th a.actief::after {
    content: " \25B2";
    font-size: .7em;
}

/* PRODUCT */
.product-etiket {
    max-width: 400px;
}

/* BESTELLEN */
.bestel-logo {
    max-height: 80px;
    width: auto;
}

@media (max-width: 767.98px) {
    #bwb {
        display: none;
    }

    .site-header {
        padding: 1.25rem 0 1rem;
    }
}