/* =========================
   TokenToolHub — Dark Mode
   Supports: (A) Theme variables, (B) Brute-force invert
   ========================= */

/* ---------------- Base tokens for THEME MODE ---------------- */
html[data-theme="dark"] {
    color-scheme: dark;
    --tth-bg: #0b1220;
    --tth-surface: #0f172a;
    --tth-border: rgba(255, 255, 255, .08);
    --tth-text: #E6ECF5;
    --tth-muted: #9FB1C7;
    --tth-heading: #EAF2FF;
    --tth-brand: #2FC9B2;
    --tth-brand-2: #19b9a5;
    --tth-chip: rgba(47, 201, 178, .12);
    --tth-chip-b: rgba(47, 201, 178, .28);
}

/* Global surfaces (theme mode) */
html[data-theme="dark"]:not(.tth-invert) body {
    background: var(--tth-bg) !important;
    color: var(--tth-text) !important;
}

html[data-theme="dark"]:not(.tth-invert) .elementor-section,
html[data-theme="dark"]:not(.tth-invert) .elementor-container,
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-container,
html[data-theme="dark"]:not(.tth-invert) .site,
html[data-theme="dark"]:not(.tth-invert) .site-content,
html[data-theme="dark"]:not(.tth-invert) .wp-block-group,
html[data-theme="dark"]:not(.tth-invert) .card,
html[data-theme="dark"]:not(.tth-invert) .elementor-column,
html[data-theme="dark"]:not(.tth-invert) .elementor-inner-section {
    background-color: var(--tth-surface) !important;
    border-color: var(--tth-border) !important;
    box-shadow: 0 0 0 1px var(--tth-border) inset, 0 8px 28px rgba(2, 6, 23, .35) !important;
}

/* Type */
html[data-theme="dark"]:not(.tth-invert) h1,
html[data-theme="dark"]:not(.tth-invert) h2,
html[data-theme="dark"]:not(.tth-invert) h3,
html[data-theme="dark"]:not(.tth-invert) h4,
html[data-theme="dark"]:not(.tth-invert) .elementor-heading-title {
    color: var(--tth-heading) !important;
}

html[data-theme="dark"]:not(.tth-invert) p,
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-text-editor,
html[data-theme="dark"]:not(.tth-invert) .elementor-icon-list-item a,
html[data-theme="dark"]:not(.tth-invert) .has-text-color,
html[data-theme="dark"]:not(.tth-invert) .has-background {
    color: var(--tth-text) !important;
}

html[data-theme="dark"]:not(.tth-invert) .hero-section p,
html[data-theme="dark"]:not(.tth-invert) .lead,
html[data-theme="dark"]:not(.tth-invert) .subtitle {
    color: var(--tth-muted) !important;
}

/* Links / chips (theme mode) */
html[data-theme="dark"]:not(.tth-invert) a {
    color: var(--tth-brand) !important;
}

html[data-theme="dark"]:not(.tth-invert) a:hover {
    color: var(--tth-brand-2) !important;
}

html[data-theme="dark"]:not(.tth-invert) .tool-chip,
html[data-theme="dark"]:not(.tth-invert) .pl-pill,
html[data-theme="dark"]:not(.tth-invert) .badge,
html[data-theme="dark"]:not(.tth-invert) .category-chip {
    background: var(--tth-chip) !important;
    border: 1px solid var(--tth-chip-b) !important;
    color: var(--tth-heading) !important;
}

/* ---------------- Buttons (backgrounds) ---------------- */
html[data-theme="dark"]:not(.tth-invert) .elementor-button,
html[data-theme="dark"]:not(.tth-invert) .wp-block-button__link,
html[data-theme="dark"]:not(.tth-invert) .btn,
html[data-theme="dark"]:not(.tth-invert) .button {
    background: var(--tth-brand) !important;
    border-color: var(--tth-brand) !important;
}

/* ✅ Button text: FORCE readable text on filled brand buttons */
html[data-theme="dark"]:not(.tth-invert) .elementor-button:not(.elementor-button--outline),
html[data-theme="dark"]:not(.tth-invert) .elementor-button:not(.elementor-button--outline) *,
html[data-theme="dark"]:not(.tth-invert) .wp-block-button:not(.is-style-outline) .wp-block-button__link,
html[data-theme="dark"]:not(.tth-invert) .wp-block-button:not(.is-style-outline) .wp-block-button__link *,
html[data-theme="dark"]:not(.tth-invert) a.button:not(.is-style-outline),
html[data-theme="dark"]:not(.tth-invert) a.button:not(.is-style-outline) *,
html[data-theme="dark"]:not(.tth-invert) .button:not(.is-style-outline),
html[data-theme="dark"]:not(.tth-invert) .button:not(.is-style-outline) *,
html[data-theme="dark"]:not(.tth-invert) .btn:not(.is-style-outline),
html[data-theme="dark"]:not(.tth-invert) .btn:not(.is-style-outline) * {
    color: #07211d !important;
    /* dark text on brand green */
    -webkit-text-fill-color: #07211d !important;
    /* iOS/Safari */
}

