/* ============================================
   AI TOOL CLINIC PRO v4.0 — "AISpaces Dark"
   Full dark theme mirroring aispaces.in aesthetic
   ============================================ */

/* ── Google Fonts fallback import ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');

/* ════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════ */
:root {
    /* Page surfaces */
    --bg-page:    #0A0F1C;
    --bg-card:    #111827;
    --bg-panel:   #0F1629;
    --bg-ink:     #060A14;

    /* Primary — Teal (aispaces.in exact) */
    --teal:       #11999E;
    --teal-hover: #0E8084;
    --teal-dim:   rgba(17,153,158,0.12);
    --teal-glow:  rgba(7,168,177,0.35);

    /* Pillar accent colors */
    --blue:       #0EA5E9;
    --blue-dim:   rgba(14,165,233,0.12);
    --blue-glow:  rgba(14,165,233,0.3);
    --green:      #10B981;
    --green-dim:  rgba(16,185,129,0.12);
    --green-glow: rgba(16,185,129,0.3);
    --purple:     #8B5CF6;
    --purple-dim: rgba(139,92,246,0.12);
    --purple-glow:rgba(139,92,246,0.3);

    /* Text */
    --text:       #E4E4E4;
    --text-muted: #959EAB;
    --text-dim:   rgba(228,228,228,0.55);

    /* Borders */
    --border:     rgba(255,255,255,0.07);
    --border-sm:  rgba(255,255,255,0.04);

    /* Gradients */
    --grad-hero:   linear-gradient(145deg, #060A14 0%, #0A0F1C 40%, #0F1629 75%, #12082A 100%);
    --grad-teal:   linear-gradient(135deg, #11999E, #0EA5E9);
    --grad-text:   linear-gradient(135deg, #11999E 0%, #0EA5E9 45%, #8B5CF6 100%);
    --grad-biz:    linear-gradient(135deg, #0369A1, #0EA5E9);
    --grad-health: linear-gradient(135deg, #059669, #10B981);
    --grad-mental: linear-gradient(135deg, #6D28D9, #8B5CF6);

    /* Shadows */
    --sh-sm:      0 2px 10px rgba(0,0,0,0.3);
    --sh-md:      0 6px 24px rgba(0,0,0,0.4);
    --sh-lg:      0 12px 48px rgba(0,0,0,0.5);
    --sh-teal:    0 4px 28px var(--teal-glow);
    --sh-glow:    0px -10px 200px rgba(7,168,177,0.4);

    /* Shape */
    --r-sm:  8px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-xl:  28px;
    --r-p:   999px;
}

/* ════════════════════════════════════════════
   BASE RESET
   ════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    background-color: #0A0F1C !important;
    background: #0A0F1C !important;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--text) !important;
    background: var(--bg-page) !important;
    line-height: 1.78;
    -webkit-font-smoothing: antialiased;
}

/* GeneratePress container overrides */
.site, #page, .grid-container {
    background: var(--bg-page) !important;
    color: var(--text) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif !important;
    color: var(--text) !important;
    line-height: 1.22;
}

a { color: var(--teal); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--blue); }

p { color: var(--text); }

/* ════════════════════════════════════════════
   HEADER — Dark glass with teal glow
   ════════════════════════════════════════════ */
.site-header,
#site-header,
.site-header .inside-header {
    background: rgba(10,15,28,0.96) !important;
    color: var(--text) !important;
}

.site-header {
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 0 rgba(17,153,158,0.1), 0 4px 30px rgba(0,0,0,0.5) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Desktop-only blur — gated so mobile browsers never touch backdrop-filter on sticky */
@media (min-width: 769px) {
    .site-header {
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
    }
}

/* Site title — gradient shimmer */
.main-title a,
.site-title a,
.site-branding .site-title a {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.45rem !important;
    letter-spacing: -0.04em !important;
    background: var(--grad-text) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Nav links */
.main-navigation a,
.main-nav a,
.nav-menu a,
.primary-navigation a,
.nav-primary a {
    font-family: 'DM Sans', sans-serif !important;
    color: rgba(228,228,228,0.65) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 7px 14px !important;
    border-radius: var(--r-sm) !important;
    transition: all 0.2s ease !important;
}

.main-navigation a:hover,
.main-nav a:hover,
.nav-menu a:hover,
.main-navigation .current-menu-item > a,
.current-menu-item > a,
.current-page-ancestor > a {
    color: var(--teal) !important;
    background: var(--teal-dim) !important;
}

/* ════════════════════════════════════════════
   CONTENT WRAPPERS
   ════════════════════════════════════════════ */
.site-content,
#content,
.content-area,
.site-main,
main.site-main {
    background: var(--bg-page) !important;
}

.site-content { max-width: 1200px; margin: 0 auto; }

/* ════════════════════════════════════════════
   CATEGORY ARCHIVE HERO — Per-pillar dark banner
   ════════════════════════════════════════════ */
.aitc-archive-hero {
    background: var(--grad-hero);
    padding: 4rem 2rem 4.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Default aurora glow blob */
.aitc-archive-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(17,153,158,0.2) 0%, rgba(14,165,233,0.1) 40%, transparent 70%);
    pointer-events: none;
    animation: aurora-pulse 6s ease-in-out infinite;
}

@keyframes aurora-pulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

.aitc-archive-hero .aitc-hero-label {
    display: inline-block;
    padding: 5px 16px;
    border-radius: var(--r-p);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    background: var(--teal-dim);
    color: var(--teal);
    border: 1px solid rgba(17,153,158,0.25);
}

.aitc-archive-hero h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--text) !important;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.aitc-archive-hero p {
    color: var(--text-muted) !important;
    font-size: 1.05rem;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* AI Business Tools — sky blue */
.cat-ai-business-tools .aitc-archive-hero .aitc-hero-label {
    background: var(--blue-dim);
    color: #38BDF8;
    border: 1px solid rgba(14,165,233,0.25);
}
.cat-ai-business-tools .aitc-archive-hero::before {
    background: radial-gradient(ellipse, rgba(14,165,233,0.22) 0%, transparent 70%);
}

/* AI Healthcare — emerald */
.cat-ai-healthcare .aitc-archive-hero .aitc-hero-label {
    background: var(--green-dim);
    color: #34D399;
    border: 1px solid rgba(16,185,129,0.25);
}
.cat-ai-healthcare .aitc-archive-hero::before {
    background: radial-gradient(ellipse, rgba(16,185,129,0.22) 0%, transparent 70%);
}

/* AI Mental Health — purple */
.cat-ai-mental-health .aitc-archive-hero .aitc-hero-label {
    background: var(--purple-dim);
    color: #A78BFA;
    border: 1px solid rgba(139,92,246,0.25);
}
.cat-ai-mental-health .aitc-archive-hero::before {
    background: radial-gradient(ellipse, rgba(139,92,246,0.22) 0%, transparent 70%);
}

/* ════════════════════════════════════════════
   POST CARDS — Dark glass with glow on hover
   ════════════════════════════════════════════ */
article.post,
.generate-columns .post-column,
.post {
    background: var(--bg-card) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-sm) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: 2rem !important;
    position: relative !important;
}

/* Gradient border reveal on hover */
article.post::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
    padding: 1px;
    background: var(--grad-teal);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

article.post:hover::after { opacity: 1; }

article.post:hover {
    box-shadow: var(--sh-lg), 0 0 40px var(--teal-glow) !important;
    transform: translateY(-6px) scale(1.01) !important;
    border-color: transparent !important;
}

.inside-article { padding: 1.75rem 2rem 2rem !important; }

/* Featured images */
.post-image img, .featured-image img {
    width: 100%;
    height: 215px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
article.post:hover .post-image img,
article.post:hover .featured-image img { transform: scale(1.07); }

.post-image, .featured-image {
    overflow: hidden;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* ════════════════════════════════════════════
   CARD TITLES
   ════════════════════════════════════════════ */
h2.entry-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.28rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0.6rem !important;
}
h2.entry-title a { color: var(--text) !important; transition: color 0.2s ease !important; }
h2.entry-title a:hover { color: var(--teal) !important; }

/* ════════════════════════════════════════════
   SINGLE POST — Dark editorial
   ════════════════════════════════════════════ */
.single .entry-header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.single h1.entry-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 2.8rem !important;
    font-weight: 900 !important;
    color: var(--text) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 1.25rem !important;
}

.single .entry-content {
    font-size: 1.06rem;
    line-height: 1.88;
    color: var(--text);
}

/* H2 — teal left bar */
.single .entry-content h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    margin-top: 3.5rem !important;
    margin-bottom: 1.1rem !important;
    letter-spacing: -0.02em !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.single .entry-content h2::before {
    content: '';
    flex-shrink: 0;
    width: 4px;
    height: 1.3em;
    background: var(--grad-teal);
    border-radius: 4px;
    display: inline-block;
}

.single .entry-content h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin-top: 2.5rem !important;
}

.single .entry-content h4 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin-top: 2rem !important;
}

/* ════════════════════════════════════════════
   META + READING TIME
   ════════════════════════════════════════════ */
.entry-meta { font-size: 0.82rem !important; color: var(--text-muted) !important; font-weight: 500 !important; }
.entry-meta a { color: var(--teal) !important; font-weight: 600 !important; }
.entry-meta a:hover { color: var(--blue) !important; }

.aitc-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--teal-dim);
    color: var(--teal);
    padding: 3px 12px;
    border-radius: var(--r-p);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
    border: 1px solid rgba(17,153,158,0.2);
}

