/*
	Theme Name: NovaBP
	Theme URI: https://novabp.com.au/
	Description: Child theme of Hello Elementor for Nova Business Professionals. Holds the NovaBP blog system, custom Elementor widgets and site-specific styles.
	Author: Nova Business Professionals
	Author URI: https://novabp.com.au/
	Template: hello-elementor
	Version: 1.0.0
	Requires at least: 6.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: novabp
*/

/*
 * Site-wide overrides go here.
 *
 * Component styles live in their own files under assets/css/ and are registered
 * in functions.php (novabp-blog, novabp-testimonials, novabp-post-hero).
 */

/* ---------------------------------------------------------------------------
 * Section gutters — the one place the responsive page rhythm is defined
 *
 * Every full-bleed section on the site pads itself with these two tokens rather
 * than restating pixel values, so the breakpoints below move the whole page at
 * once:
 *
 *   desktop            80px / 80px   (Figma: 1440 frame, 80px gutters)
 *   laptop  <= 1366px  80px / 48px   (narrow the gutter before the content)
 *   tablet  <= 1024px  64px / 40px
 *   mobile  <=  767px  48px / 16px
 *
 * They live here, on :root, rather than in novabp-tax-base.css with the rest of
 * the design tokens because style.css is the only stylesheet loaded on every
 * page. The blog archive and single-post stacks (novabp-blog, novabp-post-hero,
 * novabp-post-content, novabp-related-articles, novabp-breadcrumbs) do not
 * depend on novabp-tax-base, and they need the same rhythm as the landing
 * sections. novabp-tax-base maps its own --nova-tax-section-padding-* onto
 * these, so the landing sections keep their existing token names.
 *
 * Sections drawn as an inset card rather than a full-bleed band — .nova-tax-hero,
 * .nova-tax-audience, .nova-plan-audience — take --nova-gutter-x on the inline
 * axis so their card edge lines up with everything else, but keep their own
 * (smaller) block-axis inset, which is the card frame and not page rhythm.
 * ------------------------------------------------------------------------ */

:root {
	--nova-gutter-y: 80px;
	--nova-gutter-x: 80px;
}

/*
 * 1366px is Elementor's laptop breakpoint, enabled in this site's kit, so the
 * widgets' `laptop_default` control values land in the same query. A 1366 screen
 * is 74px short of the 1440 the design was drawn at; giving that back to the
 * gutter first leaves a 1270px measure against the 1280px designed.
 */
@media (max-width: 1366px) {
	:root {
		--nova-gutter-x: 48px;
	}
}

@media (max-width: 1024px) {
	:root {
		--nova-gutter-y: 64px;
		--nova-gutter-x: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--nova-gutter-y: 48px;
		--nova-gutter-x: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Legacy Elementor pages — About, Services, Contact
 *
 * These three are still built from stock Elementor sections and containers
 * rather than nova-* widgets, so nothing hands them the gutter above. The kit
 * boxes their content at --container-max-width: 1440px with zero default
 * container padding — deliberate, because every theme-built section is a
 * full-bleed `e-con-full` that pads itself from these tokens — and each row on
 * these pages then declares `--padding-left/right: 0` of its own on top of
 * that. At the 1440px the design was drawn for, the boxed measure is exactly
 * the window and the copy runs into both edges.
 *
 * Two rules put them back on the site rhythm.
 * ------------------------------------------------------------------------ */

/*
 * 1. The gutter itself. Both container generations are boxed to 1440px, so both
 *    need it: `.elementor-top-section` for the legacy sections, the boxed flex
 *    parents for the newer ones. Nothing on a theme-built page matches —
 *    those carry no `elementor-section` at all and every parent there is
 *    `e-con-full`. Two deliberate exceptions: `.nova-blog-wrap` already pads
 *    itself from the same tokens (novabp-blog.css), and the Contact map sits in
 *    a section boxed wider than the page (1600px) on purpose, so it stays full
 *    bleed.
 *
 *    Elementor prints its per-element padding at three classes, so these
 *    selectors need four to win — that is what the `.elementor-page` prefix is
 *    for, not page scoping.
 */
.elementor-page .elementor-section.elementor-top-section:not(:has(.elementor-widget-google_maps)),
.elementor-page .e-con.e-con-boxed.e-parent:not(.nova-blog-wrap) {
	padding-inline: var(--nova-gutter-x);
}

/*
 * 2. The gap inside the photo/copy rows on About and Services. Each row is
 *    authored as a boxed parent split into two child containers (33% photo,
 *    67% copy) with the container gap left at 0, so the text starts hard
 *    against the edge of the photograph. `:has()` matches exactly that shape —
 *    a boxed parent holding two adjacent child containers — and leaves the
 *    single-column parents on the same pages alone.
 *
 *    The column gap rides --nova-gutter-x (80 → 48 → 40) so it stays in step
 *    with the copy-beside-photograph row the theme draws itself,
 *    .nova-home-about__inner, which runs the same 80 → 48 scale. Below 767px
 *    Elementor wraps the row and the two children go full width, so the 32px
 *    row gap is the one that shows there.
 */
.e-con.e-con-boxed.e-parent > .e-con-inner:has(> .e-con.e-child + .e-con.e-child) {
	gap: 32px var(--nova-gutter-x);
}

/*
 * Global scroll root fix:
 * Setting overflow-x: hidden on <html> or <body> converts overflow-y to auto/hidden in CSS spec,
 * which creates an inner scroll port and breaks position: sticky for all descendants.
 * Using overflow-x: clip on <body> prevents horizontal overflow without breaking position: sticky.
 */
html {
	overflow-x: visible !important;
}
body {
	overflow-x: clip !important;
}

/*
 * Design-only line breaks — `.nova-br-desktop`
 *
 * Copy such as `.nova-cta-card__desc` is broken by hand (a newline in the
 * widget's textarea, which render() turns into <br> through nl2br) so the line
 * lengths match Figma on desktop. The same break lands mid-sentence once the
 * column narrows, so this collapses every <br> inside the element that carries
 * the class from the tablet breakpoint down.
 *
 * Put the class on the widget's Advanced → CSS Classes field — it lands on the
 * .elementor-widget wrapper and the descendant selector reaches the <br> —
 * or directly on a <br> in theme markup.
 *
 * nl2br keeps the original newline after the tag, so the two lines still join
 * with a space. A hand-written <br> with no surrounding whitespace does not:
 * write it as `one<br class="nova-br-desktop"> two` there.
 */
@media (max-width: 1024px) {
	.nova-br-desktop br,
	br.nova-br-desktop {
		display: none;
	}
}