/* Outline style left untouched */
html[data-theme="dark"]:not(.tth-invert) .elementor-button--outline,
html[data-theme="dark"]:not(.tth-invert) .wp-block-button.is-style-outline .wp-block-button__link,
html[data-theme="dark"]:not(.tth-invert) .is-style-outline>a.wp-block-button__link {
    background: transparent !important;
    color: var(--tth-brand) !important;
    border-color: var(--tth-brand) !important;
    -webkit-text-fill-color: var(--tth-brand) !important;
}

/* FAQ / footer */
html[data-theme="dark"]:not(.tth-invert) .elementor-accordion .elementor-accordion-item,
html[data-theme="dark"]:not(.tth-invert) .elementor-toggle .elementor-tab-title,
html[data-theme="dark"]:not(.tth-invert) .elementor-accordion .elementor-tab-title {
    background: var(--tth-surface) !important;
    color: var(--tth-heading) !important;
    border-color: var(--tth-border) !important;
}

html[data-theme="dark"]:not(.tth-invert) .elementor-accordion .elementor-tab-content {
    background: var(--tth-bg) !important;
    color: var(--tth-text) !important;
}

html[data-theme="dark"]:not(.tth-invert) footer,
html[data-theme="dark"]:not(.tth-invert) .site-footer {
    background: var(--tth-surface) !important;
    color: var(--tth-muted) !important;
    border-top: 1px solid var(--tth-border) !important;
}

html[data-theme="dark"]:not(.tth-invert) footer a {
    color: var(--tth-brand) !important;
}

/* Prompt Library code block sample */
html[data-theme="dark"]:not(.tth-invert) .pl-code {
    background: #0c1324 !important;
    color: #EAF2FF !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}

/* Utility: force inline black text to dark body color */
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color: #111"] {
    color: var(--tth-text) !important;
}

/* =========================================
   (B) BRUTE-FORCE INVERT MODE
   ========================================= */
html.tth-invert[data-theme="dark"] {
    filter: invert(1) hue-rotate(180deg);
}

html.tth-invert[data-theme="dark"] img,
html.tth-invert[data-theme="dark"] picture,
html.tth-invert[data-theme="dark"] video,
html.tth-invert[data-theme="dark"] iframe,
html.tth-invert[data-theme="dark"] canvas,
html.tth-invert[data-theme="dark"] svg,
html.tth-invert[data-theme="dark"] .no-invert {
    filter: invert(1) hue-rotate(180deg) !important;
}

html.tth-invert[data-theme="dark"] a {
    filter: invert(1) hue-rotate(180deg) !important;
    color: var(--tth-brand, #2FC9B2) !important;
}

/* 🔁 Revert buttons under invert so brand bg + dark text stay correct */
html.tth-invert[data-theme="dark"] .elementor-button:not(.elementor-button--outline),
html.tth-invert[data-theme="dark"] .elementor-button:not(.elementor-button--outline) *,
html.tth-invert[data-theme="dark"] .wp-block-button:not(.is-style-outline) .wp-block-button__link,
html.tth-invert[data-theme="dark"] .wp-block-button:not(.is-style-outline) .wp-block-button__link *,
html.tth-invert[data-theme="dark"] a.button:not(.is-style-outline),
html.tth-invert[data-theme="dark"] a.button:not(.is-style-outline) *,
html.tth-invert[data-theme="dark"] .button:not(.is-style-outline),
html.tth-invert[data-theme="dark"] .button:not(.is-style-outline) *,
html.tth-invert[data-theme="dark"] .btn:not(.is-style-outline),
html.tth-invert[data-theme="dark"] .btn:not(.is-style-outline) * {
    filter: invert(1) hue-rotate(180deg) !important;
    /* undo global invert */
    background: var(--tth-brand) !important;
    border-color: var(--tth-brand) !important;
    color: #07211d !important;
    -webkit-text-fill-color: #07211d !important;
}

/* =========================================
   FLOATING TOGGLE BUTTON (always-on styles)
   ========================================= */
#tth-dark-toggle.tth-dark-toggle,
#tth-dark-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    color: #111;
    box-shadow: 0 8px 28px rgba(2, 6, 23, .22);
    outline: 2px solid var(--tth-accent, #2FC9B2);
    outline-offset: 2px;
    cursor: pointer;
    z-index: 99999;
}

/* Position helpers controlled by JS option */
.tth-pos-bottom-right {
    right: 18px;
    bottom: 18px;
    left: auto;
    top: auto;
}

.tth-pos-bottom-left {
    left: 18px;
    bottom: 18px;
    right: auto;
    top: auto;
}

.tth-pos-top-right {
    right: 18px;
    top: 18px;
    bottom: auto;
    left: auto;
}

.tth-pos-top-left {
    left: 18px;
    top: 18px;
    bottom: auto;
    right: auto;
}

/* Toggle icons */
#tth-dark-toggle .tth-dark-icon {
    font-size: 22px;
    line-height: 1;
}

html[data-theme="dark"] #tth-dark-toggle .tth-sun {
    display: none;
}

