/* Comparison page styles */

body {
    /* Reduce paragraph spacing */
    & .box p {
        margin-bottom: 0.75em;
    }
    
    & .box ol {
        margin-bottom: 0.75em;
    }
    
    & .box h2 {
        margin-top: 0.5em;
        margin-bottom: 0.75em;
    }
    
    /* Source footnotes styling */
    & .sources {
        list-style-type: upper-roman;
        font-size: 0.85em;
        margin-top: 1em;
        padding-left: 1.5em;
        color: color-mix(in srgb, var(--color-text) 70%, transparent);
        
        & li {
            margin-bottom: 0.25em;
        }
    }
    
    /* Plain list - no default numbering, custom superscript index */
    & .plain {
        list-style: none;
        counter-reset: source-counter;
        padding-left: 0;
        
        & li {
            counter-increment: source-counter;
            font-size: 0.85em;
            margin-bottom: 0.25em;
            padding-left: 1.5em;
            position: relative;
            color: color-mix(in srgb, var(--color-text) 70%, transparent);
            
            &::before {
                content: counter(source-counter) ".";
                position: absolute;
                left: 0;
                top: 0;
                font-size: 0.65em;
                vertical-align: super;
                font-weight: 500;
                color: color-mix(in srgb, var(--color-text) 40%, transparent);
            }
        }
    }
    
    /* Comparison table - desktop */
    & table {
        width: 100%;
        border-collapse: collapse;
        
        & thead {
            & th {
                background-color: color-mix(in srgb, var(--color-primary) 15%, var(--color-bg));
                font-weight: 600;
                white-space: nowrap;
                padding: 0.75em 1em;
                text-align: left;
            }
        }
        
        & tbody {
            & tr {
                border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
                
                & td {
                    vertical-align: top;
                    padding: 0.75em 1em;
                    
                    & strong {
                        display: block;
                        margin-bottom: 0.25em;
                    }
                }
            }
        }
    }
    
    /* Highlight IP Defender column */
    & table tbody tr td:nth-child(2) {
        background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
        font-weight: 500;
    }
    
    /* Mobile responsiveness */
    @media (max-width: 767px) {
        & .columns-2 {
            columns: 1;
        }
    }
}

@media (max-width: 767px) {
    .comparison-table { display: block; border-collapse: separate; }
    .comparison-table thead { display: none; }
    .comparison-table tbody { display: block; }
    .comparison-table tbody tr { display: block; margin-bottom: 1em; padding: 0.75em; border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent); border-radius: 0.5em; }
    .comparison-table tbody tr td { display: block; padding: 0.4em 0; margin: 0; border: none; }
    .comparison-table tbody tr td::before { content: attr(data-label); display: block; font-weight: 600; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.03em; color: color-mix(in srgb, var(--color-text) 45%, transparent); margin-bottom: 0.15em; }
    .comparison-table tbody tr td:nth-child(1) { font-weight: 700; font-size: 1.05em; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent); margin-bottom: 0.5em; padding: 0 0 0.5em 0; }
    .comparison-table tbody tr td:nth-child(1)::before { display: none; }
    .comparison-table tbody tr td:nth-child(2) { background-color: color-mix(in srgb, var(--color-primary) 8%, transparent); border-radius: 0.3em; padding: 0.5em 0.75em; margin: 0.25em 0; }
}

/* Mobile: transform table into stacked card layout */
@media (max-width: 767px) {
    .comparison-table {
        display: block;
        border-collapse: separate;
    }
    
    .comparison-table thead {
        display: none;
    }
    
    .comparison-table tbody,
    .comparison-table tbody tr,
    .comparison-table tbody tr td {
        display: block;
    }
    
    .comparison-table tbody tr {
        margin-bottom: 1em;
        padding: 0.75em;
        border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
        border-radius: 0.5em;
    }
    
    .comparison-table tbody tr td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        font-size: 0.75em;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: color-mix(in srgb, var(--color-text) 45%, transparent);
        margin-bottom: 0.15em;
    }
    
    .comparison-table tbody tr td:nth-child(1) {
        font-weight: 700;
        font-size: 1.05em;
    }
    
    .comparison-table tbody tr td:nth-child(1)::before {
        display: none;
    }
    
    .comparison-table tbody tr td:nth-child(2) {
        background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
        border-radius: 0.3em;
    }
}