/* ════════════════════════════════════════════
   CATEGORY BADGES — Per-pillar neon chips
   ════════════════════════════════════════════ */
a[rel="category tag"],
.cat-links a {
    padding: 4px 12px !important;
    border-radius: var(--r-p) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    display: inline-block !important;
    margin-right: 4px !important;
    transition: all 0.2s ease !important;
    background: var(--teal-dim) !important;
    color: var(--teal) !important;
    border: 1px solid rgba(17,153,158,0.2) !important;
}
.cat-links a[href*="ai-business-tools"],
a[href*="ai-business-tools"][rel="category tag"] {
    background: var(--blue-dim) !important;
    color: #38BDF8 !important;
    border-color: rgba(14,165,233,0.22) !important;
}
.cat-links a[href*="ai-healthcare"],
a[href*="ai-healthcare"][rel="category tag"] {
    background: var(--green-dim) !important;
    color: #34D399 !important;
    border-color: rgba(16,185,129,0.22) !important;
}
.cat-links a[href*="ai-mental-health"],
a[href*="ai-mental-health"][rel="category tag"] {
    background: var(--purple-dim) !important;
    color: #A78BFA !important;
    border-color: rgba(139,92,246,0.22) !important;
}
a[rel="category tag"]:hover, .cat-links a:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.25) !important;
}

