/* SchoolCMS – Content tables
   Base styling for WYSIWYG content (js/utilities/table.js wraps bare
   tables in Bootstrap's .table-responsive), plus the three colour
   variants applied from the editor's Formats dropdown (inc/wysiwyg.php
   + js/admin/wysiwyg-table-styles.js) – modelled on the Cathedral
   build's Red/Navy/Gold tables. Restyle per site from Figma, renaming
   the variant classes and dropdown titles to the site's colours. */

table {
    width:           100%;
    margin-bottom:   var(--space-md);
    border-collapse: collapse;

    th, td {
        padding: var(--space-xs) var(--space-sm);
        text-align: left;
    }

    thead th {
        background: var(--color-black);
        color: var(--color-white);
    }

    tbody {
        tr:nth-child(even) {
            background: var(--color-cream, transparent);
        }
        td, th {
            border-bottom: 1px solid var(--color-grey);
        }
    }
}

/* ── Colour variants (Formats dropdown – Orange/Black/Teal Table) ──
   Header cells carry the accent – the whole visible difference between
   the three variants. TinyMCE's Table button builds every row out of
   <td>, so a table the client made by hand has no <th> at all; where
   there is no header cell anywhere, the first row stands in for one.
   And only the table's own first row, not the opening row of every
   section: a plain `tr:first-child` also matches the first row inside
   <tbody>, so a table split into <thead> + <tbody> would come out with
   two header rows – use the thead when there is one, the first tbody
   otherwise. (Both lessons inherited from the Cathedral build.) */
.table-orange,
.table-black,
.table-teal {
    border-collapse: collapse;
    margin: var(--space-md) 0 var(--space-lg);

    th,
    &:not(:has(th)) > thead:first-of-type > tr:first-child > td,
    &:not(:has(th)):not(:has(thead)) > tbody:first-of-type > tr:first-child > td {
        font: var(--text-20ob);
        color: var(--table-accent-text, var(--color-white));
        background: var(--table-accent, var(--color-black));
        /* same border as the body cells, so the header sits inside the
           table's grid rather than floating as a free bar */
        border: 1px solid var(--color-black);
        padding: 20px 24px;
        text-align: left;
    }

    td {
        font: var(--text-16or);
        color: var(--color-black);
        border: 1px solid var(--color-black);
        padding: 14px 24px;
    }

    /* Rows are as tall as their longest cell; centring leaves the short
       cells floating against wrapped neighbours, so every cell starts
       at the top. */
    th,
    td {
        vertical-align: top;
    }

    /* the base zebra striping has no place under an accent header */
    tbody tr:nth-child(even) {
        background: transparent;
    }
}

.table-orange {
    --table-accent: var(--color-orange);
}

.table-black {
    --table-accent: var(--color-black);
}

.table-teal {
    --table-accent: var(--color-teal);
    /* teal is a light accent – white text would vanish on it */
    --table-accent-text: var(--color-black);
}

/* The floor that makes the wrapper's sideways scroll actually happen:
   width: 100% alone lets a phone screen crush the columns to a word per
   line – the table never outgrows the wrapper, so overflow-x has nothing
   to do. Floors scale with the column count; a 2-column table fits any
   screen unaided. */
.table-responsive > table {
    &:has(tr > :nth-child(3)) {
        min-width: 640px;
    }

    &:has(tr > :nth-child(5)) {
        min-width: 900px;
    }
}