/*
 * Production Fixes for NetworkUstad
 * Resolves CSS conflicts and loading issues between localhost and production
 * Version: 1.0.0
 */

/* ================================
   CRITICAL CSS FIXES - HIGH PRIORITY
   ================================ */

/* Reset any conflicting styles globally */
* {
    box-sizing: border-box !important;
}

/* Fix header positioning issues - PRODUCTION PRIORITY */
.site-header,
.ultra-modern-header,
.header,
#masthead,
.main-header-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99998 !important; /* Just below admin bar (99999) but above everything else */
    background: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    height: 80px !important;
}

/* Admin bar compatibility - header should be BELOW admin bar */
.admin-bar .site-header,
.admin-bar .ultra-modern-header,
.admin-bar .header,
.admin-bar #masthead,
.admin-bar .main-header-bar {
    top: 32px !important; /* Position header below 32px admin bar */
    z-index: 99998 !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header,
    .admin-bar .ultra-modern-header,
    .admin-bar .header,
    .admin-bar #masthead,
    .admin-bar .main-header-bar {
        top: 46px !important; /* Position header below 46px mobile admin bar */
    }
}

/* CRITICAL: Fix body padding for fixed header - FORCE OVERRIDE */
body,
body.home,
body.page,
body.single,
body.archive,
body.category {
    padding-top: 80px !important;
    margin-top: 0 !important;
}

/* Admin bar present - add admin bar height + header height */
.admin-bar body,
.admin-bar body.home,
.admin-bar body.page,
.admin-bar body.single,
.admin-bar body.archive,
.admin-bar body.category {
    padding-top: 112px !important; /* 32px admin bar + 80px header */
}

@media screen and (max-width: 782px) {
    body,
    body.home,
    body.page,
    body.single,
    body.archive,
    body.category {
        padding-top: 80px !important;
    }
    
    .admin-bar body,
    .admin-bar body.home,
    .admin-bar body.page,
    .admin-bar body.single,
    .admin-bar body.archive,
    .admin-bar body.category {
        padding-top: 126px !important; /* 46px mobile admin bar + 80px header */
    }
}

/* Additional Astra-specific header fixes */
.ast-header-break-point .ast-header-custom-item,
.ast-header-break-point .ast-header-html,
.ast-header-custom-item-outside .ast-header-custom-item {
    z-index: 99997 !important;
}

.ast-desktop .ast-header-break-point .ast-header-custom-item-inside,
.ast-desktop .ast-header-break-point .ast-header-html-inside {
    z-index: 99997 !important;
}

/* Ensure header navigation is properly positioned */
.main-navigation,
.ast-main-header-wrap,
.ast-header-wrap {
    z-index: 99997 !important;
}

/* Fix dropdown menus z-index */
.main-navigation ul ul,
.ast-header-navigation ul ul,
.navigation ul ul {
    z-index: 99996 !important;
}

/* Force header to be visible and properly positioned */
.site-header,
.ultra-modern-header,
.header,
#masthead,
.main-header-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Prevent header from being pushed down by other elements */
.site-header *,
.ultra-modern-header *,
.header *,
#masthead *,
.main-header-bar * {
    position: relative !important;
}

