/*
Theme Name: Assistant-Conversationnel
Theme URI: https://example.com/lovable-clone
Author: Antigravity
Author URI: https://example.com
Description: A clone of the Lovable blog design.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lovable-clone
*/

:root {
    /* Colors */
    --color-background: #FAFAFA;
    --color-foreground: #1F2937;
    --color-primary: #4F46E5;
    --color-muted: #64748B;
    --color-border: #E2E8F0;
    --color-card-bg: rgba(255, 255, 255, 0.9);

    /* Fonts */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* Spacing */
    --container-padding: 2rem;
    --max-width: 1400px;
    --header-height: 65px;
    --radius-card: 20px;

    /* Shadows */
    --shadow-card: 0px 4px 24px -4px rgba(31, 38, 122, 0.08);
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-foreground);
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    margin-top: 0;
    line-height: 1.2;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

/* Utility Classes */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    opacity: 0.9;
}

/* Header Styles */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.site-branding a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-foreground);
    letter-spacing: -0.02em;
}

.site-branding svg {
    color: var(--color-primary);
}

.main-navigation ul {
    display: flex;
    gap: 2.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}


.main-navigation a {
    font-size: 0.95rem;
    color: var(--color-muted);
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    display: inline-block;
}

/* Toggle Button Visibility */
@media (min-width: 768px) {
    .menu-toggle {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .menu-toggle {
        display: block !important;
    }
}

.main-navigation a:hover {
    color: #1F2937;
    background-color: rgba(0, 0, 0, 0.04);
}

/* Mobile Menu Overlay Styles */
@media (max-width: 767px) {
    .main-navigation {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.98);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        z-index: 999;
        flex-direction: column;
        padding: 2rem;
        transform: translateY(-20px);
        opacity: 0;
        transition: all 0.3s ease;
        pointer-events: none;
    }

    .main-navigation.toggled {
        display: flex;
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
        width: 100%;
        padding-left: 0;
    }

    .main-navigation a {
        font-size: 1.125rem;
        font-weight: 600;
        width: 100%;
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
}

.header-actions .btn {
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1), 0 2px 4px -1px rgba(79, 70, 229, 0.06);
}

/* Glass Card Base */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    border: 0.8px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    box-shadow: 0px 4px 24px -4px rgba(31, 38, 122, 0.08);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 32px -4px rgba(31, 38, 122, 0.12);
}

/* Footer Styles */
.site-footer {
    background-color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 5rem 0 3rem;
    margin-top: 4rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-brand p {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 1rem;
    max-width: 300px;
}

.footer-links h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    color: var(--color-foreground);
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.85rem;
}

.footer-links a {
    color: var(--color-muted);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.footer-links a:hover {
    color: var(--color-primary);
    padding-left: 4px;
}

.site-info {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-muted);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-info {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Breadcrumbs */
.breadcrumbs {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 1rem;
}

.page-header {
    padding: 4rem 0 2rem;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.page-description {
    font-size: 1.125rem;
    color: var(--color-muted);
}

/* Post Content - Premium Typography */
.post-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #334155;
    font-family: var(--font-body);
}

.post-content p {
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

.post-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #0F172A;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.post-content h2::before {
    content: '';
    display: block;
    width: 6px;
    height: 32px;
    background: linear-gradient(to bottom, #4F46E5, #818CF8);
    border-radius: 4px;
    flex-shrink: 0;
}

.post-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
    margin-top: 3rem;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.post-content h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1E293B;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.post-content ul,
.post-content ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.post-content li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
    position: relative;
}

.post-content ul {
    list-style: none;
    padding-left: 0;
}

.post-content ul li {
    padding-left: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 4px;
    background-size: 20px;
}

.post-content blockquote {
    border-left: 4px solid #4F46E5;
    background: #F8FAFC;
    padding: 2rem;
    margin: 2.5rem 0;
    font-style: italic;
    font-size: 1.25rem;
    color: #475569;
    border-radius: 0 12px 12px 0;
}

.post-content strong {
    color: #0F172A;
    font-weight: 700;
}

.post-content img {
    border-radius: 16px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
    width: 100%;
}

.post-content a {
    color: #4F46E5;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

.post-content a:hover {
    color: #4338CA;
}

.author-box {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.author-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.author-info strong {
    display: block;
    color: #0F172A;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.author-role {
    font-size: 0.85rem;
    color: #4F46E5;
    background: rgba(79, 70, 229, 0.1);
    padding: 2px 10px;
    border-radius: 9999px;
    font-weight: 600;
}

/* Hero Section */
.hero-section {
    text-align: center;
    padding: 6rem 1rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9999px;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    color: var(--color-foreground);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--color-muted);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 4rem;
    }
}

/* Category Navigation */
.category-nav-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 2rem;
    justify-content: center;
    scrollbar-width: none;
}

.category-nav-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.category-nav-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.category-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.category-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0;
    transition: color 0.2s;
}

