/* Extracted from header-custom.php */
:root { 
            --font-geist: 'Geist', sans-serif;
            --font-inter: 'Inter', sans-serif;
            --surface: #0f131d;
            --surface-container-lowest: #0a0e18;
            --surface-container-low: #171b26;
            --surface-container: #1c1f2a;
            --surface-container-high: #262a35;
            --on-surface: #dfe2f1;
            --on-surface-variant: #bdc8d1;
            --outline: #87929a;
            --outline-variant: #3e484f;
            --primary: #8ed5ff;
            --on-primary: #00354a;
            --primary-container: #38bdf8;
            --on-primary-container: #004965;
            --success: #10B981;
            --error: #EF4444;
            --warning: #F59E0B;
        }
        body { background-color: var(--surface) !important; color: var(--on-surface-variant) !important; font-family: var(--font-inter); margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; line-height:1.6;}
        h1, h2, h3, h4, h5, h6 { font-family: var(--font-geist); color: var(--on-surface); margin-top:0;}
        
        /* HEADER STYLING */
        .global-header { background: rgba(10, 14, 24, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--surface-container-high); position: sticky; top: 0; z-index: 100; padding: 15px 40px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 30px rgba(0,0,0,0.5);}
        .logo-area { display: flex; align-items: center; font-family: var(--font-geist); font-weight: 800; font-size: 1.5rem; color: #fff; text-decoration: none; letter-spacing: -0.5px;}
        .logo-area svg { width: 35px; height: 35px; margin-right: 12px; }
        
        /* MEGA MENU STYLING */
        .main-nav-container { display: flex; align-items: center; }
        .pcfitcheck-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; font-family: var(--font-geist); font-weight: 500;}
        .pcfitcheck-menu li { margin-left: 20px; position: relative; }
        .pcfitcheck-menu a { color: var(--on-surface-variant); text-decoration: none; font-size: 0.95rem; transition: color 0.2s; padding: 5px 0;}
        .pcfitcheck-menu a:hover { color: var(--primary-container); }
        .pcfitcheck-menu .current-menu-item > a { color: var(--primary); }
        
        /* SEARCH BAR */
        .header-search { display: flex; margin-left: 30px; font-family: var(--font-inter);}
        .header-search input { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); padding: 8px 15px; border-radius: 6px 0 0 6px; color: #fff; font-family: var(--font-inter); outline: none; transition: border-color 0.2s;}
        .header-search input:focus { border-color: var(--primary-container); }
        .header-search button { background: var(--primary-container); color: var(--on-primary-container); border: none; padding: 8px 15px; border-radius: 0 6px 6px 0; font-weight: 600; cursor: pointer; transition: opacity 0.2s;}
        .header-search button:hover { opacity:0.9; }
        
        /* GLOBAL UTILITIES */
        .main-content { flex-grow: 1; }
        .ad-placeholder { width: 100%; min-height: 90px; background: var(--surface-container-lowest); border: 1px dashed var(--outline-variant); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--outline); font-size: 0.8rem; font-family: var(--font-geist); letter-spacing: 1px;}

/* Extracted from header-custom.php */
.pfc-breadcrumbs { max-width: 1280px; margin: 20px auto 0; padding: 0 24px; font-size: 0.85rem; font-family: var(--font-geist); color: var(--outline); }
        .pfc-breadcrumbs a { color: var(--primary); text-decoration: none; font-weight: 500; }
        .pfc-breadcrumbs a:hover { text-decoration: underline; }
        .pfc-breadcrumbs .bc-sep { margin: 0 8px; color: var(--outline-variant); }
        .pfc-breadcrumbs .bc-current { color: var(--on-surface-variant); }

/* Extracted from footer-custom.php */
.global-footer { background: var(--surface-container-lowest); border-top: 1px solid var(--surface-container-high); padding: 40px; text-align: center; margin-top: 80px; font-family: var(--font-inter);}
        .footer-links { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; flex-wrap: wrap; }
        .footer-links a { color: var(--on-surface-variant); text-decoration: none; font-size: 0.9rem; font-family: var(--font-geist);}
        .footer-links a:hover { color: var(--primary-container); }
        .footer-copyright { color: var(--outline); font-size: 0.85rem; }

