:root {
    --color-primary: #006699;
    --color-primary-dark: #003551;
    --color-bg-sidebar: #f5f3e8;
    --color-text: #333;
    --color-border: #ccc;

    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    --sidebar-width: 320px;
}

/* Mirrors legacy container_16 (width: 92%) so header, nav, buttons,
   sidebar+content, bottom-menu and family all align at the same inset. */
.site-inner {
    width: 92%;
    margin: 0 auto;
}

/* CSS Grid replaces 960gs floats for the two-column body layout.
   minmax(0, 1fr), not 1fr: a bare 1fr track never shrinks below its
   content's min-content width, so a fixed-width legacy block (the 730px
   #index-slider) or a wide CMS table stretched the column past the
   viewport and gave mobile a horizontal scroll. */
.site-body {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: var(--space-6);
}

/* CMS text can hold unbreakable runs (a "______" signature line). */
.site-main {
    overflow-wrap: break-word;
}

/* #eshko-family uses .grid_16 (float: left; display: inline) from the
   960gs. Inside .container_16 it gets a width from the grid, but in
   the new base template it is a direct child of .container-block, so
   it shrinks to content width. Force full width here. */
#eshko-family {
    display: block;
    float: none;
    overflow: hidden; /* contain floated .div100 child */
    box-sizing: border-box;
}

#nav-header-menu,
#eshko-links,
.site-body,
#bottom-menu {
    margin-left: 1%;
    margin-right: 1%;
}

@media (max-width: 768px) {
    .site-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-sidebar {
        order: 2;
    }
}

/* Port of the legacy adaptive.css `.text table` rule (same 900px
   breakpoint): migrated templates wrap CMS HTML in .rich-text /
   .news-detail__content instead of .text, so wide TinyMCE tables lost it.
   The table scrolls inside itself instead of widening the page. */
@media (max-width: 900px) {
    .site-main table {
        display: block;
        width: 100% !important;
        height: auto !important;
        overflow-x: auto;
    }
}

/* ── Page header ──────────────────────────────────────────────────────── */
/* Generic title bar for the top of a content page. Each page's <main>
   typically begins with <header class="page-header"><h1>…</h1></header>. */
.page-header {
    height: auto;
    margin-top: 36px;
}

.page-header h1,
.page-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
}

/* ── Pagination ───────────────────────────────────────────────────────── */
nav.pagination {
    text-align: center;
    margin-top: 15px;
    font-size: 16px;
}

nav.pagination a,
nav.pagination span {
    margin: 0 7px;
}

/* ── Rich text (CMS content) ─────────────────────────────────────────── */
/* Shared typography for TinyMCE-authored HTML embedded raw in a page (port
   of the legacy `#text`/`.text` rules, public/css/src/eshko.css ~L442-470).
   Introduced for the rubricator pages (docs/plans/rubricator-pages.md Slice
   2); retrofitting the other modules that ported a slice of the same rules
   on their own (news.css .news-detail__content, course.css …) is a
   follow-up, not this change. */
.rich-text {
    margin-top: 15px;
}

.rich-text h2,
.rich-text h3 {
    margin-bottom: 15px;
    font-size: 22px;
}

.rich-text p {
    margin-bottom: 15px;
}

.rich-text table {
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.5em;
    text-align: center;
    width: 100%;
}

.rich-text table td {
    border: 1px solid var(--color-border);
    color: #000;
    padding: 0.3em;
    text-align: left;
}