/**
 * Policy template.
 *
 * Typography lifted from the live page it replaces (bebestschool.es/en/policy,
 * record rec610926129, a Tilda T004 text block): 16 px / line-height 1.6 body
 * copy in ApercuPro, and #ff8562 links — the project's default link colour
 * (`a{color:#ff8562}` in its shared stylesheet), a softer coral distinct from
 * the punchier #ff5c00 used on buttons elsewhere on the site. The page has no
 * real heading system of its own — every "sub-heading" there is just strong
 * text at body size — so headings here stay close to that: bold and spaced,
 * not blown up. The one thing the source doesn't have is a real page title;
 * it bakes "Privacy policy and oferta" into the copy as centred 32 px bold
 * text, which is the size and treatment given to the actual H1 here.
 */

.bbs-page {
    --bbs-page-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --bbs-page-container: 1200px;
    --bbs-page-gutter: 20px;

    --bbs-page-ink: #000000;
    --bbs-page-accent: #ff8562;

    padding: 60px 0 90px;
    color: var(--bbs-page-ink);
    font-family: var(--bbs-page-font);
}

.bbs-page *,
.bbs-page *::before,
.bbs-page *::after {
    box-sizing: border-box;
}

.bbs-page__inner {
    max-width: calc(var(--bbs-page-container) + var(--bbs-page-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--bbs-page-gutter);
}

/* The path to the page, centred over the title like the title itself, and
 * quieter than the copy: grey, with the links taking the page's coral on
 * hover. */
.bbs-page__breadcrumbs {
    margin: 0 0 16px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    line-height: 1.5;
}

.bbs-page__breadcrumbs .bbs-breadcrumbs__list {
    justify-content: center;
}

.bbs-page__breadcrumbs .bbs-breadcrumbs__link:hover,
.bbs-page__breadcrumbs .bbs-breadcrumbs__link:focus-visible {
    color: var(--bbs-page-accent);
}

.bbs-page__title {
    margin: 0 0 40px;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
}

/* ── Prose ── */
.bbs-page__content {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

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

.bbs-page__content > :last-child {
    margin-bottom: 0;
}

.bbs-page__content p {
    margin: 0 0 1.6em;
}

/* The source draws every "sub-heading" as bold body-size text with a blank
   line before it — real Heading blocks get the same treatment here. */
.bbs-page__content h2,
.bbs-page__content h3,
.bbs-page__content h4 {
    margin: 1.9em 0 0.5em;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
}

.bbs-page__content ul,
.bbs-page__content ol {
    margin: 0 0 1.6em;
    padding-left: 1.25em;
}

.bbs-page__content li + li {
    margin-top: 0.4em;
}

.bbs-page__content a {
    color: var(--bbs-page-accent);
    text-decoration: none;
}

.bbs-page__content a:hover {
    text-decoration: underline;
}

.bbs-page__content a:focus-visible {
    outline: 2px solid var(--bbs-page-accent);
    outline-offset: 2px;
}

.bbs-page__content strong {
    font-weight: 700;
}

.bbs-page__content blockquote {
    margin: 0 0 1.6em;
    padding-left: 1.2em;
    border-left: 3px solid #eeeeee;
    color: #555555;
}

.bbs-page__content table {
    width: 100%;
    margin: 0 0 1.6em;
    border-collapse: collapse;
}

.bbs-page__content th,
.bbs-page__content td {
    padding: 8px 12px;
    border: 1px solid #eeeeee;
    text-align: left;
}

.bbs-page__content .page-links {
    margin-top: 2em;
    font-weight: 700;
}

@media (max-width: 639px) {
    .bbs-page {
        --bbs-page-gutter: 16px;

        padding: 40px 0 60px;
    }

    .bbs-page__title {
        margin-bottom: 28px;
        font-size: 26px;
    }

    .bbs-page__breadcrumbs {
        margin-bottom: 12px;
        font-size: 13px;
    }
}