/* Extracted from single-compatibility.php */
.comp-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
        
        /* HEADER STATUS */
        .status-header { text-align: center; margin: 40px 0 60px; }
        .status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 50px; font-family: var(--font-geist); font-weight: 700; font-size: 1rem; letter-spacing: 0.05em; margin-bottom: 20px;}
        .status-fit { background: rgba(16, 185, 129, 0.15); color: var(--success); border: 1px solid var(--success); box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);}
        .status-fail { background: rgba(239, 68, 68, 0.15); color: var(--error); border: 1px solid var(--error); box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);}
        .status-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; }
        .status-sub { color: var(--on-surface-variant); font-size: 1.1rem; max-width: 600px; margin: 0 auto;}
        .status-sub strong { color: var(--primary-container); }
        
        /* HARDWARE CARDS */
        .hardware-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px; }
        .hw-card { background: var(--surface-container); border: 1px solid var(--surface-container-high); border-radius: 12px; display: flex; padding: 24px; gap: 24px; align-items: center;}
        .hw-img { width: 120px; height: 120px; background: var(--surface-container-lowest); border: 1px solid var(--surface-container-high); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--primary-container);}
        .hw-info { flex-grow: 1; }
        .hw-type { font-family: var(--font-geist); font-size: 0.75rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;}
        .hw-name { font-size: 1.25rem; font-weight: 600; margin-bottom: 15px; color: var(--on-surface); line-height: 1.3; min-height: 52px;}
        .hw-specs { display: flex; gap: 20px; margin-bottom: 20px;}
        .hw-spec { display: flex; flex-direction: column; }
        .hw-spec-label { font-family: var(--font-geist); font-size: 0.75rem; color: var(--outline); text-transform: uppercase;}
        .hw-spec-value { font-weight: 700; font-size: 1rem; color: var(--on-surface-variant);}
        .aff-card-btn { display: inline-block; padding: 10px 18px; background: #f59e0b; color: #fff; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 0.85rem; font-family: var(--font-geist); transition: opacity 0.2s;}
        .aff-card-btn:hover { opacity: 0.9; }
        
        /* TECHNICAL AUDIT */
        .audit-section { background: var(--surface-container-lowest); border: 1px solid var(--surface-container-high); border-radius: 16px; padding: 40px; margin-bottom: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px;}
        .audit-header { display: flex; align-items: center; gap: 10px; font-family: var(--font-geist); font-size: 1.25rem; font-weight: 600; margin-bottom: 30px; color: var(--primary-container);}
        
        .progress-container { margin-bottom: 30px; }
        .progress-labels { display: flex; justify-content: space-between; font-family: var(--font-geist); font-weight: 600; font-size: 0.85rem; margin-bottom: 10px;}
        .progress-track { width: 100%; height: 8px; background: var(--surface-container-high); border-radius: 4px; overflow: hidden; position: relative;}
        .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary-container), <?php echo $clearance_color; ?>); width: 0%; transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); border-radius: 4px;}
        .progress-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--outline); margin-top: 8px; font-family: var(--font-geist);}
        
        .tech-description { background: var(--surface-container); padding: 30px; border-radius: 12px; border: 1px solid var(--surface-container-high); font-size: 1.05rem;}
        .tech-description h2, .tech-description h3 { margin-top: 20px; font-size: 1.25rem; color: var(--on-surface); }
        .tech-description p { margin-bottom: 20px; }
        
        @media (max-width: 900px) { .hardware-grid, .audit-section { grid-template-columns: 1fr; gap: 30px;} }
        @media (max-width: 600px) { .hw-card { flex-direction: column; text-align: center; } .hw-specs { justify-content: center; } }

