/* ================================================================
   DevTools Club — Dark Mode
   Activated by  html.dtc-dark  (set by toggle, persisted in localStorage)
   ================================================================ */
html.dtc-dark {
    --dtc-bg:       #16181c;   /* page canvas            */
    --dtc-surface:  #1e2228;   /* cards / panels         */
    --dtc-surface2: #262b33;   /* raised / hover         */
    --dtc-border:   #313842;
    --dtc-text:     #e6e8ec;
    --dtc-muted:    #a8b0bd;
    --dtc-link:     #4ea9f0;   /* lighter blue for AA on dark */
    --dtc-brand:    #f5a623;
}

/* ---- Canvas + base text ---- */
html.dtc-dark,
html.dtc-dark body,
html.dtc-dark .wd-page-wrapper,
html.dtc-dark .website-wrapper,
html.dtc-dark .main-page-wrapper,
html.dtc-dark .site-content {
    background-color: var(--dtc-bg) !important;
    color: var(--dtc-text);
}
html.dtc-dark p,
html.dtc-dark li,
html.dtc-dark span,
html.dtc-dark dd,
html.dtc-dark dt,
html.dtc-dark .wd-entities-title,
html.dtc-dark h1, html.dtc-dark h2, html.dtc-dark h3,
html.dtc-dark h4, html.dtc-dark h5, html.dtc-dark h6 {
    color: var(--dtc-text);
}
html.dtc-dark a { color: var(--dtc-link); }

/* ---- Header ---- */
html.dtc-dark .whb-general-header,
html.dtc-dark .whb-top-bar,
html.dtc-dark .whb-main-header,
html.dtc-dark .whb-header.whb-sticky-clone .whb-general-header {
    background-color: var(--dtc-surface) !important;
    border-color: var(--dtc-border) !important;
}
html.dtc-dark .whb-general-header,
html.dtc-dark .whb-general-header a,
html.dtc-dark .wd-header-cart a,
html.dtc-dark .whb-column a,
html.dtc-dark .wd-tools-icon {
    color: var(--dtc-text);
}

/* ---- Product / grid cards ---- */
html.dtc-dark .product-grid-item,
html.dtc-dark .wd-product,
html.dtc-dark ul.products li.product {
    background-color: var(--dtc-surface) !important;
    border: 1px solid var(--dtc-border) !important;
    border-radius: var(--dtc-radius);
}
html.dtc-dark .product-grid-item .wd-entities-title a,
html.dtc-dark .product-grid-item .woocommerce-loop-product__title { color: var(--dtc-text) !important; }
html.dtc-dark .price,
html.dtc-dark .price ins,
html.dtc-dark .amount { color: var(--dtc-link) !important; }
html.dtc-dark del .amount { color: var(--dtc-muted) !important; }

/* ---- Changelog table ---- */
html.dtc-dark .devtools-changelog { background: var(--dtc-surface) !important; }
html.dtc-dark .devtools-changelog th { background: var(--dtc-surface2) !important; color: var(--dtc-text); }
html.dtc-dark .devtools-changelog td { color: var(--dtc-text); border-bottom-color: var(--dtc-border) !important; }
html.dtc-dark .devtools-changelog tr:hover td { background: var(--dtc-surface2) !important; }
html.dtc-dark .devtools-changelog a { color: var(--dtc-link); }
@media (max-width:600px){
  html.dtc-dark .devtools-changelog tr { background: var(--dtc-surface) !important; border-color: var(--dtc-border) !important; }
  html.dtc-dark .devtools-changelog td::before { color: var(--dtc-muted); }
}

/* ---- FAQ accordion ---- */
html.dtc-dark .devtools-faq .vc_tta-panel-heading { background: var(--dtc-surface2) !important; border-color: var(--dtc-border) !important; }
html.dtc-dark .devtools-faq .vc_tta-title { color: var(--dtc-text); }
html.dtc-dark .devtools-faq .vc_tta-panel-body { background: var(--dtc-surface) !important; border-color: var(--dtc-border) !important; }

