@import url('bootstrap.min.css');
@import url('fontawesome.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/* =========================================
   Basis & variabelen
========================================= */

:root {
    --color-primary: #2298d6;
    --color-primary-dark: #1880b7;
    --color-primary-light: #c5e2f5;
    --color-accent: #f17100;
    --color-text: #41413d;
    --color-white: #fff;
    --color-green: #20D69F;

    --font-base: "Roboto Condensed", sans-serif;

    --font-size-base: 18px;
    --line-height-base: 28px;
    --radius-base: 30px;
}

/* Globale reset / helpers */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img { max-width: 100%; height: auto; display: block; }

.roboto-condensed-<uniquifier> {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

/* =========================================
   Typografie
========================================= */

body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 30px;
}

body#tinymce { margin: 12px !important; }

h1 {
    font-size: 68px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 30px;
}

h2 {
    font-size: 45px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 30px;
}

h3 {
    font-size: 27px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 30px;
}

h3 { margin-bottom: 20px; }
h4 { font-size: 18px; font-weight: 800; }

p { line-height: 28px; font-size: var(--font-size-base); }

ul { line-height: 32px; font-size: var(--font-size-base); }

strong { color: var(--color-primary); }

/* =========================================
   Links
========================================= */

a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }

/* Focus states (toegankelijkheid) */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* =========================================
   Layout wrappers
========================================= */

.wrap { margin: 0 auto; overflow: hidden; }

.main,
.sidebar {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-inline: 15px;
}

