/* ===========================================
   Custom CSS with Brand Variables
   =========================================== */

:root {
    --color-accent: #e00000;
    --color-main: #188ACB;
    --color-detail_1: #e5007d;
    --color-detail_2: #ffd800;
    --color-black: #000000;
    --color-white: #ffffff;
    --page-background: #f7f4f4;

    /*spoorboekje - styling*/
    --blue-0: #001a2b;
    --blue-1: #00395e;
    --blue-2: #183769;
    --blue-3: #00578c;
    --blue-4: #0084be;
    --blue-5: #008bb4;
    --blue-6: #b3d4fc;
    --yellow: #c5a436;
    --yellow-darker: #977d24;

    --green: #98bd86;
    --deep-green: #6eb54b;
    --red: #c61e29;
    --orange: #e94d0e;

    --white: #fff;
    --grey-1: #f7f4f4;
    --grey-2: #ebebeb;
    --grey-3: #8d8d8d;
    --grey-4: #242424;
    --black: #000;

    --primary-color: var(--blue-3);
    --secondary-color: var(--yellow);
    --waring-color: var(--orange);
    --text-color: var(--black);
    --text-color-dark: var(--white);
    --background-hue-1: #eee;
    --background-hue-2: #f0f0f0;
    --background-hue-3: #e3e3e3;
    --background-hue-4: #000000;
    --background-hue-5: #ffffff;
    --overlay-background: rgba(63, 63, 63, 0.8);
    --card-shadow: 0 1px 4px #00000029;

    --banner-background: url('../../images/televizier_banner_bg.jpg');
    --banner-background-color: var(--primary-color);
    --color-heading: var(--primary-color);
    --color-paragraph: var(--text-color);
    --page-text-color: var(--text-color);
    --post-background-color: #f8f7f8;
    --button-background: var(--primary-color);
    --button-text-color: var(--text-color-dark);
    --button-background-hover: var(--secondary-color);
    --button-text-hover-color: var(--text-color-dark);
    --link-color: var(--primary-color);
    --link-hover-color: var(--secondary-color);
    --card-link-color: var(--primary-color);
    --card-link-hover-color: var(--secondary-color);
    --toolbar-background: var(--banner-background-color);
    --toolbar-text-color: var(--text-color-dark);
    --toolbar-link-color: var(--text-color-dark);
    --toolbar-link-hover-color: var(--yellow);
    --toolbar-link-underline-hover-color: transparent;
    --header-background: var(--white);
    --header-text-color: var(--blue-0);
    --header-title-color: var(--blue-0);
    --header-link-color: var(--black);
    --header-link-hover-color: var(--yellow);
    --header-link-underline-hover-color: transparent;
    --header-nav-button-background-color: transparent;
    --header-nav-button-text-color: var(--white);
    --header-nav-button-hover-background-color: var(--blue-2);
    --header-nav-button-hover-text-color: var(--white);
    --header-search-button-background-color: transparent;
    --header-search-button-mobile-background-color: transparent;
    --header-search-button-text-color: var(--grey-2);
    --header-search-button-hover-background-color: var(--blue-2);
    --header-search-button-hover-text-color: var(--white);
    --header-nav-menu-odd-tint: #fff0;
    --header-nav-menu-even-tint: #fff0;
    --header-nav-menu-item-background-color: var(--white);
    --header-nav-menu-item-hover-text-color: var(--text-color-dark);
    --header-nav-menu-item-hover-background-color: var(--blue-2);
    --footer-background: var(--blue-3);
    --footer-text-color: var(--text-color);
    --footer-title-color: var(--primary-color);
    --footer-link-color: var(--text-color);
    --footer-link-hover-color: var(--yellow);
    --contact-box-background: var(--blue-3);
    --contact-box-text-color: var(--text-color-dark);
    --spoorboek-timeline: var(--yellow);
    --spoorboek-timeline-shadow: transparent;
    --spoorboek-button-background-color: var(--white);
    --spoorboek-button-text-color: var(--text-color);
    --spoorboek-button-hover-background-color: var(
        --spoorboek-button-background-color
    );
    --spoorboek-button-hover-text-color: var(--spoorboek-button-text-color);
    --spoorboek-button-raised-background-color: var(--yellow);
    --spoorboek-button-raised-text-color: var(--text-color-dark);
    --spoorboek-button-raised-hover-background-color: var(--yellow-darker);
    --spoorboek-button-raised-hover-text-color: var(
        --spoorboek-button-raised-text-color
    );
    --spoorboek-program-card-inactive-background-color: var(--grey-3);
    --spoorboek-program-card-inactive-text-color: var(--grey-6);
    --spoorboek-program-card-border-color: var(--page-background);
    --spoorboek-program-card-background: var(--white);
    --spoorboek-program-card-text-color: var(--text-color);
    --spoorboek-program-card-seperator-color: var(--page-background);
    --spoorboek-program-card-button-background-color: var(--grey-1);
    --spoorboek-program-card-button-text-color: var(--white);
    --spoorboek-program-card-button-hover-background-color: var(--grey-5);
    --spoorboek-program-card-button-hover-text-color: var(--grey-2);
    --modal-primary-color: var(--primary-color);
    --modal-secondary-color: var(--white);
    --modal-text-color: var(--text-color);
    --modal-background-color: var(--white);

}

