/*
 * Vendor compliance table – [vendor_matrix_lt] shortcode.
 * Markup: template-parts/vendor-table.php, behaviour: assets/js/vendor-table.js
 *
 * The requirement column and the vendor columns are two separate tables placed side by side:
 * the first one stays in place, the second one scrolls horizontally. Both use the same fixed
 * row heights (--head-height, --row-height), which is what keeps their rows aligned.
 */

.vendor-table {
    --color-primary: #0D0946;        /* accent: headings, table header, scrollbar thumb, button */
    --color-primary-hover: #3B3690;
    --color-text: #1B1A3A;
    --color-text-muted: #5F5E7A;
    --color-ok: #1E9E5A;             /* "atitinka" check */
    --color-ok-ring: rgba(30, 158, 90, 0.14);
    --color-no: #C3C4D3;             /* "neatitinka" dash */
    --color-surface: #FFFFFF;
    --color-surface-row: #F4F4F8;    /* requirement column */
    --color-surface-hover: #F3F3F9;  /* hovered row */
    --color-icon-box: #E4E5EE;
    --color-track: #DCDDE8;          /* scrollbar track */
    --color-border: rgba(13, 9, 70, 0.12);
    --color-border-on-dark: rgba(255, 255, 255, 0.18);
    --shadow-card: 0 10px 32px rgba(13, 9, 70, 0.08);
    --radius-card: 16px;
    --radius-tile: 8px;
    --radius-icon: 12px;
    --radius-pill: 999px;
    --dur-fast: 160ms;

    --pinned-width: 300px;           /* requirement column */
    --vendor-width: 118px;           /* one vendor column */
    --head-height: 76px;
    --row-height: 64px;

    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 64px 10px;              /* the page container adds another 10px on each side */
    color: var(--color-text);
}


/* Theme overrides
   Astra styles page content with selectors that are stronger than a single class
   (`.entry-content p`, `.entry-content ul`, `.ast-single-post .entry-content a`),
   so these few resets need the extra `.vendor-table` in front to win.
   ========================================================================== */

.vendor-table .vendor-table__eyebrow,
.vendor-table .vendor-table__lead,
.vendor-table .vendor-table__note,
.vendor-table .vendor-table__legend {
    margin: 0;
}

.vendor-table .vendor-table__legend {
    padding-left: 0;
}

.vendor-table a.vendor-table__vendor,
.vendor-table a.vendor-table__button {
    text-decoration: none;
}


/* Header: intro + legend
   ========================================================================== */

.vendor-table__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
}

.vendor-table__intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 680px;
}

.vendor-table__eyebrow {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.vendor-table__title {
    max-width: 620px;
    margin: 0;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-primary);
    text-wrap: balance;
}

.vendor-table__lead {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
    text-wrap: pretty;
}

.vendor-table__legend {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    gap: 28px;
    padding: 0 0 6px;
    list-style: none;
}

.vendor-table__legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}


/* Marks: green check / grey dash (used in the legend and in the table cells)
   ========================================================================== */

.vendor-table__mark {
    --check-size: 22px;
    --dash-width: 14px;

    display: block;
    flex-shrink: 0;
    margin: 0 auto;
}

.vendor-table__mark--small {
    --check-size: 20px;
    --dash-width: 12px;
}

