/* ==========================================================================
   CMS Tables
   --------------------------------------------------------------------------
   Baseline styling for tables created in the CKEditor body fields.

   Why this file exists: main.css styles .cms-content headings, paragraphs,
   lists, blockquotes and figures, but has no rule for table/th/td anywhere.
   Bootstrap 4 only styles tables that carry the .table class, and CKEditor
   does not add one -- so an editor-built table renders with no borders, no
   cell padding and columns auto-sized to content.

   Everything here is scoped to .cms-content so it cannot leak into the admin,
   the nav, or any theme component.
   ========================================================================== */


/* 1. Base table
   ------------------------------------------------------------------------ */

.cms-content table {
    width: 100% !important;     /* overrides the inline px width CKEditor writes */
    max-width: 100%;
    margin: 0 0 30px 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 16px;
    line-height: 1.6;
}

.cms-content table th,
.cms-content table td {
    padding: 12px 16px;
    border: 1px solid #dcdcdc;
    vertical-align: top;        /* keeps label/detail rows aligned at the top */
    text-align: left;
}

/* CKEditor writes border="1" / cellpadding / cellspacing as attributes.
   Neutralise them so the rules above always win. */
.cms-content table[border],
.cms-content table[cellpadding],
.cms-content table[cellspacing] {
    border-collapse: collapse;
}


/* 2. Header row
   ------------------------------------------------------------------------ */

.cms-content table th,
.cms-content table thead td {
    background-color: #014421;
    border-color: #014421;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cms-content table thead th a,
.cms-content table thead th a:visited {
    color: #ffffff;
    text-decoration: underline;
}


/* 3. Body rows
   ------------------------------------------------------------------------ */

.cms-content table tbody tr:nth-child(even) td {
    background-color: #f7f7f7;
}

.cms-content table tbody tr:hover td {
    background-color: #f0f4f1;
}

/* Paragraphs inside cells: main.css gives .cms-content p a bottom margin,
   which leaves a dead gap under the last line of every cell. */
.cms-content table td > p:last-child,
.cms-content table th > p:last-child {
    margin-bottom: 0;
}

.cms-content table td ul,
.cms-content table th ul {
    margin-bottom: 0;
}


/* 4. Label / detail variant
   --------------------------------------------------------------------------
   For two-column tables where the left column is a label and the right is a
   description (job accountabilities, spec sheets, comparison rows).
   Applied from the "Label Table" option in the editor's Styles dropdown.

   table-layout: fixed is what makes every row line up: without it each row
   sizes its own columns to content, which is the ragged result you get from
   a default CKEditor table.
   ------------------------------------------------------------------------ */

.cms-content table.table-labels {
    table-layout: fixed;
    border-top: 3px solid #014421;
}

.cms-content table.table-labels td:first-child {
    width: 32%;
    color: #014421;
    font-weight: 600;
}

.cms-content table.table-labels td {
    border-left: none;
    border-right: none;
}


/* 5. Borderless variant
   ------------------------------------------------------------------------ */

.cms-content table.table-plain td,
.cms-content table.table-plain th {
    border-left: none;
    border-right: none;
}

.cms-content table.table-plain tbody tr:nth-child(even) td {
    background-color: transparent;
}


/* 6. Responsive
   --------------------------------------------------------------------------
   main.js wraps every .cms-content table in <div class="table-responsive">
   (a Bootstrap 4 class already present in bootstrap.min.css) so wide tables
   scroll horizontally instead of forcing the whole page wide on a phone.

   Setting overflow on the table element itself would work, but it requires
   display:block, which drops the table formatting context and destroys the
   column alignment this file exists to fix.
   ------------------------------------------------------------------------ */

.cms-content .table-responsive {
    margin: 0 0 30px 0;
    -webkit-overflow-scrolling: touch;
}

.cms-content .table-responsive > table {
    margin-bottom: 0;
}

@media (max-width: 767px) {

    .cms-content table {
        font-size: 15px;
    }

    .cms-content table th,
    .cms-content table td {
        padding: 10px 12px;
    }

    /* Guarantee the label column stays readable rather than collapsing to
       one word per line once the wrapper starts scrolling. */
    .cms-content .table-responsive > table.table-labels {
        min-width: 480px;
    }
}

/* CKEditor 5 wraps tables in <figure class="table">. Harmless here today
   (ProcessWire ships CKEditor 4) but costs nothing to guard against. */
.cms-content figure.table {
    margin: 0 0 30px 0;
    overflow-x: auto;
}