/* ---- Generic white panels / forms ---- */
html.dtc-dark .wd-nav-mobile,
html.dtc-dark .cart-widget-side .widget-shopping-cart-content,
html.dtc-dark .mobile-nav,
html.dtc-dark .woocommerce-tabs .wc-tab,
html.dtc-dark .card,
html.dtc-dark .wd-dropdown,
html.dtc-dark .wd-dropdown-menu {
    background-color: var(--dtc-surface) !important;
    color: var(--dtc-text);
}
html.dtc-dark input:not([type=submit]):not([type=button]),
html.dtc-dark textarea,
html.dtc-dark select {
    background-color: var(--dtc-surface2) !important;
    color: var(--dtc-text) !important;
    border-color: var(--dtc-border) !important;
}
html.dtc-dark input::placeholder, html.dtc-dark textarea::placeholder { color: var(--dtc-muted); }

/* ---- Category / filter nav buttons row ---- */
html.dtc-dark .wd-nav-product-cat a,
html.dtc-dark .btn.btn-color-default,
html.dtc-dark .wd-button-divider { background-color: var(--dtc-surface2) !important; color: var(--dtc-text) !important; border-color: var(--dtc-border) !important; }

/* ---- Light section blocks (WPBakery white rows) ---- */
html.dtc-dark .vc_row.wpb_row[style*="background-color: #fff"],
html.dtc-dark .vc_row.wpb_row[style*="background-color: rgb(255"],
html.dtc-dark .vc_row.wpb_row[style*="background-color: #ffffff"] {
    background-color: var(--dtc-bg) !important;
}

