/* ==========================================================================
   Cannachris — Global Dark Mode Add-on
   Scope: Whole page under html[data-theme="dark"].
   Tokens: --cc-* from style.css.
   We use !important because Divi emits high-specificity builder CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUILDER GUARD — prevent dark-mode overrides from leaking into Divi builder UI
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .et-fb .et_pb_section,
html[data-theme="dark"] .et-fb .et_pb_row,
html[data-theme="dark"] .et-fb .et_pb_row_inner,
html[data-theme="dark"] .et-fb .et_pb_column,
html[data-theme="dark"] .et-db .et_pb_section,
html[data-theme="dark"] .et-db .et_pb_row,
html[data-theme="dark"] .et-db .et_pb_row_inner,
html[data-theme="dark"] .et-db .et_pb_column,
html[data-theme="dark"] .et-fb #main-header,
html[data-theme="dark"] .et-db #main-header {
    background-color: initial !important;
    color: initial !important;
}

/* --------------------------------------------------------------------------
   1. PAGE CANVAS & MAIN CONTAINERS
   -------------------------------------------------------------------------- */
html[data-theme="dark"] #page-container,
html[data-theme="dark"] #et-main-area,
html[data-theme="dark"] #main-content,
html[data-theme="dark"] .container,
html[data-theme="dark"] #left-area,
html[data-theme="dark"] .et_post_meta_wrapper {
    background-color: var(--cc-bg) !important;
    color: var(--cc-text) !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .entry-content {
    color: var(--cc-text) !important;
}

html[data-theme="dark"] body.custom-background {
    background-color: rgba(0, 0, 0, 0.5) !important;
    background-image: url(https://cannachris.de/wp-content/uploads/2026/09/cannachris-de-background-cta-2026-ki.webp);
    background-size: auto;
    background-repeat: repeat;
    background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   2. DIVI SECTIONS / ROWS / COLUMNS
   Sections: dark canvas by default.
   Rows/columns: transparent so the section background shows through.
   Image/parallax sections: keep their photo background visible.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .et_pb_section {
    background-color: var(--cc-bg) !important;
    color: var(--cc-text) !important;
}

html[data-theme="dark"] .et_pb_row,
html[data-theme="dark"] .et_pb_row_inner,
html[data-theme="dark"] .et_pb_column {
    background-color: transparent !important;
    color: inherit !important;
}

html[data-theme="dark"] .et_pb_section.et_section_transparent,
html[data-theme="dark"] .et_pb_section.et_pb_fullwidth_section,
html[data-theme="dark"] .et_pb_section.parallax_section,
html[data-theme="dark"] .et_pb_section[class*="et_pb_section_parallax"],
html[data-theme="dark"] .et_pb_section.et_pb_with_background,
html[data-theme="dark"] .et_pb_section.hero-fixed-bg,
html[data-theme="dark"] .et_pb_section_0.et_pb_section,
html[data-theme="dark"] .et_pb_section[style*="background-image"] {
    background-color: transparent !important;
}

/* Frosted-glass rows inside hero/image sections:
   keep the blur effect but switch it to a dark tint so text stays readable
   and the background photo remains visible around it. */
html[data-theme="dark"] .hero-fixed-bg .et_pb_row_0 {
    background-color: rgba(2, 0, 0, 0.72) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border-color: rgba(103, 174, 104, 0.22) !important;
}

/* Parallax gradient overlay: light mode uses mix-blend-mode:darken.
   In dark mode the dark canvas makes darken hide the image, so switch
   to normal blending and lower opacity so the photo stays visible. */
html[data-theme="dark"] .et_parallax_gradient {
    mix-blend-mode: normal !important;
    opacity: 0.45 !important;
}


html[data-theme="dark"] .et_pb_section:not(.et_section_transparent) {
    background-blend-mode: normal !important;
}

/* --------------------------------------------------------------------------
   3. THEME BUILDER HEADER / FOOTER
   -------------------------------------------------------------------------- */
html[data-theme="dark"] #et-main-area>footer>div>div.et_pb_section.et_pb_section_0_tb_footer.et_pb_with_background.et_section_regular {
    background-image: linear-gradient(180deg, rgba(33, 33, 33, 0.89) 0%, #111 100%), url(https://cannachris.de/wp-content/uploads/2026/10/cannachris-marijuana-leaves-seamless-dark.webp) !important;
    background-size: contain;
    background-repeat: repeat;
}

html[data-theme="dark"] .et-l--footer .et_pb_section,
html[data-theme="dark"] .et-l--header .et_pb_section,
html[data-theme="dark"] .et-l--post_header .et_pb_section,
html[data-theme="dark"] .et-l--header .et_pb_row,
html[data-theme="dark"] .et-l--post_header .et_pb_row {
    background-color: #111 !important;
    color: var(--cc-text) !important;
}

html[data-theme="dark"] .et-l--post_footer .et_pb_section,
html[data-theme="dark"] .et-l--footer .et_pb_row,
html[data-theme="dark"] .et-l--post_footer .et_pb_row,
html[data-theme="dark"] #main-footer,
html[data-theme="dark"] .et_pb_section.et_pb_fullwidth_footer,
html[data-theme="dark"] #footer-bottom,
html[data-theme="dark"] .et_pb_footer {
    background-color: transparent !important;
    color: var(--cc-text) !important;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY — Headings, paragraphs, lists in Divi modules
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .et_pb_module h1,
html[data-theme="dark"] .et_pb_module h2,
html[data-theme="dark"] .et_pb_module h3,
html[data-theme="dark"] .et_pb_module h4,
html[data-theme="dark"] .et_pb_module h5,
html[data-theme="dark"] .et_pb_module h6,
html[data-theme="dark"] .et_pb_text,
html[data-theme="dark"] .et_pb_text_inner,
html[data-theme="dark"] .et_pb_text_inner p,
html[data-theme="dark"] .et_pb_text_inner li,
html[data-theme="dark"] .et_pb_blurb_content,
html[data-theme="dark"] .et_pb_blurb_container,
html[data-theme="dark"] .et_pb_counter_title,
html[data-theme="dark"] .et_pb_counter_amount,
html[data-theme="dark"] .et_pb_number_counter,
html[data-theme="dark"] .et_pb_pricing_title,
html[data-theme="dark"] .et_pb_pricing_content,
html[data-theme="dark"] .et_pb_testimonial_description_inner,
html[data-theme="dark"] .et_pb_testimonial_author,
html[data-theme="dark"] .et_pb_team_member_description,
html[data-theme="dark"] .et_pb_team_member_name,
html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .entry-title a,
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .et_pb_title_container h1,
html[data-theme="dark"] .wp-block-heading,
html[data-theme="dark"] .wp-block-paragraph {
    color: var(--cc-text) !important;
}

html[data-theme="dark"] .et_pb_text_inner,
html[data-theme="dark"] .et_pb_blurb_content {
    background-color: transparent !important;
}

/* Builder-set dark text (e.g. #050505) must flip in dark mode.
   Extra body/Page-Container prefix beats Divi's inline module CSS. */
html[data-theme="dark"] body #page-container .et_pb_promo .et_pb_promo_description div,
html[data-theme="dark"] body #page-container .et_pb_promo .et_pb_promo_description p,
html[data-theme="dark"] body #page-container .et_pb_promo .et_pb_promo_description li,
html[data-theme="dark"] body #page-container .et_pb_promo .et_pb_promo_description h1,
html[data-theme="dark"] body #page-container .et_pb_promo .et_pb_promo_description h2,
html[data-theme="dark"] body #page-container .et_pb_promo .et_pb_promo_description h3,
html[data-theme="dark"] body #page-container .et_pb_promo .et_pb_promo_description h4,
html[data-theme="dark"] body #page-container .et_pb_promo .et_pb_promo_description h5,
html[data-theme="dark"] body #page-container .et_pb_promo .et_pb_promo_description h6 {
    color: var(--cc-text) !important;
}

/* Muted / secondary text */
html[data-theme="dark"] .et_pb_text_inner span,
html[data-theme="dark"] .et_pb_text_inner small,
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .post-meta a {
    color: var(--cc-text-muted) !important;
}

/* --------------------------------------------------------------------------
   5. LINKS
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .et_pb_module a,
html[data-theme="dark"] .entry-content a,
html[data-theme="dark"] .et_pb_text_inner a,
html[data-theme="dark"] .et_pb_blurb_content a,
html[data-theme="dark"] .et_pb_post a,
html[data-theme="dark"] .et_pb_post .entry-title a,
html[data-theme="dark"] #left-area a,
html[data-theme="dark"] #left-area .post-meta a {
    color: var(--cc-toggle-track) !important;
}

html[data-theme="dark"] .et_pb_module a:hover,
html[data-theme="dark"] .et_pb_module a:focus,
html[data-theme="dark"] .entry-content a:hover,
html[data-theme="dark"] .entry-content a:focus,
html[data-theme="dark"] .et_pb_text_inner a:hover,
html[data-theme="dark"] .et_pb_text_inner a:focus,
html[data-theme="dark"] .et_pb_post a:hover,
html[data-theme="dark"] .et_pb_post a:focus,
html[data-theme="dark"] #left-area a:hover,
html[data-theme="dark"] #left-area a:focus {
    color: var(--cc-accent-hover) !important;
}

/* --------------------------------------------------------------------------
   6. HEADER / TOP NAV / MOBILE MENU
   -------------------------------------------------------------------------- */
html[data-theme="dark"] #main-header,
html[data-theme="dark"] .et_header_style_centered #main-header,
html[data-theme="dark"] .et-fixed-header#main-header,
html[data-theme="dark"] .et-fixed-header #top-header,
html[data-theme="dark"] #top-header,
html[data-theme="dark"] #et-secondary-nav,
html[data-theme="dark"] .et_mobile_menu,
html[data-theme="dark"] .et_mobile_menu li a,
html[data-theme="dark"] #et-secondary-nav a,
html[data-theme="dark"] .et-menu li a {
    background-color: var(--cc-surface) !important;
    color: var(--cc-text) !important;
}

html[data-theme="dark"] #et-top-navigation,
html[data-theme="dark"] #top-menu a {
    color: var(--cc-text) !important;
}

html[data-theme="dark"] #top-menu li a:hover,
html[data-theme="dark"] #top-menu li a:focus,
html[data-theme="dark"] .et-menu li a:hover,
html[data-theme="dark"] .et-menu li a:focus,
html[data-theme="dark"] .et_mobile_menu li a:hover,
html[data-theme="dark"] .et_mobile_menu li a:focus {
    color: var(--cc-toggle-track) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] #top-menu li.current-menu-item>a,
html[data-theme="dark"] .et-menu li.current-menu-item>a,
html[data-theme="dark"] .et_mobile_menu li.current-menu-item a {
    color: var(--cc-toggle-track) !important;
}

html[data-theme="dark"] .mobile_menu_bar:before {
    color: var(--cc-text) !important;
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
html[data-theme="dark"] #main-footer a,
html[data-theme="dark"] #main-footer .et_pb_widget a,
html[data-theme="dark"] .et-social-icons a,
html[data-theme="dark"] #footer-info,
html[data-theme="dark"] #footer-info a {
    color: var(--cc-text) !important;
}

html[data-theme="dark"] #main-footer a:hover,
html[data-theme="dark"] #main-footer a:focus,
html[data-theme="dark"] #main-footer .et_pb_widget a:hover,
html[data-theme="dark"] #main-footer .et_pb_widget a:focus,
html[data-theme="dark"] .et-social-icons a:hover,
html[data-theme="dark"] .et-social-icons a:focus {
    color: var(--cc-toggle-track) !important;
}

/* --------------------------------------------------------------------------
   8. BUTTONS — always primary green
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .et_pb_button,
html[data-theme="dark"] .et_pb_button span,
html[data-theme="dark"] .et_pb_more_button,
html[data-theme="dark"] .et_pb_newsletter_button,
html[data-theme="dark"] .et_pb_contact_submit,
html[data-theme="dark"] .woocommerce a.button,
html[data-theme="dark"] .woocommerce button.button,
html[data-theme="dark"] .woocommerce input.button,
html[data-theme="dark"] .woocommerce #respond input#submit,
html[data-theme="dark"] body #page-container .et_pb_section .et_pb_button {
    background-color: #13890e !important;
    color: #ffffff !important;
    border-color: #13890e !important;
}

html[data-theme="dark"] .et_pb_button:hover,
html[data-theme="dark"] .et_pb_button:focus,
html[data-theme="dark"] .et_pb_more_button:hover,
html[data-theme="dark"] .et_pb_more_button:focus,
html[data-theme="dark"] .et_pb_newsletter_button:hover,
html[data-theme="dark"] .et_pb_newsletter_button:focus,
html[data-theme="dark"] .et_pb_contact_submit:hover,
html[data-theme="dark"] .et_pb_contact_submit:focus,
html[data-theme="dark"] .woocommerce a.button:hover,
html[data-theme="dark"] .woocommerce button.button:hover,
html[data-theme="dark"] .woocommerce input.button:hover,
html[data-theme="dark"] .woocommerce #respond input#submit:hover,
html[data-theme="dark"] body #page-container .et_pb_section .et_pb_button:hover {
    background-color: #0e6b0c !important;
    color: #ffffff !important;
    border-color: #0e6b0c !important;
}

/* --------------------------------------------------------------------------
   9. FORMS / INPUTS
   -------------------------------------------------------------------------- */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .input,
html[data-theme="dark"] .et_pb_contact_form input,
html[data-theme="dark"] .et_pb_contact_form textarea,
html[data-theme="dark"] .et_pb_contact_form select,
html[data-theme="dark"] .et_pb_newsletter_form input,
html[data-theme="dark"] .et_pb_newsletter_form textarea,
html[data-theme="dark"] .et_pb_newsletter_form select,
html[data-theme="dark"] #et_search_form input,
html[data-theme="dark"] .woocommerce-input-wrapper input,
html[data-theme="dark"] .woocommerce-input-wrapper textarea,
html[data-theme="dark"] .woocommerce-input-wrapper select,
html[data-theme="dark"] .woocommerce form .form-row input.input-text,
html[data-theme="dark"] .woocommerce form .form-row textarea {
    background-color: var(--cc-surface-elevated) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .et_pb_contact_form input::placeholder,
html[data-theme="dark"] .et_pb_contact_form textarea::placeholder,
html[data-theme="dark"] .et_pb_newsletter_form input::placeholder,
html[data-theme="dark"] .et_pb_newsletter_form textarea::placeholder {
    color: var(--cc-text-muted) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .et_pb_contact_form input:focus,
html[data-theme="dark"] .et_pb_contact_form textarea:focus,
html[data-theme="dark"] .et_pb_newsletter_form input:focus,
html[data-theme="dark"] .et_pb_newsletter_form textarea:focus,
html[data-theme="dark"] .woocommerce form .form-row input.input-text:focus,
html[data-theme="dark"] .woocommerce form .form-row textarea:focus {
    background-color: var(--cc-surface) !important;
    border-color: var(--cc-accent) !important;
    color: var(--cc-text) !important;
    box-shadow: 0 0 0 2px rgba(103, 174, 104, 0.25) !important;
}

html[data-theme="dark"] .et_pb_contact_form_label,
html[data-theme="dark"] .et_pb_newsletter_form_label,
html[data-theme="dark"] .et_pb_contact_field_options_title,
html[data-theme="dark"] .woocommerce form .form-row label,
html[data-theme="dark"] .woocommerce-page form .form-row label {
    color: var(--cc-text-muted) !important;
}

html[data-theme="dark"] .et_pb_contact_error_text,
html[data-theme="dark"] .et_pb_contact_error_label,
html[data-theme="dark"] .et-pb-contact-message,
html[data-theme="dark"] .et-pb-contact-message p,
html[data-theme="dark"] .et_pb_newsletter_error,
html[data-theme="dark"] .et_pb_newsletter_success {
    background-color: var(--cc-surface-elevated) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
}

html[data-theme="dark"] .posts-reaction-btn,
html[data-theme="dark"] .posts-reaction-label {
    background-color: var(--cc-surface-elevated) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
}

/* --------------------------------------------------------------------------
   10. BLOG / POSTS / ARCHIVE / COMMENTS
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .et_pb_blog_0 .et_pb_post,
html[data-theme="dark"] .et_pb_post,
html[data-theme="dark"] article.et_pb_post,
html[data-theme="dark"] .et_pb_blog_grid .et_pb_post,
html[data-theme="dark"] .et_pb_blog_grid article.et_pb_post {
    background-color: #222222 !important;
    border: 1px solid #111111 !important;
    color: var(--cc-text) !important;
}

html[data-theme="dark"] .header-content h2,
html[data-theme="dark"] .wp-block-list li {
    color: var(--cc-text) !important;
}

html[data-theme="dark"] .et_pb_post .entry-title,
html[data-theme="dark"] .et_pb_post .entry-title a,
html[data-theme="dark"] article.et_pb_post .entry-title,
html[data-theme="dark"] article.et_pb_post .entry-title a,
html[data-theme="dark"] .cc-blog-writer .cta-btn a {
    color: var(--cc-text) !important;
}

/* Blog single header subtitle (force light over Divi's et_pb_bg_layout_dark rule) */
html[data-theme="dark"] body #page-container .et_pb_fullwidth_header.cc-blog-header.et_pb_bg_layout_dark .header-content h2.et_pb_module_header {
    color: var(--cc-text) !important;
}

html[data-theme="dark"] .et_pb_post a:hover,
html[data-theme="dark"] article.et_pb_post a:hover,
html[data-theme="dark"] .post-meta a:hover,
html[data-theme="dark"] .comment-reply-link:hover,
html[data-theme="dark"] .comment-edit-link:hover {
    color: var(--cc-accent) !important;
}

html[data-theme="dark"] .et_pb_blog_0 .et_pb_post .post-meta a,
html[data-theme="dark"] #left-area .et_pb_blog_0 .et_pb_post .post-meta a,
html[data-theme="dark"] .et_pb_post .post-meta a,
html[data-theme="dark"] .cc-blog-writer {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}

html[data-theme="dark"] .et_pb_blog_0 .et_pb_post .post-meta a:hover,
html[data-theme="dark"] #left-area .et_pb_blog_0 .et_pb_post .post-meta a:hover,
html[data-theme="dark"] .et_pb_post .post-meta a:hover {
    background-color: #13890e !important;
    color: #ffffff !important;
    border-color: #13890e !important;
}

html[data-theme="dark"] .comment-body,
html[data-theme="dark"] .comment_postinfo,
html[data-theme="dark"] .comment-content,
html[data-theme="dark"] .comment.depth-1,
html[data-theme="dark"] #comment-wrap,
html[data-theme="dark"] #commentform input,
html[data-theme="dark"] #commentform textarea {
    background-color: var(--cc-surface) !important;
    color: var(--cc-text) !important;
}

html[data-theme="dark"] .comment-content p,
html[data-theme="dark"] .comment-content li,
html[data-theme="dark"] #marquee-container>div.marquee-wrapper>div>h2>a {
    color: #ffffff !important;
}

/* News-Ticker: grünen Hintergrund aus dem Light Mode beibehalten */
html[data-theme="dark"] .et_pb_row.ticker-container,
html[data-theme="dark"] .et_pb_row_1.ticker-container,
html[data-theme="dark"] .ticker-container {
    background-color: #13890e !important;
}

html[data-theme="dark"] .ticker-container,
html[data-theme="dark"] .ticker-container .et_pb_column,
html[data-theme="dark"] #marquee-container,
html[data-theme="dark"] .marquee-wrapper,
html[data-theme="dark"] .marquee h2,
html[data-theme="dark"] .marquee h2 a,
html[data-theme="dark"] .marquee h2 span {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   11. DIVI MODULES — toggle / accordion / tabs
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .et_pb_toggle,
html[data-theme="dark"] .et_pb_accordion .et_pb_toggle,
html[data-theme="dark"] .et_pb_accordion_item,
html[data-theme="dark"] .et_pb_tabs,
html[data-theme="dark"] .et_pb_tabs_controls,
html[data-theme="dark"] .et_pb_tab,
html[data-theme="dark"] .et_pb_toggle_content,
html[data-theme="dark"] .et_pb_toggle_title,
html[data-theme="dark"] .et_pb_tabs_controls li,
html[data-theme="dark"] .et_pb_tabs_controls li a {
    background-color: var(--cc-surface-elevated) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
}

html[data-theme="dark"] .et_pb_toggle_open,
html[data-theme="dark"] .et_pb_toggle_close,
html[data-theme="dark"] .et_pb_accordion .et_pb_toggle_open,
html[data-theme="dark"] .et_pb_accordion .et_pb_toggle_close,
html[data-theme="dark"] .et_pb_tabs_controls li.et_pb_tab_active,
html[data-theme="dark"] .et_pb_tabs_controls li.et_pb_tab_active a {
    background-color: var(--cc-surface-elevated) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-surface-elevated) !important;
}

html[data-theme="dark"] .et_pb_toggle_title:before,
html[data-theme="dark"] .et_pb_toggle_title:after {
    color: var(--cc-text) !important;
}

/* Kontakt: sticky DSGVO-Hinweis einfarbig dunkel — nur auf /kontakt/ (page-id-1353) */
html[data-theme="dark"] .page-id-1353 .et_pb_text_1 {
    background-color: #111111 !important;
}

/* /kontakt/ im Dark Mode als Overlay-Seite über dem Body-Hintergrund darstellen.
   Nur hier #page-container/#et-main-area/#main-content transparent, damit
   body.custom-background mit dem dunklen Overlay durchscheint. */
html[data-theme="dark"] .page-id-1353 #page-container,
html[data-theme="dark"] .page-id-1353 #et-main-area,
html[data-theme="dark"] .page-id-1353 #main-content {
    background-color: transparent !important;
}