/* Extracted from search.php */
.tax-header { text-align: center; padding: 60px 20px; margin-bottom: 40px;}
    .tax-header h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; color: var(--on-surface); }
    .grid-container { max-width: 1280px; margin: 0 auto 60px; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
    .grid-item { background: var(--surface-container); border: 1px solid var(--surface-container-high); border-radius: 12px; padding: 30px; text-decoration: none; transition: transform 0.2s, border-color 0.2s; display:block;}
    .grid-item:hover { transform: translateY(-5px); border-color: var(--primary); }
    .grid-item h3 { color: var(--on-surface); font-size: 1.3rem; margin: 0 0 15px 0; line-height: 1.4;}
    .view-btn { color: var(--primary-container); font-weight: 600; font-size: 0.9rem; font-family: var(--font-geist); text-transform: uppercase; letter-spacing: 1px;}

/* Extracted from single-post.php */
.post-hero { width: 100%; min-height: 400px; background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; padding-bottom: 60px; margin-bottom: 60px;}
    .post-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--surface) 0%, transparent 100%); }
    .hero-content { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 24px; width: 100%; text-align: center; }
    .hero-cat { font-family: var(--font-geist); color: var(--primary-container); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 15px;}
    .hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 20px; letter-spacing: -0.02em;}
    .hero-meta { color: var(--on-surface-variant); font-family: var(--font-geist); font-size: 0.95rem; }
    
    .post-layout { max-width: 1400px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 250px 1fr 320px; gap: 60px; }
    .post-content { font-size: 1.15rem; line-height: 1.8; color: var(--on-surface-variant); max-width: 100%; margin: 0;}
    .post-content h2 { font-size: 2rem; color: var(--on-surface); margin-top: 50px; margin-bottom: 20px; border-bottom: 1px solid var(--surface-container-high); padding-bottom: 10px;}
    .post-content h3 { font-size: 1.5rem; color: var(--on-surface); margin-top: 40px;}
    .post-content p { margin-bottom: 24px; }
    .post-content a { color: var(--primary-container); text-decoration: none; border-bottom: 1px dashed rgba(56,189,248,0.5); transition: border-color 0.2s;}
    .post-content a:hover { border-bottom-style: solid; }
    
    /* STICKY TOC */
    .toc-sidebar { position: sticky; top: 100px; height: fit-content; font-family: var(--font-geist); }
    .toc-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--outline); margin-bottom: 15px; font-weight: 600;}
    .toc-nav { display: flex; flex-direction: column; gap: 10px; border-left: 2px solid var(--surface-container-high); padding-left: 15px;}
    .toc-nav a { color: var(--on-surface-variant); text-decoration: none; font-size: 0.9rem; transition: color 0.2s, border-left-color 0.2s; border:none; padding-left: 0; margin-left: 0; position: relative;}
    .toc-nav a.toc-indent { padding-left: 12px; font-size: 0.83rem; color: var(--outline); }
    .toc-nav a:hover { color: var(--primary-container); border:none;}
    .toc-nav a.active { color: var(--primary); font-weight: 600; border:none;}
    
    .right-sidebar { position: sticky; top: 100px; height: fit-content; }
    
    @media (max-width: 1200px) { .post-layout { grid-template-columns: 1fr 300px; } .toc-sidebar { display: none; } }
    @media (max-width: 800px) { .post-layout { grid-template-columns: 1fr; } .right-sidebar { display: none; } .hero-title { font-size: 2.5rem; } }

