/* Custom CSS - Blijtijds.nl */

:root {
    /* Brand kleuren */
    --yellow:       #f9c885;
    --light-blue:   #c6eef0;
    --dark-blue:    #092a3b;

    /* Neutrale kleuren */
    --white:        #ffffff;
    --offwhite:     #f7fbfc;
    --grey-1:       #f1f1f1;
    --grey-2:       #f2f2f2;
    --grey-3:       #eee;
    --grey-4:       #e3e3e3;
    --grey-5:       #d8d8d8;
    --grey-6:       #777;
    --grey-7:       #a0a0a0;
    --black:        #000;

    /* Semantische kleurvariabelen */
    --primary-color:    var(--dark-blue);
    --secondary-color:  var(--light-blue);
    --accent-color:     var(--yellow);
    --text-color:       var(--dark-blue);
    --text-color-dark:  var(--white);

    --background-hue-1: var(--offwhite);
    --background-hue-2: var(--light-blue);
    --background-hue-3: #d9f2f3;
    --background-hue-4: var(--dark-blue);
    --background-hue-5: var(--white);

    --overlay-background: rgba(9, 42, 59, 0.75);

    --color-heading: var(--primary-color);

    --page-background:   var(--light-blue);
    --page-text-color:   var(--text-color);

    --post-background-color: var(--offwhite);

    /* Knoppen */
    --button-background:            var(--primary-color);
    --button-text-color:            var(--text-color-dark);
    --button-background-hover:      var(--yellow);
    --button-text-hover-color:      var(--dark-blue);

    /* Links */
    --link-color:       var(--dark-blue);
    --link-hover-color: var(--yellow);

    --card-link-color:          var(--primary-color);
    --card-link-hover-color:    var(--accent-color);

    /* Toolbar */
    --toolbar-background:                   var(--yellow);
    --toolbar-text-color:                   var(--dark-blue);
    --toolbar-link-color:                   var(--dark-blue);
    --toolbar-link-hover-color:             var(--white);
    --toolbar-link-underline-hover-color:   var(--white);

    /* Header navigatie */
    --header-nav-button-background-color:           var(--dark-blue);
    --header-nav-button-text-color:                 var(--yellow);
    --header-nav-button-hover-background-color:     var(--yellow);
    --header-nav-button-hover-text-color:           var(--dark-blue);

    --header-search-button-background-color:                var(--dark-blue);
    --header-search-button-mobile-background-color:         var(--dark-blue);
    --header-search-button-text-color:                      var(--yellow);
    --header-search-button-hover-background-color:          var(--yellow);
    --header-search-button-hover-text-color:                var(--dark-blue);

    --header-background:                    var(--white);
    --header-text-color:                    var(--dark-blue);
    --header-title-color:                   var(--dark-blue);
    --header-link-color:                    var(--dark-blue);
    --header-link-hover-color:              var(--yellow);
    --header-link-underline-hover-color:    var(--yellow);

    --header-nav-menu-odd-tint:                     rgba(9, 42, 59, 0.05);
    --header-nav-menu-even-tint:                    transparent;
    --header-nav-menu-item-hover-text-color:        var(--dark-blue);
    --header-nav-menu-item-hover-background-color:  var(--yellow);

    /* Footer */
    --footer-background:        var(--yellow);
    --footer-text-color:        var(--dark-blue);
    --footer-title-color:       var(--dark-blue);
    --footer-link-color:        var(--dark-blue);
    --footer-link-hover-color:  var(--white);

    /* Contact box */
    --contact-box-background:   var(--dark-blue);
    --contact-box-text-color:   var(--white);

    /* Spoorboekje / gids */
    --spoorboek-timeline:           var(--yellow);
    --spoorboek-timeline-shadow:    transparent;

    --spoorboek-button-background-color:            var(--white);
    --spoorboek-button-text-color:                  var(--dark-blue);
    --spoorboek-button-hover-background-color:      var(--offwhite);
    --spoorboek-button-hover-text-color:            var(--dark-blue);

    --spoorboek-button-raised-background-color:             var(--dark-blue);
    --spoorboek-button-raised-text-color:                   var(--white);;
    --spoorboek-button-raised-hover-background-color:       var(--yellow);
    --spoorboek-button-raised-hover-text-color:             var(--dark-blue);

    --spoorboek-program-card-inactive-background-color: var(--grey-3);
    --spoorboek-program-card-inactive-text-color:       var(--grey-6);
    --spoorboek-program-card-border-color:              var(--light-blue);
    --spoorboek-program-card-background:                var(--white);
    --spoorboek-program-card-text-color:                var(--dark-blue);
    --spoorboek-program-card-seperator-color:           var(--light-blue);
    --spoorboek-program-card-button-background-color:   var(--light-blue);
    --spoorboek-program-card-button-text-color:         var(--dark-blue);
    --spoorboek-program-card-button-hover-background-color: var(--yellow);
    --spoorboek-program-card-button-hover-text-color:   var(--dark-blue);

    /* Modal */
    --modal-primary-color:      var(--primary-color);
    --modal-secondary-color:    var(--white);
    --modal-text-color:         var(--dark-blue);
    --modal-background-color:   var(--white);
}