/* Auf /kontakt/ auch die Sections transparent halten, damit der dunkle
   Body-Hintergrund-Overlay auf der ganzen Seite sichtbar ist. */
html[data-theme="dark"] .page-id-1353 .et_pb_section.et_pb_section {
    background-color: transparent !important;
}

/* Reaktions-Boxen (white/light-Hintergrund) im Dark Mode lesbar halten. */
html[data-theme="dark"] .posts-reactions,
html[data-theme="dark"] .posts-reactions * {
    color: #111111 !important;
}

html[data-theme="dark"] .et_pb_toggle_content p {
    border-radius: 28px !important;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   12. CANNACHRIS COMPONENTS
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .cc-author-box-wrapper,
html[data-theme="dark"] .amsterdam-blog-entry .cc-author-box-wrapper {
    background-color: var(--cc-surface) !important;
    border-color: var(--cc-border) !important;
}

html[data-theme="dark"] .cc-author-box-wrapper .cc-author-name,
html[data-theme="dark"] .cc-author-box-wrapper .cc-author-name a {
    color: var(--cc-text) !important;
}

html[data-theme="dark"] .cc-author-box-wrapper .cc-author-name a:hover,
html[data-theme="dark"] .cc-author-box-wrapper .cc-author-name a:focus {
    color: var(--cc-accent) !important;
}

html[data-theme="dark"] .cc-author-box-wrapper .cc-author-meta {
    color: var(--cc-text-muted) !important;
}

html[data-theme="dark"] .ffh-btn:hover,
html[data-theme="dark"] .ffh-btn:focus-visible {
    background: var(--cc-accent-hover) !important;
    background-color: var(--cc-accent-hover) !important;
    filter: none !important;
}

html[data-theme="dark"] .rank-math-list {
    background-color: var(--cc-surface-elevated) !important;
}

/* --------------------------------------------------------------------------
   13. WIDGETS / SIDEBAR / MISC
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .et_pb_widget,
html[data-theme="dark"] .et_pb_widget a,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .widget a,
html[data-theme="dark"] .widgettitle,
html[data-theme="dark"] .widgettitle a {
    background-color: var(--cc-surface) !important;
    color: var(--cc-text) !important;
}

html[data-theme="dark"] .rank-math-list {
    background-color: var(--cc-surface) !important;
}

html[data-theme="dark"] .rank-math-list-item {
    background-color: var(--cc-surface-elevated) !important;
    color: var(--cc-text) !important;
}

html[data-theme="dark"] .et_pb_widget a:hover,
html[data-theme="dark"] .widget a:hover,
html[data-theme="dark"] .widgettitle a:hover {
    color: var(--cc-accent) !important;
}

html[data-theme="dark"] .widget_search input,
html[data-theme="dark"] .widget_search button,
html[data-theme="dark"] .et_search_outer input {
    background-color: var(--cc-surface-elevated) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
}

/* --------------------------------------------------------------------------
   14. DIVIDERS, TABLES, BLOCKQUOTES, CODE
   -------------------------------------------------------------------------- */
html[data-theme="dark"] hr,
html[data-theme="dark"] .et_pb_divider_internal,
html[data-theme="dark"] .et_pb_divider {
    border-top-color: var(--cc-border) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .et_pb_table,
html[data-theme="dark"] .et_pb_table tr,
html[data-theme="dark"] .et_pb_table td,
html[data-theme="dark"] .et_pb_table th {
    background-color: var(--cc-surface-elevated) !important;
    color: var(--cc-text) !important;
    border-color: var(--cc-border) !important;
}

html[data-theme="dark"] blockquote,
html[data-theme="dark"] .et_quote,
html[data-theme="dark"] .et_pb_text blockquote {
    background-color: var(--cc-surface) !important;
    color: var(--cc-text) !important;
    border-left-color: var(--cc-accent) !important;
}

html[data-theme="dark"] pre,
html[data-theme="dark"] code {
    background-color: var(--cc-surface-elevated) !important;
    color: var(--cc-text) !important;
}



/* --------------------------------------------------------------------------
   16. CC-INK UTILITY CLASS
   High-contrast text for modules placed on image/transparent backgrounds.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .cc-ink,
html[data-theme="dark"] .cc-ink p,
html[data-theme="dark"] .cc-ink li,
html[data-theme="dark"] .cc-ink span,
html[data-theme="dark"] .cc-ink h1,
html[data-theme="dark"] .cc-ink h2,
html[data-theme="dark"] .cc-ink h3,
html[data-theme="dark"] .cc-ink h4,
html[data-theme="dark"] .cc-ink h5,
html[data-theme="dark"] .cc-ink h6,
html[data-theme="dark"] .cc-ink div {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

html[data-theme="dark"] .cc-ink a {
    color: #67ae68 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

html[data-theme="dark"] .cc-ink a:hover,
html[data-theme="dark"] .cc-ink a:focus {
    color: #4caf50 !important;
}

/* --------------------------------------------------------------------------
   17. UTILITY: Respect explicit light-on-dark / dark-on-light module choices
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .et_pb_text_color_light,
html[data-theme="dark"] .et_pb_text_color_light h1,
html[data-theme="dark"] .et_pb_text_color_light h2,
html[data-theme="dark"] .et_pb_text_color_light h3,
html[data-theme="dark"] .et_pb_text_color_light h4,
html[data-theme="dark"] .et_pb_text_color_light h5,
html[data-theme="dark"] .et_pb_text_color_light h6,
html[data-theme="dark"] .et_pb_text_color_light p,
html[data-theme="dark"] .et_pb_text_color_light li,
html[data-theme="dark"] .et_pb_text_color_light a {
    color: #ffffff !important;
}

html[data-theme="dark"] .et_pb_text_color_dark,
html[data-theme="dark"] .et_pb_text_color_dark h1,
html[data-theme="dark"] .et_pb_text_color_dark h2,
html[data-theme="dark"] .et_pb_text_color_dark h3,
html[data-theme="dark"] .et_pb_text_color_dark h4,
html[data-theme="dark"] .et_pb_text_color_dark h5,
html[data-theme="dark"] .et_pb_text_color_dark h6,
html[data-theme="dark"] .et_pb_text_color_dark p,
html[data-theme="dark"] .et_pb_text_color_dark li {
    color: var(--cc-text) !important;
}