/* Dark mode custom properties */
        :root {
            --aict-header-bg: #fff;
            --aict-border: #e2e8f0;
            --aict-shadow: rgba(0,0,0,0.06);
            --aict-text: #1a1a2e;
            --aict-text-muted: #64748b;
            --aict-text-light: #64748b;
            --aict-nav-hover-bg: rgba(99,102,241,0.08);
            --aict-select-bg: #fff;
            --aict-select-color: #1a1a2e;
        }
        [data-theme="dark"] {
            --aict-header-bg: #111128;
            --aict-border: #2e2e4d;
            --aict-shadow: rgba(0,0,0,0.3);
            --aict-text: #e2e8f0;
            --aict-text-muted: #94a3b8;
            --aict-text-light: #64748b;
            --aict-nav-hover-bg: rgba(99,102,241,0.15);
            --aict-select-bg: #1a1a2e;
            --aict-select-color: #e2e8f0;
        }

        /* Hide theme default headers */
        #masthead.site-header,
        header.site-header,
        .site-header:not(.aict-header),
        .elementor-location-header,
        /* WP core theme-compat fallback header + its h1-wrapped
           logo (fires when the active theme directory is missing —
           fixes the C2 duplicate-h1 audit finding from UX Rework v2.0
           Phase 0). NOTE: this comment intentionally avoids the literal
           tag-start token so naive substring audits do not false-positive. */
        #page > #header[role="banner"],
        #page > #header[role="banner"] + hr { display: none !important; }
        /* Belt-and-suspenders: remove ANY h1-wrapped logo inside
           theme-compat header. */
        #page > #header[role="banner"] h1 { display: none !important; }

        /* Also hide "Home" page title on homepage */
        body.home .entry-title,
        body.home .page-title,
        body.page-template-default.home h1.entry-title { display: none !important; }

        /* Hide WordPress edit links from all visitors */
        .post-edit-link,
        .edit-link,
        a.post-edit-link { display: none !important; }

        /* AICT Header */
        .aict-header {
            position: sticky;
            top: 0;
            z-index: var(--aict-z-sticky-header); /* [v4.16.80hm +z-canonical-migration 2026-05-09 Q3-batch-62.5] was 9999 — sticky AICT header */
            background: var(--aict-header-bg);
            border-bottom: 1px solid var(--aict-border);
            box-shadow: 0 1px 3px var(--aict-shadow);
        }
        .aict-header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0.75rem 1.5rem;
            gap: 1rem;
        }

        /* Logo */
        .aict-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            flex-shrink: 0;
        }
        .aict-logo-icon { font-size: 1.5rem; line-height: 1; }
        .aict-logo-text {
            font-size: 1.125rem;
            font-weight: 700;
            color: #4a3aff;
            white-space: nowrap;
        }
        .aict-logo:hover .aict-logo-text { color: #3829cc; }
        /* [contrast-audit 2026-06-04] dark-mode header: brand logo #4a3aff (2.48:1) and the
           desktop "Sign In" CTA #4338ca had NO dark override -> illegible on the dark header
           (bg ~#0b1020/#1f2332). Lift both to the light indigo accent. Light is unchanged. */
        html[data-theme="dark"] .aict-logo-text { color: #a5b4fc; }
        html[data-theme="dark"] .aict-logo:hover .aict-logo-text { color: #c7d2fe; }
        html[data-theme="dark"] .aict-nav-cta a:not(.btn) { color: #a5b4fc !important; -webkit-text-fill-color: #a5b4fc !important; }

        /* Nav Links */
        .aict-nav-links {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            list-style: none;
            margin: 0;
            padding: 0;
            flex: 1;
            justify-content: center;
        }
        .aict-nav-links a {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 0.75rem;
            color: var(--aict-text);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9375rem;
            border-radius: 8px;
            white-space: nowrap;
            transition: color var(--aict-transition-fast), background var(--aict-transition-fast);
        }
        .aict-nav-links a:hover {
            color: #5c5fe6;
            background: var(--aict-nav-hover-bg);
        }
        .aict-nav-links a.active {
            color: #5c5fe6;
            font-weight: 600;
        }

        /* Right side */
        .aict-nav-right {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }
        .aict-nav-cta .btn {
            display: inline-flex;
            align-items: center;
            padding: 0.625rem 1.25rem;
            background: #4f46e5;
            color: #fff !important;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.875rem;
            border-radius: 8px;
            transition: background var(--aict-transition-fast), transform var(--aict-transition-fast);
            white-space: nowrap;
        }
        .aict-nav-cta .btn:hover {
            background: #4f46e5;
            transform: translateY(-1px);
        }

        /* Language switcher */
        .aict-lang-switcher select {
            padding: 0.4rem 0.6rem;
            border-radius: 8px;
            border: 1px solid var(--aict-border);
            background: var(--aict-select-bg);
            font-size: 0.8125rem;
            cursor: pointer;
            color: var(--aict-select-color);
        }

        /* Dark mode toggle */
        .aict-dark-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: 1px solid var(--aict-border);
            border-radius: 8px;
            cursor: pointer;
            padding: 0.4rem;
            color: var(--aict-text);
            transition: background var(--aict-transition-fast), border-color var(--aict-transition-fast);
            flex-shrink: 0;
        }
        .aict-dark-toggle:hover { background: var(--aict-nav-hover-bg); }
        .aict-dark-toggle svg { display: block; }

        /* Mobile toggle */
        .aict-mobile-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            color: var(--aict-text);
        }

        /* Mobile menu — [v4.16.80ba] Wave SSS — slide via transform, not via
           right offset. right:-300 made the menu's layout box extend past the
           viewport and contributed to body scrollWidth (944 vs 375 viewport
           = 569px horizontal overflow, broke /). Now right:0 always; transform
           does the slide. translateX(100%) hides offscreen without expanding
           the scroll context. */
        .aict-mobile-menu {
            position: fixed;
            top: 0;
            right: 0;
            width: 300px;
            max-width: 90vw;
            height: 100vh;
            background: var(--aict-header-bg);
            z-index: 10001;
            transform: translateX(100%);
            transition: transform var(--aict-transition-base);
            box-shadow: -4px 0 20px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        .aict-mobile-menu.open,
        .aict-mobile-menu[aria-hidden="false"] { transform: translateX(0); }
        .aict-mobile-menu-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--aict-border);
        }
        .aict-mobile-close {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            color: var(--aict-text);
        }
        .aict-mobile-nav {
            list-style: none;
            padding: 1rem 0;
            margin: 0;
        }
        .aict-mobile-nav a {
            display: block;
            padding: 0.875rem 1.5rem;
            padding-left: 16px;
            color: var(--aict-text);
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
            transition: color var(--aict-transition-fast), background var(--aict-transition-fast);
            overflow-wrap: break-word;
            word-break: break-word;
        }
        .aict-mobile-nav a:hover,
        .aict-mobile-nav a.active {
            color: #5c5fe6;
            background: var(--aict-nav-hover-bg);
        }
        .aict-mobile-cta {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--aict-border);
        }
        .aict-mobile-cta .btn {
            display: block;
            text-align: center;
            padding: 0.875rem;
            background: #4f46e5;
            color: #fff !important;
            text-decoration: none;
            font-weight: 600;
            border-radius: 8px;
        }
        .aict-mobile-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            z-index: 10000;
        }
        .aict-mobile-overlay.open { display: block; }

        /* Tablet/Mobile breakpoint — hamburger at 1080px */
        @media (max-width: 1080px) {
            .aict-nav-links,
            .aict-nav-cta,
            .aict-lang-switcher { display: none !important; }
            .aict-mobile-toggle { display: block; }
        }

        /* Mega menu: CSS-driven hide/show (inline-style-safe) */
        .aict-mega-menu { display: none; }
        .aict-has-mega:hover .aict-mega-menu,
        .aict-has-mega:focus-within .aict-mega-menu { display: block; }
        @media (max-width: 1080px) { .aict-mega-menu { display: none !important; } }

        /* Body & content font readability — desktop minimum 16px */
        @media (min-width: 1081px) {
            body { font-size: 16px; line-height: 1.65; }
            .entry-content p,
            .entry-content li,
            .entry-content td { font-size: 1rem; }
        }

        /* Dark mode: global page + mega-menu inline-style overrides */
        [data-theme="dark"] body {
            background-color: #0f0f1a;
            color: #e2e8f0;
        }
        [data-theme="dark"] .aict-mega-menu {
            background: #1a1a2e !important;
            border-color: #2e2e4d !important;
        }
        [data-theme="dark"] .aict-mega-menu a {
            color: #cbd5e1 !important;
        }
        [data-theme="dark"] .aict-mega-menu strong {
            color: #94a3b8 !important;
        }
        [data-theme="dark"] .aict-mega-featured {
            border-left-color: #2e2e4d !important;
        }
        [data-theme="dark"] .aict-mobile-lang {
            border-top-color: #2e2e4d !important;
        }
        /* Dark mode: content areas, cards, forms */
        [data-theme="dark"] .aict-tool-page,
        [data-theme="dark"] .aict-archive-page,
        [data-theme="dark"] .entry-content,
        [data-theme="dark"] main { color: #e2e8f0; }
        [data-theme="dark"] .aict-tool-card,
        [data-theme="dark"] .aict-card,
        [data-theme="dark"] .aict-blog-card,
        [data-theme="dark"] details { background: #1a1a2e !important; border-color: #2e2e4d !important; color: #e2e8f0 !important; }
        [data-theme="dark"] .aict-tool-card h3,
        [data-theme="dark"] .aict-card h2,
        [data-theme="dark"] .aict-card h3,
        [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #f1f5f9 !important; }
        [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
            background: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important;
        }
        [data-theme="dark"] .aict-site-footer { background: #0a0a1a !important; color: #cbd5e1 !important; }
        [data-theme="dark"] .aict-site-footer a { color: #94a3b8 !important; }
        [data-theme="dark"] .aict-site-footer h4 { color: #e2e8f0 !important; }
        [data-theme="dark"] .aict-footer-bottom { border-top-color: #1e293b !important; }

        /* Dark-mode v1.1 phase 2: @media (prefers-color-scheme) fallback for
           CSS vars + mobile nav. Complements A.23 Rule A (media query) and
           Rule B (specificity via class chain). Uses :not([data-theme="light"])
           so user's explicit light toggle still wins, while FOUC-window and
           OS-dark-pref users get readable dark nav. Palette matches A.23 v1.1
           tokens (page #0f172a / card #1e293b / heading #f1f5f9 / body #cbd5e1
           / muted #64748b / border #334155 / link #60a5fa). */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                --aict-header-bg: #0f172a;
                --aict-border: #334155;
                --aict-shadow: rgba(0,0,0,0.35);
                --aict-text: #f1f5f9;
                --aict-text-muted: #cbd5e1;
                --aict-text-light: #94a3b8;
                --aict-nav-hover-bg: rgba(99,102,241,0.22);
                --aict-select-bg: #1e293b;
                --aict-select-color: #f1f5f9;
            }
            :root:not([data-theme="light"]) .aict-mobile-menu {
                background: #0f172a;
                color: #f1f5f9;
                box-shadow: -4px 0 24px rgba(0,0,0,0.5);
            }
            :root:not([data-theme="light"]) .aict-mobile-menu-header {
                border-bottom-color: #334155;
            }
            :root:not([data-theme="light"]) .aict-mobile-close {
                color: #f1f5f9;
            }
            :root:not([data-theme="light"]) .aict-mobile-nav a {
                color: #f1f5f9;
            }
            :root:not([data-theme="light"]) .aict-mobile-nav a:hover,
            :root:not([data-theme="light"]) .aict-mobile-nav a.active {
                background: #1e293b;
                color: #93c5fd;
            }
            :root:not([data-theme="light"]) .aict-mobile-cta {
                border-top-color: #334155;
            }
            :root:not([data-theme="light"]) .aict-mobile-lang {
                color: #cbd5e1;
            }
            /* [contrast-audit 2026-06-04] the "Language" label span carries an inline
               color:#475569 (correct on the white light drawer) that beats inherited
               #cbd5e1 in dark mode → 2.36:1 on #0f172a. Re-assert with !important so the
               dark drawer label reaches 12:1. */
            :root:not([data-theme="light"]) .aict-mobile-lang > span {
                color: #cbd5e1 !important;
            }
            :root:not([data-theme="light"]) .aict-mobile-overlay {
                background: rgba(0,0,0,0.65);
            }
            :root:not([data-theme="light"]) .aict-mega-menu {
                background: #0f172a;
                border-color: #334155;
                color: #cbd5e1;
            }
            :root:not([data-theme="light"]) .aict-mega-menu a {
                color: #cbd5e1;
            }
            :root:not([data-theme="light"]) .aict-mega-menu a:hover {
                background: #1e293b;
                color: #f1f5f9;
            }
            :root:not([data-theme="light"]) .aict-mega-menu strong {
                color: #94a3b8;
            }
        }