/* Ported from ecw-theme wp_head runtime <style> blocks (not in compiled Tailwind). */

/* ── critical fonts (ecw_critical_font_css) ── */
/* Critical: Prevent serif font flash before Google Fonts loads */
    /* Uses low specificity so Plus Jakarta Sans rules can override */
    :root {
        --ecw-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }
    html { font-family: var(--ecw-font-sans); }
    body { font-family: var(--ecw-font-sans); }
    #page-container,
    #main-content,
    .entry-content,
    #left-area,
    #sidebar,
    article,
    p, h1, h2, h3, h4, h5, h6,
    span, a, li, div {
        font-family: var(--ecw-font-sans);
    }

/* ── header overrides (ecw_inject_tailwind_header) ── */
#tailwind-header,
    #tailwind-header * {
        font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
        line-height: 1.5 !important;
    }
    #tailwind-header .font-heading {
        font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    }
    #tailwind-header nav a,
    #tailwind-header nav button {
        font-size: 13px !important;
        font-weight: 500 !important;
        padding: 0.5rem 0.75rem !important;
    }
    #tailwind-header .text-sm {
        font-size: 0.75rem !important; /* 12px */
    }
    #tailwind-header .text-xs {
        font-size: 0.625rem !important; /* 10px */
    }
    #tailwind-header .font-semibold {
        font-weight: 600 !important;
    }
    #tailwind-header .font-medium {
        font-weight: 500 !important;
    }
    /* CTA buttons in header */
    #tailwind-header a[href*="demo"],
    #tailwind-header a[href*="register"] {
        font-size: 13px !important;
        padding: 0.5rem 1rem !important;
    }
    /* Logo text */
    #tailwind-header .flex-shrink-0 + nav {
        gap: 0 !important;
    }

    /* Page content starts at top */
    #page-container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* =============================================
       TAILWIND HEADER Z-INDEX & DROPDOWN FIXES
       ============================================= */

    /* Tailwind header - low z-index so modals and WP admin bar appear above */
    #tailwind-header {
        position: relative !important;
        z-index: 100 !important;
    }

    /* Dropdown menus - above header but below modals */
    #tailwind-header .group > div[class*="absolute"],
    #tailwind-header [class*="group-hover"] {
        z-index: 200 !important;
    }

    /* Ensure all header links and buttons are clickable */
    #tailwind-header a,
    #tailwind-header button,
    #tailwind-header nav {
        pointer-events: auto !important;
    }

    /* Ensure page content doesn't overlap header */
    #page-container,
    #main-content {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Mobile menu needs high z-index too */
    #mobile-menu {
        z-index: 99998 !important;
    }

    /* Fix gradient text display - make background-clip work properly */
    .bg-clip-text,
    h1 span[style*="linear-gradient"],
    h1 span[style*="background:"],
    .text-transparent[style*="background"] {
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
    }

