/*
 * page-sections.css - section backgrounds for the standard page editor
 *
 * Location: $master_path/styles/page-sections.css (one central copy).
 * Each site serves it through /styles/page-sections.php.
 * A skin can replace it completely with /skins/<skindir>/styles/page-sections.css
 * (index.php / members.php / the editor link the skin copy when it exists).
 *
 * Version 1.01.0  (14/10/2026)
 *
 * ChangeLog:
 * 1.01.0 14/10/2026 - Colour overlay: the overlay colour comes from
 *   --section-bg-overlay-color (black when not set, so existing overlays
 *   look the same) and its strength from --section-bg-overlay (opacity).
 * 1.00.1 13/10/2026 - Header only: now lives in $master_path/styles,
 *   served to sites by /styles/page-sections.php.
 * 1.00.0 13/10/2026 - First release (Claude, for Gary).
 *
 * Markup (from page_section_open() in includes/functions/page_sections.inc):
 *   <div class="section-bg has-bg-image has-bg-overlay section-bg-parallax
 *               has-bg-color section-text-light section-bg-centered centeredText section-bg_N"
 *        style="--section-bg-image:url('...'); --section-bg-position:center top;
 *               --section-bg-overlay:0.40; --section-bg-overlay-color:#0b3d91;
 *               --section-bg-color:#1d3557">
 *     ...the section's existing ID / Class / .section divs...
 *   </div>
 *
 * Also loaded into the page editor (TinyMCE content_css) so Light Text and
 * Center preview correctly while editing.
 */

/* ---- wrapper ---------------------------------------------------- */
.section-bg {
    position: relative;
    isolation: isolate;               /* keeps the overlay / parallax layers inside this section */
}

.section-bg.has-bg-color {
    background-color: var(--section-bg-color);
}

.section-bg.has-bg-image {
    background-image: var(--section-bg-image);
    background-size: cover;
    background-position: var(--section-bg-position, center center);
    background-repeat: no-repeat;
}

/* ---- colour overlay (above the image, below the content) -------- */
.section-bg.has-bg-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--section-bg-overlay-color, #000);
    opacity: var(--section-bg-overlay, 0);
    pointer-events: none;
}

/* ---- parallax ----------------------------------------------------
 * The image sits on a position:fixed layer, and clip-path makes the
 * section a window onto it, so the image stays still while the content
 * scrolls. Unlike background-attachment:fixed this also works on iOS.
 * If a skin puts a transform / filter on an element AROUND the content,
 * the fixed layer can't escape it and the image simply scrolls with the
 * section instead - nothing breaks.
 * ---------------------------------------------------------------- */
.section-bg.section-bg-parallax.has-bg-image {
    background-image: none;
    clip-path: inset(0);
}

.section-bg.section-bg-parallax.has-bg-image::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: var(--section-bg-image);
    background-size: cover;
    background-position: var(--section-bg-position, center center);
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ---- light text -------------------------------------------------- */
.section-text-light,
.section-text-light h1,
.section-text-light h2,
.section-text-light h3,
.section-text-light h4,
.section-text-light h5,
.section-text-light h6,
.section-text-light p,
.section-text-light li,
.section-text-light blockquote {
    color: #fff;
}

.section-text-light a:not(.btn) {
    color: #fff;
    text-decoration: underline;
}

/* ---- centred ----------------------------------------------------- */
.section-bg-centered {
    text-align: center;
}