/**
 * Page layout widths and padding
 *
 * Extends the parent theme's Bootstrap 3 container rather than replacing it,
 * so everything below the large breakpoint keeps Lambda's existing responsive
 * behaviour (750px / 970px / 1170px) untouched.
 *
 * @package HCDSB_Child
 * @since   1.15
 */

/* -------------------------------------------------------------------------
 * Widths
 *
 * Boxed is Bootstrap 3 stock — 750 / 970 / 1170px at the sm / md / lg
 * breakpoints. No override; `.container` alone does the job.
 *
 * Wide adds one tier above lg, following Bootstrap 3's own arithmetic:
 * container widths are content + 30px gutter (1140 + 30 = 1170), and each
 * breakpoint clears its container by a small margin (750/768, 970/992,
 * 1170/1200 — deltas of 18, 22, 30). Extending that progression, a
 * 1250 + 30 = 1280px container engages at 1320px.
 *
 * Below 1320 the wide layout falls back to stock container behaviour, so
 * nothing changes at or under the existing breakpoints.
 * ---------------------------------------------------------------------- */

@media (min-width: 1320px) {
    .container-wide {
        width: 1280px;
    }
}

/**
 * True edge-to-edge for full-width pages. .container-fullwidth is already
 * defined in the parent's theme.css but keeps 15px side padding and inherits
 * the row's negative margins; these rules strip both.
 */
.hcdsb-layout-full .container-fullwidth {
    padding-left: 0;
    padding-right: 0;
}

.hcdsb-layout-full .container-fullwidth > .row {
    margin-left: 0;
    margin-right: 0;
}

.hcdsb-layout-full .container-fullwidth > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* -------------------------------------------------------------------------
 * Vertical padding
 *
 * Applied to the .row wrapper, replacing the parent's global
 * .element-top-N / .element-bottom-N pair driven by the site-wide
 * `template_margin` theme option.
 * ---------------------------------------------------------------------- */

.hcdsb-pad-top {
    padding-top: 60px;
}

.hcdsb-pad-bottom {
    padding-bottom: 60px;
}

@media (max-width: 767px) {
    .hcdsb-pad-top {
        padding-top: 30px;
    }

    .hcdsb-pad-bottom {
        padding-bottom: 30px;
    }
}

/* -------------------------------------------------------------------------
 * Title band suppression
 *
 * The band is not rendered at all when hidden (see page.php), so this only
 * closes the gap left by the parent's header spacing on affected pages.
 * ---------------------------------------------------------------------- */

.hcdsb-no-page-title .section:first-of-type {
    margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Alignfull / alignwide breakout
 *
 * Lambda wraps page content in .container > .row > .col-md-*, so a Kadence
 * Row set to Full Width has no way out of the boxed shell on its own — the
 * theme predates alignment support and never shipped the CSS for it.
 *
 * The parent's partials/content-page.php echoes the_content() straight into
 * <article>, so top-level blocks are direct children of it. Scoping to
 * `> article >` means only top-level blocks break out; a full-width row
 * nested inside another block stays put, which is the intended behaviour.
 *
 * Deliberately NOT applied to the sidebar layout: breaking a row out of a
 * col-md-9 that sits beside a sidebar overlaps it.
 * ---------------------------------------------------------------------- */

.hcdsb-layout-boxed .hcdsb-content > article > .alignfull,
.hcdsb-layout-wide .hcdsb-content > article > .alignfull {
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/**
 * Alignwide splits the difference: it reaches the 1280px wide measure even on
 * a boxed page. min() keeps the pull-out from exceeding the viewport on
 * narrow screens.
 */
.hcdsb-layout-boxed .hcdsb-content > article > .alignwide,
.hcdsb-layout-wide .hcdsb-content > article > .alignwide {
    width: auto;
    max-width: none;
    margin-left: calc(50% - min(640px, 50vw));
    margin-right: calc(50% - min(640px, 50vw));
}

/**
 * 50vw includes the scrollbar, so a broken-out row is a few pixels wider than
 * the visible viewport. `clip` trims the overflow without creating a scroll
 * container, so position: sticky inside the page still works — `hidden` would
 * break it. Safari below 16 ignores this and shows a small horizontal scroll.
 */
.hcdsb-layout-boxed .section,
.hcdsb-layout-wide .section {
    overflow-x: clip;
}