.category-nav-card:hover .category-name {
    color: var(--color-primary);
}

/* Featured Section */
.section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 32px;
    color: var(--color-foreground);
}

.featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 48px;
}

@media (min-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Featured Cards - WHITE GLASS DESIGN */
.featured-card {
    background: rgba(255, 255, 255, 0.9);
    border: 0.8px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    box-shadow: 0px 4px 24px -4px rgba(31, 38, 122, 0.08);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 32px -4px rgba(31, 38, 122, 0.12);
}

.featured-card .post-thumbnail {
    height: 192px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.featured-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

.featured-card .post-thumbnail::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(250, 250, 250, 0.8), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.featured-content-overlay {
    padding: 24px;
    background: transparent;
}

.featured-content-overlay h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #1f2937;
    margin-bottom: 12px;
}

.featured-content-overlay p {
    font-size: 16px;
    color: #65758b;
    line-height: 24px;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-content-overlay .post-meta-items {
    font-size: 14px;
    color: #65758b;
    display: flex;
    align-items: center;
    gap: 16px;
}

.featured-card .card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    z-index: 2;
}

/* Blog Grid - 3 Column */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

@media (min-width: 1200px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.blog-grid .glass-card {
    display: flex;
    flex-direction: column;
}

.blog-grid .post-thumbnail {
    height: 192px;
    position: relative;
    overflow: hidden;
}

.blog-grid .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-grid .glass-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

.blog-grid .post-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-grid .entry-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 12px;
}

.blog-grid .entry-title a {
    color: #1f2937;
}

.blog-grid .entry-title a:hover {
    color: var(--color-primary);
}

.blog-grid .entry-summary {
    font-size: 16px;
    color: #65758b;
    line-height: 24px;
    margin-bottom: 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-grid .post-meta-items {
    font-size: 14px;
    color: #65758b;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-grid .card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 12px;
    padding: 2px 10px;
    font-weight: 600;
    border-radius: 9999px;
    z-index: 2;
}

/* Colorful Badges */
.glass-card:nth-child(5n+1) .card-badge {
    color: #2563EB;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
}

.glass-card:nth-child(5n+2) .card-badge {
    color: #7C3AED;
    background: #F5F3FF;
    border: 1px solid #EDE9FE;
}

.glass-card:nth-child(5n+3) .card-badge {
    color: #4F46E5;
    background: #EEF2FF;
    border: 1px solid #E0E7FF;
}

.glass-card:nth-child(5n+4) .card-badge {
    color: #059669;
    background: #ECFDF5;
    border: 1px solid #D1FAE5;
}

.glass-card:nth-child(5n+5) .card-badge {
    color: #EA580C;
    background: #FFF7ED;
    border: 1px solid #FFEDD5;
}/* Content Typography Revisions */



.entry-content h2 {

    font-size: 1.875rem;

    font-weight: 800;

    color: #0F172A;

    margin-top: 3rem;

    margin-bottom: 1.5rem;

    padding-left: 1rem;

    border-left: 4px solid #4F46E5;

    line-height: 1.3;

}



.entry-content h3 {

    font-size: 1.5rem;

    font-weight: 700;

    color: #1F2937;

    margin-top: 2.5rem;

    margin-bottom: 1.25rem;

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.entry-content h3::before {

    content: '';

    display: inline-block;

    width: 6px;

    height: 6px;

    background-color: #4F46E5;

    border-radius: 50%;

    flex-shrink: 0;

}



.entry-content p {

    margin-bottom: 1.5rem;

    font-size: 1.125rem;

    color: #334155;

    line-height: 1.8;

}



/* Custom List Styling */

.entry-content ul {

    list-style: none;

    padding: 0;

    margin: 2rem 0;

}



.entry-content ul li {

    background: #FFFFFF;

    border: 1px solid #F1F5F9;

    /* Or the light blue background seen in screenshot? 

       Screenshot shows white background for main metrics, but 'Coût par interaction' has rounded pill look?

       Actually, looked closer at image 0. 

       The list items "Coût par interaction", "Ã0 conomies générées" look like they have a WHITE background but maybe a subtle shadow or just placed on the page.

       Wait, let's look at the checkmark. It's inside a light blue circle.

       Let's stick to a clean look. 

    */

    padding: 1rem 1.5rem;

    border-radius: 12px;

    margin-bottom: 1rem;

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

}



/* If user wants the checkmark icon */

.entry-content ul li::before {

    content: 'âS
 ';

    /* Fallback */

    /* We can style this to look like the icon */

    display: flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    background-color: #E0E7FF;

    /* Light indigo */

    color: #4F46E5;

    border-radius: 50%;

    font-weight: bold;

    font-size: 12px;

    flex-shrink: 0;

    margin-top: 3px;

    /* Align with text */

}



/* Table Styling */

.entry-content table {

    width: 100%;

    border-collapse: separate;

    /* Allow border radius */

    border-spacing: 0;

    margin: 2.5rem 0;

    border: 1px solid #E2E8F0;

    border-radius: 16px;

    overflow: hidden;

    font-size: 1rem;

}



.entry-content table thead {

    background-color: #F8FAFC;

    /* Light gray/blue header */

}



.entry-content table th {

    text-align: left;

    padding: 1rem 1.5rem;

    font-weight: 600;

    color: #0F172A;

    border-bottom: 1px solid #E2E8F0;

}



.entry-content table td {

    padding: 1rem 1.5rem;

    color: #475569;

    border-bottom: 1px solid #E2E8F0;

}



.entry-content table tr:last-child td {

    border-bottom: none;

}



/* Blockquote Styling */

.entry-content blockquote {

    background: #F8FAFC;

    border-left: 4px solid #4F46E5;

    margin: 2.5rem 0;

    padding: 2rem;

    border-radius: 0 16px 16px 0;

    font-style: italic;

    color: #1E293B;

    position: relative;

    font-size: 1.25rem;

    line-height: 1.6;

}



/* Specific "Blue Box" callout if they use a specific class, 

   but for now standard blockquote is good. */


/* Fix for H3 and Lists (Overrides) */
.post-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
    margin-top: 3rem;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.post-content h3::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background-color: #4F46E5;
    border-radius: 50%;
    flex-shrink: 0;
}

.post-content ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.post-content ul li {
    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-weight: 500;
    color: #334155;
}

.post-content ul li::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #E0E7FF;
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'14\' height=\'14\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%234F46E5\' stroke-width=\'3\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpolyline points=\'20 6 9 17 4 12\'%3E%3C/polyline%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 2px;
}


/* Fix for OL (Overrides) */
.post-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 2rem;
    counter-reset: item;
}