/* ============================================================
   BASIS
   ============================================================ */

html {
    background-color: var(--page-background);
    color: var(--page-text-color);
}

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

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

:is(.site-main, .editor-styles-wrapper) .block {
    background-color: var(--page-background);
    color: var(--page-text-color);
}

.has-light-bg {
    background-color: var(--background-hue-2);
}

/* ============================================================
   FOOTER
   ============================================================ */

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

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

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

.site-footer li a,
.site-footer li a.nav-link {
    color: var(--footer-link-color);
}

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

/* ============================================================
   TOOLBAR / SUBNAVIGATIE
   ============================================================ */

#subnavigation__wrapper {
    background-color: var(--toolbar-background);
    color: var(--toolbar-text-color);
}

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

#subnavigation__wrapper #submenu li a:hover {
    color: var(--toolbar-link-hover-color);
    box-shadow: unset !important;
}

/* ============================================================
   HEADER
   ============================================================ */

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

.site-title img {
    position: absolute;
    top: unset;
    transform: unset;
    height: 200%;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
}

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

.site-header .menu-item a:hover,
.menu-item a:hover {
    color: var(--header-link-hover-color);
    box-shadow: unset !important;
}

.search--toggle {
    background-color: var(--header-search-button-background-color);
    color: var(--header-search-button-text-color);
}

.search--toggle:hover {
    background-color: var(--header-search-button-hover-background-color);
    color: var(--header-search-button-hover-text-color);
}

.search--button,
.search-submit {
    background-color: var(--accent-color);
    color: var(--dark-blue) !important;
}

.search-submit:hover {
    color: var(--white) !important;
}

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

/* ============================================================
   MOBIELE NAVIGATIE
   ============================================================ */

.navigation__mobile {
    background-color: var(--yellow);
    color: var(--header-text-color);
}

.mobile-menu-items {
    background-color: var(--header-background);
    color: var(--header-text-color);
}

.mobile-menu-items .menu-item:nth-child(2n-1) {
    background-color: var(--header-nav-menu-odd-tint);
}

.mobile-menu-items .menu-item:nth-child(2n) {
    background-color: var(--header-nav-menu-even-tint);
}

@media screen and (max-width: 1029px) {
    .menu-item a {
        border-top: 0;
    }
}

:is(.mobile-menu-items .menu-item):hover {
    background-color: var(--header-nav-menu-item-hover-background-color);
    color: var(--header-nav-menu-item-hover-text-color);
}

.navigation__mobile .mobile--search__wrapper {
    background-color: var(--header-search-button-mobile-background-color);
    color: var(--header-text-color);
}

:is(.navigation__mobile .mobile--hamburgermenu__wrapper) {
    background-color: var(--header-nav-button-background-color);
    color: var(--header-nav-button-text-color);
}

:is(.navigation__mobile .mobile--hamburgermenu__wrapper):hover {
    background-color: var(--header-nav-button-hover-background-color);
    color: var(--header-nav-button-hover-text-color);
}

.mobile-menu-items .menu-item {
    color: var(--header-nav-menu-item-text-color);
}