/* ════════════════════════════════════════════
   DISCLOSURE BOX
   ════════════════════════════════════════════ */
.aitc-disclosure {
    background: rgba(245,158,11,0.06);
    border: 1px solid rgba(245,158,11,0.18);
    border-left: 4px solid #F59E0B;
    padding: 1rem 1.4rem;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 0.86rem;
    color: #FCD34D;
    margin-bottom: 2.5rem;
    line-height: 1.65;
}

/* ════════════════════════════════════════════
   NEWSLETTER CTA — Aispaces-style glow card
   ════════════════════════════════════════════ */
.aitc-newsletter-cta {
    background: var(--bg-panel);
    color: var(--text);
    padding: 4rem 3rem;
    border-radius: var(--r-xl);
    text-align: center;
    margin: 4rem 0;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--sh-glow);
}

/* Bottom teal underflow glow (signature aispaces effect) */
.aitc-newsletter-cta::before {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(7,168,177,0.4) 0%, transparent 70%);
    pointer-events: none;
}

/* Top aurora */
.aitc-newsletter-cta::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 65%);
    pointer-events: none;
}

.aitc-newsletter-cta h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.9rem !important;
    font-weight: 900 !important;
    color: var(--text) !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0.75rem !important;
    border: none !important;
    position: relative;
    z-index: 1;
}
.aitc-newsletter-cta h3::before { display: none !important; }