/* ===========================================
   Footer CSS
   =========================================== */
.footer-header-text {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-main);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.site-footer {
    background-color: var(--color-main);
}

.site-footer .footer_title {
    color: var(--color-white);
}

.site-header {
    background-color: var(--color-white);
}

.site-header .menu-item a {
    color: var(--color-detail_1);
}

.site-title img, .site-title svg {
    height: 80px;
    width: auto;
}

/* End Footer CSS*/

/* ===========================================
   Navigation CSS Overwrites
   =========================================== */
#subnavigation__wrapper {
    background-color: var(--color-main);
    color: var(--color-white);
}

.sub-navigation {
    width: 100%;
    background-color: var(--color-main);
    color: var(--color-white);
    top: 0px;
    width: 100vw;
}

.sub-navigation-content {
    position: absolute;
    bottom: 9px;
    left: 16%;
    color: var(--color-white);
    font-size: 120%;
}

.navigation__mobile {
    background-color: var(--color-main);
}

.navigation__mobile .mobile--hamburgermenu__wrapper, .mobile-menu-items .menu-item:hover {
    background-color: var(--color-detail_1);
}

/* End Navigation CSS*/

/* ===========================================
   Bottom Bar Colors
   =========================================== */
:is(.site-main, .editor-styles-wrapper) .bottombar-color-1 {
    background-color: var(--color-main);
}
:is(.site-main, .editor-styles-wrapper) .bottombar-color-2 {
    background-color: var(--color-detail_2);
}
:is(.site-main, .editor-styles-wrapper) .bottombar-color-3 {
    background-color: var(--color-accent);
}
:is(.site-main, .editor-styles-wrapper) .bottombar-color-4 {
    background-color: var(--color-main);
}
:is(.site-main, .editor-styles-wrapper) .bottombar-color-5 {
    background-color: var(--color-detail_2);
}
:is(.site-main, .editor-styles-wrapper) .bottombar-color-6 {
    background-color: var(--color-detail_1);
}

/* Navigation & Footer Links */
.footer_title {
    color: var(--color-white);
}

.site-footer li a {
    color: var(--color-white);
}

.site-footer li a:hover {
    color: var(--color-detail_2);
}

/* ===========================================
   Buttons / Elements
   =========================================== */
.search--toggle {
    background-color: var(--color-detail_1);
}

/* ===========================================
   Spoorboekje / Mikrogids
   =========================================== */
.gids__channel--row--card--dropdown--select,
.gids__channel--row--card--colored {
    background-color: var(--color-accent);
}

.gids__channel--row--card--colored:hover,
.gids__channel--row--card:hover,
.click__indicator {
    background-color: var(--color-accent);
}

.click__indicator--circle:hover {
    background-color: var(--color-detail_2);
}

.curr_time_incicator {
    background-color: var(--color-detail_2);
}

.curr_time_incicator::before {
    border-color: #0000 var(--color-detail_2) #0000 #0000;
}

.curr_time_incicator::after {
    border-color: #0000 #0000 #0000 var(--color-detail_2);
}

.gids__channel--row--pointer__left,
.gids__channel--row--pointer__right,
.modal__end-time,
.modal__start-time,
.modal__title,
.bold--text,
.modal__close svg,
.gids__channel--row--card span {
    color: var(--color-main);
}

.offsetblock,
.offsetblock--footer,
.offsetblock p,
.offsetblock--footer p {
    background-color: var(--color-main);
    color: var(--color-detail_2);
}