.post-content ol li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
    display: block;
    position: relative;
    font-weight: 500;
    color: #334155;
    padding-left: 2.5rem;
}

.post-content ol li::before {
    content: counter(item) '.';
    counter-increment: item;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: #4F46E5;
    font-size: 1rem;
}


/* Fix for Tables (Light Blue Header) */
.post-content table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
    margin: 2.5rem 0;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    color: #334155;
}

.post-content table thead {
    background-color: #F8FAFC; 
}

.post-content table th {
    text-align: left;
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: #0F172A;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.95rem;
}

/* Specific fix for 'blue header' if requested - using nth-child for first row or explicitly thead */
.post-content table thead th {
    background-color: #F1F5F9; /* Keeping it light gray/blue as per standard clean design, user can customize if needed darker blue */
}

/* If the user wants specifically the BLUE header from screenshot 0 */
/* Let's try to match that specific light blueish tint */
.post-content table thead th {
    background-color: #F0F9FF;
    color: #0F172A;
}

.post-content table td {
    padding: 1.25rem 1.5rem;
    color: #475569;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.95rem;
}

.post-content table tr:last-child td {
    border-bottom: none;
}

/* Fix for Blockquotes (Blue line left) */
.post-content blockquote {
    border-left: 4px solid #4F46E5;
    background: #FFFFFF;
    padding: 1.5rem 2rem;
    margin: 2.5rem 0;
    font-style: normal; /* Lovable seems to use normal style */
    font-size: 1.125rem;
    color: #334155;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

/* Callout Box (Blue Box - 'Voyez AirAgent en action') */
/* Usage: <div class='callout-box'>Content</div> */
.callout-box,
.wp-block-group.has-background { 
    /* Tries to target WP Group blocks with background if used */
    background-color: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    margin: 3rem 0;
}

.callout-box h3,
.callout-box h2 {
    margin-top: 0 !important;
    font-size: 1.5rem !important;
    display: block !important;
}

.callout-box .btn,
.callout-box .button {
    background: #FFFFFF;
    color: #0284C7;
    border: 1px solid #BAE6FD;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-top: 1rem;
    display: inline-flex;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}


/* =========================================
   Gutenberg Block Overrides (Final Parity)
   ========================================= */

/* HEADINGS */
.entry-content h2,
.post-content h2 {
    font-size: 1.875rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
    padding-left: 1rem !important;
    border-left: 4px solid #4F46E5 !important;
    line-height: 1.3 !important;
    display: block !important;
    background: transparent !important; /* Reset any gradient overrides */
}
.entry-content h2::before,
.post-content h2::before { 
    display: none !important; /* Remove the old gradient bar if it conflicts */ 
}

.entry-content h3,
.post-content h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding-left: 0 !important;
}

