/* ============================================
   SB NEWS - ENTERPRISE CATEGORY PAGES
   Brandbook: Obsidian, Indigo, Glassmorphism
   Fonts: Outfit (headers), Inter (body)
   Version: 1.0 - January 2026
   ============================================ */

/* ========================================
   CSS VARIABLES - BRANDBOOK ALIGNED
   ======================================== */
:root {
    /* Core Palette */
    --sb-obsidian: #0A0A0B;
    --sb-gunmetal: #1A1A1D;
    --sb-charcoal: #27272A;
    --sb-slate: #3A3A3D;

    /* Text Colors */
    --sb-white: #FFFFFF;
    --sb-stardust: #A1A1AA;
    --sb-muted: #71717A;

    /* Brand Accent */
    --sb-indigo: #4F46E5;
    --sb-violet: #7C3AED;
    --sb-purple: #9333EA;
    --sb-pink: #EC4899;

    /* Gradients */
    --sb-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #9333EA 100%);
    --sb-text-gradient: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6, #6366F1, #8B5CF6);
    --sb-aurora: radial-gradient(ellipse at 50% 0%, rgba(79, 70, 229, 0.12) 0%, transparent 60%);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-bg-hover: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(124, 58, 237, 0.25);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --glass-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(124, 58, 237, 0.1);

    /* Typography */
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   CATEGORY PAGE - BASE LAYOUT
   ======================================== */
body.archive,
body.category {
    background: var(--sb-obsidian) !important;
    background-image: var(--sb-aurora) !important;
    background-attachment: fixed !important;
}

body.archive .site-container,
body.category .site-container,
body.archive .content-wrap,
body.category .content-wrap {
    background: transparent !important;
}

/* Main content area */
body.archive .site-main,
body.category .site-main {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 40px 24px 80px !important;
}

/* ========================================
   CATEGORY HERO HEADER
   ======================================== */
body.category .entry-hero,
body.archive .entry-hero,
body.category .post-archive-hero-section,
body.archive .post-archive-hero-section {
    background: transparent !important;
    padding: 60px 24px 40px !important;
    text-align: center !important;
}

body.category .entry-hero-container-inner,
body.archive .entry-hero-container-inner {
    max-width: 900px !important;
    margin: 0 auto !important;
}

body.category .entry-header.post-archive-title,
body.archive .entry-header.post-archive-title {
    text-align: center !important;
}

/* Category badge - styled label above title */
body.category .entry-header.post-archive-title::before,
body.archive .entry-header.post-archive-title::before {
    content: 'CATEGORIE';
    display: inline-block;
    padding: 8px 20px;
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid rgba(79, 70, 229, 0.25);
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #6366F1;
    margin-bottom: 20px;
}

/* Main category title with gradient */
body.category .archive-title,
body.archive .archive-title,
body.category h1.page-title,
body.archive h1.page-title,
body.category .entry-title,
body.archive .entry-hero .entry-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(2.5rem, 6vw, 4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    margin: 0 0 16px !important;
    background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6, #6366F1, #8B5CF6) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shimmer 4s linear infinite !important;
}

@keyframes shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

body.category .archive-description,
body.archive .archive-description,
body.category .taxonomy-description,
body.archive .taxonomy-description {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.1rem !important;
    color: #A1A1AA !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    line-height: 1.7 !important;
}

/* ========================================
   ARTICLE GRID - ENTERPRISE LAYOUT
   ======================================== */
body.category .site-main,
body.archive .site-main {
    display: block !important;
}

body.category .site-main ul,
body.archive .site-main ul,
body.category .loop-entry,
body.archive .loop-entry {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
    gap: 32px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    list-style: none !important;
    padding: 0 !important;
}

body.category .entry-list-item,
body.archive .entry-list-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Single column on smaller screens */
@media (max-width: 840px) {
    body.category .site-main ul,
    body.archive .site-main ul,
    body.category .loop-entry,
    body.archive .loop-entry {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* ========================================
   ARTICLE CARDS - GLASSMORPHISM PREMIUM
   ======================================== */
body.category article.entry,
body.archive article.entry,
body.category article.loop-entry,
body.archive article.loop-entry,
body.category .content-bg.loop-entry,
body.archive .content-bg.loop-entry {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(26, 26, 29, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

body.category article.entry:hover,
body.archive article.entry:hover,
body.category article.loop-entry:hover,
body.archive article.loop-entry:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(124, 58, 237, 0.12) !important;
    background: rgba(30, 30, 35, 0.7) !important;
}

/* Glow effect on hover */
body.category article.entry::before,
body.archive article.entry::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #7C3AED, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10;
}

body.category article.entry:hover::before,
body.archive article.entry:hover::before {
    opacity: 1;
}

/* ========================================
   FEATURED IMAGE - CINEMATIC STYLE
   ======================================== */
body.category article.entry .post-thumbnail,
body.archive article.entry .post-thumbnail,
body.category .entry-thumbnail,
body.archive .entry-thumbnail {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 16/10 !important;
    background: #1A1A1D !important;
    margin: 0 !important;
}

body.category article.entry .post-thumbnail img,
body.archive article.entry .post-thumbnail img,
body.category .entry-thumbnail img,
body.archive .entry-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    box-shadow: none !important;
}

body.category article.entry:hover .post-thumbnail img,
body.archive article.entry:hover .post-thumbnail img {
    transform: scale(1.08) !important;
}

/* Image overlay gradient */
body.category article.entry .post-thumbnail::after,
body.archive article.entry .post-thumbnail::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(10, 10, 11, 0.9), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

body.category article.entry:hover .post-thumbnail::after,
body.archive article.entry:hover .post-thumbnail::after {
    opacity: 1;
}

/* ========================================
   ENTRY CONTENT - TYPOGRAPHY EXCELLENCE
   ======================================== */
body.category article.entry .entry-content-wrap,
body.archive article.entry .entry-content-wrap {
    padding: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    flex-grow: 1 !important;
    background: transparent !important;
}

/* Category tag */
body.category article.entry .entry-taxonomies,
body.archive article.entry .entry-taxonomies,
body.category .entry-categories,
body.archive .entry-categories {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 4px !important;
}

body.category article.entry .entry-taxonomies a,
body.archive article.entry .entry-taxonomies a,
body.category .cat-links a,
body.archive .cat-links a {
    display: inline-block !important;
    padding: 5px 14px !important;
    background: rgba(79, 70, 229, 0.12) !important;
    border: 1px solid rgba(79, 70, 229, 0.25) !important;
    border-radius: 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #6366F1 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body.category article.entry .entry-taxonomies a:hover,
body.archive article.entry .entry-taxonomies a:hover {
    background: #4F46E5 !important;
    border-color: #4F46E5 !important;
    color: #FFFFFF !important;
}

/* Entry title */
body.category article.entry .entry-title,
body.archive article.entry .entry-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

body.category article.entry .entry-title a,
body.archive article.entry .entry-title a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

body.category article.entry:hover .entry-title a,
body.archive article.entry:hover .entry-title a {
    color: #7C3AED !important;
}

/* Entry excerpt */
body.category article.entry .entry-summary,
body.archive article.entry .entry-summary,
body.category article.entry .entry-summary p,
body.archive article.entry .entry-summary p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    color: #A1A1AA !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ========================================
   ENTRY META - MINIMAL ELEGANCE
   ======================================== */
body.category article.entry .entry-meta,
body.archive article.entry .entry-meta {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding-top: 16px !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    color: #71717A !important;
}

body.category article.entry .entry-meta a,
body.archive article.entry .entry-meta a {
    color: #A1A1AA !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

body.category article.entry .entry-meta a:hover,
body.archive article.entry .entry-meta a:hover {
    color: #7C3AED !important;
}

/* Author avatar */
body.category .entry-author-avatar,
body.archive .entry-author-avatar,
body.category .author-avatar,
body.archive .author-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

body.category .entry-author-avatar img,
body.archive .entry-author-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Date styling */
body.category .posted-on,
body.archive .posted-on,
body.category .entry-date,
body.archive .entry-date {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ========================================
   READ MORE LINK
   ======================================== */
body.category article.entry .entry-footer,
body.archive article.entry .entry-footer {
    padding-top: 12px !important;
}

body.category article.entry .entry-actions a,
body.archive article.entry .entry-actions a,
body.category .read-more,
body.archive .read-more,
body.category .more-link,
body.archive .more-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #4F46E5 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body.category article.entry .entry-actions a::after,
body.archive article.entry .entry-actions a::after {
    content: '→';
    transition: transform 0.2s ease;
}

body.category article.entry .entry-actions a:hover::after,
body.archive article.entry .entry-actions a:hover::after {
    transform: translateX(4px);
}

body.category article.entry .entry-actions a:hover,
body.archive article.entry .entry-actions a:hover {
    color: #7C3AED !important;
}

/* ========================================
   PAGINATION - PREMIUM STYLE
   ======================================== */
body.category .navigation.pagination,
body.archive .navigation.pagination,
body.category nav.pagination,
body.archive nav.pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 60px !important;
    padding-top: 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.category .page-numbers,
body.archive .page-numbers,
body.category .pagination a,
body.archive .pagination a,
body.category .pagination span,
body.archive .pagination span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #A1A1AA !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

body.category .page-numbers:hover,
body.archive .page-numbers:hover {
    background: rgba(124, 58, 237, 0.15) !important;
    border-color: #7C3AED !important;
    color: #FFFFFF !important;
}

body.category .page-numbers.current,
body.archive .page-numbers.current,
body.category .current,
body.archive .current {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #9333EA 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

body.category .page-numbers.next,
body.archive .page-numbers.next,
body.category .page-numbers.prev,
body.archive .page-numbers.prev {
    padding: 0 16px !important;
    gap: 6px !important;
}

/* Hide screen reader text visually */
body.category .page-numbers .screen-reader-text,
body.archive .page-numbers .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Fix SVG icon in pagination */
body.category .page-numbers svg,
body.archive .page-numbers svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

body.category .page-numbers.next svg,
body.archive .page-numbers.next svg {
    margin-left: 4px !important;
}

body.category .page-numbers.prev svg,
body.archive .page-numbers.prev svg {
    margin-right: 4px !important;
}

/* ========================================
   SIDEBAR - IF PRESENT
   ======================================== */
body.category .sidebar.widget-area,
body.archive .sidebar.widget-area,
body.category #secondary,
body.archive #secondary {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

body.category .widget-title,
body.archive .widget-title,
body.category .sidebar .widget-title,
body.archive .sidebar .widget-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    position: relative !important;
}

body.category .widget-title::after,
body.archive .widget-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #9333EA 100%);
}

/* ========================================
   NO RESULTS MESSAGE
   ======================================== */
body.category .no-results,
body.archive .no-results,
body.category .nothing-found,
body.archive .nothing-found {
    text-align: center !important;
    padding: 80px 24px !important;
}

body.category .no-results .page-title,
body.archive .no-results .page-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 2rem !important;
    color: #FFFFFF !important;
    margin-bottom: 16px !important;
}

body.category .no-results p,
body.archive .no-results p {
    color: #A1A1AA !important;
    font-size: 1.1rem !important;
}

/* ========================================
   RESPONSIVE OPTIMIZATIONS
   ======================================== */
@media (max-width: 768px) {
    body.archive .site-main,
    body.category .site-main {
        padding: 24px 16px 60px !important;
    }

    body.category .entry-hero,
    body.archive .entry-hero {
        padding: 40px 16px 30px !important;
    }

    body.category .archive-title,
    body.archive .archive-title,
    body.category h1.page-title,
    body.archive h1.page-title {
        font-size: 2rem !important;
    }

    body.category article.entry .entry-content-wrap,
    body.archive article.entry .entry-content-wrap {
        padding: 20px !important;
    }

    body.category article.entry .entry-title,
    body.archive article.entry .entry-title {
        font-size: 1.2rem !important;
    }

    body.category .navigation.pagination,
    body.archive .navigation.pagination {
        flex-wrap: wrap !important;
    }
}

/* ========================================
   LOADING STATE ANIMATION
   ======================================== */
@keyframes cardLoad {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

body.category article.entry,
body.archive article.entry {
    animation: cardLoad 0.6s ease forwards;
}

body.category article.entry:nth-child(1),
body.archive article.entry:nth-child(1) { animation-delay: 0.05s; }
body.category article.entry:nth-child(2),
body.archive article.entry:nth-child(2) { animation-delay: 0.1s; }
body.category article.entry:nth-child(3),
body.archive article.entry:nth-child(3) { animation-delay: 0.15s; }
body.category article.entry:nth-child(4),
body.archive article.entry:nth-child(4) { animation-delay: 0.2s; }
body.category article.entry:nth-child(5),
body.archive article.entry:nth-child(5) { animation-delay: 0.25s; }
body.category article.entry:nth-child(6),
body.archive article.entry:nth-child(6) { animation-delay: 0.3s; }

/* ========================================
   KADENCE OVERRIDE - FORCE STYLES
   ======================================== */

/* Remove content-bg background override */
body.category article.content-bg,
body.archive article.content-bg {
    background: rgba(26, 26, 29, 0.6) !important;
}

/* Force center alignment */
body.archive .loop-entry,
body.category .loop-entry {
    justify-content: center !important;
    align-items: stretch !important;
}

/* Remove default Kadence margins */
body.archive article.entry,
body.category article.entry {
    margin: 0 !important;
}

/* Ensure images don't have weird borders */
body.archive .post-thumbnail img,
body.category .post-thumbnail img {
    border: none !important;
    box-shadow: none !important;
}

/* Hide any boxed padding */
body.category article.entry .entry-content-wrap,
body.archive article.entry .entry-content-wrap {
    border: none !important;
    box-shadow: none !important;
}

/* ========================================
   PERFORMANCE - GPU ACCELERATION
   ======================================== */
body.category article.entry,
body.archive article.entry,
body.category .post-thumbnail img,
body.archive .post-thumbnail img {
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ========================================
   EXTRA: HIDE SIDEBAR FOR FULL-WIDTH LOOK
   ======================================== */
body.category.has-sidebar .content-container,
body.archive.has-sidebar .content-container {
    display: block !important;
}

body.category.has-sidebar #secondary,
body.archive.has-sidebar #secondary {
    display: none !important;
}

body.category.has-sidebar .site-main,
body.archive.has-sidebar .site-main {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}