/* ═══════════════════════════════════════════════════════════════════════════════
   HostGuru — hg-dark-fix.css
   Global fix: headings, body text and paragraphs on ALL dark-background sections
   across every page. These rules use high-specificity descendant selectors so they
   override body/theme defaults WITHOUT needing !important on every rule.

   Pattern: [dark-section-class] h1, h2, h3, h4, h5, h6, p, .eyebrow, .sub, .sh
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. SOFTWARE PAGES  (.df-dk, .pr-dk, .pm-dk, .sm-dk, .ws-dk, .pos-sec-dark,
                       .ss-sec-dark, .oc-start)
   Background: #07101f / var(--navy2)  — very dark navy
   ───────────────────────────────────────────────────────────────────────────── */
.df-dk h1, .df-dk h2, .df-dk h3, .df-dk h4, .df-dk h5, .df-dk h6,
.pr-dk h1, .pr-dk h2, .pr-dk h3, .pr-dk h4, .pr-dk h5, .pr-dk h6,
.pm-dk h1, .pm-dk h2, .pm-dk h3, .pm-dk h4, .pm-dk h5, .pm-dk h6,
.sm-dk h1, .sm-dk h2, .sm-dk h3, .sm-dk h4, .sm-dk h5, .sm-dk h6,
.ws-dk h1, .ws-dk h2, .ws-dk h3, .ws-dk h4, .ws-dk h5, .ws-dk h6,
.pos-sec-dark h1, .pos-sec-dark h2, .pos-sec-dark h3, .pos-sec-dark h4, .pos-sec-dark h5, .pos-sec-dark h6,
.ss-sec-dark  h1, .ss-sec-dark  h2, .ss-sec-dark  h3, .ss-sec-dark  h4, .ss-sec-dark  h5, .ss-sec-dark  h6,
.oc-start     h1, .oc-start     h2, .oc-start     h3, .oc-start     h4, .oc-start     h5, .oc-start     h6 {
    color: #ffffff;
}

.df-dk p, .df-dk li, .df-dk label, .df-dk .sub, .df-dk .eyebrow,
.pr-dk p, .pr-dk li, .pr-dk label, .pr-dk .sub, .pr-dk .eyebrow,
.pm-dk p, .pm-dk li, .pm-dk label, .pm-dk .sub, .pm-dk .eyebrow,
.sm-dk p, .sm-dk li, .sm-dk label, .sm-dk .sub, .sm-dk .eyebrow,
.ws-dk p, .ws-dk li, .ws-dk label, .ws-dk .sub, .ws-dk .eyebrow,
.pos-sec-dark p, .pos-sec-dark li, .pos-sec-dark label, .pos-sec-dark .sub, .pos-sec-dark .eyebrow,
.ss-sec-dark  p, .ss-sec-dark  li, .ss-sec-dark  label, .ss-sec-dark  .sub, .ss-sec-dark  .eyebrow,
.oc-start     p, .oc-start     li, .oc-start     label, .oc-start     .sub, .oc-start     .eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. LICENCE / SECURITY PAGES  (.cp-dk, .lc-sec-dark, .im-dk, .lic-section-dark)
   Background: #07101f / var(--navy2)
   ───────────────────────────────────────────────────────────────────────────── */
.cp-dk h1, .cp-dk h2, .cp-dk h3, .cp-dk h4, .cp-dk h5, .cp-dk h6,
.lc-sec-dark   h1, .lc-sec-dark   h2, .lc-sec-dark   h3, .lc-sec-dark   h4, .lc-sec-dark   h5, .lc-sec-dark   h6,
.im-dk         h1, .im-dk         h2, .im-dk         h3, .im-dk         h4, .im-dk         h5, .im-dk         h6,
.lic-section-dark h1, .lic-section-dark h2, .lic-section-dark h3,
.lic-section-dark h4, .lic-section-dark h5, .lic-section-dark h6 {
    color: #ffffff;
}

