/**
 * Additional Styles for PC Finders Theme
 * Single PC Page and Component Styles
 */

/* ========================================
   Single PC Page Layout
   ======================================== */
.pcf-single-content-wrapper {
    background: var(--pcf-gray-50);
    padding: var(--pcf-spacing-2xl) 0;
}

.pcf-single-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--pcf-spacing-2xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .pcf-single-grid {
        grid-template-columns: 1fr;
    }
    
    .pcf-single-sidebar {
        order: -1;
    }
}

.pcf-single-main > section {
    margin-bottom: var(--pcf-spacing-2xl);
}

.pcf-single-main > section:last-child {
    margin-bottom: 0;
}

/* ========================================
   Table of Contents (Sidebar)
   ======================================== */
.pcf-toc {
    background: white;
    border-radius: var(--pcf-radius-xl);
    padding: var(--pcf-spacing-lg);
    box-shadow: var(--pcf-shadow-sm);
    margin-top: var(--pcf-spacing-lg);
}

.pcf-toc h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pcf-gray-900);
    margin-bottom: var(--pcf-spacing-md);
    padding-bottom: var(--pcf-spacing-sm);
    border-bottom: 2px solid var(--pcf-primary);
}

.pcf-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pcf-toc li {
    margin-bottom: var(--pcf-spacing-sm);
}

.pcf-toc a {
    color: var(--pcf-gray-600);
    text-decoration: none;
    font-size: 0.9375rem;
    display: block;
    padding: var(--pcf-spacing-xs) 0;
    border-left: 2px solid transparent;
    padding-left: var(--pcf-spacing-md);
    transition: all var(--pcf-transition-fast);
}

.pcf-toc a:hover,
.pcf-toc a.active {
    color: var(--pcf-primary);
    border-left-color: var(--pcf-primary);
    background: var(--pcf-gray-50);
}

/* ========================================
   Conclusion Block Extended Styles
   ======================================== */
.pcf-keypoints,
.pcf-recommend,
.pcf-compromise {
    background: white;
    border-radius: var(--pcf-radius-lg);
    padding: var(--pcf-spacing-lg);
    margin-top: var(--pcf-spacing-lg);
}

.pcf-keypoints h4,
.pcf-recommend h4,
.pcf-compromise h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pcf-gray-800);
    margin-bottom: var(--pcf-spacing-md);
}

.pcf-keypoints ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pcf-keypoints li {
    position: relative;
    padding-left: var(--pcf-spacing-xl);
    margin-bottom: var(--pcf-spacing-sm);
    color: var(--pcf-gray-700);
}

.pcf-keypoints li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--pcf-primary);
    font-weight: bold;
}

/* ========================================
   Spec Table Extended Styles
   ======================================== */
.pcf-spec-summary {
    padding: var(--pcf-spacing-lg);
    background: var(--pcf-gray-50);
    border-bottom: 1px solid var(--pcf-gray-200);
}

.pcf-spec-note {
    padding: var(--pcf-spacing-md) var(--pcf-spacing-lg);
    background: var(--pcf-gray-50);
    font-size: 0.875rem;
    color: var(--pcf-gray-600);
    border-top: 1px solid var(--pcf-gray-200);
}

/* ========================================
   Review Sections
   ======================================== */
.pcf-real-review,
.pcf-caution-guide,
.pcf-alternatives,
.pcf-summary {
    background: white;
    border-radius: var(--pcf-radius-xl);
    padding: var(--pcf-spacing-xl);
    box-shadow: var(--pcf-shadow-sm);
}

.pcf-review-points,
.pcf-checklist,
.pcf-summary-bullets {
    list-style: none;
    padding: 0;
    margin: var(--pcf-spacing-lg) 0 0;
}

.pcf-review-points li,
.pcf-checklist li,
.pcf-summary-bullets li {
    position: relative;
    padding: var(--pcf-spacing-md);
    padding-left: var(--pcf-spacing-2xl);
    background: var(--pcf-gray-50);
    border-radius: var(--pcf-radius-md);
    margin-bottom: var(--pcf-spacing-sm);
}

