/*
Theme Name: Atlas Child
Theme URI: https://demo.tmrwstudio.net/atlas
Description: Child theme for Atlas
Author: Your Name
Template: atlas
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: atlas-child
*/

/* Add your custom CSS below */
/* Делаем текст в TOC светлым при темной теме */

.site-dark #ez-toc-container .ez-toc-title,
.bg-dark #ez-toc-container .ez-toc-title,
.site-dark #ez-toc-container a,
.bg-dark #ez-toc-container a {
    color: #ffffff !important; /* Белый цвет текста */
    text-shadow: none !important; /* Убираем лишние тени */
}

/* (Опционально) Цвет ссылок при наведении в темной теме */
.site-dark #ez-toc-container a:hover,
.bg-dark #ez-toc-container a:hover {
    color: var(--color-accent, #3d55ef) !important; /* Акцентный цвет темы */
    text-decoration: underline;
}

/* ================================================================
   RESPONSIVE TABLES — scroll wrapper for mobile, natural on desktop
   Table stays display:table; wrapper handles overflow-x on mobile
   ================================================================ */

/* Wrapper div added by PHP filter */
.atlas-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5em;
}

/* Parent figure/div must not clip the scrollable table */
.atlas-table-wrap,
figure.wp-block-table:has(.atlas-table-wrap) {
    overflow-x: auto;
}
figure.wp-block-table:has(.atlas-table-wrap) {
    display: block;
}

/* Table inside wrapper — let content determine width so scroll activates */
.atlas-table-wrap table {
    width: auto;
    min-width: 100%;
    max-width: none;
    margin-bottom: 0;
    table-layout: auto;
}

/* Headers stay on one line so column labels are always visible */
.atlas-table-wrap th {
    white-space: nowrap;
}

/* Data cells: text wraps, column gets min-width so it doesn't collapse */
.atlas-table-wrap td {
    white-space: normal;
    word-break: break-word;
    min-width: 100px;
}

/* First column gets extra room — typically the row label */
.atlas-table-wrap td:first-child,
.atlas-table-wrap th:first-child {
    min-width: 140px;
}

/* Mobile: reduce min-width so 4-5 column tables still fit-ish */
@media (max-width: 480px) {
    .atlas-table-wrap td {
        min-width: 80px;
    }
    .atlas-table-wrap td:first-child,
    .atlas-table-wrap th:first-child {
        min-width: 120px;
        white-space: nowrap;
    }
}

/* Cell styling for readability */
.entry-content th,
.entry-content td,
.post-content th,
.post-content td,
.comment-content th,
.comment-content td,
.elementor-widget-text-editor th,
.elementor-widget-text-editor td {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    vertical-align: top;
    word-break: break-word;
}

/* Header cells */
.entry-content th,
.post-content th,
.comment-content th,
.elementor-widget-text-editor th {
    background: #f5f5f5;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

/* Zebra striping for data rows */
.entry-content tbody tr:nth-child(even),
.post-content tbody tr:nth-child(even),
.comment-content tbody tr:nth-child(even),
.elementor-widget-text-editor tbody tr:nth-child(even) {
    background: #fafafa;
}


/* Mobile: reduce font for dense tables */
@media (max-width: 480px) {
    .entry-content th,
    .entry-content td,
    .post-content th,
    .post-content td,
    .comment-content th,
    .comment-content td,
    .elementor-widget-text-editor th,
    .elementor-widget-text-editor td {
        font-size: 13px;
        padding: 6px 8px;
    }
}