/* Ensure header content is properly aligned */
.site-header .ast-container,
.ultra-modern-header .ast-container,
.header .ast-container,
#masthead .ast-container,
.main-header-bar .ast-container {
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* CRITICAL: Prevent content from hiding behind fixed header */
#content,
#primary,
.site-content,
.ast-content-layout,
.site-main,
.ast-container,
.entry-content,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-plain-container .site-main > .ast-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix specific page content areas */
.homepage-section,
.tools-page-wrapper,
.page-content,
.post-content,
.archive-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure page headers don't overlap */
.page-header,
.entry-header,
.archive-header,
.ast-archive-description,
.hero-section,
.page-title-bar {
    margin-top: 0 !important;
    padding-top: 30px !important;
}

/* Fix homepage specific sections */
.home .site-main,
.home .ast-container,
.home .entry-content,
.front-page .site-main,
.front-page .ast-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Tools page specific fixes */
.page-template-page-tools .site-main,
.page-template-page-tools .ast-container,
.tools-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Astra theme wrapper fixes */
#page,
#wrapper,
.ast-page-builder-template,
.ast-separate-container,
.ast-plain-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Force reset any negative margins */
.site-main > *:first-child,
.ast-container > *:first-child,
.entry-content > *:first-child,
.homepage-section > *:first-child {
    margin-top: 0 !important;
}

/* Specific Astra layout fixes */
.ast-separate-container .site-main,
.ast-separate-container .ast-container,
.ast-plain-container .site-main,
.ast-plain-container .ast-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ================================
   LAYOUT FIXES
   ================================ */

/* Fix container widths */
.container,
.ast-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Fix grid layouts */
.articles-grid,
.tools-grid,
.trend-stats-grid {
    display: grid !important;
    gap: 20px !important;
}

/* Fix flexbox layouts */
.flex,
.d-flex,
.trend-stats-title {
    display: flex !important;
    align-items: center !important;
}

/* ================================
   SINGLE PAGE FIXES
   ================================ */

/* Force single trend stats to display correctly */
.single .single-trend-stats,
.single-post .single-trend-stats {
    margin: 30px 0 !important;
    padding: 25px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.single .single-trend-stats .trend-stats-grid,
.single-post .single-trend-stats .trend-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

.single .single-trend-stats .trend-stat-item,
.single-post .single-trend-stats .trend-stat-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 20px !important;
    background: white !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.3s ease !important;
}

/* ================================
   TOOLS PAGE FIXES
   ================================ */

/* Fix tools page wrapper */
.tools-page-wrapper {
    min-height: 100vh !important;
    padding-top: 80px !important;
}

.admin-bar .tools-page-wrapper {
    padding-top: 112px !important;
}

/* Fix tools grid */
.tools-grid .tool-card {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
}

/* ================================
   NAVIGATION FIXES
   ================================ */

/* Fix navigation menus */
.main-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-navigation li {
    position: relative !important;
}

/* Fix footer navigation */
.footer-navigation ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ================================
   RESPONSIVE FIXES
   ================================ */

@media (max-width: 768px) {
    body {
        padding-top: 70px !important;
    }
    
    .admin-bar body {
        padding-top: 116px !important;
    }
    
    .site-header,
    .ultra-modern-header {
        height: 70px !important;
    }
    
    .container,
    .ast-container {
        padding: 0 15px !important;
    }
    
    .articles-grid,
    .tools-grid {
        grid-template-columns: 1fr !important;
    }
    
    .single .single-trend-stats .trend-stats-grid,
    .single-post .single-trend-stats .trend-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ================================
   CRITICAL COMPONENT FIXES
   ================================ */

/* Fix featured images */
.tech-article-featured-image img,
.featured-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

/* Fix buttons and links */
.btn,
.button,
.wp-block-button__link {
    display: inline-block !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Fix forms */
input,
textarea,
select {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
}

/* ================================
   PERFORMANCE OPTIMIZATIONS
   ================================ */

/* Reduce repaints and reflows */
.tool-card,
.trend-stat-item,
.article-card {
    will-change: transform !important;
    backface-visibility: hidden !important;
}

/* Optimize animations */
* {
    transition-duration: 0.3s !important;
    transition-timing-function: ease !important;
}

/* ================================
   DARK MODE COMPATIBILITY - HIGH PRIORITY
   ================================ */

/* Dark mode toggle button fixes */
.dark-mode-toggle {
    background: transparent !important;
    border: none !important;
    color: #475569 !important;
    padding: 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.dark-mode-toggle:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #2563eb !important;
}

/* Dark mode toggle icons */
.dark-mode-toggle .sun-icon,
.dark-mode-toggle .moon-icon {
    position: absolute !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
}

.dark-mode-toggle .moon-icon {
    opacity: 0 !important;
    transform: rotate(90deg) scale(0) !important;
}

body.dark-mode .dark-mode-toggle .sun-icon {
    opacity: 0 !important;
    transform: rotate(90deg) scale(0) !important;
}

body.dark-mode .dark-mode-toggle .moon-icon {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
}

body.dark-mode .dark-mode-toggle {
    color: #cbd5e1 !important;
}

body.dark-mode .dark-mode-toggle:hover {
    background: rgba(96, 165, 250, 0.1) !important;
    color: #60a5fa !important;
}

/* Dark mode global styles */
body.dark-mode {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

body.dark-mode .site-header,
body.dark-mode .ultra-modern-header,
body.dark-mode .header,
body.dark-mode #masthead,
body.dark-mode .main-header-bar {
    background: rgba(30, 41, 59, 0.95) !important;
    border-bottom: 1px solid #334155 !important;
    backdrop-filter: blur(10px) !important;
}

body.dark-mode .single .single-trend-stats,
body.dark-mode .single-post .single-trend-stats {
    background: linear-gradient(135deg, #111827 0%, #0f172a 100%) !important;
    border-color: #1f2937 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .trend-stat-item,
body.dark-mode .tool-card {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .trend-stat-item:hover,
body.dark-mode .tool-card:hover {
    background: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Dark mode navigation */
body.dark-mode .main-navigation .nav-menu a,
body.dark-mode .main-navigation a {
    color: #cbd5e1 !important;
}

body.dark-mode .main-navigation .nav-menu a:hover,
body.dark-mode .main-navigation a:hover {
    color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.1) !important;
}

/* Dark mode content areas */
body.dark-mode .ast-container,
body.dark-mode .site-main,
body.dark-mode .entry-content {
    color: #e2e8f0 !important;
}

body.dark-mode .page-header,
body.dark-mode .entry-header,
body.dark-mode .archive-header {
    color: #f1f5f9 !important;
}

/* Dark mode article cards fixes - ULTRA DARK CARDS - MAXIMUM SPECIFICITY */
body.dark-mode .article-card,
body.dark-mode .post-card,
body.dark-mode .blog-card,
body.dark-mode .entry-summary,
body.dark-mode .ast-article-post,
body.dark-mode article.article-card,
body.dark-mode article.post,
body.dark-mode article[class*="post-"],
body.dark-mode .articles-grid article,
body.dark-mode .articles-grid .article-card,
body.dark-mode .homepage-section .article-card,
body.dark-mode .hentry,
body.dark-mode .ast-col-md-12 article,
body.dark-mode .ast-separate-posts article,
body.dark-mode.dark-mode .article-card,
body.dark-mode.dark-mode .homepage-section .article-card {
    background: #111827 !important;
    background-color: #111827 !important;
    background-image: none !important;
    border: 1px solid #1f2937 !important;
    border-color: #1f2937 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .article-card:hover,
body.dark-mode .post-card:hover,
body.dark-mode .blog-card:hover,
body.dark-mode article.article-card:hover,
body.dark-mode article.post:hover,
body.dark-mode .articles-grid article:hover,
body.dark-mode .homepage-section .article-card:hover,
body.dark-mode.dark-mode .article-card:hover,
body.dark-mode.dark-mode .homepage-section .article-card:hover {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    background-image: none !important;
    border-color: #374151 !important;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Force article card child elements to have transparent backgrounds */
body.dark-mode .article-card-content,
body.dark-mode .article-card-image,
body.dark-mode .article-card-meta,
body.dark-mode .article-card-footer,
body.dark-mode .entry-content-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

/* Dark mode article card content - TITLES - BRIGHT WHITE */
body.dark-mode .article-card .entry-title,
body.dark-mode .article-card .post-title,
body.dark-mode .article-card h2,
body.dark-mode .article-card h3,
body.dark-mode .article-card-title,
body.dark-mode .article-card-title a,
body.dark-mode .post-card .entry-title,
body.dark-mode .blog-card .entry-title,
body.dark-mode article h2,
body.dark-mode article h2 a,
body.dark-mode .articles-grid article h2,
body.dark-mode .articles-grid article h2 a,
body.dark-mode .homepage-section .article-card-title,
body.dark-mode .homepage-section .article-card-title a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Dark mode article card content - EXCERPTS */
body.dark-mode .article-card .entry-excerpt,
body.dark-mode .article-card .excerpt,
body.dark-mode .article-card .post-excerpt,
body.dark-mode .article-card p,
body.dark-mode .article-card-excerpt,
body.dark-mode .post-card .entry-excerpt,
body.dark-mode .blog-card .entry-excerpt,
body.dark-mode .articles-grid article p,
body.dark-mode article .entry-content p {
    color: #cbd5e1 !important;
}

/* Dark mode article meta information */
body.dark-mode .article-card .entry-meta,
body.dark-mode .article-card .post-meta,
body.dark-mode .article-card .meta-info,
body.dark-mode .article-card-meta,
body.dark-mode .article-card-footer,
body.dark-mode .article-card-date,
body.dark-mode .article-card-author,
body.dark-mode .article-card-category,
body.dark-mode .post-card .entry-meta,
body.dark-mode .blog-card .entry-meta,
body.dark-mode .articles-grid article .entry-meta {
    color: #94a3b8 !important;
}

body.dark-mode .article-card .entry-meta a,
body.dark-mode .article-card .post-meta a,
body.dark-mode .article-card-meta a,
body.dark-mode .article-card-footer a,
body.dark-mode .article-card-category,
body.dark-mode .post-card .entry-meta a,
body.dark-mode .articles-grid article a {
    color: #60a5fa !important;
}

body.dark-mode .article-card .entry-meta a:hover,
body.dark-mode .article-card-meta a:hover,
body.dark-mode .article-card-category:hover,
body.dark-mode .post-card .entry-meta a:hover {
    color: #93c5fd !important;
}

/* Dark mode read more buttons - DARKER */
body.dark-mode .article-card .read-more,
body.dark-mode .article-card .more-link,
body.dark-mode .post-card .read-more,
body.dark-mode .blog-card .read-more {
    background: #1f2937 !important;
    color: #e5e7eb !important;
    border: 1px solid #374151 !important;
}

body.dark-mode .article-card .read-more:hover,
body.dark-mode .article-card .more-link:hover,
body.dark-mode .post-card .read-more:hover {
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

/* Dark mode article grids */
body.dark-mode .articles-grid,
body.dark-mode .blog-grid,
body.dark-mode .posts-grid {
    background: transparent !important;
}

/* Dark mode homepage sections */
body.dark-mode .homepage-section {
    background: transparent !important;
    color: #e2e8f0 !important;
}

body.dark-mode .homepage-section h2,
body.dark-mode .homepage-section h3 {
    color: #f1f5f9 !important;
}

/* ================================
   ACHIEVEMENT BADGE TOOLTIPS
   ================================ */

/* Badge tooltip styling */
.badge-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: #1e293b;
    color: #f1f5f9;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    display: none;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1000;
    min-width: 180px;
    text-align: center;
    margin-bottom: 10px;
}

.badge-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e293b;
}

.badge-tooltip strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #ffffff;
}

.badge-tooltip span {
    display: block;
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 0.25rem;
}

.badge-tooltip small {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

/* Unlocked badge tooltip - green accent */
.badge.unlocked .badge-tooltip strong {
    color: #10b981;
}

.badge.unlocked .badge-tooltip span {
    color: #34d399;
}

/* Locked badge tooltip - orange accent */
.badge.locked .badge-tooltip strong {
    color: #f59e0b;
}

/* Badge positioning */
.badge {
    position: relative;
}

/* Dark mode tooltip */
body.dark-mode .badge-tooltip {
    background: #0f172a;
    border: 1px solid #1e293b;
}

body.dark-mode .badge-tooltip::after {
    border-top-color: #0f172a;
}

/* ================================
   PRINT STYLES
   ================================ */

@media print {
    .site-header,
    .ultra-modern-header,
    .footer,
    .navigation,
    .sidebar {
        display: none !important;
    }
    
    body {
        padding-top: 0 !important;
    }
    
    .single-trend-stats,
    .trend-stat-item {
        border: 1px solid #000 !important;
        background: white !important;
    }
}