.aitc-newsletter-cta p {
    color: var(--text-muted) !important;
    position: relative;
    z-index: 1;
    font-size: 1rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.aitc-cta-button {
    display: inline-block !important;
    background: var(--teal) !important;
    color: #fff !important;
    padding: 15px 40px !important;
    border-radius: var(--r-p) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 4px 28px var(--teal-glow) !important;
    margin-top: 1.5rem !important;
    position: relative !important;
    z-index: 1 !important;
}
.aitc-cta-button:hover {
    background: var(--teal-hover) !important;
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 8px 48px rgba(7,168,177,0.55) !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════
   BLOCKQUOTE
   ════════════════════════════════════════════ */
blockquote {
    border-left: none !important;
    background: linear-gradient(135deg, rgba(17,153,158,0.06) 0%, rgba(14,165,233,0.04) 100%) !important;
    padding: 1.75rem 2rem 1.75rem 3rem !important;
    margin: 2.5rem 0 !important;
    border-radius: var(--r-lg) !important;
    border: 1px solid rgba(17,153,158,0.14) !important;
    font-style: normal !important;
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--text) !important;
    position: relative !important;
}
blockquote::before {
    content: '\201C';
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 4.5rem;
    font-family: 'Outfit', sans-serif;
    background: var(--grad-teal);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    opacity: 0.5;
}

/* ════════════════════════════════════════════
   LISTS
   ════════════════════════════════════════════ */
.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.7rem;
    color: var(--text);
}
.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 10px;
    width: 8px; height: 8px;
    background: var(--grad-teal);
    border-radius: 50%;
}

/* ════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════ */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2.5rem 0;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-md);
    border: 1px solid var(--border);
}
.entry-content table th {
    background: var(--bg-panel) !important;
    color: var(--text) !important;
    padding: 13px 16px;
    text-align: left;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
}
.entry-content table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.93rem;
    color: var(--text);
    background: var(--bg-card);
}
.entry-content table tr:nth-child(even) td { background: rgba(15,22,41,0.6); }
.entry-content table tr:hover td { background: rgba(17,153,158,0.05); }

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */
.wp-block-button__link, button, input[type="submit"] {
    background: var(--teal) !important;
    color: #fff !important;
    border: none !important;
    padding: 13px 30px !important;
    border-radius: var(--r-p) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 18px var(--teal-glow) !important;
}
.wp-block-button__link:hover, button:hover, input[type="submit"]:hover {
    background: var(--teal-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(7,168,177,0.5) !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════
   READ MORE
   ════════════════════════════════════════════ */
.aitc-read-more, .read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--teal) !important;
    font-weight: 600;
    font-size: 0.875rem;
    margin-top: 0.75rem;
    transition: all 0.2s ease;
}
.aitc-read-more:hover, .read-more:hover { color: var(--blue) !important; gap: 10px; }

/* ════════════════════════════════════════════
   SIDEBAR WIDGETS
   ════════════════════════════════════════════ */
.widget {
    background: var(--bg-card) !important;
    border-radius: var(--r-lg) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: var(--sh-sm) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.widget-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 1.1rem !important;
    color: var(--text) !important;
}
.widget a { color: var(--text-muted) !important; }
.widget a:hover { color: var(--teal) !important; }

/* ════════════════════════════════════════════
   FOOTER — Pure black with teal accents
   ════════════════════════════════════════════ */
.site-footer, #colophon {
    background: #060A14 !important;
    color: var(--text-muted) !important;
    padding: 2rem 0 !important;
    text-align: center !important;
    border-top: 1px solid rgba(17,153,158,0.12) !important;
    font-size: 0.85rem !important;
}
.site-footer a, #colophon a { color: var(--text-muted) !important; transition: color 0.2s ease !important; }
.site-footer a:hover, #colophon a:hover { color: var(--teal) !important; }

/* ════════════════════════════════════════════
   MISC
   ════════════════════════════════════════════ */
hr { border: none; height: 1px; background: var(--border); margin: 3rem 0; }

.entry-content img {
    border-radius: var(--r-md);
    max-width: 100%;
    height: auto;
    box-shadow: var(--sh-md);
}

.page h1.entry-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 2.6rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    letter-spacing: -0.03em !important;
    color: var(--text) !important;
}

.comments-area {
    background: var(--bg-card);
    border-radius: var(--r-lg);
    padding: 2rem;
    margin-top: 3rem;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
    color: var(--text);
}

