/**
 * Document page template (page-templates/legal.php).
 *
 * Values mirror the Tilda originals (bebestschool.kz/legal-notice and the
 * two policies): the title 29 px bold, centred, 832 px wide, 20 px under the
 * header; the text 60 px lower in ApercuPro Light 20 / 1.55 across the 1160 px
 * column — 18 px on the 960 grid, 16 / 1.45 on phones.
 *
 * The content rules also style the block editor: inc/page-legal.php loads this
 * file as an editor style, and page-templates/legal-editor.js puts the same
 * classes on the editor's title and content while the page uses the template.
 */

/* ── Title ── */
.bbs-legal__header {
    padding: 20px 20px 15px;
}

.bbs-legal__title {
    max-width: 832px;
    margin: 0 auto;
    color: #000000;
    font-family: var(--bbs-font);
    font-size: 29px;
    line-height: 1.55;
    font-weight: 700;
    text-align: center;
    overflow-wrap: break-word;
}

/* ── Text ── */
.bbs-legal__content {
    --bbs-legal-column: 1160px;
    --bbs-legal-gutter: 20px;
    --bbs-legal-size: 20px;
    --bbs-legal-leading: 1.55;
    --bbs-legal-rule: #d9d9d9;

    max-width: calc(var(--bbs-legal-column) + var(--bbs-legal-gutter) * 2);
    margin: 0 auto;
    padding: 68px var(--bbs-legal-gutter) 66px;
    color: #000000;
    font-family: var(--bbs-font);
    font-size: var(--bbs-legal-size);
    line-height: var(--bbs-legal-leading);
    font-weight: 300;
    overflow-wrap: break-word;
}

.bbs-legal__content > * {
    margin-top: 0;
    margin-bottom: 0;
}

.bbs-legal__content > * + * {
    margin-top: 0.75em;
}

.bbs-legal__content strong,
.bbs-legal__content b,
.bbs-legal__content th {
    font-weight: 700;
}

/* Headings: the size of the text, bold — as the original sets its section titles. */
.bbs-legal__content h2,
.bbs-legal__content h3,
.bbs-legal__content h4,
.bbs-legal__content h5,
.bbs-legal__content h6 {
    color: inherit;
    font-family: inherit;
    font-size: 1em;
    line-height: inherit;
    font-weight: 700;
}

.bbs-legal__content > h2 {
    margin-top: 1.8em;
}

.bbs-legal__content > :is(h3, h4, h5, h6) {
    margin-top: 1.4em;
}

.bbs-legal__content > :is(h2, h3, h4, h5, h6) + * {
    margin-top: 0.4em;
}

.bbs-legal__content > :first-child {
    margin-top: 0;
}

/* Lists */
.bbs-legal__content ul,
.bbs-legal__content ol {
    padding-left: 1.4em;
}

.bbs-legal__content li + li,
.bbs-legal__content li > ul,
.bbs-legal__content li > ol {
    margin-top: 0.35em;
}

.bbs-legal__content li::marker {
    color: var(--bbs-green);
}

.bbs-legal__content ol > li::marker {
    font-weight: 700;
}

/* Links */
.bbs-legal__content a {
    color: var(--bbs-green);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.bbs-legal__content a:hover {
    color: #169c4c;
    text-decoration: none;
}

/* Quote */
.bbs-legal__content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 0.2em 0 0.2em 1em;
    border-left: 3px solid var(--bbs-green);
}

.bbs-legal__content blockquote p {
    margin: 0;
}

/* Tables — the cookie lists. Wide ones scroll sideways on a phone. */
.bbs-legal__content .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bbs-legal__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 400;
}

/* Doubled class: over the core Table block's own black rules and 3 px lines. */
.bbs-legal__content.bbs-legal__content :is(th, td) {
    padding: 10px 12px;
    border: 1px solid var(--bbs-legal-rule);
    text-align: left;
    vertical-align: middle;
}

.bbs-legal__content.bbs-legal__content :is(thead, tfoot) {
    border: 0;
}

.bbs-legal__content thead th {
    background: #f2f2f2;
}

.bbs-legal__content .wp-block-table figcaption {
    margin-top: 0.5em;
    color: #666666;
    font-size: 14px;
    text-align: left;
}

/* Images */
.bbs-legal__content .wp-block-image img {
    display: block;
    height: auto;
}

.bbs-legal__content .wp-block-image.aligncenter,
.bbs-legal__content .wp-block-image .aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* ── 1199 and below: the 960 px grid ── */
@media (max-width: 1199px) {
    .bbs-legal__content {
        --bbs-legal-column: 940px;
        --bbs-legal-size: 18px;
    }
}

/* ── 959 and below: the 640 px grid ── */
@media (max-width: 959px) {
    .bbs-legal__title {
        max-width: 575px;
    }

    .bbs-legal__content {
        --bbs-legal-column: 600px;
    }

    .bbs-legal__content table {
        min-width: 600px;
        font-size: 14px;
    }
}

/* ── 639 and below: the full screen ── */
@media (max-width: 639px) {
    .bbs-legal__title {
        max-width: 490px;
    }

    .bbs-legal__content {
        --bbs-legal-column: 100%;
        --bbs-legal-size: 16px;
        --bbs-legal-leading: 1.45;

        max-width: none;
    }

    .bbs-legal__content table {
        font-size: 13px;
    }

    .bbs-legal__content.bbs-legal__content :is(th, td) {
        padding: 8px 10px;
    }
}

@media (max-width: 479px) {
    .bbs-legal__header {
        padding-bottom: 14px;
    }

    .bbs-legal__title {
        max-width: 299px;
        font-size: 23px;
    }
}