/* --- Container --- */
.framework-section {
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    color: #1a1a1a;
    max-width: 900px;
}

.framework-intro {
    margin: 0 0 1rem 0;
    line-height: 1.6;
    color: #1a1a1a;
}

/*------------------------------------------------*/
/*  Framework tables    */
/*------------------------------------------------*/

/* --- Scrollable wrapper --- */
.framework-table-wrapper {
    max-height: 700px; /* adjust to taste */
    overflow-y: auto;
    border: 1px solid #767676;
    border-radius: 4px;
}

/* --- Table base --- */
.framework-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    /* --- Fixed header --- */
    .framework-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: var(--regional-mode);
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: bold;
        text-align: left;
        padding: 10px 12px;
        border-bottom: 2px solid #3a5c5a;
        /* Prevent header text from being selected on sort-click, if added later */
        user-select: none;
    }

    /* Column widths (2-column version) */
    .framework-table-2col th:nth-child(1),
    .framework-table-2col td:nth-child(1) {
        width: 28%;
    }

    .framework-table-2col th:nth-child(2),
    .framework-table-2col td:nth-child(2) {
        width: 72%;
    }

    /* Column widths (3-column version) */
    .framework-table-3col th:nth-child(1),
    .framework-table-3col td:nth-child(1) {
        width: 18%;
    }

    .framework-table-3col th:nth-child(2),
    .framework-table-3col td:nth-child(2) {
        width: 64%;
    }

    .framework-table-3col th:nth-child(3),
    .framework-table-3col td:nth-child(3) {
        width: 18%;
    }

    /* --- Body rows --- */
    .framework-table tbody tr {
        border-bottom: 1px solid #d0d0d0;
    }

        .framework-table tbody tr:last-child {
            border-bottom: none;
        }

        /* Alternating row shading — subtle, 508-safe (never rely on color alone) */
        .framework-table tbody tr:nth-child(odd) {
            background-color: #eef3f3;
        }

        .framework-table tbody tr:nth-child(even) {
            background-color: #ffffff;
        }

        .framework-table tbody tr:hover {
            background-color: #c8d9d8;
        }

    .framework-table tbody td {
        padding: 8px 12px;
        vertical-align: top;
        line-height: 1.5;
        font-size: 14px;
    }

        /* Term column — slightly bolder for visual hierarchy */
        .framework-table tbody td:first-child {
            font-weight: 600;
            color: #1a1a1a;
        }

/* Focus ring for keyboard navigation on the wrapper */
.framework-table-wrapper:focus-within {
    outline: 2px solid #2e4f4d;
    outline-offset: 1px;
}