.rank-math-breadcrumb { font-size: 0.8rem; margin-bottom: 1.5rem; color: var(--text-muted); }
.rank-math-breadcrumb a { color: var(--teal); }
.rank-math-breadcrumb a:hover { color: var(--blue); }

/* Search */
.search-form input[type="search"] {
    border: 1.5px solid var(--border) !important;
    border-radius: var(--r-p) !important;
    padding: 10px 18px !important;
    font-family: 'DM Sans', sans-serif !important;
    width: 100% !important;
    background: var(--bg-card) !important;
    color: var(--text) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.search-form input[type="search"]:focus {
    outline: none !important;
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 3px rgba(17,153,158,0.15) !important;
}

/* Tags */
.tags-links a {
    display: inline-block;
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1.5px solid var(--border);
    padding: 4px 13px;
    border-radius: var(--r-p);
    font-size: 0.77rem;
    font-weight: 500;
    margin: 2px;
    transition: all 0.2s ease;
}
.tags-links a:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-dim); }

/* Code */
code {
    background: var(--teal-dim);
    color: var(--teal);
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.87em;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    border: 1px solid rgba(17,153,158,0.18);
}
pre {
    background: var(--bg-panel) !important;
    color: var(--text);
    padding: 1.75rem;
    border-radius: var(--r-lg);
    overflow-x: auto;
    box-shadow: var(--sh-md);
    border: 1px solid var(--border);
}
pre code { background: none; color: #38BDF8; padding: 0; border: none; }

/* Pagination */
.pagination .page-numbers, .nav-links a, .nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: 0.88rem;
    margin: 0 3px;
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    background: var(--bg-card);
    transition: all 0.2s ease;
}
.pagination .current,
.pagination .page-numbers:hover {
    background: var(--teal);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 20px var(--teal-glow);
}

/* ════════════════════════════════════════════
   CONTENT COMPONENTS
   ════════════════════════════════════════════ */

/* Pros / Cons grid */
.aitc-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 2rem 0;
}
.aitc-pros {
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.18);
    border-radius: var(--r-md);
    padding: 1.25rem 1.5rem;
    color: var(--text);
}
.aitc-cons {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.18);
    border-radius: var(--r-md);
    padding: 1.25rem 1.5rem;
    color: var(--text);
}
.aitc-pros h4 { color: #34D399 !important; }
.aitc-cons h4 { color: #F87171 !important; }

/* Callout boxes */
.aitc-callout {
    border-radius: var(--r-md);
    padding: 1.1rem 1.4rem;
    margin: 1.75rem 0;
    font-size: 0.95rem;
    border-left: 4px solid;
    color: var(--text);
}
.aitc-callout.tip    { background: var(--teal-dim); border-color: var(--teal); }
.aitc-callout.warning{ background: rgba(245,158,11,0.06); border-color: #F59E0B; color: #FCD34D; }
.aitc-callout.info   { background: var(--blue-dim); border-color: var(--blue); }

/* Tool rating score badge */
.aitc-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--teal);
    color: #fff;
    padding: 5px 16px;
    border-radius: var(--r-p);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 4px 20px var(--teal-glow);
}

/* ════════════════════════════════════════════
   HEADER LAYOUT — Logo left, nav right on desktop
   ════════════════════════════════════════════ */
.inside-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Hide toggle on desktop */
.menu-toggle,
button.menu-toggle {
    display: none !important;
}

/* ════════════════════════════════════════════
   5. FULL-WIDTH — No sidebar on any page type
   ════════════════════════════════════════════ */
.content-area,
.category .content-area,
.archive .content-area,
.single .content-area,
.page .content-area,
.blog .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}
.widget-area, .sidebar {
    display: none !important;
}

/* ════════════════════════════════════════════
   3. NEW LOGO — SVG image sizing
   ════════════════════════════════════════════ */
.custom-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.custom-logo {
    display: block !important;
    height: 40px !important;
    width: auto !important;
    max-width: 240px !important;
}
@media (max-width: 480px) {
    .custom-logo { height: 32px !important; }
}