.entry-content h3::before,
.post-content h3::before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #4F46E5 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
}

/* LISTS (UL / OL) */
.entry-content ul,
.post-content ul,
.wp-block-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 2rem 0 !important;
}

.entry-content ul li,
.post-content ul li,
.wp-block-list li {
    background: #FFFFFF !important;
    border: 1px solid #F1F5F9 !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    font-weight: 500 !important;
    color: #334155 !important;
    line-height: 1.6 !important;
}

.entry-content ul li::before,
.post-content ul li::before,
.wp-block-list li::before {
    content: '' !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    background-color: #E0E7FF !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'14\' height=\'14\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%234F46E5\' stroke-width=\'3\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpolyline points=\'20 6 9 17 4 12\'%3E%3C/polyline%3E%3C/svg%3E') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-top: 3px !important;
}

/* TABLES */
.wp-block-table,
.entry-content table,
.post-content table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin: 2.5rem 0 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.wp-block-table thead,
.entry-content table thead,
.post-content table thead {
    background-color: #F0F9FF !important; /* The Light Blue Header */
}

.wp-block-table th,
.entry-content table th,
.post-content table th {
    padding: 1.25rem 1.5rem !important;
    text-align: left !important;
    color: #0F172A !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.wp-block-table td,
.entry-content table td,
.post-content table td {
    padding: 1.25rem 1.5rem !important;
    color: #475569 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.wp-block-table tr:last-child td {
    border-bottom: none !important;
}

/* BLOCKQUOTES */
.wp-block-quote,
.entry-content blockquote,
.post-content blockquote {
    border-left: 4px solid #4F46E5 !important;
    background: #FFFFFF !important;
    padding: 2rem !important;
    margin: 2.5rem 0 !important;
    border-radius: 0 16px 16px 0 !important;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05) !important;
    font-style: normal !important;
}

.wp-block-quote p,
.entry-content blockquote p,
.post-content blockquote p {
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    color: #1E293B !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
}

.wp-block-quote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #64748B;
    font-style: normal;
}


/* =========================================
   Lovable 100% Match Overrides
   (Generated from Browser Inspection)
   ========================================= */

/* H2 - Gradient Vertical Bar */
.entry-content h2,
.post-content h2 {
    position: relative !important;
    padding-left: 20px !important;
    border-left: none !important; /* Remove old solid border */
    display: flex !important;
    align-items: center !important;
    margin-top: 56px !important;
    margin-bottom: 24px !important;
}

.entry-content h2::before,
.post-content h2::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    width: 4px !important;
    height: 40px !important; /* Fixed height matching Lovable */
    background: linear-gradient(to bottom, #5048E5, #07BDD5) !important;
    border-radius: 9999px !important;
    display: block !important;
}

/* H3 - Larger Dot */
.entry-content h3,
.post-content h3 {
    margin-top: 40px !important;
    margin-bottom: 16px !important;
    gap: 12px !important;
}