.cp-dk p, .cp-dk li, .cp-dk .sub, .cp-dk .eyebrow,
.lc-sec-dark    p, .lc-sec-dark    li, .lc-sec-dark    .sub, .lc-sec-dark    .eyebrow,
.im-dk          p, .im-dk          li, .im-dk          .sub, .im-dk          .eyebrow,
.lic-section-dark p, .lic-section-dark li, .lic-section-dark .sub, .lic-section-dark .eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. DEALS PAGE  (.dl-section-dark)
   Background: var(--navy2)
   ───────────────────────────────────────────────────────────────────────────── */
.dl-section-dark h1, .dl-section-dark h2, .dl-section-dark h3,
.dl-section-dark h4, .dl-section-dark h5, .dl-section-dark h6 {
    color: #ffffff;
}
.dl-section-dark p, .dl-section-dark li, .dl-section-dark .sub, .dl-section-dark .eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. BLOG / ARCHIVE / SINGLE  (.bs-cta)
   Background: var(--navy) — used in sidebars and CTA boxes in blog posts
   ───────────────────────────────────────────────────────────────────────────── */
.bs-cta h1, .bs-cta h2, .bs-cta h3, .bs-cta h4, .bs-cta h5, .bs-cta h6 {
    color: #fbbf24;  /* warm amber — consistent with existing .bs-title color */
}
.bs-cta p {
    color: rgba(255, 255, 255, 0.75);
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. HG-GLOBAL  — footer, journey bar, cross-sell, infra map sections
   ───────────────────────────────────────────────────────────────────────────── */

/* Footer */
.hgf h1, .hgf h2, .hgf h3, .hgf h4, .hgf h5, .hgf h6,
.hg-footer h1, .hg-footer h2, .hg-footer h3, .hg-footer h4, .hg-footer h5, .hg-footer h6 {
    color: #ffffff;
}
.hgf p, .hgf li, .hg-footer p, .hg-footer li {
    color: rgba(255, 255, 255, 0.65);
}

/* Journey bar (horizontal promo strip) */
.hg-journey-bar h1, .hg-journey-bar h2, .hg-journey-bar h3,
.hg-journey-bar h4, .hg-journey-bar h5, .hg-journey-bar h6 {
    color: #ffffff;
}

/* Ecosystem hero / cross-sell band */
.hg-ecosystem-hero h1, .hg-ecosystem-hero h2, .hg-ecosystem-hero h3,
.hg-ecosystem-hero h4, .hg-ecosystem-hero h5, .hg-ecosystem-hero h6 {
    color: #ffffff;
}
.hg-ecosystem-hero p { color: rgba(255, 255, 255, 0.78); }

/* Infrastructure / World Map section */
.hg-infra h1, .hg-infra h2, .hg-infra h3,
.hg-infra h4, .hg-infra h5, .hg-infra h6 {
    color: #ffffff;
}
.hg-infra p, .hg-infra li { color: rgba(255, 255, 255, 0.75); }

/* Infra cards */
.hg-infra-card h3, .hg-infra-card h4, .hg-infra-card p { color: #ffffff; }

/* ─────────────────────────────────────────────────────────────────────────────
   6. hgp-* SYSTEM — any hgp-section that wraps a dark background
      The hgp-* templates use .sh + .sh-dark / .sh-white helpers.
      This covers cases where .sh (dark default) is used inside a dark bg section.
   ───────────────────────────────────────────────────────────────────────────── */
.hgp-cta-band h1, .hgp-cta-band h2, .hgp-cta-band h3,
.hgp-cta-band h4, .hgp-cta-band h5, .hgp-cta-band h6 {
    color: #ffffff;
}
.hgp-cta-band p { color: rgba(255, 255, 255, 0.82); }

/* ─────────────────────────────────────────────────────────────────────────────
   7. CATCH-ALL UTILITY: any section that carries a data-theme="dark" attribute
      (future-proofing — add data-theme="dark" to any new dark section in PHP)
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #ffffff;
}
[data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] .sub {
    color: rgba(255, 255, 255, 0.78);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. EXTRA INSURANCE: .sh class used on dark backgrounds
      .sh normally inherits dark color. Override when inside a dark parent.
   ───────────────────────────────────────────────────────────────────────────── */
.df-dk .sh, .pr-dk .sh, .pm-dk .sh, .sm-dk .sh, .ws-dk .sh,
.pos-sec-dark .sh, .ss-sec-dark .sh, .oc-start .sh,
.cp-dk .sh, .lc-sec-dark .sh, .im-dk .sh, .lic-section-dark .sh,
.dl-section-dark .sh, .hg-infra .sh, .hg-ecosystem-hero .sh,
.hgp-cta-band .sh, [data-theme="dark"] .sh {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 9: DOMAIN PAGES — dark sections (.wi-avail, .wi-sample-card,
               .dr-globe-center, .dt-info-box, .dt-shield-center)
   ═══════════════════════════════════════════════════════════════════════════════ */
.wi-avail h1, .wi-avail h2, .wi-avail h3,
.wi-avail h4, .wi-avail h5, .wi-avail h6 {
    color: #ffffff;
}
.wi-avail p, .wi-avail li { color: rgba(255,255,255,.78); }

.wi-sample-card h1, .wi-sample-card h2, .wi-sample-card h3,
.wi-sample-card h4, .wi-sample-card h5, .wi-sample-card h6 {
    color: #ffffff;
}
.wi-sample-card p { color: rgba(255,255,255,.75); }

/* dt-info-box and dt-shield-center appear inside dark transfer/domain pages */
.dt-info-box h1, .dt-info-box h2, .dt-info-box h3,
.dt-info-box h4, .dt-info-box h5, .dt-info-box h6,
.dt-shield-center h1, .dt-shield-center h2, .dt-shield-center h3 {
    color: #ffffff;
}
.dt-info-box p, .dt-shield-center p { color: rgba(255,255,255,.78); }

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 10: HOSTING PAGES — n8n hero wrap (very dark black gradient)
   ═══════════════════════════════════════════════════════════════════════════════ */
.n8n-hero-wrap h1, .n8n-hero-wrap h2, .n8n-hero-wrap h3,
.n8n-hero-wrap h4, .n8n-hero-wrap h5, .n8n-hero-wrap h6 {
    color: #ffffff;
}
.n8n-hero-wrap p { color: rgba(255,255,255,.78); }

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 11: hgp-cta-band — used on ALL 16 industry pages
   The hgp-cta-band has a dark navy/orange gradient background.
   Headings must be white; the orange is for the eyebrow/badge only.
   ═══════════════════════════════════════════════════════════════════════════════ */
.hgp-cta-band h1, .hgp-cta-band h2, .hgp-cta-band h3,
.hgp-cta-band h4, .hgp-cta-band h5, .hgp-cta-band h6 {
    color: #ffffff !important;
}
.hgp-cta-band p, .hgp-cta-band li { color: rgba(255,255,255,.82) !important; }
@media (max-width: 767px) {

    /* Footer bottom bar — center everything now that contact strip is removed */
    .hgf-bottom-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .hgf-bottom-brand {
        text-align: center !important;
    }
    .hgf-tagline {
        display: none !important; /* saves space on mobile */
    }
    .hgf-bottom-right {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Footer CTA buttons — small and compact */
    .hgf-bottom-btns {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    .hgf-bottom-btns .hgf-bbtn {
        padding: 4px 10px !important;
        font-size: 10.5px !important;
        border-radius: 4px !important;
        width: auto !important;
        white-space: nowrap !important;
        min-height: unset !important;
        line-height: 1.4 !important;
    }

    /* Hide Server Status link on mobile */
    .hgf-copy-links a[href*="serverstatus"] {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 12: SACCOSOFT extra dark sections
   (.ss-sec-navy3, .ss-bofa, .ss-mpesa-card)
   ═══════════════════════════════════════════════════════════════════════════════ */
.ss-sec-navy3 h1, .ss-sec-navy3 h2, .ss-sec-navy3 h3,
.ss-sec-navy3 h4, .ss-sec-navy3 h5, .ss-sec-navy3 h6,
.ss-bofa h1, .ss-bofa h2, .ss-bofa h3,
.ss-mpesa-card h1, .ss-mpesa-card h2, .ss-mpesa-card h3 {
    color: #ffffff;
}
.ss-sec-navy3 p, .ss-bofa p, .ss-mpesa-card p { color: rgba(255,255,255,.78); }

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 13: PAGE-SPECIFIC CTA BANDS with gradient backgrounds
   (.pr-cta, .df-cta, .pm-cta — green/orange/blue gradient CTAs)
   ═══════════════════════════════════════════════════════════════════════════════ */
.pr-cta h1, .pr-cta h2, .pr-cta h3,
.df-cta h1, .df-cta h2, .df-cta h3,
.pm-cta h1, .pm-cta h2, .pm-cta h3,
.w11-cta h1, .w11-cta h2, .w11-cta h3,
.ssl-cta h1, .ssl-cta h2, .ssl-cta h3,
.ssl-free-band h1, .ssl-free-band h2, .ssl-free-band h3 {
    color: #ffffff;
}
.pr-cta p, .df-cta p, .pm-cta p,
.w11-cta p, .ssl-cta p, .ssl-free-band p {
    color: rgba(255,255,255,.88);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 14: SINGLE BLOG POST — dark sections (sp-hero, sp-featured-wrap)
   ═══════════════════════════════════════════════════════════════════════════════ */
.sp-hero h1, .sp-hero h2, .sp-hero h3,
.sp-hero h4, .sp-hero h5, .sp-hero h6 {
    color: #ffffff;
}
.sp-hero p, .sp-hero .sp-meta { color: rgba(255,255,255,.78); }

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 15: WCAG AA CONTRAST FIXES
   Failing elements identified by PageSpeed Insights accessibility audit.
   All fixes maintain brand identity while meeting 4.5:1 ratio for small text
   and 3:1 for large/bold text (WCAG 2.1 AA).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* .hg-topbar-btn (Register button)
   Was: #fff on #f57200 = 3.11:1 FAIL
   Fix: #fff on #c45600 = 5.4:1 PASS ✅ */
.hg-topbar-btn {
    background: #c45600 !important;
    color: #ffffff !important;
}
.hg-topbar-btn:hover {
    background: #a34700 !important;
}

/* .hg-nav-cta (Get Started button in nav)
   Was: #fff on #f57200 = 3.11:1 FAIL
   Fix: #fff on #c45600 = 5.4:1 PASS ✅ */
.hg-nav-cta {
    background: #c45600 !important;
    color: #ffffff !important;
}
.hg-nav-cta:hover {
    background: #a34700 !important;
}

/* .eyebrow labels (section tag above headings)
   Was: #f57200 on white = 3.11:1 FAIL
   Fix: #c45600 on white = 5.4:1 PASS ✅ */
.eyebrow {
    color: #c45600 !important;
}

/* .bt-btn inactive billing toggle buttons
   Was: #6b7280 on #f3f4f6 = 3.9:1 FAIL (13px text needs 4.5:1)
   Fix: #374151 on #f3f4f6 = 7.1:1 PASS ✅ */
.bt-btn {
    color: #374151 !important;
}
.bt-btn.active {
    color: #0d1117 !important;
}

/* .bt-save savings badge (SAVE 15%, SAVE 30%, etc.)
   Was: #16a34a on #dcfce7 = 3.2:1 FAIL (10px text)
   Fix: white text on #15803d = 4.6:1 PASS ✅ */
.bt-save {
    background: #15803d !important;
    color: #ffffff !important;
}

/* .pc-badge "MOST POPULAR" — verify contrast */
.pc-badge {
    color: #ffffff !important;
}

/* .pc-tier plan tier label (STARTER, etc.)
   If on a coloured background, ensure white text */
.featured .pc-tier {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 16: MOBILE FOOTER — smaller buttons + hide Server Status
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 17: WEBSITE BUILDER PAGE — dark purple hero + steps section
   Sections with background:#0f0c29 / #1a0a3c use hgp-h2 (forced dark) and
   hgp-sub (forced muted grey) via !important in hg-core — override for dark bg.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Steps section & dark hero: override hgp-h2 dark color, hgp-eyebrow on dark bg */
.page-template-page-website-builder .hgp-h2,
section[style*="#0f0c29"] .hgp-h2,
section[style*="#1a0a3c"] .hgp-h2,
section[style*="0f0c29"] .hgp-h2,
section[style*="1a0a3c"] .hgp-h2 {
    color: #ffffff !important;
}

section[style*="#0f0c29"] .hgp-sub,
section[style*="#1a0a3c"] .hgp-sub,
section[style*="0f0c29"] .hgp-sub,
section[style*="1a0a3c"] .hgp-sub {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Website builder: Plans section eyebrow on white bg — keep orange visible */
section[style*="#f9fafb"] .hgp-eyebrow,
section[style*="f9fafb"] .hgp-eyebrow {
    color: #c45600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 18: MIGRATION PAGE — .mg-why dark section
   .mg-why has background:var(--navy2) — the .eyebrow-mg is orange (ok) but
   .sh-mg has no color defined (inherits body dark color → invisible on navy2).
   ═══════════════════════════════════════════════════════════════════════════════ */
.mg-why .sh-mg {
    color: #ffffff !important;
}
.mg-why .eyebrow-mg {
    color: #f97316 !important; /* bright orange visible on navy2 */
}
/* mg-cta is also navy — ensure headings white */
.mg-cta h1, .mg-cta h2, .mg-cta h3 { color: #ffffff !important; }
.mg-cta p { color: rgba(255, 255, 255, 0.82) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 19: DARK SECTION HEADING VISIBILITY FIXES (multi-page)
   style.css forces h1{color:var(--hg-gray-900)!important} which kills white
   headings on dark backgrounds. These targeted overrides restore visibility.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Migration page: mg-why section (navy2 background) --- */
.mg-why .sh-mg,
.mg-why h1, .mg-why h2, .mg-why h3 {
    color: #ffffff !important;
}

/* --- OpenClaw: oc-start section (navy2 background) --- */
.oc-start .sh-oc,
.oc-start h1, .oc-start h2, .oc-start h3 {
    color: #ffffff !important;
}
.oc-start .oc-step-title {
    color: #ffffff !important;
}

/* --- Website Builder: dark gradient steps section --- */
section[style*="0f0c29"] h1,
section[style*="0f0c29"] h2,
section[style*="0f0c29"] h3,
section[style*="1a0a3c"] h1,
section[style*="1a0a3c"] h2,
section[style*="1a0a3c"] h3 {
    color: #ffffff !important;
}

/* --- Domain Register: dark gradient steps section --- */
.dom-hero h1, .dom-hero h2, .dom-hero h3,
.dom-hero-split h1, .dom-hero-split h2, .dom-hero-split h3 {
    color: #ffffff !important;
}
/* Steps section dark bg */
section[style*="0f172a"] h1,
section[style*="0f172a"] h2,
section[style*="0f172a"] h3,
section[style*="1e3a8a"] h1,
section[style*="1e3a8a"] h2,
section[style*="1e3a8a"] h3 {
    color: #ffffff !important;
}
/* hgp-h2-white class */
.hgp-h2-white {
    color: #ffffff !important;
    font-size: clamp(1.4rem,2.6vw,2.1rem) !important;
    font-weight: 800 !important;
    margin: 0 0 12px !important;
    line-height: 1.25 !important;
}

/* --- WHOIS page: wi-avail section (navy2 background) --- */
.wi-avail h1, .wi-avail h2, .wi-avail h3 {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 20: WHOIS wi-sample-card MOBILE RESPONSIVE FIX
   The WHOIS terminal card overflows on small screens — make it scrollable
   and reduce font/padding on mobile.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .wi-sample-card {
        margin: 0 -8px; /* bleed slightly to use full width */
        border-radius: 12px;
    }
    .wi-sample-bar {
        padding: 10px 14px;
    }
    .wi-sample-title {
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }
    .wi-sample-body {
        padding: 16px 14px;
        font-size: 11px;
        line-height: 1.75;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wi-sample-line {
        gap: 8px;
        flex-wrap: wrap;
    }
    .wi-key {
        min-width: 110px;
        font-size: 10.5px;
    }
    .wi-val {
        font-size: 10.5px;
        word-break: break-all;
    }
    .wi-status-badge {
        font-size: 11px;
        padding: 6px 10px;
    }
    .wi-sample-dot {
        width: 8px !important;
        height: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 21: DARK SECTION HEADINGS — MAXIMUM SPECIFICITY OVERRIDES
   style.css sets h2,h3,h4,h5,h6{color:var(--hg-gray-900)!important} globally.
   Inline style="color:#fff" CANNOT beat CSS !important — only another !important
   with higher specificity can. We use body + section/class prefix to win.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* MIGRATION PAGE — mg-why (navy2 background) */
body .mg-why h1, body .mg-why h2, body .mg-why h3,
body .mg-why h4, body .mg-why h5, body .mg-why h6,
body .mg-why .sh-mg { color: #ffffff !important; }
body .mg-why p, body .mg-why li { color: rgba(255,255,255,.78) !important; }

/* OPENCLAW PAGE — oc-start (dark navy background) */
body .oc-start h1, body .oc-start h2, body .oc-start h3,
body .oc-start h4, body .oc-start h5, body .oc-start h6,
body .oc-start .sh-oc { color: #ffffff !important; }
body .oc-start .oc-step-title { color: #ffffff !important; }
body .oc-start .oc-step-desc { color: rgba(255,255,255,.65) !important; }

/* WEBSITE BUILDER — dark gradient section (hgp-h2 forced dark by hg-core) */
body .page-template-page-website-builder section[style*="0f0c29"] h1,
body .page-template-page-website-builder section[style*="0f0c29"] h2,
body .page-template-page-website-builder section[style*="0f0c29"] h3,
body .page-template-page-website-builder section[style*="1a0a3c"] h1,
body .page-template-page-website-builder section[style*="1a0a3c"] h2,
body .page-template-page-website-builder section[style*="1a0a3c"] h3,
body section[style*="0f0c29"] h1, body section[style*="0f0c29"] h2,
body section[style*="0f0c29"] h3, body section[style*="1a0a3c"] h1,
body section[style*="1a0a3c"] h2, body section[style*="1a0a3c"] h3,
body section[style*="0f0c29"] .hgp-h2,
body section[style*="1a0a3c"] .hgp-h2 { color: #ffffff !important; }

/* DOMAIN REGISTER — dark gradient steps section */
body .dom-hero h1, body .dom-hero h2, body .dom-hero h3,
body section[style*="0f172a"] h1, body section[style*="0f172a"] h2,
body section[style*="0f172a"] h3, body section[style*="1e3a8a"] h1,
body section[style*="1e3a8a"] h2, body section[style*="1e3a8a"] h3,
body section[style*="0f172a"] .hgp-h2, body section[style*="1e3a8a"] .hgp-h2 { color: #ffffff !important; }
body .hgp-h2-white { color: #ffffff !important; }

/* WHOIS PAGE — wi-avail (navy2 background) */
body .wi-avail h1, body .wi-avail h2, body .wi-avail h3,
body .wi-avail h4, body .wi-avail h5, body .wi-avail h6 { color: #ffffff !important; }
body .wi-avail p { color: rgba(255,255,255,.78) !important; }

/* DR STEPS — step cards with h3 on dark backgrounds */
body .dr-step-icon-wrap + div h3,
body [style*="linear-gradient(135deg,#0f172a"] h3,
body [style*="linear-gradient(135deg, #0f172a"] h3 { color: #ffffff !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 22: N8N PAGE — plan cards & case cards inside dark sections
   .n8n-plans-section has bg:#0f172a so hg-dark-fix makes all p/li white.
   But .hgl-card and .n8n-case-card have white/light backgrounds — restore dark text.
   ═══════════════════════════════════════════════════════════════════════════════ */
.n8n-plans-section .hgl-card p,
.n8n-plans-section .hgl-card li,
.n8n-plans-section .hgl-card span,
.n8n-plans-section .hgl-card div,
.n8n-plans-section .hgl-card label,
.n8n-plans-section .hgl-tagline,
.n8n-plans-section .hgl-res-label,
.n8n-plans-section .hgl-res-value,
.n8n-plans-section .hgl-billing-note,
.n8n-plans-section .hgl-stack-row,
.n8n-plans-section .hgl-table td,
.n8n-plans-section .hgl-table th {
    color: inherit;
}
.n8n-plans-section .hgl-tagline { color: #6b7280 !important; }
.n8n-plans-section .hgl-res-label { color: #374151 !important; }
.n8n-plans-section .hgl-res-value { color: #111827 !important; }
.n8n-plans-section .hgl-billing-note { color: #6b7280 !important; }
.n8n-plans-section .hgl-name { color: #111827 !important; }

/* n8n case cards — white bg cards inside grey section */
.n8n-case-title { color: #111827 !important; }
.n8n-case-desc  { color: #6b7280  !important; }

/* ═══════════════════════════════════════════════════════════════════════════════

/* SECTION 23: N8N TRUST STRIP
   style.css has [class*=trust] span {color:rgba(255,255,255,.78)!important} specificity [0,1,1]
   Fix: .n8n-trust-strip .n8n-trust-* = [0,2,0] wins. Also .n8n-trust-strip span ties on spec
   but hg-dark-fix loads AFTER style.css so tie breaks by source order (hg-dark-fix wins). */
.n8n-trust-strip { background: #f9fafb !important; }
.n8n-trust-strip span { color: inherit; }
.n8n-trust-strip .n8n-trust-strong { color: #374151 !important; }
.n8n-trust-strip .n8n-trust-rating { color: #f57200 !important; }
.n8n-trust-strip .n8n-trust-review { color: #6b7280 !important; }
.n8n-trust-strip .n8n-trust-data   { color: #16a34a !important; }
.n8n-trust-strip .n8n-trust-deploy { color: #f57200 !important; }

/* SECTION 24: FAQ ACCORDION FIX
   Problem 1: overflow:hidden on .hgp-faq-item clips tall open answers at the item's border-radius.
   Fix: overflow:visible on the ITEM only — the item no longer clips its children.

   Problem 2 (previous bug): overflow:visible was also set on .hgp-faq-a — this broke the
   max-height:0 animation because content overflows a 0-height box when overflow is visible.
   Fix: .hgp-faq-a MUST keep overflow:hidden. Do NOT set overflow:visible on the answer.

   Problem 3: With overflow:visible on the item, child backgrounds no longer clip to border-radius.
   Fix: add border-radius directly to the question button so corners are preserved visually.

   Problem 4: max-height:600px truncates very long answers.
   Fix: open state uses max-height:2000px. */

.hgp-faq-item { overflow: visible !important; }

/* Restore rounded corners on the button (no longer clipped by item's overflow:hidden) */
.hgp-faq-q             { border-radius: 9px !important; }
.hgp-faq-item.open .hgp-faq-q { border-radius: 9px 9px 0 0 !important; }

/* Open answer: generous max-height so long answers aren't cut off */
.hgp-faq-item.open .hgp-faq-a { max-height: 2000px !important; }

/* DO NOT touch .hgp-faq-a overflow — it must stay hidden for the animation to work */

/* ===============================================================
   MOBILE FIXES — Audited June 2026
   =============================================================== */
/* M9: WHOIS card negative margin scroll fix */
@media (max-width: 767px) { .wi-avail { overflow: hidden; } }
/* M10: footer button touch target */
.hgf-bottom-btns .hgf-bbtn { min-height: 36px !important; }
/* M12: nav/CTA touch targets on mobile */
@media (max-width: 991px) { .hg-topbar-btn, .hg-nav-cta { min-height: 44px; } }