/*
 * Specifications Table block (blocks/specifications-table.php).
 *
 * Separate from assets/css/styles.css for the same reason as two-column-process.css:
 * that file can't be safely rebuilt. Values are theme variables from it, plus the two
 * brand colours from the Accelerated Materials brand guide (logo navy and turquoise).
 * The turquoise rule under the header row echoes the line under the logo wordmark.
 */
.specifications-table {
    --spec-navy: #131722;
    --spec-turquoise: #00ADC7;
    --spec-bg: var(--color-white);
    --spec-line: var(--color-neutral-200);

    background: var(--spec-bg);
    color: var(--spec-navy);
    font-family: var(--font-sans);
}

.specifications-table--grey {
    --spec-bg: var(--color-stone-50);
}

.specifications-table__inner {
    max-width: var(--container-7xl);
    margin: 0 auto;
    padding: calc(var(--spacing) * 20) calc(var(--spacing) * 4);
}

@media (width >= 40rem) {
    .specifications-table__inner {
        padding-left: calc(var(--spacing) * 8);
        padding-right: calc(var(--spacing) * 8);
    }
}

/* Eyebrow, heading and intro: same scale as the theme's section headers. */
.specifications-table__header {
    max-width: var(--container-3xl);
    margin-bottom: calc(var(--spacing) * 10);
}

.specifications-table__highlight {
    margin-bottom: calc(var(--spacing) * 4);
    color: var(--spec-turquoise);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.specifications-table__heading {
    margin: 0;
    color: var(--spec-navy);
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    font-weight: var(--font-weight-normal);
}

.specifications-table__intro {
    margin-top: calc(var(--spacing) * 6);
    line-height: var(--leading-loose);
}

.specifications-table__intro p + p {
    margin-top: calc(var(--spacing) * 4);
}

/* Wide tables scroll sideways inside the container instead of squashing. */
.specifications-table__scroll {
    overflow-x: auto;
    scrollbar-width: thin;
}

.specifications-table__scroll:focus-visible {
    outline: 2px solid var(--spec-turquoise);
    outline-offset: 4px;
}

.specifications-table__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    text-align: left;
}

@media (width >= 40rem) {
    .specifications-table__table {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
    }
}

/* Minimum column width: three columns fit a phone; more than that scroll. */
.specifications-table__table th,
.specifications-table__table td {
    min-width: calc(var(--spacing) * 24);
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 3);
    vertical-align: top;
    border-bottom: 1px solid var(--spec-line);
    background: var(--spec-bg);
}

@media (width >= 40rem) {
    .specifications-table__table th,
    .specifications-table__table td {
        min-width: calc(var(--spacing) * 32);
        padding-left: calc(var(--spacing) * 4);
        padding-right: calc(var(--spacing) * 4);
    }
}

.specifications-table__table :is(th, td):first-child {
    padding-left: 0;
}

.specifications-table__table :is(th, td):last-child {
    padding-right: 0;
}

/* Header row: bold navy with the turquoise brand rule beneath it. */
.specifications-table__table thead th {
    padding-top: 0;
    font-weight: var(--font-weight-bold);
    border-bottom: 2px solid var(--spec-turquoise);
}

.specifications-table__table tbody td {
    font-weight: var(--font-weight-normal);
}

/* "First column is row labels": the labels are medium weight and stay in view
   while a wide table scrolls. */
.specifications-table--row-labels tbody th {
    font-weight: var(--font-weight-medium);
}

.specifications-table--row-labels :is(thead, tbody) :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

.specifications-table__table a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--spec-turquoise);
    text-underline-offset: 3px;
}

.specifications-table__table sup,
.specifications-table__table sub {
    font-size: 0.75em;
}

.specifications-table__footnote {
    margin-top: calc(var(--spacing) * 6);
    color: color-mix(in srgb, var(--spec-navy) 65%, transparent);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}