sup {
    bottom: 0.5em;
    font-size: 0.8em;
}

/* Footnote-style links (e.g. <a href="#footnotes"><sup>[1]</sup></a>)
   shouldn't get an underline — it visually collides with the raised
   sup/sub text and breaks the layout */
a:has(sup),
a:has(sub) {
    text-decoration: none;
}

/* Prettier Data Tables */
.data-table-wrapper {
    container-type: inline-size;
    container-name: data-table;
    width: 100%;
    max-width: var(--data-table-max-width, 40rem);
}
.data-table-wrapper .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875em;
    border: 0px !important;
    margin: 0 0 16px;
}
.data-table-wrapper .data-table tr {
    border-bottom: 1px dotted var(--gcid-primary-color, green);
}
.data-table-wrapper .data-table tr:last-child {
    border-bottom: 2px solid var(--gcid-primary-color, green);
}
/* Scoped through .data-table-wrapper so these win over the theme's
   global ".entry-content tr td { border-top: 1px solid #eee; padding:
   6px 24px; }" rule — a bare ".data-table td" selector has lower
   specificity than that rule and silently loses to it, which is what
   was leaking the stray border and the wrong padding onto every cell. */
.data-table-wrapper .data-table td {
    text-align: left;
    padding: 0.875rem 0.25rem;
    vertical-align: top;
    border: none;
}
.data-table-wrapper .data-table td.data-table-sub {
    font-style: italic;
}
.data-table-wrapper .data-table td.data-table-value,
.data-table-wrapper .data-table td.data-table-sub-value {
    text-align: right;
    white-space: nowrap;
    padding-left: 1.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--gcid-primary-color, green);
    font-weight: 600;
}
.data-table-wrapper .data-table td.data-table-sub-value {
    font-size: 0.875rem;
}
/* Stack into a label/value list once the table's own container gets
   narrower than 26rem — e.g. on phones, or in a narrow sidebar/column.
   This only ever triggers when the container is actually narrower than
   the breakpoint, so keep --data-table-max-width (or the 40rem default)
   comfortably above 26rem if you want the two-column table to still show
   on wider layouts. */
@container data-table (max-width: 26rem) {
    .data-table-wrapper .data-table {
        font-size: 0.875rem;
    }
    .data-table-wrapper .data-table,
    .data-table-wrapper .data-table tbody,
    .data-table-wrapper .data-table tr,
    .data-table-wrapper .data-table td {
        display: block;
        width: 100%;
    }
    .data-table-wrapper .data-table tr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.75rem 0;
    }
    .data-table-wrapper .data-table td {
        padding: 0;
    }
    .data-table-wrapper .data-table tr.data-table-sub {
        padding-left: 0.875rem;
    }
    .data-table-wrapper .data-table td.data-table-sub {
        padding-left: 0.875rem;
    }
    .data-table-wrapper .data-table td.data-table-value,
    .data-table-wrapper .data-table td.data-table-sub-value {
        width: auto;
        padding-left: 0;
        flex-shrink: 0;
    }
}

/* Block Editor buttons matched to Divi's "secondary" (filled) and
   "outlined" button styles from the grafisk-profil page. */
body .wp-block-button .wp-block-button__link {
    background-color: var(--gcid-secondary-color, blue);
    border: 2px solid var(--gcid-secondary-color, blue);
    border-radius: 0;
    color: #ffffff;
    padding: 0.6em 1em 0.5em;
    font-family: Rubik, sans-serif;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    margin-top: 1rem;
    margin-bottom: 1rem;
    transition: 0.3s; 
}
body .wp-block-button .wp-block-button__link:hover {
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;

    text-decoration-thickness: 2px;
    
}

/* Uses WordPress' built-in "Outline" block style (no extra code needed
   — editors pick it from the block's Styles panel) */
body .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: #ffffff;
    border: 2px solid var(--gcid-secondary-color, blue);;
    color: var(--gcid-secondary-color, blue);
}
/* Redundant?

body .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: #ffffff;
    color: var(--gcid-secondary-color, blue);
    border-color: var(--gcid-secondary-color, blue);
} 
*/