/* Extracted from archive-post.php */
.blog-container { max-width: 1280px; margin: 60px auto; padding: 0 24px; display: grid; grid-template-columns: 3fr 1fr; gap: 40px; }
    .blog-hero { grid-column: 1 / -1; margin-bottom: 20px; }
    .blog-hero h1 { font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; }
    .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
    
    .article-card { background: var(--surface-container); border: 1px solid var(--surface-container-high); border-radius: 12px; overflow: hidden; transition: transform 0.2s, border-color 0.2s; display: flex; flex-direction: column; text-decoration: none;}
    .article-card:hover { transform: translateY(-4px); border-color: var(--primary); }
    .article-thumb { width: 100%; height: 200px; background: var(--surface-container-high); object-fit: cover; }
    .article-content { padding: 24px; display: flex; flex-direction: column; flex-grow: 1;}
    .article-tag { font-family: var(--font-geist); font-size: 0.75rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;}
    .article-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 10px; color: var(--on-surface); line-height:1.4;}
    .article-excerpt { font-size: 0.95rem; color: var(--on-surface-variant); margin-bottom: 20px; flex-grow: 1;}
    .article-meta { font-family: var(--font-geist); font-size: 0.8rem; color: var(--outline); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--surface-container-high); padding-top: 15px;}
    
    .sidebar { background: var(--surface-container-lowest); border: 1px solid var(--surface-container-high); border-radius: 12px; padding: 24px; height: fit-content; }
    .sidebar-widget { margin-bottom: 40px; }
    .widget-title { font-size: 1.1rem; border-bottom: 1px solid var(--surface-container-high); padding-bottom: 10px; margin-bottom: 20px; }
    .sidebar-widget ul { list-style: none; padding: 0; margin: 0; }
    .sidebar-widget li { margin-bottom: 10px; }
    .sidebar-widget a { color: var(--on-surface-variant); text-decoration: none; transition: color 0.2s; }
    .sidebar-widget a:hover { color: var(--primary); }
    
    @media (max-width: 900px) { .blog-container { grid-template-columns: 1fr; } }

/* Extracted from page.php */
.page-container { max-width: 900px; margin: 60px auto; padding: 40px; background: var(--surface-container); border: 1px solid var(--surface-container-high); border-radius: 16px; }
    .page-title { font-size: 2.5rem; font-weight: 800; margin-top: 0; margin-bottom: 30px; border-bottom: 1px solid var(--surface-container-high); padding-bottom: 20px; color: var(--on-surface); }
    .page-content { line-height: 1.8; color: var(--on-surface-variant); font-size: 1.1rem;}
    .page-content h2, .page-content h3 { color: var(--on-surface); margin-top: 40px; margin-bottom: 15px; }
    .page-content a { color: var(--primary-container); text-decoration: none; }
    .page-content a:hover { text-decoration: underline; }