.mobile-menu-items :is(.menu-item, .menu-item:last-child) a {
    color: var(--header-nav-menu-item-text-color);
}

.mobile-menu-items :is(.menu-item, .menu-item:last-child):hover a {
    color: var(--header-nav-menu-item-hover-text-color);
}

/* ============================================================
   KNOPPEN & LINKS
   ============================================================ */

.site-main a {
    color: var(--link-color);
    font-weight: bold;
    text-decoration: none;
}

.site-main a:hover {
    color: var(--link-hover-color);
}

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

.site-main a.wp-block-button__link {
    background-color: var(--button-background);
    color: var(--button-text-color);
}

.site-main a.wp-block-button__link:hover {
    background-color: var(--button-background-hover);
    color: var(--button-text-hover-color);
}

.page-numbers {
    background-color: var(--white) !important;
    color: var(--dark-blue) !important;
}

.post__card--content--cta a {
    color: var(--card-link-color);
}

.post__card--content--cta a:hover {
    color: var(--card-link-hover-color);
}

.menu-item > a:hover {
    color: var(--header-link-hover-color);
}

/* ============================================================
   TYPOGRAFIE & TEKST
   ============================================================ */

:is(.editor-styles-wrapper, .hero-block, .site-main .column__card) :is(h1, h2, h3) {
    color: var(--primary-color);
}

:is(.editor-styles-wrapper, .hero-block, .site-main .column__card) :is(h4, h5, h6) {
    color: var(--accent-color);
}

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

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

/* ============================================================
   BLOKKEN & COMPONENTEN
   ============================================================ */

:is(.site-main, .editor-styles-wrapper) .hero-cta-button {
    background-color: var(--button-background);
    color: var(--button-text-color);
}

:is(.site-main, .editor-styles-wrapper) .hero-cta-button:hover {
    background-color: var(--button-background-hover);
    color: var(--button-text-hover-color);
}

:is(.site-main, .editor-styles-wrapper) .banner--desktop h2 {
    color: var(--primary-color);
}

.site-main .banner--desktop {
    background-color: unset !important;
}

:is(.site-main, .editor-styles-wrapper) .block--button button,
:is(.site-main, .editor-styles-wrapper) .column__card--button button,
:is(.site-main, .editor-styles-wrapper) .block__wrapper form button {
    background-color: var(--button-background);
    color: var(--button-text-color);
}

:is(.site-main, .editor-styles-wrapper) .block--button button:hover,
:is(.site-main, .editor-styles-wrapper) .column__card--button button:hover,
:is(.site-main, .editor-styles-wrapper) .block__wrapper form button:hover {
    background-color: var(--button-background-hover);
    color: var(--button-text-hover-color);
}

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

/* FAQ */
:is(.site-main, .editor-styles-wrapper) .faq__subject--wrapper,
.site-main .faq__subject--wrapper {
    color: var(--button-text-color);
}

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

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

:is(.site-main, .editor-styles-wrapper) .faq__subject--row {
    background-color: var(--white);
    color: var(--dark-blue);
}

:is(.site-main, .editor-styles-wrapper) .column__card--alert,
:is(.site-main, .editor-styles-wrapper) .activeSubject,
:is(.site-main, .editor-styles-wrapper) .faq__subject--row:hover {
    background-color: var(--yellow);
}

:is(.site-main, .editor-styles-wrapper) .activeSubject h2 {
    color: var(--dark-blue) !important;
}

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

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

/* Single page */
:is(.site-main, .editor-styles-wrapper) .single__page--label {
    background-color: var(--primary-color);
    max-width: unset;
}

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

.site-main .single__page--hero-image img {
    filter: unset !important;
}

/* Contact box */
:is(.site-main, .editor-styles-wrapper) .contact--blackbox {
    background-color: var(--contact-box-background);
    color: var(--contact-box-text-color);
}

:is(.site-main, .editor-styles-wrapper) .contact--blackbox :is(p, h1, h2, h3) {
    color: var(--contact-box-text-color) !important;
}

.site-main .colored__link {
    color: var(--primary-color) !important;
    text-decoration-line: underline !important;
    text-decoration-color: var(--yellow) !important;
}

