/*
 * FP Comparison Table — visual design matches comparisons-table-template.html
 *
 * Layout specs extracted from the Greenshift template:
 *   Feature col:  256px (desktop), 125px (≤991px)
 *   Value cols:   equal (minmax 180px), padding 16/24px × 12px
 *   Header names: 22px bold — FP column: dark navy bg var(--wp--preset--color--overlay) + white text
 *   Rows:         alternate white / var(--wp--preset--color--light), no row separators
 *   Feature col:  sticky left, z-index 5, shadow rgba(0,0,0,.06) 4px 0 8px -4px
 */

.fpr-comparison-table {
    font-family: Inter, sans-serif;
    width: 100%;
    color: var(--wp--preset--color--dark);
}

/* ── Outer frame: radius + overflow clip ──────────────────── */
.fpr-comparison-table__frame {
    background: var(--wp--preset--color--background);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* ── Horizontal scroll inside the clipped frame ──────────── */
.fpr-comparison-table__scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Table ────────────────────────────────────────────────── */
.fpr-comparison-table__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 796px;
    background: var(--wp--preset--color--background);
}

/* ── Feature column (first col) — 256px, sticky ──────────── */
.fpr-comparison-table__feature-head {
    width: 256px;
    padding: 24px;
    text-align: left;
    vertical-align: middle;
    background: var(--wp--preset--color--overlay);
    color: var(--wp--preset--color--background);
    position: sticky;
    left: 0;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.06) 4px 0px 8px -4px;
}

.fpr-comparison-table__feature-cell {
    padding: 16px 24px;
    text-align: left;
    vertical-align: middle;
    background: var(--wp--preset--color--background);
    position: sticky;
    left: 0;
    z-index: 5;
    box-shadow: rgba(0, 0, 0, 0.06) 4px 0px 8px -4px;
}

/* ── Value column headers — black header bar ──────────────── */
.fpr-comparison-table__col-head {
    padding: 24px 12px;
    text-align: center;
    vertical-align: middle;
    background: var(--wp--preset--color--overlay);
}

/* Highlighted ("us") column header — primary blue, square corners */
.fpr-comparison-table__header--highlight {
    background: var(--wp--preset--color--primary);
}

/* ── Logo ─────────────────────────────────────────────────── */
.fpr-comparison-table__logo {
    display: block;
    max-height: 32px;
    width: auto;
    margin: 0 auto 8px;
    object-fit: contain;
}

/* ── Column name text ─────────────────────────────────────── */
.fpr-comparison-table__col-name {
    display: block;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.4;
    color: var(--wp--preset--color--background);
}

/* ── Feature label & subtext ──────────────────────────────── */
.fpr-comparison-table__feature-label {
    display: block;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--wp--preset--color--dark);
}

.fpr-comparison-table__feature-subtext {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--wp--preset--color--secondary);
}

/* ── Value cells ──────────────────────────────────────────── */
.fpr-comparison-table__value-cell {
    padding: 16px 12px;
    text-align: center;
    vertical-align: middle;
}

/* Highlighted ("us") data cells — light blue background continues down the column.
   The wrapper prefix + compound class (two classes on the cell) outranks the
   alternating-parity rules defined further down, so every cell in the column
   gets the blue regardless of source order or row parity. */
.fpr-comparison-table .fpr-comparison-table__table tbody tr .fpr-comparison-table__value-cell.fpr-comparison-table__cell--highlight {
    background: var(--wp--preset--color--primary-lighter-active);
}

/* ── Alternating row backgrounds (no row borders) ─────────── */
.fpr-comparison-table__table tbody tr:nth-child(odd) .fpr-comparison-table__feature-cell,
.fpr-comparison-table__table tbody tr:nth-child(odd) .fpr-comparison-table__value-cell {
    background: var(--wp--preset--color--background);
}

.fpr-comparison-table__table tbody tr:nth-child(even) .fpr-comparison-table__feature-cell,
.fpr-comparison-table__table tbody tr:nth-child(even) .fpr-comparison-table__value-cell {
    background: var(--wp--preset--color--light);
}

/* Sticky feature cell must re-declare background per row parity */
.fpr-comparison-table__table tbody tr:nth-child(odd) .fpr-comparison-table__feature-cell {
    background: var(--wp--preset--color--background);
}

.fpr-comparison-table__table tbody tr:nth-child(even) .fpr-comparison-table__feature-cell {
    background: var(--wp--preset--color--light);
}

/* ── Section-title rows ───────────────────────────────────── */
.fpr-comparison-table__section-cell {
    padding: 12px 24px;
    text-align: left;
    vertical-align: middle;
    background: var(--wp--preset--color--light);
    position: sticky;
    left: 0;
    z-index: 5;
    box-shadow: rgba(0, 0, 0, 0.06) 4px 0px 8px -4px;
}

.fpr-comparison-table__section-title {
    display: block;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary);
}

.fpr-comparison-table__section-value {
    padding: 12px;
    background: var(--wp--preset--color--light);
}

/* Blue "us" column continues through section rows */
.fpr-comparison-table__table tbody tr .fpr-comparison-table__section-value.fpr-comparison-table__cell--highlight {
    background: var(--wp--preset--color--primary-lighter-active);
}

/* ── Row separator (border below the row) ─────────────────── */
.fpr-comparison-table__table tbody tr.fpr-comparison-table__row--separator > th,
.fpr-comparison-table__table tbody tr.fpr-comparison-table__row--separator > td {
    border-bottom: 1px solid var(--wp--preset--color--overlay);
}

/* ── Check / cross / partial marks ───────────────────────── */
/* Scoped + compound to override the Tailwind `inline-flex` utility on the span,
   so every value cell centers its mark horizontally and vertically. */
.fpr-comparison-table__value-cell .fpr-comparison-table__mark {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fpr-comparison-table__mark .fpr-icon {
    width: 24px;
    height: 24px;
}

.fpr-comparison-table__mark--yes {
    color: var(--wp--preset--color--success);
}

.fpr-comparison-table__mark--no {
    color: var(--wp--preset--color--muted);
}

.fpr-comparison-table__mark--partial .fpr-comparison-table__dash {
    color: var(--wp--preset--color--secondary);
    font-size: 1.5rem;
    font-weight: 600;
}

.fpr-comparison-table__mark--text {
    font-size: 15px;
    font-weight: 400;
    color: var(--wp--preset--color--secondary);
    text-align: center;
    line-height: 1.4;
}

/* ── Accessibility ────────────────────────────────────────── */
.fpr-comparison-table .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Tablet: narrower feature col ────────────────────────── */
@media (max-width: 991px) {
    .fpr-comparison-table__table {
        min-width: 665px;
    }

    .fpr-comparison-table__feature-head,
    .fpr-comparison-table__feature-cell {
        width: 125px;
        padding-left: 16px;
        padding-right: 16px;
    }
}