/* --- TABLES --- */
:root {
  --table-cell-border: #dee5ed;
}

/* Fix Table Block */
.wp-block-table table thead {
    border: 0;
}
figure.wp-block-table {
    margin: 1rem 0 0 0;
}

/* Table styling */
table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    background-color: var(--color-bg-white);
    overflow: hidden;
    font-size: 13px;
}

table:not(:hover) tr:nth-child(even) {
    background-color: var(--color-bg-off-white);
}

.wp-block-table table td, .wp-block-table table th {
    padding: 0.75em 0.5em;
}

/* Header styling */
thead th, table:not(:has(thead)) tbody tr:first-child td {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-size: 13px;
}

table:not(:has(thead)) tbody tr:first-child td {
    border-right: solid 1px var(--table-cell-border) !important;
}

table:not(:has(#specificity)) :is(.wp-block-table td, .wp-block-table th):hover {
    color: var(--color-text-off-white-header);
    background-color: var(--color-brand-dark-hover);
}

/* Body cell styling */
tbody td {
  color: var(--color-text-dark);
}

table:has(:hover) :is(.wp-block-table td, .wp-block-table th) {
    border-right: solid 1px transparent;
    border-bottom: solid 1px transparent;
}

/* Preserve on hover */
table :is(.wp-block-table td, .wp-block-table th),
table:not(:has(#specificity)) :is(td:first-child, th), table:not(:has(thead)) tbody tr:first-child td {
  border-right: solid 1px var(--table-cell-border);
  border-bottom: solid 1px var(--table-cell-border);
}

/* Left-align the names in the first column */
tbody td:first-child {
  text-align: left;
  font-weight: 500;
}

thead th, tbody td:first-child, tbody:hover td:first-child, table:not(:has(thead)) tbody tr:first-child td, table:not(:has(thead)):hover tbody:hover tr:first-child td {
    background-color: var(--color-brand-dark);
    color: var(--color-text-off-white);
}

table thead th:first-child, table:not(:has(thead)) tr:first-child td:first-child {
    background-color: var(--color-brand-dark) !important;
    color: var(--color-text-off-white-header) !important;
    text-align: start;
}

/* --- The Crosshair Effect --- */

/* 1. Highlight the entire hovered row */
table tbody tr:hover {
  background-color: var(--color-bg-off-white);
}

/* Highlight rows and columns */
table:has(td:nth-child(2):hover, th:nth-child(2):hover) td:nth-child(2),
table:has(td:nth-child(3):hover, th:nth-child(3):hover) td:nth-child(3),
table:has(td:nth-child(4):hover, th:nth-child(4):hover) td:nth-child(4),
table:has(td:nth-child(5):hover, th:nth-child(5):hover) td:nth-child(5),
table:has(td:nth-child(6):hover, th:nth-child(6):hover) td:nth-child(6),
table:has(td:nth-child(7):hover, th:nth-child(7):hover) td:nth-child(7),
table:has(td:nth-child(8):hover, th:nth-child(8):hover) td:nth-child(8),
table:has(td:nth-child(9):hover, th:nth-child(9):hover) td:nth-child(9),
table:has(td:nth-child(10):hover, th:nth-child(10):hover) td:nth-child(10),
table:has(td:nth-child(11):hover, th:nth-child(11):hover) td:nth-child(11) {
  background-color: var(--color-bg-off-white);
}

/* Highlight the 'thead'/ header cells, if used */
table:has(td:nth-child(1):hover) th:nth-child(1),
table:has(td:nth-child(2):hover) th:nth-child(2),
table:has(td:nth-child(3):hover) th:nth-child(3),
table:has(td:nth-child(4):hover) th:nth-child(4),
table:has(td:nth-child(5):hover) th:nth-child(5),
table:has(td:nth-child(6):hover) th:nth-child(6),
table:has(td:nth-child(7):hover) th:nth-child(7),
table:has(td:nth-child(8):hover) th:nth-child(8),
table:has(td:nth-child(9):hover) th:nth-child(9),
table:has(td:nth-child(10):hover) th:nth-child(10),
table:has(td:nth-child(11):hover) th:nth-child(11) {
	color: var(--color-text-off-white-header);
    background-color: var(--color-brand-dark-hover);
}

/* Highlight first Left column */
table:has(tbody tr:nth-child(1):hover) tr:nth-child(1) td:first-child,
table:has(tr:nth-child(2):hover) tr:nth-child(2) td:first-child,
table:has(tr:nth-child(3):hover) tr:nth-child(3) td:first-child,
table:has(tr:nth-child(4):hover) tr:nth-child(4) td:first-child,
table:has(tr:nth-child(5):hover) tr:nth-child(5) td:first-child,
table:has(tr:nth-child(6):hover) tr:nth-child(6) td:first-child,
table:has(tr:nth-child(7):hover) tr:nth-child(7) td:first-child,
table:has(tr:nth-child(8):hover) tr:nth-child(8) td:first-child,
table:has(tr:nth-child(9):hover) tr:nth-child(9) td:first-child,
table:has(tr:nth-child(10):hover) tr:nth-child(10) td:first-child,
table:has(tr:nth-child(11):hover) tr:nth-child(11) td:first-child,
table:has(tr:nth-child(12):hover) tr:nth-child(12) td:first-child,
table:has(tr:nth-child(13):hover) tr:nth-child(13) td:first-child,
table:has(tr:nth-child(14):hover) tr:nth-child(14) td:first-child,
table:has(tr:nth-child(15):hover) tr:nth-child(15) td:first-child,
table:has(tr:nth-child(16):hover) tr:nth-child(16) td:first-child,
table:has(tr:nth-child(17):hover) tr:nth-child(17) td:first-child,
table:has(tr:nth-child(18):hover) tr:nth-child(18) td:first-child,
table:has(tr:nth-child(19):hover) tr:nth-child(19) td:first-child,
table:has(tr:nth-child(20):hover) tr:nth-child(20) td:first-child,
table:has(tr:nth-child(21):hover) tr:nth-child(21) td:first-child {
	color: var(--color-text-off-white-header);
    background-color: var(--color-brand-dark-hover);
}

/* Hightlight first top column, if the thead / header is not used */
table:not(:has(thead)) tbody:has(td:nth-child(1):hover) tr:first-child td:nth-child(1),
table:not(:has(thead)) tbody:has(td:nth-child(2):hover) tr:first-child td:nth-child(2),
table:not(:has(thead)) tbody:has(td:nth-child(3):hover) tr:first-child td:nth-child(3),
table:not(:has(thead)) tbody:has(td:nth-child(4):hover) tr:first-child td:nth-child(4),
table:not(:has(thead)) tbody:has(td:nth-child(5):hover) tr:first-child td:nth-child(5),
table:not(:has(thead)) tbody:has(td:nth-child(6):hover) tr:first-child td:nth-child(6),
table:not(:has(thead)) tbody:has(td:nth-child(7):hover) tr:first-child td:nth-child(7),
table:not(:has(thead)) tbody:has(td:nth-child(8):hover) tr:first-child td:nth-child(8),
table:not(:has(thead)) tbody:has(td:nth-child(9):hover) tr:first-child td:nth-child(9),
table:not(:has(thead)) tbody:has(td:nth-child(10):hover) tr:first-child td:nth-child(10),
table:not(:has(thead)) tbody:has(td:nth-child(11):hover) tr:first-child td:nth-child(11){
	color: var(--color-text-off-white-header);
    background-color: var(--color-brand-dark-hover);
}

/* --- END OF TABLES --- */