/* ===========================================
   Tables inside editor content
   ===========================================
   The info_description widget prints its body through wp_kses_post(), so a table
   written in the editor survives into the page as a real <table> - but nothing
   ever styled it. The post-content rules in main.scss cover p, li, ol and ul and
   stop there, so the table rendered as a browser default: no borders, no header
   band, no cell padding, and rows that run together and read as loose prose.

   These rules give it the same look as the price-table widget, so a comparison
   table written by a content writer sits in the page as if the theme had drawn
   it. Scoped to the editor-content wrappers, so no widget's own table inherits
   them.

   The file is enqueued only where an info_description widget renders (see
   enqueue_widget_assets), which today means the brand landings. The .post-content
   and .taxonomy-advanced-description selectors are here so the same table reads
   correctly if it is ever loaded on a blog post or a category description too -
   on those pages the file is simply not requested. */

.post-content table,
.product-post-content table,
.taxonomy-advanced-description table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 24px auto;
    background: #fff;
    border: 1px solid #E8EFF6;
    border-radius: 12px;
    overflow: hidden;
}

.post-content th,
.post-content td,
.product-post-content th,
.product-post-content td,
.taxonomy-advanced-description th,
.taxonomy-advanced-description td {
    padding: 12px 16px;
    text-align: right;
    vertical-align: middle;
    border-bottom: 1px solid #EEF2F7;
    /* The body copy around these tables runs at a 37px line-height meant for
       justified paragraphs; inside a cell that spacing pulls the rows apart. */
    line-height: 1.9;
    font-size: clamp(13px, 0.9vw, 16px);
}

.post-content thead th,
.product-post-content thead th,
.taxonomy-advanced-description thead th {
    background: #F3F6FA;
    color: #204774;
    font-weight: 700;
    border-bottom: 2px solid #E8EFF6;
}

/* The first column is the row's label - the system or model name. */
.post-content tbody td:first-child,
.product-post-content tbody td:first-child,
.taxonomy-advanced-description tbody td:first-child {
    color: #204774;
    font-weight: 700;
    white-space: nowrap;
}

.post-content tbody tr:nth-child(even),
.product-post-content tbody tr:nth-child(even),
.taxonomy-advanced-description tbody tr:nth-child(even) {
    background: #FBFCFE;
}

.post-content tbody tr:hover,
.product-post-content tbody tr:hover,
.taxonomy-advanced-description tbody tr:hover {
    background: #F3F6FA;
}

.post-content tbody tr:last-child td,
.product-post-content tbody tr:last-child td,
.taxonomy-advanced-description tbody tr:last-child td {
    border-bottom: 0;
}

/* A safety net for a table wider than its column: it scrolls inside its own box
   rather than widening the page. Deliberately NOT given a min-width, because an
   RTL scroll container does not reliably open at its start edge - Chromium parks
   it at the left, which in RTL is the LAST column, so the reader meets the table
   mid-way through. Phones therefore get a table that fits (see below) and this
   wrapper only catches the overflow a wider table would cause. */
.post-content .content-table-scroll,
.product-post-content .content-table-scroll,
.taxonomy-advanced-description .content-table-scroll {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 640px) {
    .post-content th,
    .post-content td,
    .product-post-content th,
    .product-post-content td,
    .taxonomy-advanced-description th,
    .taxonomy-advanced-description td {
        padding: 9px 8px;
        font-size: 12px;
        line-height: 1.75;
    }

    /* The label column is short (a system or model name) - keeping it from
       wrapping mid-word costs little and leaves the rest to the spec column. */
    .post-content tbody td:first-child,
    .product-post-content tbody td:first-child,
    .taxonomy-advanced-description tbody td:first-child {
        white-space: normal;
        word-break: keep-all;
    }
}