.entry-content h3::before,
.post-content h3::before {
    width: 8px !important;
    height: 8px !important;
    background-color: #5048E5 !important;
}

/* Lists - Glass Cards with Cyan Icons */
.entry-content ul li,
.post-content ul li,
.wp-block-list li {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 24px -4px rgba(31, 38, 122, 0.08) !important;
    padding: 12px !important;
    gap: 12px !important;
    border-radius: 12px !important;
}

/* Custom Checkmark Icon (Cyan) */
.entry-content ul li::before,
.post-content ul li::before,
.wp-block-list li::before {
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(7, 189, 213, 0.2) !important; /* Light Sky Blue */
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'14\' height=\'14\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%2307BDD5\' stroke-width=\'3\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpolyline points=\'20 6 9 17 4 12\'%3E%3C/polyline%3E%3C/svg%3E') !important;
}

/* Tables - Gradient Header */
.wp-block-table thead,
.entry-content table thead,
.post-content table thead {
    background: linear-gradient(to right, rgba(80, 72, 229, 0.1), rgba(7, 189, 213, 0.1)) !important;
}

.wp-block-table th,
.entry-content table th,
.post-content table th {
    color: #1F2937 !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
}

.wp-block-table td,
.entry-content table td,
.post-content table td {
    padding: 16px 20px !important;
}

