:root {
    --color-dark-primary: #2F343D;
    --color-dark-secondary: #202329;
    --color-text-light: #c7c7c7;
}

body.mhc-dark-mode {
    /* handles overscroll background color on mobile */
    background-color: var(--color-dark-secondary);
}

body.mhc-dark-mode .dialog-off-canvas-main-canvas {
    /* text color */
    color: #fff;
    h1, h2, h3, h4, h5, h6,
    b, strong,
    .page-title-wrap h1.page-title,
    a:not(.css-button a, a.css-button, .contextual-links a, .primary-tab a), 
    .full-width-container a {
        color: #fff;
    }

    /* underline links */
    a:not(
        .css-button,
        .button,
        .css-button a,
        .contextual-links a,
        .primary-tab a,
        .social-icons li a,
        .menu-item a,
        h1 a,
        h2 a,
        h3 a,
        h4 a,
        h5 a,
        h6 a 
    ):hover {
       text-decoration: underline;
    }

    /* background color */
    header#header>.header,
    footer#footer .footer,
    .views-element-container.block:has(.three-wide-teaser-view) .block-title,
    .views-element-container.block:has(.three-wide-teaser-view) .block-content,
    .views-element-container.block:has(.four-wide-teaser-view) .block-title,
    .views-element-container.block:has(.four-wide-teaser-view) .block-content {
        background-color: var(--color-dark-primary);
    }
    header#header>.header-top,
    #main-wrapper,
    footer#footer .sub-footer {
        background-color: var(--color-dark-secondary);
    }
    #main-wrapper main#main,
    div#block-mhc-drupal-theme-dmplus-views-block-premium-set-items-block-1 .block-title,
    div#block-mhc-drupal-theme-dmplus-views-block-premium-set-items-block-1 .block-content {
        background: transparent;
    }

    /* social icons */
    .header-top .social-icons:not(.marian-sites-icons) li a,
    footer#footer .social-icons:not(.marian-sites-icons) li a {
        background-color: var(--color-standard);
        color: #fff;
        border: 2px solid var(--color-standard);
    }
    .header-top .social-icons:not(.marian-sites-icons) li a:hover,
    footer#footer .social-icons:not(.marian-sites-icons) li a:hover {
        background: var(--light);
        color: var(--color-standard);
    }

    /* buttons */
    .css-button > a, 
    a.css-button {
        background-color: var(--color-dark-primary);
        border: 2px solid  #fff;
    }
    .css-button > a:hover, 
    a.css-button:hover {
        background-color: #fff;
        color: var(--color-standard);
        border: 2px solid #fff;
    }
    li.menu-item.main-menu-item.menu-item-level-1 > a[title='Donation']:hover {
        background-color: red;
    }

    /* tags */
    .field--name-field-tags,
    .field--name-field-series {
        .taxonomy-terms {
            .taxonomy-term {
                a {
                    color: #fff;
                    background-color: var(--color-dark-primary);
                }
                a:hover {
                    background-color: var(--color-standard);
                }
            }
        }
    }

    /* api forms */
    div#content-body:has(.mhc-embedded-form) {
        background: var(--color-dark-primary);
    }
    .mhc-embedded-form  {
        #marian-plus-login-section .marian-plus-link {
            color: #fff;
        }
        button[type=button]:disabled {
            color: #fff !important
        }
    }

    /* blocks */
    .region-content-top .block, 
    .region-content-bottom .block {
        background-color: transparent;
        box-shadow: none;
    }

    /* shopmercy ads */
    .shopmercy-article-ad {
        background-color: var(--color-dark-primary);
        .ad-price font {
            color:#fff;
        }
    }

    /* misc */
    .views-element-container.block:has(.three-wide-teaser-view) > h2.block-title::after,
    .views-element-container.block:has(.four-wide-teaser-view) > h2.block-title::after {
        background-color: #fff;
    }
    .paneled-image .panel {
        background-color: var(--color-dark-primary);
    }

    /* teaser views */
    .three-wide-teaser-view,
    .four-wide-teaser-view {
        .views-view-responsive-grid__item:not(:has(img)):before {
            background-color: var(--color-dark-primary);
        }
    }
}

/* top menu media query */
@media (min-width: 768px) {
    body.mhc-dark-mode {
        .block-region.region-primary-menu .menu-item-level-1:hover,
        .block-region.region-primary-menu .menu-item-level-1 a:hover, 
        .block-region.region-primary-menu .menu-item-level-1 > span:hover {
            background-color:  var(--color-dark-primary);
        }
        .block-region.region-primary-menu .submenu {
            background-color:  var(--color-standard);
            padding: 0;
            li {
                a, span {
                    padding: 0.5rem;
                    width: 100%;
                }
            }
        }
    }
}

/* search result styles */
.node.node--view-mode-search-result {
    .group-right {
        background: var(--color-dark-primary);
        .field--name-body {
            font-size: 16px;
            color: var(--color-text-light);
        }
    }
}