/* ---- Keep brand CTA readable ---- */
html.dtc-dark .devtools-cta-btn .vc_general.vc_btn3 { color:#fff !important; }

/* ================================================================
   Inner pages + panels (polish pass)
   ================================================================ */

/* ---- Slide-in panels: mini-cart, login flyout, mobile nav ---- */
html.dtc-dark .cart-widget-side,
html.dtc-dark .login-form-side,
html.dtc-dark .wd-side-hidden,
html.dtc-dark .mobile-nav {
    background-color: var(--dtc-surface) !important;
    color: var(--dtc-text) !important;
    border-color: var(--dtc-border) !important;
}
html.dtc-dark .cart-widget-side .wd-heading-text,
html.dtc-dark .login-form-side .wd-heading-text,
html.dtc-dark .widget-shopping-cart-content a,
html.dtc-dark .mobile-nav a { color: var(--dtc-text) !important; }
html.dtc-dark .wd-side-hidden .wd-close-side,
html.dtc-dark .cart-widget-side .close-side-widget { color: var(--dtc-muted) !important; }
html.dtc-dark .mobile-nav li { border-color: var(--dtc-border) !important; }

/* ---- Single product: summary / purchase / meta boxes ---- */
html.dtc-dark .single-product div.product .summary,
html.dtc-dark .single-product div.product .entry-summary,
html.dtc-dark .wd-plan-inner,
html.dtc-dark .wd-single-info,
html.dtc-dark .product_meta,
html.dtc-dark .woocommerce-tabs,
html.dtc-dark .related.products,
html.dtc-dark .up-sells {
    background-color: transparent !important;
    color: var(--dtc-text);
}
html.dtc-dark .wd-plan-inner,
html.dtc-dark .yith-wcmbs-message,
html.dtc-dark .wc-tabs-wrapper,
html.dtc-dark .woocommerce-Tabs-panel {
    background-color: var(--dtc-surface) !important;
    border-color: var(--dtc-border) !important;
}
html.dtc-dark .product_meta,
html.dtc-dark .woocommerce-tabs ul.tabs li { border-color: var(--dtc-border) !important; }

/* ---- Cart / checkout / account tables & boxes ---- */
html.dtc-dark .shop_table,
html.dtc-dark .cart_totals,
html.dtc-dark .woocommerce-checkout #payment,
html.dtc-dark .woocommerce-info,
html.dtc-dark .woocommerce-message,
html.dtc-dark .woocommerce-MyAccount-navigation,
html.dtc-dark .woocommerce-MyAccount-content,
html.dtc-dark .wd-checkout-order-wrap,
html.dtc-dark .wd-login-form,
html.dtc-dark fieldset {
    background-color: var(--dtc-surface) !important;
    color: var(--dtc-text);
    border-color: var(--dtc-border) !important;
}
html.dtc-dark .shop_table th,
html.dtc-dark .shop_table td,
html.dtc-dark .cart_totals th,
html.dtc-dark .cart_totals td { border-color: var(--dtc-border) !important; color: var(--dtc-text); }
html.dtc-dark .woocommerce-MyAccount-navigation li.is-active a { color: var(--dtc-link) !important; }

/* ---- Sidebar widgets ---- */
html.dtc-dark .widget,
html.dtc-dark .wd-widget,
html.dtc-dark .widget_product_categories,
html.dtc-dark .wd-sub-menu {
    background-color: transparent !important;
    color: var(--dtc-text);
}
html.dtc-dark .widget li,
html.dtc-dark .widget a { border-color: var(--dtc-border) !important; }

/* ---- Pre-footer brand-logo strip ----
   The logos are dark-on-white, so we keep a light-neutral surface here
   (rather than dark) and let them stay visible — a deliberate light island. */
html.dtc-dark .wd-prefooter,
html.dtc-dark .wd-prefooter .vc_row-has-fill {
    background-color: #eceef1 !important;
}

/* ---- Misc chrome ---- */
html.dtc-dark a.scrollToTop { background-color: var(--dtc-surface2) !important; color: var(--dtc-text) !important; }
html.dtc-dark .wd-skip-navigation.btn,
html.dtc-dark .wd-skip-content.btn { background-color: var(--dtc-surface2) !important; color: var(--dtc-text) !important; }
html.dtc-dark hr { border-color: var(--dtc-border) !important; }
html.dtc-dark .wd-toolbar { background-color: var(--dtc-surface) !important; color: var(--dtc-text) !important; }

/* ---- The dark hero / pricing already-dark sections: leave as-is ---- */

/* ================================================================
   FEEDBACK FIXES (2026-06-13, round 2)
   ================================================================ */

/* ---- Header logo: the light/gray "static" logo reads poorly on dark.
   Swap to the all-blue sticky logo (root-relative so it works on staging too).
   Keep the <img> in flow (opacity:0) and paint the blue logo behind it. ---- */
html.dtc-dark .wd-main-logo img {
    content: url('/data/uploads/2020/05/Logo-1757.png');
    object-fit: contain;
    object-position: left center;
}

/* ---- Form labels were dark-on-dark (rgb 36,36,36) → invisible. ---- */
html.dtc-dark label,
html.dtc-dark legend,
html.dtc-dark .woocommerce form .form-row label,
html.dtc-dark .woocommerce-EditAccountForm label,
html.dtc-dark .wd-form-login label,
html.dtc-dark .woocommerce-form-row label { color: var(--dtc-text) !important; }
html.dtc-dark .required, html.dtc-dark .woocommerce .required { color: var(--dtc-brand) !important; }

/* ---- Single-product membership "DOWNLOAD NOW!" box (was light pink) ---- */
html.dtc-dark .premium-uye-box {
    background-color: var(--dtc-surface2) !important;
    border: 1px solid var(--dtc-border) !important;
}
html.dtc-dark .premium-uye-box,
html.dtc-dark .premium-uye-box p,
html.dtc-dark .premium-uye-box span,
html.dtc-dark .premium-uye-box strong { color: var(--dtc-text) !important; }

/* ---- "DEMO LINK" outline button (was near-white) ---- */
html.dtc-dark .button.is-outline,
html.dtc-dark a.button.is-outline,
html.dtc-dark .button.is-outline.success {
    background-color: transparent !important;
    color: var(--dtc-link) !important;
    border: 1px solid var(--dtc-border) !important;
}

/* ---- Blog / post grid cards: content panel was white (text invisible) ---- */
html.dtc-dark .wd-post-content,
html.dtc-dark .wd-post .article-body-container,
html.dtc-dark article.post .article-inner {
    background-color: var(--dtc-surface) !important;
    color: var(--dtc-text);
}
html.dtc-dark .wd-post .entry-title a,
html.dtc-dark .wd-post .wd-entities-title a { color: var(--dtc-text) !important; }
html.dtc-dark .wd-post .wd-more-text { color: var(--dtc-link) !important; }

/* ---- White post date badge ---- */
html.dtc-dark .wd-post-date,
html.dtc-dark .wd-post-date.wd-style-with-bg {
    background-color: var(--dtc-surface2) !important;
    color: var(--dtc-text) !important;
}

/* ---- Belt-and-suspenders for any product title that stayed faint ---- */
html.dtc-dark .wd-entities-title,
html.dtc-dark .wd-entities-title a,
html.dtc-dark .woocommerce-loop-product__title { color: var(--dtc-text) !important; }

/* ---- Freemium carousel uses Woodmart "tiled" hover: product promo images
   are mostly white and the title/price strip below had no solid backdrop,
   so light text washed out. Give that strip a solid dark surface. ---- */
html.dtc-dark .wd-product.wd-hover-tiled,
html.dtc-dark .wd-hover-tiled .product-element-bottom {
    background-color: var(--dtc-surface) !important;
}
html.dtc-dark .wd-hover-tiled .product-element-bottom {
    position: relative;
    z-index: 2;
    padding: 12px 14px 16px;
    border-top: 1px solid var(--dtc-border);
}
html.dtc-dark .wd-hover-tiled .wd-entities-title a { color: var(--dtc-text) !important; opacity: 1 !important; }

/* ================================================================
   FEEDBACK FIXES (2026-06-13, round 3)
   ================================================================ */

/* ---- WPBakery white content rows (changelog "Why Updates Matter" / FAQ).
   WPBakery injects the white fill via the .vc_custom_* class, so we need a
   higher-specificity + !important override. ---- */
html.dtc-dark .vc_custom_seo_section,
html.dtc-dark .vc_custom_faq_section,
html.dtc-dark .vc_custom_seo_section.vc_row-has-fill,
html.dtc-dark .vc_custom_faq_section.vc_row-has-fill {
    background-color: var(--dtc-bg) !important;
}
html.dtc-dark .vc_custom_seo_section h1, html.dtc-dark .vc_custom_seo_section h2,
html.dtc-dark .vc_custom_seo_section h3, html.dtc-dark .vc_custom_seo_section h4,
html.dtc-dark .vc_custom_seo_section p,  html.dtc-dark .vc_custom_seo_section li,
html.dtc-dark .vc_custom_seo_section span, html.dtc-dark .vc_custom_seo_section strong,
html.dtc-dark .vc_custom_faq_section h1, html.dtc-dark .vc_custom_faq_section h2,
html.dtc-dark .vc_custom_faq_section h3, html.dtc-dark .vc_custom_faq_section h4,
html.dtc-dark .vc_custom_faq_section p,  html.dtc-dark .vc_custom_faq_section li,
html.dtc-dark .vc_custom_faq_section span, html.dtc-dark .vc_custom_faq_section strong {
    color: var(--dtc-text) !important;
}
html.dtc-dark .vc_custom_seo_section a,
html.dtc-dark .vc_custom_faq_section a { color: var(--dtc-link) !important; }

/* ---- Membership / promo popup (white modal) ---- */
html.dtc-dark .wd-popup,
html.dtc-dark .woodmart-popup,
html.dtc-dark .mfp-content .wd-popup {
    background-color: var(--dtc-surface) !important;
}
html.dtc-dark .wd-popup h1, html.dtc-dark .wd-popup h2, html.dtc-dark .wd-popup h3,
html.dtc-dark .wd-popup h4, html.dtc-dark .wd-popup p, html.dtc-dark .wd-popup li,
html.dtc-dark .wd-popup span:not([class*="price"]):not(.amount),
html.dtc-dark .wd-popup strong { color: var(--dtc-text) !important; }
html.dtc-dark .wd-popup .mfp-close { color: var(--dtc-text) !important; }

/* ================================================================
   AUDIT FIXES (2026-06-13, round 4) — full-site dark-mode sweep
   ================================================================ */

/* A. Regression fix: the global `a` colour recoloured text INSIDE blue
   buttons and category chips (light-blue on blue). Restore white. */
html.dtc-dark .btn,
html.dtc-dark a.btn,
html.dtc-dark [class*="btn-color-"],
html.dtc-dark .button:not(.is-outline),
html.dtc-dark a.button:not(.is-outline),
html.dtc-dark .vc_btn3,
html.dtc-dark .single_add_to_cart_button,
html.dtc-dark .wd-buy-now-btn,
html.dtc-dark .add_to_cart_button,
html.dtc-dark .checkout-button,
html.dtc-dark .wd-post-cat a,
html.dtc-dark .wd-post-cat.wd-style-with-bg a,
html.dtc-dark .post-categories a { color: #fff !important; }

/* B. FAQ accordion (WPBakery vc_tta-color-white): white heading + light text */
html.dtc-dark .vc_tta-panel-heading {
    background-color: var(--dtc-surface2) !important;
    border-color: var(--dtc-border) !important;
}
html.dtc-dark .vc_tta-panel-body {
    background-color: var(--dtc-surface) !important;
    border-color: var(--dtc-border) !important;
}
html.dtc-dark .vc_tta-title-text,
html.dtc-dark .vc_tta-controls-icon::before,
html.dtc-dark .vc_tta-controls-icon::after { color: var(--dtc-text) !important; border-color: var(--dtc-text) !important; }

/* C. Light WPBakery content rows (Terms page, blog quote box) */
html.dtc-dark .vc_custom_1527663410765,
html.dtc-dark .vc_custom_1490174111144 { background-color: var(--dtc-bg) !important; }
html.dtc-dark .vc_custom_1527663410765 h1, html.dtc-dark .vc_custom_1527663410765 h2,
html.dtc-dark .vc_custom_1527663410765 h3, html.dtc-dark .vc_custom_1527663410765 p,
html.dtc-dark .vc_custom_1527663410765 li, html.dtc-dark .vc_custom_1527663410765 span,
html.dtc-dark .vc_custom_1527663410765 strong, html.dtc-dark .vc_custom_1527663410765 em,
html.dtc-dark .vc_custom_1490174111144 p, html.dtc-dark .vc_custom_1490174111144 span,
html.dtc-dark .vc_custom_1490174111144 em, html.dtc-dark .vc_custom_1490174111144 strong { color: var(--dtc-text) !important; }

/* D. Tables inside post / product content (dark-on-dark headers, white box) */
html.dtc-dark .entry-content table th, html.dtc-dark .entry-content table td,
html.dtc-dark .wd-post-content table th, html.dtc-dark .wd-post-content table td,
html.dtc-dark .woocommerce-Tabs-panel table th, html.dtc-dark .woocommerce-Tabs-panel table td,
html.dtc-dark .shop_attributes th, html.dtc-dark .shop_attributes td {
    color: var(--dtc-text) !important;
    border-color: var(--dtc-border) !important;
}
html.dtc-dark .entry-content table th,
html.dtc-dark .wd-post-content table th,
html.dtc-dark .shop_attributes th { background-color: var(--dtc-surface2) !important; }
html.dtc-dark .yoast-addon-wrap {
    background-color: var(--dtc-surface) !important;
    border: 1px solid var(--dtc-border) !important;
}

/* E. Product meta (SKU / categories / tags labels) */
html.dtc-dark .meta-label,
html.dtc-dark .product_meta .meta-label { color: var(--dtc-muted) !important; }
html.dtc-dark .sku_wrapper, html.dtc-dark .posted_in, html.dtc-dark .tagged_as { color: var(--dtc-text) !important; }

/* ================================================================
   AUDIT FIXES (2026-06-13, round 5) — final sweep
   ================================================================ */

/* Terms page is built from many white WPBakery rows — page-scope it so all
   current AND future rows on this page go dark (page-id-4845). */
html.dtc-dark .page-id-4845 .vc_row-has-fill { background-color: var(--dtc-bg) !important; }
html.dtc-dark .page-id-4845 .vc_row-has-fill h1, html.dtc-dark .page-id-4845 .vc_row-has-fill h2,
html.dtc-dark .page-id-4845 .vc_row-has-fill h3, html.dtc-dark .page-id-4845 .vc_row-has-fill h4,
html.dtc-dark .page-id-4845 .vc_row-has-fill p,  html.dtc-dark .page-id-4845 .vc_row-has-fill li,
html.dtc-dark .page-id-4845 .vc_row-has-fill span, html.dtc-dark .page-id-4845 .vc_row-has-fill strong,
html.dtc-dark .page-id-4845 .vc_row-has-fill em, html.dtc-dark .page-id-4845 .info-box-title { color: var(--dtc-text) !important; }
html.dtc-dark .page-id-4845 .vc_row-has-fill a,
html.dtc-dark .page-id-4845 .vc_row-has-fill .color-primary { color: var(--dtc-link) !important; }

/* WPBakery text-column tables (e.g. the Yoast comparison table in a post) */
html.dtc-dark .wpb_text_column table th,
html.dtc-dark .wpb_wrapper table th {
    color: var(--dtc-text) !important;
    background-color: var(--dtc-surface2) !important;
    border-color: var(--dtc-border) !important;
}
html.dtc-dark .wpb_text_column table td,
html.dtc-dark .wpb_wrapper table td { color: var(--dtc-text) !important; border-color: var(--dtc-border) !important; }

/* Login/Register switch buttons are LIGHT-bg defaults — round-4's .btn→white
   made them white-on-light. Give them a dark surface instead. */
html.dtc-dark .wd-switch-to-register,
html.dtc-dark .wd-switch-to-login,
html.dtc-dark .btn-default {
    background-color: var(--dtc-surface2) !important;
    color: var(--dtc-text) !important;
    border: 1px solid var(--dtc-border) !important;
}

/* "Annual" pricing ribbon: light text on the yellow ribbon → dark text */
html.dtc-dark .wd-plan-label,
html.dtc-dark .wd-plan-label span,
html.dtc-dark .price-label { color: #1a1a1a !important; }

/* ================================================================
   Toggle button
   ================================================================ */
.dtc-theme-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:0;cursor:pointer;background:transparent;
    color:inherit;line-height:0;border-radius:50%;
    transition:background .2s ease;
}
.dtc-theme-toggle:hover{ background:rgba(127,127,127,.18); }
.dtc-theme-toggle svg{ display:block;width:20px;height:20px; }
.dtc-theme-toggle .dtc-sun{ display:none; }
.dtc-theme-toggle .dtc-moon{ display:block; }
html.dtc-dark .dtc-theme-toggle .dtc-sun{ display:block; }
html.dtc-dark .dtc-theme-toggle .dtc-moon{ display:none; }
/* floating fallback position when not placed in header */
.dtc-theme-toggle.dtc-float{
    position:fixed;right:18px;bottom:18px;z-index:9999;
    width:46px;height:46px;border-radius:50%;
    background:var(--dtc-surface,#1e2228);color:var(--dtc-text,#e6e8ec);
    box-shadow:0 4px 14px rgba(0,0,0,.35);
}