/* Callout Box - Gradient Background */
.callout-box,
.wp-block-group.has-background {
    background: linear-gradient(to bottom right, rgba(80, 72, 229, 0.05), #ffffff, rgba(7, 189, 213, 0.05)) !important;
    border: 1px solid rgba(80, 72, 229, 0.1) !important;
    border-radius: 24px !important;
    padding: 40px !important;
}


/* Robust Table Fix (Targeting Figure Wrapper) */
figure.wp-block-table {
    margin: 3rem 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

figure.wp-block-table table {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

figure.wp-block-table thead {
    background: linear-gradient(to right, rgba(80, 72, 229, 0.1), rgba(7, 189, 213, 0.1)) !important;
}

figure.wp-block-table th {
    background: transparent !important;
    border-bottom: 1px solid #E2E8F0 !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
    padding: 1.25rem 1.5rem !important;
    text-transform: none !important; /* Screenshot shows normal case */
    font-size: 0.95rem !important;
}

figure.wp-block-table td {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid #E2E8F0 !important;
    color: #4B5563 !important;
}

figure.wp-block-table tr:last-child td {
    border-bottom: none !important;
}


/* =========================================
   Blockquote - Premium Callout Parity
   (Based on 'AirAgent' Callout Styles)
   ========================================= */

.entry-content blockquote,
.post-content blockquote,
.wp-block-quote {
    background: linear-gradient(to bottom right, rgba(80, 72, 229, 0.05), #ffffff, rgba(7, 189, 213, 0.05)) !important;
    border: 1px solid rgba(80, 72, 229, 0.1) !important;
    border-radius: 20px !important;
    padding: 2.5rem !important;
    margin: 3rem 0 !important;
    position: relative !important;
    box-shadow: 0 10px 30px -10px rgba(80, 72, 229, 0.06) !important;
    border-left: none !important; /* Remove standard left border */
}

/* Vertical Gradient Bar (Lovable Signature) */
.entry-content blockquote::before,
.post-content blockquote::before,
.wp-block-quote::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 24px !important;
    bottom: 24px !important;
    width: 6px !important;
    background: linear-gradient(to bottom, #5048E5, #07BDD5) !important;
    border-radius: 0 4px 4px 0 !important;
}

.entry-content blockquote p,
.post-content blockquote p,
.wp-block-quote p {
    font-size: 1.25rem !important;
    line-height: 1.7 !important;
    color: #1E293B !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding-left: 12px !important; 
    /* Offset text for the bar */
}

.entry-content blockquote cite,
.post-content blockquote cite,
.wp-block-quote cite {
    display: block !important;
    margin-top: 1.5rem !important;
    padding-left: 12px !important;
    font-size: 0.95rem !important;
    color: #64748B !important;
    font-style: normal !important;
    font-weight: 600 !important;
}


/* =========================================
   Category Navigation Grid (Exact Match)
   ========================================= */

.category-nav-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    padding-bottom: 2rem !important;
    margin-top: 2rem !important;
}

.category-nav-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    padding: 16px 24px !important;
    box-shadow: 0px 4px 24px -4px rgba(31, 38, 122, 0.08) !important; 
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    min-width: 200px !important;
    flex: 0 1 calc(25% - 16px) !important;
    max-width: 360px !important;
    cursor: pointer !important;
}

/* Mobile responsive override */
@media (max-width: 768px) {
    .category-nav-grid {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .category-nav-card {
        min-width: 260px !important;
        flex: 0 0 auto !important;
    }
}

/* Hover State */
.category-nav-card.group:hover {
    border-color: rgba(79, 70, 229, 0.5) !important;
}

/* Icon */
.category-nav-card .category-icon {
    font-size: 24px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    width: 40px !important;
}

.category-nav-card .category-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Title */
.category-nav-card .category-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1F2937 !important;
    margin: 0 !important;
}

/* Hover Title Color Change */
.category-nav-card.group:hover .category-name {
    color: #4F46E5 !important;
}

/* Description */
.category-nav-card .category-subtitle {
    font-size: 12px !important;
    color: #65758B !important;
    line-height: 16px !important;
    margin-top: 4px !important;
    text-align: center !important;
}


/* =========================================
   Header Navigation (Exact Match)
   ========================================= */

/* Main Navigation */
.main-navigation ul {
    display: flex;
    gap: 8px; /* Reduced gap to accommodate padding for hover */
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li a {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #65758b;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'DM Sans', sans-serif;
}

/* Hover State */
.main-navigation li a:hover {
    color: #1f2937;
    background-color: #f1f5f9;
}


/* =========================================
   Footer Styling (Exact Match)
   ========================================= */

.site-footer {
    background-color: rgba(241, 245, 249, 0.3);
    border-top: 1px solid #e1e7ef;
    padding: 64px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 64px;
}

/* Mobile Footer */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Footer Brand */
.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.footer-brand-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #1F2937;
}

.footer-description {
    color: #64748B;
    font-size: 14px;
    line-height: 1.6;
    max-width: 320px;
}

/* Footer Links */
.footer-heading {
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 24px;
    font-family: 'DM Sans', sans-serif;
}

.footer-menu-list, 
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-list li, 
.footer-links ul li {
    margin-bottom: 12px;
}

.footer-menu-list li a, 
.footer-links ul li a {
    color: #64748B;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-menu-list li a:hover, 
.footer-links ul li a:hover {
    color: #1F2937;
}

/* Bottom Bar */
.site-info {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    color: #64748B;
    font-size: 14px;
}


/* =========================================
   Homepage Hero Section
   ========================================= */
.hero-section {
    padding: 4rem 1rem 3rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 6px 16px;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #E2E8F0;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4F46E5;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800; /* Extra bold */
    color: #0F172A; /* Slate 900 */
    line-height: 1.1;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: #64748B; /* Slate 500 */
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Mobile Hero Adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.25rem;
    }
}


/* =========================================
   Category Page Header
   ========================================= */

.category-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.category-hero-icon {
    font-size: 3rem; /* 48px */
    line-height: 1;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
}

.category-hero .page-title {
    font-size: 3rem; /* 48px */
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.category-hero .page-description {
    font-size: 1.125rem; /* 18px */
    color: #64748B;
    line-height: 1.55; /* 28px/18px approx */
    max-width: 600px;
    margin: 0 auto;
}

/* Category Filters */
.category-filters {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.category-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent; /* Default border for layout stability */
}

.category-filter-pill.active {
    background-color: #5048E5; /* Indigo 600 */
    color: white;
    border-color: #5048E5;
}

.category-filter-pill:not(.active) {
    background-color: transparent;
    color: #1F2937;
    border-color: #E2E8F0;
}

.category-filter-pill:not(.active):hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}


/* Ensure category icons are constrained */
.category-hero-icon svg,
.category-hero-icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}


/* Force Category Filters to be Horizontal */
.category-filters {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin: 2rem auto 3rem !important;
    padding: 0 !important;
    list-style: none !important;
}

.category-filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix Category Hero Icon sizing */
.category-hero-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1.5rem !important;
    width: 64px !important;
    height: 64px !important;
    font-size: 3.5rem !important;
    overflow: hidden !important;
}

.category-hero-icon img,
.category-hero-icon svg,
.category-hero-icon i {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}