/*
 * Tables in Blogsmith-generated posts (front end).
 * Implements docs/design/design_handoff_tables_in_articles/ — surface 3.
 *
 * Loaded ONLY on a singular post that Blogsmith published (post meta
 * `_blogsmith_generated`) AND that contains a table block — see
 * Blogsmith_Front_Assets. That page-level scoping is why these rules can target
 * the core `.wp-block-table` class directly: nothing here reaches a table the
 * site owner wrote, and the saved block markup stays exactly what core/table's
 * save() produces (no classes, no per-cell attributes, no validation warning).
 *
 * THE RULE FOR THIS FILE: specify no colour of our own. Every line and tint is
 * a percentage of `currentColor`, so the table is drawn in the theme's own text
 * colour and adapts to a light or a dark theme with no detection and no
 * theme-specific rules. Links are left untouched — the theme's link colour is
 * correct by definition.
 *
 * Each colour-mix declaration is preceded by a neutral grey fallback, so a
 * browser without color-mix() still gets a table with visible structure rather
 * than one with no rules at all.
 */

.wp-block-table {
    overflow-x: auto;
    overflow-y: hidden;
    /* A sideways swipe on the table must never become the browser's back gesture. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin: 1.75em 0 1.5em;
    border: 1px solid rgba(128, 128, 128, 0.28);
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 8px;
    /* A scrollbar track eats 15-17px inside the rounded frame and crops the last
       row. The scrim and the hint already say "this scrolls". */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wp-block-table::-webkit-scrollbar {
    display: none;
}

.wp-block-table:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/*
 * The edge scrim. On our own surfaces this is four background layers (two
 * masking patches over two scrims) — but a patch needs the surface colour, and
 * on someone else's theme we do not know it. So here the scrims are driven by
 * attributes the front-end script sets: `data-at-start` while the table is
 * scrolled fully left, `data-at-end` while it is fully right. Same result,
 * nothing invented.
 */
.wp-block-table[data-overflow="1"] {
    background-image:
        linear-gradient(to right, color-mix(in srgb, currentColor 13%, transparent), transparent),
        linear-gradient(to left, color-mix(in srgb, currentColor 13%, transparent), transparent);
    background-position: left 0, right 0;
    background-repeat: no-repeat;
    background-size: 30px 100%;
    background-attachment: scroll, scroll;
}

/* At the left end there is nothing cut off on the left — drop that scrim. */
.wp-block-table[data-overflow="1"][data-at-start="1"] {
    background-image:
        linear-gradient(to left, color-mix(in srgb, currentColor 13%, transparent), transparent);
    background-position: right 0;
}

.wp-block-table[data-overflow="1"][data-at-end="1"] {
    background-image:
        linear-gradient(to right, color-mix(in srgb, currentColor 13%, transparent), transparent);
    background-position: left 0;
}

.wp-block-table[data-overflow="1"][data-at-start="1"][data-at-end="1"] {
    background-image: none;
}

/* The hint is a sibling of the figure, so the figure's 1.5em bottom margin
   would collapse with the hint's 8px top one and push the cue away from the
   table it belongs to. When the hint is showing, the figure gives up its
   bottom margin and the hint carries the rhythm instead. */
.wp-block-table[data-hint="1"] {
    margin-bottom: 0;
}

.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    /* Below this the columns stop being readable — scroll instead of squeeze. */
    min-width: 20rem;
    margin: 0;
    /* We do not load a font here; the theme's body face, one step down. */
    font-family: inherit;
    font-size: 0.9375em;
    line-height: 1.45;
    text-align: left;
    /* Left-aligned throughout: right-aligning a numeric column would need
       per-cell classes the block editor rejects, so figures are made to line up
       by their digits instead. */
    font-variant-numeric: tabular-nums;
}

.wp-block-table th,
.wp-block-table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    /* Horizontal rules only. No vertical rules and no zebra — column separation
       comes from the padding and from column one being weighted. */
    border: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.wp-block-table th {
    font-weight: 600;
    font-size: 0.8125em;
    letter-spacing: 0.01em;
    /* A wrapped header makes every row taller for nothing, so headers hold one
       line; a long one simply widens its column and the figure scrolls. */
    white-space: nowrap;
    /* A tint, not a fill. */
    background: rgba(128, 128, 128, 0.09);
    background: color-mix(in srgb, currentColor 5%, transparent);
    border-bottom: 1.5px solid rgba(128, 128, 128, 0.42);
    border-bottom: 1.5px solid color-mix(in srgb, currentColor 28%, transparent);
}

.wp-block-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Column one is the row's name — the anchor the eye follows across the table.
   It is NOT sticky here: sticky needs an opaque background and we have no
   honest colour for one on an unknown theme. The scrim and hint carry it. */
.wp-block-table td:first-child {
    font-weight: 600;
}

.wp-block-table figcaption,
.wp-block-table + figcaption {
    margin-top: 9px;
    font-size: 0.8125em;
    font-style: italic;
    line-height: 1.5;
    color: rgba(128, 128, 128, 0.9);
    color: color-mix(in srgb, currentColor 55%, transparent);
}

/* Injected by the front-end script, never written into the post's saved markup. */
.bs-table-hint {
    display: none;
    justify-content: flex-end;
    margin: 8px 0 1.5em;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    color: rgba(128, 128, 128, 0.9);
    color: color-mix(in srgb, currentColor 55%, transparent);
}

.bs-table-hint span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bs-table-hint[data-visible="1"] {
    display: flex;
}

@media (max-width: 480px) {
    .wp-block-table th,
    .wp-block-table td {
        padding: 10px 12px;
    }
}