html[data-theme="dark"] #tth-dark-toggle .tth-moon {
    display: inline;
}

html[data-theme="light"] #tth-dark-toggle .tth-sun {
    display: inline;
}

html[data-theme="light"] #tth-dark-toggle .tth-moon {
    display: none;
}

/* Match toggle look in dark mode */
html[data-theme="dark"] #tth-dark-toggle {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--tth-heading) !important;
    border: 1px solid var(--tth-border) !important;
}


/* =========================================================
   DARK MODE — FORCE CTA LABELS VISIBLE (HTML widgets too)
   ========================================================= */

/* 0) Global reset for HTML widgets so inline tricks don't hide text */
html[data-theme="dark"] .elementor-widget-html *,
html[data-theme="dark"] .elementor-widget-html a,
html[data-theme="dark"] .elementor-widget-html button {
    -webkit-text-fill-color: currentColor !important;
    /* undo transparent fill on iOS */
    background-clip: border-box !important;
    /* kill bg-clip:text hacks */
    -webkit-background-clip: border-box !important;
    mix-blend-mode: normal !important;
    /* avoid blend invisibility */
    text-shadow: none !important;
    opacity: 1 !important;
}

/* 1) SOLID brand buttons → dark label */
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-html a,
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-html button,
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-html .btn,
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-html [class*="button"] {
    /* if it has a non-transparent background (typical solid CTA) */
    color: #07211d !important;
    /* readable on mint */
    -webkit-text-fill-color: #07211d !important;
}

/* 1a) Make sure inner wrappers/spans inherit */
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-html a *,
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-html button * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* 2) OUTLINE / GHOST buttons keep mint text */
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-html .is-style-outline a,
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-html .outline,
html[data-theme="dark"]:not(.tth-invert) .elementor-widget-html [class*="outline"] {
    background: transparent !important;
    border-color: var(--tth-brand, #2FC9B2) !important;
    color: var(--tth-brand, #2FC9B2) !important;
    -webkit-text-fill-color: var(--tth-brand, #2FC9B2) !important;
}

/* 3) Catch inline brand background (hex or rgb) and set dark text */
html[data-theme="dark"] .elementor-widget-html [style*="background:#2FC9B2"],
html[data-theme="dark"] .elementor-widget-html [style*="background: #2FC9B2"],
html[data-theme="dark"] .elementor-widget-html [style*="background-color:#2FC9B2"],
html[data-theme="dark"] .elementor-widget-html [style*="background-color: #2FC9B2"],
html[data-theme="dark"] .elementor-widget-html [style*="47,201,178"] {
    /* rgb(47,201,178) */
    color: #07211d !important;
    -webkit-text-fill-color: #07211d !important;
}

/* 4) If the widget forced white text, make it legible on dark */
html[data-theme="dark"] .elementor-widget-html [style*="color:#fff"],
html[data-theme="dark"] .elementor-widget-html [style*="color: #fff"],
html[data-theme="dark"] .elementor-widget-html [style*="color:white"] {
    color: #E6ECF5 !important;
    -webkit-text-fill-color: #E6ECF5 !important;
}

/* 5) Keep the toggle truly floating above everything */
#tth-dark-toggle,
#tth-dark-toggle.tth-dark-toggle {
    position: fixed !important;
    z-index: 99999 !important;
}

/* ===== Helper classes for HTML-widget CTAs ===== */
.tth-cta--solid {
    color: #ffffff;
}

/* light mode default */
.tth-cta--outline {
    background: transparent;
}

/* In dark mode, make solid mint buttons use dark label text */
html[data-theme="dark"] .tth-cta--solid {
    color: #07211d !important;
    -webkit-text-fill-color: #07211d !important;
    /* iOS/Safari */
}

/* Outline stays mint in dark mode */
html[data-theme="dark"] .tth-cta--outline {
    color: var(--tth-brand, #2FC9B2) !important;
    -webkit-text-fill-color: var(--tth-brand, #2FC9B2) !important;
    border-color: var(--tth-brand, #2FC9B2) !important;
}

/* ===== Safety net for buttons created without helper classes ===== */
/* If something has a mint background inline, force readable dark label in dark mode */
html[data-theme="dark"] a[style*="background:#2FC9B2"],
html[data-theme="dark"] a[style*="background: #2FC9B2"],
html[data-theme="dark"] a[style*="background-color:#2FC9B2"],
html[data-theme="dark"] a[style*="background-color: #2FC9B2"],
html[data-theme="dark"] [style*="background:#2FC9B2"],
html[data-theme="dark"] [style*="background: #2FC9B2"],
html[data-theme="dark"] [style*="background-color:#2FC9B2"],
html[data-theme="dark"] [style*="background-color: #2FC9B2"],
html[data-theme="dark"] [style*="47,201,178"] {
    /* rgb(47,201,178) */
    color: #07211d !important;
    -webkit-text-fill-color: #07211d !important;
}

/* Undo common HTML-widget tricks that hide labels */
html[data-theme="dark"] .elementor-widget-html * {
    -webkit-text-fill-color: currentColor !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    mix-blend-mode: normal !important;
}