: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;
}

/* The one site overlay (assets/frontend/js/overlay.js): a native <dialog>
   around an iframe, drawn like the fancybox v2 box it replaces (15px
   padding, #f9f9f9 skin, 4px radius, 0 10px 25px shadow, a 36px round close
   button overlapping the top-right corner, rgba(16, 12, 12, 0.69) backdrop).
   overlay.js sets the iframe width and height. */
.site-overlay {
    box-sizing: content-box;
    margin: auto;
    padding: 15px;
    border: 0;
    border-radius: 4px;
    background: #f9f9f9;
    color: #444;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    max-width: none;
    max-height: none;
    overflow: visible;
}

.site-overlay[open] {
    animation: site-overlay-fade 250ms ease-out;
}

.site-overlay::backdrop {
    background: rgba(16, 12, 12, 0.69);
}

.site-overlay__frame {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    /* Transparent like fancybox's iframe: the overlay pages have no
       background of their own, so the box colour shows through. */
    background: transparent;
}

.site-overlay__close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='15' fill='%23222' stroke='%23fff' stroke-width='3'/%3E%3Cpath d='M13 13l10 10M23 13L13 23' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
        center / 36px 36px no-repeat;
    cursor: pointer;
}

/* fancybox locked the page scroll while open */
html:has(.site-overlay[open]) {
    overflow: hidden;
}

@keyframes site-overlay-fade {
    from {
        opacity: 0.1;
    }

    to {
        opacity: 1;
    }
}

/* Random testimonials on the course page (components/random-testimonials.html.twig,
   a block shared with the legacy home page): the text is cut to 3 lines once
   testimonial-clamp.js added the modifier; the toggle appears only for a text that
   is really cut. Without the script nothing is cut. */
.comment-multiple--clamp .comment-content:not(.comment-content--expanded) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.comment-toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #069;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.comment-toggle:hover {
    color: #900;
    text-decoration: none;
}

.comment-toggle[hidden] {
    display: none;
}