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

:root {
    --color-accent: #b0000e;
    --color-main: #001f35;
    --color-detail_1: #c4007a;
    --color-detail_2: #F8B818;
    --color-black: #001f35;
    --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-detail_2);
}

/* End Footer CSS*/

/* ===========================================
   Navigation CSS Overwrites
   =========================================== */

.site-title img, .site-title svg {
    height: auto;
    width: 8rem;
}

#subnavigation__wrapper {
    background-color: var(--color-detail_2);
    color: var(--color-white);
}

#subnavigation__wrapper #submenu li a {
    color: var(--color-main);;
}

.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%;
}

.site-main .wpb_wrapper h2, .site-main .wpb_wrapper h3 {
    color: var(--color-detail_2);
}

.site-main .wpb_wrapper p a {
    color: var(--color-accent);
    text-decoration: underline var(--color-accent);
}

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

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


/* 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-accent);
}

/* ===========================================
   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 h1 {
    color: var(--color-white);
}

:is(.site-main, .editor-styles-wrapper) .contact--blackbox {
    background-color: var(--color-white);
    color: var(--color-main);
    border-radius: 10px;

}

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

:is(.site-main, .editor-styles-wrapper) .block__form__row__half p label {
    color: white;
}

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

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

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

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

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

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

: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-main) !important;
    margin-top: 10px;
    margin-bottom: 10px !important;
}

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

:is(.site-main, .editor-styles-wrapper) .form-check .form-check-label {
    color: var(--color-main) !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, :is(.site-main, .editor-styles-wrapper) .banner--desktop__inner {
    background-color: var(--color-main);
    color: var(--color-white);
}

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

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

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

/** 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-main);
}

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

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

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

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

:is(.site-main, .editor-styles-wrapper) .faq__subject--row:hover {
    background-color: var(--color-detail_2); /*kleur gebruiken we alleen hier!*/
}

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

:is(.site-main, .editor-styles-wrapper) .activeSubject {
    background-color: var(--color-accent);
    color: var(--color-white);
}

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

: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-accent) !important;
}

.site-content {
    background: var(--page-background);
    background-size: cover;
    min-height: 80vh;
}

.has-light-b, .site-main .block, .site-main .banner--desktop {
    background-color: unset;
}

.site-main h1, .site-main .predefined__floating--text h2, .site-main h2, .site-main h6 {
    color: var(--color-detail_2);
}

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

.site-main .winactie__link a {
    font-weight: bold;
}

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

/*styling voor berichten feed blok*/

.site-main .post__card, .site-main .post__card--head--label, .site-main .block__form {
    background-color: var(--color-main)
}

.site-main .post__card--content--text, .site-main .post__card--head--label {
    color: var(--color-white);
}

/* contact pagina */
.site-main .block__form h2, .site-main .block__form__row a, .site-main a {
    color: var(--color-detail_2);
    text-decoration-color: var(--color-detail_2);
}

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

/* 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__details {
    background-color: var(--color-main);
}

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

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

.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_2);
}

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

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

.modal__duration, .modal__genre, .modal__channel {
    color: var(--color-white);
}

:is(.site-main, .editor-styles-wrapper) .block__form__subtext {
    color: var(--color-white) !important;
}

.site-main .block__form p label {
    color: var(--color-white) !important;
}

.site-main .wpcf7 form.sent .wpcf7-response-output {
    color: var(--color-white)  !important;
}

.site-main .wpcf7 form.invalid .wpcf7-response-output {
    color: var(--color-white) !important;
}