.gids__channel--row--card:hover span {
    color: var(--color-white) !important;
}

.gids__channel__program--list--item {
    background-color: var(--color-white);
    color: var(--color-main);
    border-bottom: 10px solid var(--color-black);
}

.spoorboekje__background {

}

.spoorboekje h1 {
    color: var(--color-white);
}

:is(.site-main, .editor-styles-wrapper) .contact--blackbox {
    background-color:  var(--color-detail_2);
    color: var(--color-black) !important;
    border-radius: 10px;
}

:is(.site-main, .editor-styles-wrapper) .contact--blackbox p {
    color: var(--color-black) !important;
}

    /* ===========================================
       Forms
       =========================================== */
:is(.site-main, .editor-styles-wrapper) .contact--forms__form label {
    color: var(--color-main);
}

:is(.site-main, .editor-styles-wrapper) .terms a {
    color: var(--color-detail_1);
}

:is(.site-main, .editor-styles-wrapper) .block__form h2, :is(.site-main, .editor-styles-wrapper).wpcf7-form {
    color: var(--color-detail_1);
}

:is(.site-main, .editor-styles-wrapper) .column__card h2 {
    color: var(--color-detail_1);
}

:is(.site-main, .editor-styles-wrapper) .single__page--title {
    color: var(--color-detail_1);
}

:is(.site-main, .editor-styles-wrapper).contact--forms__form .form-check-label {
    color: var(--color-black);
}

:is(.site-main, .editor-styles-wrapper) .contact--forms__form .btn-primary {
    background-color: var(--color-detail_2) !important;
    color: var(--color-detail_1) !important;
    font-weight: bold;
}

:is(.site-main, .editor-styles-wrapper) .contact--forms__form a {
    color: var(--color-main);
}

.block--button button, block--button {
    background-color: var(--color-main) !important;
    color: var(--color-white);
}

:is(.site-main, .editor-styles-wrapper) .single__content--wrapper p {
    color: var(--color-black) !important;
}

:is(.site-main, .editor-styles-wrapper) .single__content--wrapper h3 {
    color: var(--color-detail_1) !important;
    margin-top: 10px;
    margin-bottom: 10px !important;
}

:is(.site-main, .editor-styles-wrapper) .contact--forms__form .form-label, :is(.site-main, .editor-styles-wrapper) .geboorte_datum_div label {
    color: var(--color-detail_1) !important;
}

:is(.site-main, .editor-styles-wrapper) .colored__link {
    color: var(--color-detail_1) !important;
    font-weight: bold;
}

:is(.site-main, .editor-styles-wrapper) .single__content--wrapper h1 {
    color: var(--color-detail_1) !important;
}

:is(.site-main, .editor-styles-wrapper) .form-check .form-check-label {
    color: var(--color-black) !important;
}

.logo_container img {
    border: unset !important;
}

:is(.site-main, .editor-styles-wrapper) .block--button button,
:is(.site-main, .editor-styles-wrapper) .column__card--button a,
:is(.site-main, .editor-styles-wrapper) .column__card--button button,
:is(.site-main, .editor-styles-wrapper) .onepager-container .form-section button,
:is(.site-main, .editor-styles-wrapper) .block__wrapper form button {
    background-color: var(--color-black);
}

:is(.site-main, .editor-styles-wrapper) .block__wrapper h4 {
    color: var(--color-black);
}

.site-main .block-hero p {
    color: var(--color-black);
}

:is(.site-main, .editor-styles-wrapper) .block__wrapper h2 {
    color: var(--color-detail_1);
    text-transform: unset;
}

/** bezorgklachten banner **/
#hidden_bezorgklacht_text p {
    color: var(--color-black);
}
#hidden_bezorgklacht_text a {
    text-decoration: none;
    color: var(--color-detail_2);
}
#hidden_bezorgklacht_text a:hover {
    color: var(--color-detail_2);
}
#hidden_bezorgklacht_text {
    background-color: var(--color-detail_2);
}

/*later additions*/
:is(.site-main, .editor-styles-wrapper) .column__card--alert {
    background-color: var(--color-detail_2);
    color: var(--color-black);
}

:is(.site-main, .editor-styles-wrapper) .column__card--additional-tekst h3 {
    color: var(--color-black);
}

:is(.site-main, .editor-styles-wrapper) .faq__subject--toprow,:is(.site-main, .editor-styles-wrapper) .faq__QandA--toprow {
    background-color: var(--color-main);
}

