/* Base grid/card styles moved to common.css; keep color + table specifics */

/* ===== Color-coded Cards ===== */
.letters {
    border-top-color: #6f42c1;
}

.digraphs {
    border-top-color: #1e90ff;
}

.trigraphs {
    border-top-color: #28a745;
}

.hardsoftconsonants {
    border-top-color: #daa520;
}

/* Modal base moved; only override default top border + h2 colors below */

/* Close button base in common.css */

/* ===== Alphabet Tables ===== */
.alphabet-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 15px 0;
    font-size: 0.95rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Table header colors based on type */
.alphabet-table.letters th {
    background: #6f42c1;
    color: white;
}

.alphabet-table.digraphs th {
    background: #1e90ff;
    color: white;
}

.alphabet-table.trigraphs th {
    background: #28a745;
    color: white;
}

.alphabet-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.alphabet-table tr:nth-child(even) td {
    background: #f7f5fc;
}

.alphabet-table tr:hover td {
    background: #eae6f7;
}

/* ===== Modal Type Colors ===== */
.modal-content.letters {
    border-top-color: #6f42c1;
}

.modal-content.digraphs {
    border-top-color: #1e90ff;
}

.modal-content.trigraphs {
    border-top-color: #28a745;
}

.modal-content.hardsoftconsonants {
    border-top-color: #daa520;
}

.modal-content.letters h2 {
    color: #6f42c1;
}

.modal-content.digraphs h2 {
    color: #1e90ff;
}

.modal-content.trigraphs h2 {
    color: #28a745;
}

.modal-content.hardsoftconsonants h2 {
    color: #daa520;
}

/* ===== Hard & Soft Consonants Table Styling ===== */
.alphabet-table.hardsoftconsonants th {
    background: #daa520;
    /* golden header */
    color: #fff;
    text-align: left;
}

.alphabet-table.hardsoftconsonants td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.alphabet-table.hardsoftconsonants tr:nth-child(even) td {
    background: #fff8e1;
    /* light golden for even rows */
}

.alphabet-table.hardsoftconsonants tr:hover td {
    background: #ffeeba;
    /* highlight on hover */
}

/* Color coding rows */
.hard-row td:first-child {
    font-weight: bold;
    color: #b8860b;
    /* dark goldenrod for hard */
}

.soft-row td:first-child {
    font-weight: bold;
    color: #7b3f00;
}

/* Optional: add subtle border-left color for categories */
.hard-row td:first-child {
    border-left: 4px solid #b8860b;
    padding-left: 11px;
}

.soft-row td:first-child {
    border-left: 4px solid #daa520;
    padding-left: 11px;
}