/* ==========================================================================
 * legal.css - styling specific to the legal pages (terms, conditions of use,
 * data protection). These pages reuse md-shared.css + article.css for all
 * typography, the two-column layout, and the ToC card; this file only adds:
 *   1. the left-aligned page title above the content row,
 *   2. the anchor scroll-offset under the sticky header, and
 *   3. the tablet/mobile stacking that article.css does not ship.
 * No Elementor classes, no client-side ToC generation.
 * ========================================================================== */

/* Page title - left-aligned above the two-column row, matching the production
   Elementor legal template (36px Poppins). */
.content-layout .legal-title {
    font-family: "Poppins", Sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
    color: #0F1115;
    margin: 0 0 40px;
}

/* ToC anchor links land below the sticky header instead of behind it. */
html {
    scroll-padding-top: 120px;
}

/* ==========================================================================
 * Responsive - article.css ships no media queries, so the two-column row is
 * collapsed here. Below 1024px the ToC card stacks full-width above the
 * content (matching the production legal pages), and stops being sticky.
 * ========================================================================== */
@media (max-width: 1024px) {
    .content-layout .article-wrapper {
        flex-direction: column;
    }

    .content-layout .article-wrapper .content-sidebar {
        order: -1;
        width: 100%;
        position: static;
        top: auto;
    }
}

@media (max-width: 767px) {
    .content-layout .legal-title {
        font-size: 28px;
    }
}