/* Extracted from pcfitcheck-site-engine.php */
.affiliate-sc-card { display: flex; align-items: center; background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: 12px; padding: 20px; gap: 20px; margin: 30px 0; transition: transform 0.2s, border-color 0.2s;}
                .affiliate-sc-card:hover { transform: translateY(-3px); border-color: var(--primary); }
                .aff-sc-img { width: 100px; height: 100px; object-fit: contain; background: #fff; border-radius: 8px; padding: 5px;}
                .aff-sc-content { flex-grow: 1; }
                .aff-sc-title { margin: 0 0 5px 0; font-family: var(--font-geist); color: var(--on-surface); font-size: 1.1rem;}
                .aff-sc-price { color: var(--primary); font-weight: 700; font-size: 1.2rem;}
                .aff-sc-btn { background: var(--primary-container); color: var(--on-primary-container); text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-family: var(--font-geist); text-align:center; transition: opacity 0.2s; white-space: nowrap;}
                .aff-sc-btn:hover { opacity: 0.9; }
                @media (max-width: 600px) { .affiliate-sc-card { flex-direction: column; text-align: center; } .aff-sc-btn { width: 100%; box-sizing:border-box;} }
/* Front Page Specific Styles */
.hero-section {
    min-height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    background: radial-gradient(circle at 50% 50%, rgba(74, 142, 255, 0.1) 0%, transparent 70%);
}
.hero-content {
    max-width: 800px;
    margin: 0 auto;
}
.hero-content h1 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: var(--on-surface);
}
.hero-subtitle {
    font-size: 1.1rem;
    color: var(--on-surface-variant);
    margin-bottom: 40px;
    line-height: 1.6;
}
.hero-search-wrapper {
    background: rgba(74, 142, 255, 0.1);
    border: 1px solid rgba(173, 199, 255, 0.2);
    border-radius: 12px;
    padding: 8px;
    backdrop-filter: blur(8px);
    max-width: 600px;
    margin: 0 auto;
}
.hero-search-inner {
    display: flex;
    gap: 10px;
}
.hero-search-input-group {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    border-radius: 8px;
    padding: 0 15px;
    transition: border-color 0.2s;
}
.hero-search-input-group:focus-within {
    border-color: var(--primary);
}
.search-icon {
    color: var(--primary);
    margin-right: 10px;
}
.hero-search-input {
    background: transparent;
    border: none;
    color: var(--on-surface);
    width: 100%;
    padding: 15px 0;
    outline: none;
    font-family: var(--font-inter);
}
.hero-search-btn {
    background: var(--primary);
    color: var(--on-primary-container);
    border: none;
    border-radius: 8px;
    padding: 0 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.hero-search-btn:hover {
    opacity: 0.9;
}

.hp-section {
    max-width: 1280px;
    margin: 0 auto 60px;
    padding: 0 24px;
}
.hp-section-header {
    margin-bottom: 40px;
}
.hp-section-header h2 {
    font-size: 1.8rem;
    color: var(--on-surface);
    margin-bottom: 5px;
}
.hp-section-header p {
    color: var(--on-surface-variant);
}

.category-card {
    display: flex;
    flex-direction: column;
}
.category-card h3 {
    margin-top: 10px;
    margin-bottom: 5px;
}
.cat-desc {
    color: var(--outline);
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.blog-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.blog-img-wrapper {
    height: 200px;
    position: relative;
    background: var(--surface-container-highest);
}
.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.blog-card-content h3 a {
    color: var(--on-surface);
    text-decoration: none;
    transition: color 0.2s;
}
.blog-card-content h3 a:hover {
    color: var(--primary);
}
.blog-excerpt {
    color: var(--on-surface-variant);
    font-size: 0.9rem;
    margin-bottom: 20px;
    flex-grow: 1;
}
.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.blog-date {
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .hero-search-inner {
        flex-direction: column;
    }
    .hero-search-btn {
        padding: 15px;
        justify-content: center;
    }
    .hero-content h1 {
        font-size: 2.2rem;
    }
}
/* Pagination Styling */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px 0 60px 0;
    flex-wrap: wrap;
}
.pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background: var(--surface-container);
    border: 1px solid var(--surface-container-high);
    border-radius: 8px;
    color: var(--on-surface-variant);
    text-decoration: none;
    font-family: var(--font-geist);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}
.pagination a.page-numbers:hover {
    background: var(--surface-container-high);
    color: var(--on-surface);
    border-color: var(--outline);
    transform: translateY(-2px);
}
.pagination .current {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}
.pagination .dots {
    background: transparent;
    border: none;
    color: var(--outline);
}

/* PCFitCheck Standard Component Table */
.pfc-table-wrapper {
    overflow-x: auto;
    margin: 40px 0;
    border-radius: 12px;
    border: 1px solid var(--surface-container-high);
    background: var(--surface-container);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.pfc-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-family: var(--font-inter); 
    text-align: left;
    min-width: 600px;
}
.pfc-table th { 
    background: var(--surface-container-high); 
    color: var(--on-surface); 
    padding: 18px 24px; 
    font-weight: 700; 
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--outline); 
}
.pfc-table td { 
    padding: 18px 24px; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    color: var(--on-surface-variant); 
    vertical-align: middle;
}
.pfc-table tr:last-child td { border-bottom: none; }
.pfc-table tr:hover td { background: rgba(255,255,255,0.02); }

.pfc-btn { 
    display: inline-flex; 
    align-items: center;
    gap: 6px;
    background: var(--primary); 
    color: #020617 !important; /* Force high contrast dark text */
    padding: 10px 20px; 
    border-radius: 8px; 
    text-decoration: none !important; 
    font-weight: 700; 
    font-family: var(--font-inter);
    font-size: 0.9rem; 
    white-space: nowrap;
    transition: all 0.2s ease;
    border: none;
}
.pfc-btn:hover { 
    background: #fff !important; /* High contrast hover */
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
}