/* ════════════════════════════════════════════
   4. MOBILE HEADER — Crystal glass logo + three-dot toggle
   No backdrop-filter used (causes blank page on Android Chrome)
   ════════════════════════════════════════════ */

/* Hide any residual below-header nav bar */
nav.nav-below-header,
.nav-below-header {
    display: none !important;
}

/* Nav wrapper — transparent, no block box */
.main-navigation,
.nav-primary {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {

    /* Header row: logo left, toggle right */
    .inside-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
        min-height: 62px !important;
        position: relative !important;
    }

    /* Crystal glass logo pill — solid bg, NO backdrop-filter */
    .site-branding {
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: 12px !important;
        padding: 6px 14px !important;
        box-shadow: 0 2px 16px rgba(0,0,0,0.3),
                    inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }

    /* Nav wrapper collapses to just the toggle */
    .main-navigation,
    .nav-primary {
        display: flex !important;
        align-items: center !important;
    }

    /* Three-dot toggle — solid bg, NO backdrop-filter */
    .menu-toggle,
    button.menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        box-shadow: 0 2px 16px rgba(0,0,0,0.3) !important;
        transition: border-color 0.2s, background 0.2s !important;
        /* Hide "Menu" text */
        font-size: 0 !important;
        color: transparent !important;
        overflow: visible !important;
        position: relative !important;
    }
    /* Three dots via ::before */
    .menu-toggle::before,
    button.menu-toggle::before {
        content: '⋮' !important;
        font-size: 22px !important;
        line-height: 1 !important;
        color: var(--text) !important;
        display: block !important;
    }
    .menu-toggle:hover,
    button.menu-toggle:hover {
        border-color: rgba(17,153,158,0.4) !important;
        background: rgba(17,153,158,0.08) !important;
        transform: none !important;
    }
    .menu-toggle:hover::before,
    button.menu-toggle:hover::before {
        color: var(--teal) !important;
    }

    /* Hide nav links by default */
    .main-navigation .nav-menu,
    .main-navigation ul.nav-menu {
        display: none !important;
    }

    /* Dropdown panel — solid bg, NO backdrop-filter */
    .main-navigation.toggled .nav-menu,
    .main-navigation.toggled ul.nav-menu {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        background: #060A14 !important;
        border-top: 1px solid var(--border) !important;
        border-bottom: 1px solid rgba(17,153,158,0.12) !important;
        border-radius: 0 !important;
        padding: 0.5rem 0 !important;
        margin: 0 !important;
        z-index: 999 !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important;
    }
    .main-navigation.toggled .nav-menu li {
        display: block !important;
        width: 100% !important;
    }
    .main-navigation.toggled .nav-menu li a {
        display: block !important;
        color: rgba(228,228,228,0.78) !important;
        padding: 15px 24px !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        border-bottom: 1px solid rgba(255,255,255,0.04) !important;
        border-radius: 0 !important;
    }
    .main-navigation.toggled .nav-menu li:last-child a {
        border-bottom: none !important;
    }
    .main-navigation.toggled .nav-menu li a:hover {
        color: var(--teal) !important;
        background: rgba(17,153,158,0.07) !important;
    }
    .main-navigation.toggled .nav-menu .current-menu-item > a {
        color: var(--teal) !important;
        background: rgba(17,153,158,0.07) !important;
    }
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
    .aitc-pros-cons { grid-template-columns: 1fr; }
    .aitc-archive-hero h1 { font-size: 2rem; }
}
@media (max-width: 768px) {
    .single h1.entry-title { font-size: 2rem !important; }
    .single .entry-content h2 { font-size: 1.45rem !important; }
    .inside-article { padding: 1.25rem 1.5rem 1.5rem !important; }
    .aitc-newsletter-cta { padding: 2.5rem 1.5rem; }
    h2.entry-title { font-size: 1.18rem !important; }
    .aitc-archive-hero { padding: 2.5rem 1.5rem 3rem; }
}
@media (max-width: 480px) {
    .single h1.entry-title { font-size: 1.65rem !important; }
    .aitc-newsletter-cta { padding: 2rem 1.25rem; }
    .entry-content table th,
    .entry-content table td { padding: 9px 10px; font-size: 0.8rem; }
}