.site-main .faq__subject--row h2 {
    color: var(--color-black);
}

:is(.site-main, .editor-styles-wrapper) .faq__QandA--row--question h3 {
    color: var(--color-detail_1);
}

:is(.site-main, .editor-styles-wrapper) .faq__QandA--row .expansionIndicator {
    color: var(--color-detail_1);
}

:is(.site-main, .editor-styles-wrapper) .block__form__subtext {

}

.site-main .faq__subject--row:hover {
    background-color: var(--color-detail_2);
    color: var(--color-black);
}

:is(.site-main, .editor-styles-wrapper) .activeSubject, :is(.site-main, .editor-styles-wrapper) .activeSubject h2 {
    background-color: var(--color-detail_2);
    color: var(--color-black);
}

.site-main .faq__subject--row:hover h2 {
    color: var(--color-detail_1);
}

:is(.site-main, .editor-styles-wrapper) .block--button a, :is(.site-main, .editor-styles-wrapper) .block__form p input[type="submit"] {
    background-color: var(--color-detail_1) !important;
}

.site-content {
    background-size: cover;
    min-height: 80vh;
}

.site-main h1, .site-main .predefined__floating--text h2, .site-main h2, .site-main h6, .site-main a {
    color: var(--color-detail_1);
    text-decoration: none;
    font-weight: bold;
}

.site-main a {
    text-decoration: none;
    text-decoration-color: var(--color-detail_1);
}

.site-main .nieuws_artikel_content p {
    color: var(--color-black) !important;
}

.site-main .winactie__link a {
    font-weight: bold;
    color: var(--color-detail_1);
}

/* Spoorboekje */

.gids__channel--row--card {
    background-color: var(--spoorboek-button-background-color);
    color: var(--spoorboek-button-text-color);
}

.gids__channel--row--card span {
    color: var(--spoorboek-button-text-color);
}

.gids__channel--row--card:hover {
    background-color: var(--spoorboek-button-hover-background-color);
    color: var(--spoorboek-button-hover-text-color);
}

.gids__channel--row--pointer__left,
.gids__channel--row--pointer__right {
    color: var(--text-color);
}

:is(
    .gids__channel--row--pointer__left,
    .gids__channel--row--pointer__right
):hover {
    color: var(--primary-color);
}

.offsetblock--footer {
    border-color: var(--spoorboek-program-card-seperator-color);
    background-color: var(--spoorboek-program-card-inactive-background-color);
    color: var(--spoorboek-program-card-inactive-text-color);
}

.offsetblock--footer p {
    color: var(--spoorboek-program-card-inactive-text-color);
}

.gids__channel__program--list {
    border-color: var(--spoorboek-program-card-seperator-color);
    color: var(--spoorboek-program-card-text-color);
}

.gids__channel__program--list--item {
    background-color: var(--spoorboek-program-card-background);
    color: var(--spoorboek-program-card-text-color);
    border-color: var(--spoorboek-program-card-seperator-color);
}

.gids__channel__program--list--item
.gids__channel__program--list--item--content {
    border-color: var(--spoorboek-program-card-border-color);
}

.gids__channel__program--list--item--content .click__indicator {
    background-color: var(--spoorboek-program-card-button-background-color);
}

.gids__channel__program--list--item--content
.click__indicator
.click__indicator--circle {
    background-color: var(--spoorboek-program-card-button-text-color);
}

.gids__channel__program--list--item--content .click__indicator:hover {
    background-color: var(
        --spoorboek-program-card-button-hover-background-color
    );
}

.gids__channel__program--list--item--content
.click__indicator:hover
.click__indicator--circle {
    background-color: var(--spoorboek-program-card-button-hover-text-color);
}

/* Modal */

.modal__container {
    background-color: var(--overlay-background);
}

.modal__content {
    background-color: var(--modal-background-color);
    color: var(--modal-text-color);
}

.modal__content p {
    color: var(--modal-text-color);
}

.modal__content .modal__close svg {
    color: var(--modal-secondary-color);
}

.modal__content .modal__close:hover svg {
    color: var(--deep-green);
}

.modal__content .modal__title {
    color: var(--color-detail_1);
}

.modal__content .modal__end-time,
.modal__start-time {
    color: var(--modal-text-color);
}

.modal__content .bold--text {
    color: var(--color-detail_1);
}

.site-main .spoorboekje h1 {
    color: var(--color-main);
}