/*
 Theme Name:   Kadence-Child
 Theme URI:
 Description:  Child theme for Kadence
 Author:
 Author URI:
 Template:     kadence
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  kadence-child
*/

/* Add your custom styles below this line */


/* Horizontal Brentwood branding — the red vertical accent line.
   Output as <div class="border-primary-line"> after the content on every
   singular post/page (see functions.php). It anchors to the article (the
   content column) via the positioning context below, so:
     • Desktop (>=768px): it sits at the ~34.7% accent position.
     • Mobile  (<768px):  with no offset it sits flush at the content column's
       LEFT edge — matching the live site (brentwood.ca). */

/* Positioning context: anchor the absolute line to the content column. */
.single-entry,
article.entry {
    position: relative;
}

/* The red vertical line — sits BEHIND content blocks.
   Mobile default: left:0 = flush to the content column's left edge. */
.border-primary-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-right: 4px solid rgb(200, 39, 44);
    z-index: 0;
    pointer-events: none;
}

/* Desktop: move the line in to the ~33% accent position. */
@media (min-width: 768px) {
    .border-primary-line {
        margin-left: 34.7%;
    }
}

/* Content blocks render above the line. */
.entry-content {
    position: relative;
    z-index: 1;
}

/* Mobile (<768px): the layout collapses to one column and its blocks are
   full-bleed/opaque (hero image + rows span edge-to-edge), so anything BEHIND
   them — the default line, or even a left-border on the content box — gets
   painted over. Keep the accent line at the content's left edge but bring it in
   FRONT of the content so it always shows. pointer-events:none keeps it from
   blocking taps. */
@media (max-width: 767px) {
    /* Mobile: the content column normally bleeds ~16px off each side of the
       viewport, which clipped any left accent off-screen. Pull it back within
       the viewport, then draw the red accent as a real border-left on the
       content box. Because the header is absolutely positioned ON TOP, it stays
       above this border; and because the content sits to the RIGHT of the
       border, the blocks/rows sit in front of it — matching the live site. */
    .border-primary-line {
        display: none;
    }
    .entry-content-wrap,
    article.content-bg {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Border on .entry-content (which begins BELOW the absolute header) so the
       line starts under the header, not behind it. */
    .entry-content {
        /* Red accent line DISABLED 2026-07-20 at client request (removed the
           red line). Mobile draws the line here (independent of the desktop
           .border-primary-line div, which is now un-injected in functions.php).
           Uncomment to restore: */
        /* border-left: 4px solid rgb(200, 39, 44); */
    }
    /* Keep full-bleed heroes/rows from breaking out over the accent border —
       otherwise they cover part of it and the line looks uneven (thin over the
       hero, full width over text). Align them to the content edge instead. */
    .entry-content > .bw-phero,
    .entry-content > .alignfull,
    .entry-content .bw-phero--bleed {
        margin-left: 0 !important;
    }
}
/* ── Front-end-only page layout overrides ─────────────────────────────────
   Moved here 2026-07-21 from blocks/video-text/style.css.

   Why it must live in THIS file: a block's `style` stylesheet is also loaded
   inside the block editor canvas, so a global page-layout rule placed in one
   escapes its block and hits the EDITOR's own wrappers. That is exactly what
   happened — `.entry-content-wrap { padding: 0 !important }` stripped the
   padding off the editor's content wrapper and made the post title render
   edge-to-edge (the "broken title" in the backend).

   This stylesheet is enqueued on `wp_enqueue_scripts` only (see functions.php),
   never via add_editor_style, so rules here reach the front end and nothing
   else. Front-end rendering is unchanged from before the move. */
html body .entry-content-wrap,
body .entry-content-wrap,
.entry-content-wrap {
	padding: 0 !important;
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
}