:is(.site-main, .editor-styles-wrapper) .winactie__link a, :is(.site-main, .editor-styles-wrapper) .puzzelactie__link a {
    color: var(--accent-color) !important;
}

.site-main .block__floating--content a {
    color: var(--primary-color);
}

/* ============================================================
   BOTTOM BAR KLEUREN
   ============================================================ */

:is(.site-main, .editor-styles-wrapper) .bottombar-color-1 { background-color: var(--dark-blue); }
:is(.site-main, .editor-styles-wrapper) .bottombar-color-2 { background-color: var(--yellow); }
:is(.site-main, .editor-styles-wrapper) .bottombar-color-3 { background-color: var(--light-blue); }
:is(.site-main, .editor-styles-wrapper) .bottombar-color-4 { background-color: var(--yellow); }
:is(.site-main, .editor-styles-wrapper) .bottombar-color-5 { background-color: var(--light-blue); }
:is(.site-main, .editor-styles-wrapper) .bottombar-color-6 { background-color: var(--dark-blue); }

:is(.site-main, .editor-styles-wrapper) .banner--desktop__inner__bottombar {
    display: none;
}

/* ============================================================
   SPOORBOEKJE / GIDS
   ============================================================ */

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

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

.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--card:hover span {
    color: var(--dark-blue) !important;
}

.site .spoorboekje select {
    background-color: var(--spoorboek-button-raised-background-color);
    color: var(--spoorboek-button-raised-text-color);
}

.site .spoorboekje select:hover {
    background-color: var(--spoorboek-button-raised-hover-background-color);
    color: var(--spoorboek-button-raised-hover-text-color);
}

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

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

.offsetblock,
.offsetblock p {
    background-color: var(--light-blue);
    color: var(--dark-blue);
}

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

.spoorboekje__background {
    background-color: var(--light-blue) !important;
}

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

.spoorboekje .curr_time_incicator {
    background-color: var(--spoorboek-timeline);
    filter: drop-shadow(0px 1px var(--spoorboek-timeline-shadow));
}

.spoorboekje .curr_time_incicator:before {
    border-color: #0000 var(--spoorboek-timeline) #0000 #0000;
}

.spoorboekje .curr_time_incicator:after {
    border-color: #0000 #0000 #0000 var(--spoorboek-timeline);
}

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

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

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

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

/* ============================================================
   SELECT
   ============================================================ */

.site select {
    background-color: var(--button-background);
    color: var(--button-text-color);
}

.site select:hover {
    background-color: var(--button-background-hover);
    color: var(--button-text-hover-color);
}

/* ============================================================
   FORMULIEREN (winacties / contact)
   ============================================================ */

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

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

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

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

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

:is(.site-main, .editor-styles-wrapper) .block--button button {
    background-color: var(--dark-blue) !important;
    color: var(--white);
}

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

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

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

:is(.site-main, .editor-styles-wrapper) .contact--forms__form select {
    background-color: unset !important;
    color: unset !important;
    border: 1px solid var(--light-blue) !important;
}

/* Contact formulieren zenderspecifiek */
:is(.site-main, .editor-styles-wrapper) .block__form select {
    color: var(--dark-blue) !important;
}

:is(.site-main, .editor-styles-wrapper) .block__form p input[type='submit'] {
    background-color: var(--dark-blue) !important;
    color: var(--white);
}

.site-main .block__form form h2 {
    color: var(--dark-blue) !important;
}

.site-main .block__form h2:first-of-type {
    color: var(--primary-color);
}

/* ============================================================
   BEZORGKLACHTEN BANNER
   ============================================================ */

#hidden_bezorgklacht_text {
    background-color: var(--light-blue);
}

#hidden_bezorgklacht_text p {
    color: var(--dark-blue);
}

#hidden_bezorgklacht_text a {
    text-decoration: none;
    color: var(--dark-blue);
}

#hidden_bezorgklacht_text a:hover {
    color: var(--yellow);
}

.block-error-404 h1 {
    color: var(--yellow);
}

.block-error-404 .inner__content ul li a {
    color: var(--dark-blue);
}

.styled-html-block .col-lg-8 {
    padding: 3em 3em;
    background-color: var(--white);
    border-radius: 15px;
}