.pcf-review-points li::before {
    content: '💡';
    position: absolute;
    left: var(--pcf-spacing-md);
    top: var(--pcf-spacing-md);
}

.pcf-checklist li::before {
    content: '☐';
    position: absolute;
    left: var(--pcf-spacing-md);
    top: var(--pcf-spacing-md);
    color: var(--pcf-accent-yellow);
    font-weight: bold;
}

.pcf-summary-bullets li::before {
    content: '✓';
    position: absolute;
    left: var(--pcf-spacing-md);
    top: var(--pcf-spacing-md);
    color: var(--pcf-accent-green);
    font-weight: bold;
}

.pcf-review-note,
.pcf-caution-note,
.pcf-alt-note,
.pcf-summary-meta {
    margin-top: var(--pcf-spacing-lg);
    padding: var(--pcf-spacing-md);
    background: var(--pcf-gray-100);
    border-radius: var(--pcf-radius-md);
    font-size: 0.875rem;
    color: var(--pcf-gray-600);
}

.pcf-summary-lead {
    font-size: 1.125rem;
    color: var(--pcf-gray-700);
    line-height: 1.7;
}

/* ========================================
   Alternatives Section
   ======================================== */
.pcf-alt-group {
    margin-top: var(--pcf-spacing-lg);
}

.pcf-alt-group h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pcf-gray-800);
    margin-bottom: var(--pcf-spacing-md);
    padding-bottom: var(--pcf-spacing-sm);
    border-bottom: 1px solid var(--pcf-gray-200);
}

.pcf-alt-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pcf-alt-group li {
    position: relative;
    padding: var(--pcf-spacing-sm) 0;
    padding-left: var(--pcf-spacing-xl);
    border-bottom: 1px solid var(--pcf-gray-100);
}

.pcf-alt-group li:last-child {
    border-bottom: none;
}

.pcf-alt-group li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--pcf-primary);
}

/* ========================================
   Glossary Extended Styles
   ======================================== */
.pcf-glossary {
    background: var(--pcf-gray-100);
}

.pcf-glossary .pcf-section-title {
    margin-bottom: var(--pcf-spacing-xl);
}

.pcf-glossary-item {
    background: white;
    border-radius: var(--pcf-radius-lg);
    padding: var(--pcf-spacing-lg);
    margin-bottom: var(--pcf-spacing-md);
    border-left: 4px solid var(--pcf-primary);
}

.pcf-glossary-item:last-child {
    margin-bottom: 0;
}

.pcf-glossary-term {
    font-weight: 700;
    color: var(--pcf-primary);
    margin-bottom: var(--pcf-spacing-sm);
    font-size: 1.0625rem;
}

.pcf-glossary-desc {
    color: var(--pcf-gray-700);
    line-height: 1.6;
}

/* ========================================
   Use Case Table Extended Styles
   ======================================== */
.pcf-usecase-table .pcf-spec-table-header h3 {
    display: flex;
    align-items: center;
    gap: var(--pcf-spacing-sm);
}

.pcf-usecase-table thead th {
    background: var(--pcf-secondary);
    color: white;
    font-weight: 600;
}

.pcf-usecase-table tbody tr:nth-child(even) {
    background: var(--pcf-gray-50);
}

.pcf-rating-cell {
    text-align: center;
    font-size: 1.5rem;
}

.pcf-rating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--pcf-radius-full);
    font-weight: bold;
    font-size: 0.875rem;
}

.pcf-rating-good {
    background: rgba(16, 185, 129, 0.1);
    color: var(--pcf-accent-green);
}

.pcf-rating-ok {
    background: rgba(245, 158, 11, 0.1);
    color: var(--pcf-accent-yellow);
}

.pcf-rating-warn {
    background: rgba(239, 68, 68, 0.1);
    color: var(--pcf-accent-red);
}

/* ========================================
   Blog Card Placeholder Image
   ======================================== */