/* ── blog post typography (ecw_blog_post_styles) ── */
/* =============================================
       Blog Post Typography & Spacing Improvements
       ============================================= */

    /* Base layout */
    .ecw-raw-html-content #content-area {
        padding: 2.5rem 0 3rem;
    }

    .ecw-raw-html-content #left-area {
        padding-right: 2.5rem !important;
    }

    .ecw-raw-html-content .container {
        max-width: 1200px !important;
    }

    /* Post title */
    .ecw-raw-html-content .entry-title {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
        font-size: 2.75rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        color: #0f172a !important;
        margin-bottom: 1.25rem !important;
        letter-spacing: -0.025em;
    }

    @media (max-width: 768px) {
        .ecw-raw-html-content .entry-title {
            font-size: 2rem !important;
        }
        .ecw-raw-html-content #left-area {
            padding-right: 0 !important;
        }
    }

    /* Post meta (date, author, categories) */
    .ecw-raw-html-content .post-meta {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
        font-size: 0.9375rem !important;
        color: #64748b !important;
        margin-bottom: 1.5rem !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .ecw-raw-html-content .post-meta a {
        color: #3b82f6 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        transition: color 0.2s !important;
    }

    .ecw-raw-html-content .post-meta a:hover {
        color: #1d4ed8 !important;
    }

    /* Featured image - prominent hero style (targets <figure> in single.php) */
    .ecw-raw-html-content article > figure {
        display: block !important;
        margin: 0.5rem 0 2.5rem !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.05) !important;
        position: relative;
    }

    .ecw-raw-html-content article > figure img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 20px !important;
        transition: transform 0.4s ease !important;
    }

    .ecw-raw-html-content article > figure:hover img {
        transform: scale(1.015) !important;
    }

    /* Content typography */
    .ecw-raw-html-content .entry-content {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
        font-size: 1.125rem !important;
        line-height: 1.85 !important;
        color: #374151 !important;
    }

    .ecw-raw-html-content .entry-content p {
        margin-bottom: 1.75rem !important;
    }

    .ecw-raw-html-content .entry-content > p:first-of-type {
        font-size: 1.25rem !important;
        color: #1f2937 !important;
        line-height: 1.75 !important;
    }

    /* Headings in content */
    .ecw-raw-html-content .entry-content h1,
    .ecw-raw-html-content .entry-content h2,
    .ecw-raw-html-content .entry-content h3,
    .ecw-raw-html-content .entry-content h4,
    .ecw-raw-html-content .entry-content h5,
    .ecw-raw-html-content .entry-content h6 {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin-top: 3rem !important;
        margin-bottom: 1.25rem !important;
        line-height: 1.3 !important;
        letter-spacing: -0.01em !important;
    }

    .ecw-raw-html-content .entry-content h2 {
        font-size: 1.875rem !important;
        padding-bottom: 0.75rem !important;
        border-bottom: 2px solid #e2e8f0 !important;
        margin-top: 3.5rem !important;
    }

    .ecw-raw-html-content .entry-content h3 {
        font-size: 1.5rem !important;
        color: #1e293b !important;
    }

    .ecw-raw-html-content .entry-content h4 {
        font-size: 1.25rem !important;
    }

    /* Images in content - IMPROVED */
    .ecw-raw-html-content .entry-content img {
        border-radius: 12px !important;
        margin: 2.5rem auto !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .ecw-raw-html-content .entry-content p > img {
        margin: 2rem auto 2.5rem !important;
    }

    .ecw-raw-html-content .entry-content figure {
        margin: 3rem 0 !important;
        text-align: center !important;
    }

    .ecw-raw-html-content .entry-content figcaption {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
        font-size: 0.875rem !important;
        color: #64748b !important;
        text-align: center !important;
        margin-top: 1rem !important;
        font-style: italic;
        padding: 0 1rem !important;
    }

    /* Lists - IMPROVED */
    .ecw-raw-html-content .entry-content ul,
    .ecw-raw-html-content .entry-content ol {
        margin: 1.75rem 0 2rem !important;
        padding-left: 1.75rem !important;
    }

    .ecw-raw-html-content .entry-content li {
        margin-bottom: 0.875rem !important;
        line-height: 1.75 !important;
        padding-left: 0.5rem !important;
    }

    .ecw-raw-html-content .entry-content ul li {
        list-style-type: disc !important;
    }

    .ecw-raw-html-content .entry-content ol li {
        list-style-type: decimal !important;
    }

    .ecw-raw-html-content .entry-content li::marker {
        color: #3b82f6 !important;
    }

    /* Links */
    .ecw-raw-html-content .entry-content a {
        color: #2563eb !important;
        text-decoration: underline !important;
        text-decoration-color: #93c5fd !important;
        text-underline-offset: 3px !important;
        text-decoration-thickness: 2px !important;
        transition: all 0.2s !important;
    }

    .ecw-raw-html-content .entry-content a:hover {
        color: #1d4ed8 !important;
        text-decoration-color: #2563eb !important;
    }

    /* WordPress Block Buttons - ensure text is visible on colored backgrounds */
    .ecw-raw-html-content .entry-content .wp-block-button__link,
    .ecw-raw-html-content .entry-content .wp-block-button__link.has-background,
    .ecw-raw-html-content .entry-content a.wp-element-button,
    .entry-content .wp-block-button__link,
    .entry-content .wp-block-button__link.has-background {
        color: white !important;
        text-decoration: none !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        display: inline-block !important;
        transition: opacity 0.2s, transform 0.2s !important;
    }

    .ecw-raw-html-content .entry-content .wp-block-button__link:hover,
    .entry-content .wp-block-button__link:hover {
        color: white !important;
        opacity: 0.9 !important;
        transform: translateY(-1px) !important;
    }

    /* Inline HTML CTA buttons — exempt from body link decoration/color overrides */
    .ecw-raw-html-content .entry-content a[style*="border-radius"],
    .ecw-raw-html-content .entry-content a[style*="border-radius"],
    .ecw-raw-html-content .entry-content .ecw-inline-cta a {
        text-decoration: none !important;
        text-underline-offset: unset !important;
    }
    /* Solid-background buttons: white text */
    .ecw-raw-html-content .entry-content a[style*="background:#"],
    .ecw-raw-html-content .entry-content a[style*="background: #"],
    .ecw-raw-html-content .entry-content a[style*="background:linear-gradient"],
    .ecw-raw-html-content .entry-content a[style*="background: linear-gradient"] {
        color: #ffffff !important;
    }
    /* Outline/ghost buttons on light backgrounds: dark text for contrast */
    .ecw-raw-html-content .entry-content .ecw-inline-cta a[style*="border:2px solid"],
    .ecw-raw-html-content .entry-content .ecw-inline-cta a[style*="border: 2px solid"] {
        color: #1e40af !important;
    }

    /* Blockquotes */
    .ecw-raw-html-content .entry-content blockquote {
        border-left: 4px solid #3b82f6 !important;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
        padding: 1.75rem 2rem !important;
        margin: 2.5rem 0 !important;
        border-radius: 0 12px 12px 0 !important;
        font-size: 1.125rem !important;
        font-style: italic !important;
        color: #475569 !important;
        position: relative !important;
    }

    .ecw-raw-html-content .entry-content blockquote p {
        margin-bottom: 0 !important;
    }

    /* Code blocks */
    .ecw-raw-html-content .entry-content pre,
    .ecw-raw-html-content .entry-content code {
        font-family: 'SF Mono', 'Fira Code', monospace !important;
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border-radius: 8px !important;
        font-size: 0.875rem !important;
    }

    .ecw-raw-html-content .entry-content code {
        padding: 0.25rem 0.5rem !important;
        background: #f1f5f9 !important;
        color: #0f172a !important;
    }

    .ecw-raw-html-content .entry-content pre {
        padding: 1.5rem !important;
        overflow-x: auto !important;
        margin: 2rem 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    .ecw-raw-html-content .entry-content pre code {
        background: transparent !important;
        padding: 0 !important;
        color: #e2e8f0 !important;
    }

    /* Tables */
    .ecw-raw-html-content .entry-content table {
        width: 100% !important;
        margin: 2.5rem 0 !important;
        border-collapse: collapse !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        border: 1px solid #e2e8f0 !important;
    }

    .ecw-raw-html-content .entry-content th,
    .ecw-raw-html-content .entry-content td {
        padding: 1rem 1.25rem !important;
        text-align: left !important;
        border-bottom: 1px solid #e2e8f0 !important;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    }

    .ecw-raw-html-content .entry-content th {
        background: #f8fafc !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        font-size: 0.875rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

    .ecw-raw-html-content .entry-content tr:hover td {
        background: #f8fafc !important;
    }

    /* Comments section */
    .ecw-raw-html-content #comment-wrap {
        margin-top: 3.5rem !important;
        padding-top: 2.5rem !important;
        border-top: 2px solid #e2e8f0 !important;
    }

    .ecw-raw-html-content #comment-wrap h3 {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    /* Post navigation */
    .ecw-raw-html-content .nav-single {
        margin-top: 3rem !important;
        padding-top: 2rem !important;
        border-top: 1px solid #e2e8f0 !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    .ecw-raw-html-content .nav-single a {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
        font-size: 0.9375rem !important;
        font-weight: 500 !important;
        color: #3b82f6 !important;
        text-decoration: none !important;
        transition: color 0.2s !important;
    }

    .ecw-raw-html-content .nav-single a:hover {
        color: #1d4ed8 !important;
    }

    /* Categories and tags */
    .ecw-raw-html-content .post_tags,
    .ecw-raw-html-content .posted_in {
        margin-top: 2.5rem !important;
        padding-top: 1.5rem !important;
        border-top: 1px solid #e2e8f0 !important;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
        font-size: 0.9375rem !important;
    }

    .ecw-raw-html-content .post_tags a,
    .ecw-raw-html-content .posted_in a {
        display: inline-block !important;
        background: #f1f5f9 !important;
        color: #475569 !important;
        padding: 0.375rem 0.875rem !important;
        border-radius: 6px !important;
        margin: 0.25rem 0.375rem 0.25rem 0 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 0.8125rem !important;
        transition: all 0.2s !important;
    }

    .ecw-raw-html-content .post_tags a:hover,
    .ecw-raw-html-content .posted_in a:hover {
        background: #e2e8f0 !important;
        color: #1e293b !important;
    }

    /* =============================================
       RESPONSIVE STYLES (sidebar hidden - single.php uses custom Tailwind layout)
       ============================================= */
    /* =============================================
       RESPONSIVE STYLES
       ============================================= */

    @media (max-width: 768px) {
        .ecw-raw-html-content .entry-content h2 {
            font-size: 1.5rem !important;
        }

        .ecw-raw-html-content .entry-content h3 {
            font-size: 1.25rem !important;
        }

        .ecw-raw-html-content .entry-content {
            font-size: 1.0625rem !important;
        }

        .ecw-raw-html-content .entry-content blockquote {
            padding: 1.25rem 1.5rem !important;
            margin: 2rem 0 !important;
        }

        .ecw-raw-html-content #sidebar .widget {
            padding: 1.25rem !important;
        }
    }