.vendor-table__mark--yes {
    width: var(--check-size);
    height: var(--check-size);
    border-radius: var(--radius-pill);
    background-color: var(--color-ok);
    /* white check icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 54%;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 4px var(--color-ok-ring);
}

.vendor-table__mark--no {
    width: var(--dash-width);
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-no);
}


/* Matrix: fixed requirement table + horizontally scrolling vendor table
   ========================================================================== */

.vendor-table__matrix {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vendor-table__box {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    /* The dark header band is painted here, behind both tables, and not on the header cells: while
       auto-scroll moves the columns by fractions of a pixel, cell backgrounds show hairlines between them. */
    background: linear-gradient(var(--color-primary) var(--head-height), var(--color-surface) var(--head-height));
    box-shadow: var(--shadow-card);
}

.vendor-table__table {
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.vendor-table__table--requirements {
    flex-shrink: 0;
    width: var(--pinned-width);      /* grows if the longest word of a label needs more room */
}

.vendor-table__table--vendors {
    width: max-content;
    min-width: 100%;
}

.vendor-table__scroller {
    flex-grow: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    cursor: grab;
    scrollbar-width: none;           /* native scrollbar is replaced by .vendor-table__scrollbar */
}

.vendor-table__scroller::-webkit-scrollbar {
    display: none;
}

.vendor-table__scroller:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

.vendor-table__scroller--dragging {
    cursor: grabbing;
    user-select: none;
}

/* Header row */

.vendor-table__head-cell {
    height: var(--head-height);
    padding: 0;
    border: 0;
    vertical-align: middle;
    text-align: center;
}

.vendor-table__head-cell--corner {
    padding: 0 24px;
    border-right: 1px solid var(--color-border-on-dark);
    text-align: left;
    color: #fff;
}

.vendor-table__head-cell--vendor {
    width: var(--vendor-width);
    min-width: var(--vendor-width);
}

.vendor-table__corner-title {
    display: block;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.vendor-table__corner-meta {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
}

/* White tile with the vendor logo, or the vendor name when there is no logo */
.vendor-table__vendor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 102px;
    height: 48px;
    margin: 0 auto;
    padding: 6px 8px;
    border-radius: var(--radius-tile);
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
    color: var(--color-primary);
}

.vendor-table__vendor:hover,
.vendor-table__vendor:focus {
    color: var(--color-primary-hover);
}

.vendor-table__vendor:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.vendor-table__vendor-logo {
    display: block;
    width: auto;
    max-width: 86px;
    max-height: 36px;
    object-fit: contain;
}

/* Body rows */

.vendor-table__cell {
    height: var(--row-height);
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    vertical-align: middle;
    text-align: center;
    transition: background var(--dur-fast);
}

.vendor-table__cell--requirement {
    padding: 0 20px;
    border-right: 1px solid var(--color-border);
    background: var(--color-surface-row);
    text-align: left;
}

.vendor-table__row:last-child .vendor-table__cell {
    border-bottom: 0;
}

/* Set by js on both halves of the hovered row (they are separate tables, so :hover would reach only one) */
.vendor-table__row--hover .vendor-table__cell {
    background: var(--color-surface-hover);
}

.vendor-table__requirement {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vendor-table__requirement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-icon);
    background: var(--color-icon-box);
}

.vendor-table__requirement-image {
    width: 28px;
}

.vendor-table__requirement-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}


/* Scrollbar under the vendor columns
   ========================================================================== */

.vendor-table__scrollbar {
    position: relative;
    height: 8px;
    margin-left: var(--pinned-width); /* js keeps it equal to the real width of the requirement column */
    border-radius: var(--radius-pill);
    background: var(--color-track);
    cursor: pointer;
}

.vendor-table__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;                    /* width and position are set by js */
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    cursor: grab;
    touch-action: none;
}

.vendor-table__scrollbar-thumb:active {
    cursor: grabbing;
}


/* Footer: note + contact button
   ========================================================================== */

.vendor-table__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.vendor-table__note {
    max-width: 820px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.vendor-table__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    transition: background var(--dur-fast);
}

.vendor-table__button:hover,
.vendor-table__button:focus {
    background: var(--color-primary-hover);
    color: #fff;
}

.vendor-table__button:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
}


/* Phones
   ========================================================================== */

@media (max-width: 767px) {
    .vendor-table {
        --pinned-width: 132px;
        --vendor-width: 84px;
        --head-height: 56px;
        --row-height: 52px;

        gap: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .vendor-table__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .vendor-table__intro {
        gap: 10px;
    }

    .vendor-table__eyebrow {
        font-size: 11px;
    }

    .vendor-table__title {
        font-size: 24px;
        line-height: 1.2;
    }

    .vendor-table__lead {
        font-size: 14px;
        line-height: 1.55;
    }

    .vendor-table__legend {
        gap: 16px;
        padding-bottom: 0;
    }

    .vendor-table__mark {
        --dash-width: 11px;
    }

    .vendor-table__mark--small {
        --check-size: 16px;
        --dash-width: 10px;
    }

    .vendor-table__box {
        border-radius: 12px;
    }

    .vendor-table__head-cell--corner {
        padding: 0 12px;
    }

    .vendor-table__corner-title {
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    .vendor-table__corner-meta {
        margin-top: 3px;
        font-size: 11px;
    }

    .vendor-table__vendor {
        width: 72px;
        height: 38px;
        padding: 4px 6px;
        border-radius: 6px;
        font-size: 11px;
    }

    .vendor-table__vendor-logo {
        max-width: 60px;
        max-height: 28px;
    }

    .vendor-table__cell--requirement {
        padding: 0 10px;
    }

    .vendor-table__requirement {
        gap: 8px;
    }

    .vendor-table__requirement-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .vendor-table__requirement-image {
        width: 20px;
    }

    .vendor-table__requirement-name {
        font-size: 12px;
    }

    .vendor-table__scrollbar {
        height: 6px;
    }

    .vendor-table__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .vendor-table__note {
        font-size: 12px;
        line-height: 1.55;
    }
}