/* Flex layout voor content + sidebar vanaf 576px */
@media (min-width: 576px) {
    .main { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

    .sidebar { -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .sidebar-primary .main { -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; }
}

/* =========================================
   Afbeelding uitlijning
========================================= */

.alignnone { margin-left: 0; margin-right: 0; }
.aligncenter { display: block; margin: .5rem auto; }

.alignleft,
.alignright {
    margin-bottom: .5rem;
}

@media (min-width: 576px) {
    .alignleft { float: left; margin-right: .5rem; }
    .alignright { float: right; margin-left: .5rem; }
}

/* =========================================
   Buttons & forms
========================================= */

.btn,
.comment-form input[type=submit],
.search-form .search-submit {
    cursor: pointer;
    padding: 10px 30px 10px 20px;
    font-size: 18px;
    font-weight: 700;
    margin-top: 30px;
    border: 0;
    border-radius: var(--radius-base);
    display: inline-block;
    text-align: left;
}
.btn::before {
    font-family: FontAwesome;
    content: "\f105";
    margin: 0 15px 0 -15px;
    border-radius: 30px;
    padding: 10px 14px;
    background: var(--color-white);
    color: var(--color-green);
}
.btn-default::before { color: var(--color-white); background: var(--color-primary); }
.btn-primary { background: var(--color-green); color: var(--color-white); }
.btn-primary:hover { background: #1bae82; color: var(--color-white); }

.btn-secondary,
.comment-form input[type=submit],
.search-form .search-submit {
    background: var(--color-white);
    color: var(--color-accent);
    border: 3px solid var(--color-accent);
}

.btn-default { color: var(--color-primary); background: var(--color-white); }
.btn-default:hover { background: var(--color-primary); color: var(--color-white); }
.btn-default:hover::before { color: var(--color-primary); background: var(--color-white); }

.badge { font-weight: 100; }

.search-form label { font-weight: 400; }

/* Buttons in sidebar full width */
.sidebar-action { text-align: center; }

.sidebar-action .btn,
.sidebar-action .comment-form input[type=submit],
.sidebar-action .search-form .search-submit,
.comment-form .sidebar-action input[type=submit],
.search-form .sidebar-action .search-submit {
    width: 100%;
}

/* =========================================
   Navigatie & header
========================================= */

.banner {
    z-index: 999;
    left: 0;
    position: fixed;
    inset-block-start: 0;
    width: 100%;
    height: 90px;
    background: var(--color-white);
}

.navbar-brand {
    margin: 5px 0;
    width: 247px;
    height: 67px;
    position: absolute;
}

.navbar .fa-home { color: var(--color-primary); }
.navbar li { margin: 0 5px; position: relative; }

.navbar li::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: var(--color-white);
    transition: width .3s;
}

.navbar li:hover { color: var(--color-primary); text-decoration: none; }
.navbar li:hover::after { width: 100%; }
.navbar li:hover .dropdown-menu { position: absolute; display: block; }

.navbar a { display: inline-block; color: var(--color-text) !important; font-weight: 700; }
.navbar a:hover { color: var(--color-primary) !important; }

.navbar .dropdown-item:hover { background: none; }
.navbar .dropdown-toggle::after { display: none; } 

.navbar .dropdown-toggle:hover .show > .dropdown-menu { display: block !important; }

.navbar .dropdown-menu {
    background: var(--color-primary) !important;
    border: 0
    padding: 15px 0;
    box-shadow: 0 0px 18px -13px var(--color-primary), 0 2px 11px -4px var(--color-primary);
}
.navbar .dropdown-menu li { width: 100%; padding: 5px 30px 0 0; }
.navbar .dropdown-menu li:last-child a { border: 0; }

.navbar .dropdown-menu a {
    color: var(--color-white) !important;
    border-bottom: 1px solid var(--color-primary-light);
    width: 100%;
    padding-bottom: 10px;
    display: block;
    font-size: 18px;
}
.navbar .dropdown-menu a:hover { color: var(--color-primary-light) !important; }
.navbar .dropdown-menu a:before {
    content: "\f105";
    font-family: FontAwesome;
    margin-right: 15px;
}

.navbar-toggler {
    position: absolute;
    right: -8px;
    top: 3px;
    border: 0;
    font-size: 18px;
}

/* Desktop navigatie */
@media screen and (min-width: 1020px) {
    .navbar-toggler { display: none; }

    .navbar-nav { display: block; float: right; }
    .navbar-nav li { display: inline-block; }

    .collapse { display: block; margin-top: 15px; }
    .header-contact { display: none; }
}

/* Mobiele navigatie */
@media screen and (max-width: 720px) {
    .banner { height: 73px; top: 0; }

    .navbar-brand { margin: 0 0 14px; position: relative; width: 144px; height: 39px; }
    .navbar-brand img { height: 39px; }

    .navbar-collapse {
        background: var(--color-white) !important;
        border: 0;
        padding: 15px 0 15px 15px;
        z-index: 9999;
        margin-top: -24px;
        border-radius: 30px;
        box-shadow: 0 0px 18px -13px var(--color-primary), 0 2px 11px -4px var(--color-primary);
    }

    .navbar-collapse li { width: 100%; padding: 0 25px 0 0; }
    .navbar-collapse li:last-child a { border: 0; }

    .navbar-collapse a {
        color: var(--color-text);
        border-bottom: 1px solid #ddd;
        width: 100%;
        display: block;
    }

    .navbar-collapse a::after { display: none; }

    .collapsing { transition: height 0s ease; }

    .navbar { padding: 0; margin-top: 13px !important; }
}

/* =========================================
   Header contact
========================================= */

.header-contact {
    position: fixed;
    z-index: 999;
    top: 15px;
    width: 35px;
    right: 65px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.header-contact a { color: var(--color-primary); font-size: 15px; }

/* =========================================
   Sidebar
========================================= */

.nav-sidebar {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-base);
    padding: 20px 30px;
    list-style: none;
    margin: 60px 0 0;
}

.nav-sidebar li {
    color: var(--color-white) !important;
    border-bottom: 1px solid var(--color-primary-light);
    width: 100%;
    padding: 10px 15px 10px 30px;
    display: block;
    margin-left: 0;
    font-weight: 700;
}
.nav-sidebar li:before {
    content: "\f105";
    font-family: FontAwesome;
    margin: 0 10px 0 -20px;
    position: absolute;
}
.nav-sidebar li:last-child { border-bottom: 0; }
.nav-sidebar li:hover { color: var(--color-primary-light) !important; }

.sidebar-image {
    margin: 30px 0;
    height: 200px;
    overflow: hidden;
    border-radius: var(--radius-base);
}

.sidebar-image img { object-fit: cover; width: 100%; }

/* Mobiel: sidebar nav marge */
@media screen and (max-width: 720px) {
    .nav-sidebar {
        margin: 0;
    }
}

/* =========================================
   Pagina header
========================================= */

.page-head {
    color: var(--color-white);
    background-size: cover;
    height: 60vh;
    margin-top: 90px;
    background-position: top;
    position: relative;
    border-radius: var(--radius-base);
}

.page-head .page-head-layer {
    background: url(../images/dots.svg) no-repeat top -50px left -10%;
    background-size: 38%;
    position: absolute; 
    inset: 0;
}
.page-head span { font-weight: 500; margin-bottom: 15px; display: block; }
.page-head h1 { padding-top: 30vh; }

.page-head-big,
.page-head-big .page-head-layer {
    height: 80vh;
}

.page-head-big h1 { padding-top: 30vh; color: var(--color-white); margin-bottom: 10px; }

/* Mobiel: page head */
@media screen and (max-width: 720px) {
    .page-head-big {
        margin-bottom: -1px;
    }

    .page-head-big,
    .page-head .page-head-layer {
        height: 60vh !important;
    }

    .page-head-big h1 {
        padding: 10vh 0 0;
    }
}

/* Dot achtergrond op standaard pagina's */
.page-template-default .col-sm-8 .block { background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: 0 30px; }

/* =========================================
   Content blocks
========================================= */

.block { padding: 90px 0; background: var(--color-white); overflow: hidden; }

.block .sub-title { font-size: 20px !important; }
.block .sub-title p { font-size: 20px !important; }

.block-items {}

.block-text { 
    background: #e9f4fa url(../images/dots.svg) no-repeat top -50px right -10%;
    background-size: 38%;
    border-radius: var(--radius-base);
    margin-top: 90px;
}
.block-text .column { columns: 2; column-gap: 30px; }

.block-form {
    background: var(--color-primary);
    border-radius: 30px;
    color: var(--color-white);
    padding: 30px;
}

.block-form h3 { color: var(--color-white); }
.block-form .btn-primary { background: var(--color-white); color: var(--color-primary); }

/* Why block */

.block-why { color: var(--color-white); border-radius: var(--radius-base); }
.block-why h2 { color: var(--color-white); }
.block-why img {
    border-radius: 100%;
    width: 400px;
    height: 400px;
    object-fit: cover;
}

.block-why ul { list-style: none; padding: 0; margin: 0 0 0 5px; }
.block-why li::before {
    font-family: FontAwesome;
    content: "\f00c";
    margin-right: 10px;
    color: var(--color-white);
}

.block-why { background: var(--color-primary) url(../images/dots.svg) no-repeat 40% 15%; background-size: 29%; }

/* Items */

.block-items .col-md-3 .car-item {
    font-weight: 400;
    overflow: hidden;
    border-top-left-radius: var(--radius-base);
    border-top-right-radius: var(--radius-base);
}
.block-items .col-md-3 .car-item:hover img {transform:scale(1.15); margin-top: -12px; }
.block-items .col-md-3 .car-item img {
    height: 150px;
    object-fit: cover;
    width: 100%;
    transition:transform .4s ease;
    border-top-left-radius: var(--radius-base);
    border-top-right-radius: var(--radius-base);
}
.block-items .col-md-3 .car-item .item-content h3 { color: var(--color-white); }
.block-items .col-md-3 .car-item .item-content {
    padding: 30px;
    border-bottom-left-radius: var(--radius-base);
    border-bottom-right-radius: var(--radius-base);
    background: var(--color-primary);
    color: var(--color-white);
}
.block-items .col-md-3 .car-item .item-content:hover { background: var(--color-primary); color: var(--color-white); }

.wp-block-list { list-style: none; padding: 0; }
.wp-block-list li { margin-left: 15px; padding-left: 15px; }
.wp-block-list li:before {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: -20px; 
    position: absolute;
    color: var(--color-primary);
}

#breadcrumbs { color: var(--color-primary); margin: 0; }

/* =========================================
   Reacties & lijsten
========================================= */

.comment-list ol { list-style: none; }

/* =========================================
   Footer
========================================= */

footer {
    background-color: var(--color-primary);
    padding: 90px 15px;
    color: var(--color-white);
    margin: 90px 15px 30px;
    border-radius: var(--radius-base);
}

footer a { color: var(--color-white); }
footer ul { margin: 0; padding: 0; list-style: none; } 
footer ul li { margin: 0; }
footer .footer-text li { display: inline-block; margin: 0; }

footer .sub-menu,
footer ul .page-item-2 {
    display: none;
}

footer i { margin-right: 5px; font-size: 20px !important; vertical-align: top; }
footer .logo { display: block; }
footer .logo img { width: 230px; margin-bottom: 30px; }
footer .footer-label { margin: 30px 0; }

.copyright { text-align: center; opacity: .8; font-size: 15px; margin-bottom: 30px; }

/* Mobiel footer */
@media screen and (max-width: 720px) {
    footer { padding: 30px 0; }
    footer ul { margin: 15px auto; }
}

/* =========================================
   Mobiele optimalisaties (algemeen)
========================================= */

@media screen and (max-width: 720px) {
    body { margin: 0; }
    h1 { font-size: 30px; }

    h2,
    h3 {
        font-size: 21px;
    }

    h2,
    h3,
    .sub-title {
        font-size: 21px !important;
    }

    p { font-size: 15px; }

    .page-head { margin-top: 10px; }

    .sub-title { margin: 15px auto !important; }

    .block-why { background-size: 100%; }
    .block-why img { height: 35vh; margin-bottom: 30px; }

    .block-text .column { columns: 1 !important; padding: 0 15px; }
    .block-text { padding: 0 15px; }

    .wrap { margin-top: 65px; }

    .block { padding: 30px 0 !important; margin: 15px 0 !important; }
    .block-head { padding: 60px 15px 30px !important; }

    .item-box { margin: 15px 0 !important;  min-height: auto !important; }
    .item-content { padding: 15px !important; }
    .block-items .col-md-3 { margin: 15px 0; }


    .btn,
    .comment-form input[type=submit],
    .search-form .search-submit {
        padding: 10px 20px;
        font-size: 15px;
        margin-top: 15px;
    }
}