/**
 * Gutenberg core/table block — front-end styles.
 *
 * WordPress' default table CSS sets borders without colour, so they
 * inherit currentColor — which the GA theme effectively zeroes out
 * via other rules, leaving Gutenberg tables borderless on the live
 * site (e.g. /client-support/#shipping).
 *
 * This file makes wp-block-table render with the same border + header
 * styling as the Gutenberg editor preview, site-wide. Scoped tightly
 * so it only affects core/table blocks — bespoke breed-data tables
 * (.angus-table, .australian-sires-table, etc.) are untouched.
 */

/* Wrapper — gives the table breathing room and lets it scroll on narrow viewports. */
.wp-block-table {
    margin: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.95rem;
    line-height: 1.45;
}

/* All cells get a consistent 1px grey border + comfortable padding. */
.wp-block-table th,
.wp-block-table td {
    border: 1px solid #dcdcdc;
    padding: 0.7rem 0.9rem;
    vertical-align: top;
    text-align: left;
}

/* Header row — light grey background, bold, slightly bigger contrast on the border. */
.wp-block-table thead th {
    background: #f4f5f7;
    font-weight: 700;
    color: #1a1a1a;
    border-color: #cfd2d6;
}

/* When a colspan/rowspan header sits on the *second* header row (sub-header pattern,
   e.g. Metro/Regional/Remote under "Delivery timeframes"), give it a slightly
   lighter background so the visual hierarchy reads correctly. */
.wp-block-table thead tr + tr th {
    background: #fafbfc;
    font-weight: 600;
}

/* Bottom edge of thead — match Gutenberg editor's heavier separator. */
.wp-block-table thead {
    border-bottom: 2px solid #b8bcc2;
}

/* Subtle zebra striping in tbody for readability — only when not using
   the explicit "stripes" style (which already does its own striping). */
.wp-block-table:not(.is-style-stripes) tbody tr:nth-child(even) td {
    background: #fafafa;
}

/* Hover affordance for desktop. */
@media (hover: hover) {
    .wp-block-table tbody tr:hover td {
        background: #f0f4f8;
    }
}

/* When the table is inserted into AJAX-loaded tab content (client-support page),
   the wrapper sometimes inherits a parent text-align — force left alignment so
   numbers/labels stay readable. */
.ga-tab-content-loaded .wp-block-table,
.ga-tab-content-loaded .wp-block-table th,
.ga-tab-content-loaded .wp-block-table td {
    text-align: left;
}

/* Mobile — keep the table scrollable rather than crushing cells.
   The wrapper already has overflow-x: auto; here we just nudge the
   font and padding down so more fits per scroll position. */
@media (max-width: 640px) {
    .wp-block-table table {
        font-size: 0.875rem;
    }
    .wp-block-table th,
    .wp-block-table td {
        padding: 0.55rem 0.7rem;
    }
}

/* Print — drop backgrounds, keep borders. */
@media print {
    .wp-block-table tbody tr td,
    .wp-block-table thead th {
        background: #fff !important;
    }
}