.pcf-blog-card-image.no-image {
    background: linear-gradient(135deg, var(--pcf-gray-200), var(--pcf-gray-300));
    display: flex;
    align-items: center;
    justify-content: center;
}

.pcf-blog-card-image.no-image::after {
    content: '📝';
    font-size: 3rem;
    opacity: 0.5;
}

/* ========================================
   Empty State Styles
   ======================================== */
.pcf-empty-state {
    text-align: center;
    padding: var(--pcf-spacing-3xl);
    background: white;
    border-radius: var(--pcf-radius-xl);
    box-shadow: var(--pcf-shadow-sm);
}

.pcf-empty-state-icon {
    font-size: 4rem;
    margin-bottom: var(--pcf-spacing-lg);
    opacity: 0.5;
}

.pcf-empty-state h3 {
    font-size: 1.5rem;
    color: var(--pcf-gray-700);
    margin-bottom: var(--pcf-spacing-sm);
}

.pcf-empty-state p {
    color: var(--pcf-gray-500);
    margin-bottom: var(--pcf-spacing-lg);
}

/* ========================================
   Loading States
   ======================================== */
.pcf-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pcf-spacing-2xl);
}

.pcf-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--pcf-gray-200);
    border-top-color: var(--pcf-primary);
    border-radius: 50%;
    animation: pcf-spin 0.8s linear infinite;
}

@keyframes pcf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Breadcrumb Styles
   ======================================== */
.pcf-breadcrumb {
    padding: var(--pcf-spacing-md) 0;
    font-size: 0.875rem;
}

.pcf-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--pcf-spacing-xs);
}

.pcf-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--pcf-spacing-xs);
}

.pcf-breadcrumb-item::after {
    content: '/';
    color: var(--pcf-gray-400);
}

.pcf-breadcrumb-item:last-child::after {
    display: none;
}

.pcf-breadcrumb a {
    color: var(--pcf-gray-600);
    text-decoration: none;
}

.pcf-breadcrumb a:hover {
    color: var(--pcf-primary);
}

.pcf-breadcrumb-current {
    color: var(--pcf-gray-400);
}

/* ========================================
   Tooltip Styles
   ======================================== */
.pcf-tooltip {
    position: relative;
    cursor: help;
}

.pcf-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--pcf-spacing-sm) var(--pcf-spacing-md);
    background: var(--pcf-secondary);
    color: white;
    font-size: 0.8125rem;
    border-radius: var(--pcf-radius-md);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--pcf-transition-fast);
    z-index: 100;
}

.pcf-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   Share Buttons
   ======================================== */
.pcf-share {
    display: flex;
    gap: var(--pcf-spacing-sm);
    align-items: center;
}

.pcf-share-label {
    font-weight: 500;
    color: var(--pcf-gray-600);
    margin-right: var(--pcf-spacing-sm);
}

.pcf-share-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--pcf-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    transition: transform var(--pcf-transition-fast);
}

.pcf-share-btn:hover {
    transform: scale(1.1);
}

.pcf-share-twitter {
    background: #1da1f2;
}

.pcf-share-facebook {
    background: #1877f2;
}

.pcf-share-linkedin {
    background: #0a66c2;
}

.pcf-share-copy {
    background: var(--pcf-gray-600);
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .pcf-header,
    .pcf-footer,
    .pcf-single-sidebar,
    .pcf-share,
    .pcf-hero-cta {
        display: none !important;
    }
    
    .pcf-single-grid {
        grid-template-columns: 1fr;
    }
    
    .pcf-pc-card,
    .pcf-blog-card {
        break-inside: avoid;
    }
    
    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666;
    }
}

/* ========================================
   Accessibility Improvements
   ======================================== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    background: var(--pcf-primary);
    color: white;
    padding: var(--pcf-spacing-md) var(--pcf-spacing-lg);
    text-decoration: none;
    font-weight: 600;
}

/* Focus visible states */
*:focus-visible {
    outline: 2px solid var(--pcf-primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--pcf-primary);
    outline-offset: 2px;
}