/* Boxed content: every section keeps its full-width background, its content is held to a 1200px box.
   Below 1264px the sections keep their own responsive side padding. Pages and blog posts share the rules. */
@media (min-width:1264px){
	[data-elementor-type="wp-page"] > .e-con:not(.btc-dark-hero),
	[data-elementor-type="wp-post"] > .e-con:not(.btc-dark-hero),
	[data-elementor-type="footer"] > .e-con,
	.btc-header-root{
		padding-inline:calc((100% - 1200px) / 2) !important;
	}
	.btc-dark-hero > .e-con:not(.e-div-block):not(.btc-header-root){
		max-width:none !important;
		width:100% !important;
		padding-inline:calc((100% - 1200px) / 2) !important;
	}
	/* Header row sized to fit the 1200px box: menu on ONE line, centred logo, two buttons */
	.btc-header-root{--btc-logo:190px;gap:12px !important;flex-wrap:nowrap !important}
	.btc-header-root .elementor-nav-menu--main .elementor-nav-menu{flex-wrap:nowrap !important}
	.btc-header-root .elementor-nav-menu--main .elementor-item{padding:8px 8px !important;font-size:0.88rem !important;white-space:nowrap !important}
	.btc-header-root .btc-btn-outline,
	.btc-header-root .btc-btn-primary{padding:11px 16px !important;font-size:0.9rem !important;white-space:nowrap}
}

/* Blog posts: Elementor wraps the hero component and the body in one div-block (default 10px padding).
   The wrapper has no padding at all; the boxing moves one level down to the body. These rules come after the
   generic ones above so they win. */
[data-elementor-type="wp-post"] > .e-con:has(> .btc-dark-hero){
	padding:0 !important;
	gap:0 !important;
	margin:0 !important;
}
@media (min-width:1264px){
	[data-elementor-type="wp-post"] > .e-con:has(> .btc-dark-hero) > .e-con:not(.btc-dark-hero){
		padding-inline:calc((100% - 1200px) / 2) !important;
	}
}

/* Services dropdown: a small gap between the items so hover states do not touch */
.btc-header-root .sub-menu > li + li,
.btc-header-root .elementor-nav-menu--dropdown .sub-menu > li + li{
	margin-top:6px;
}

/* Sticky blog sidebar (desktop only). The blog body clips instead of hiding overflow so sticky keeps working. */
@media (min-width:1025px){
	.btc-sidebar{position:sticky !important;top:120px !important;align-self:flex-start !important}
}

/* Home page headings (main content, hero and footer) start hidden only while Motion is expected to run; the script reveals them */
html.btc-js body.home [data-elementor-type="wp-page"] :is(h2,h3),
html.btc-js body.home [data-elementor-type="footer"] :is(h2,h3),
html.btc-js body.home [data-elementor-type="header"] h1{opacity:0}

/* Orange tapered brush-stroke line drawn right under the last word of every home heading (same 194 x 5 shape as the reference).
   It spans the last word and is a hair thicker on small headings so it never disappears. */
.btc-brush{position:absolute;left:0;top:calc(100% - 0.04em);width:100%;height:max(3px,0.085em);overflow:visible;pointer-events:none;transform-origin:0 50%}

/* Mobile menu hamburger: no border, outline or shadow in any state.
   The doubled classes out-rank the per-widget Elementor rule that draws the 2px border. */
.btc-header-root.btc-header-root .elementor-element.elementor-element .elementor-menu-toggle.elementor-menu-toggle,
.btc-header-root.btc-header-root .elementor-element.elementor-element .elementor-menu-toggle.elementor-menu-toggle:hover,
.btc-header-root.btc-header-root .elementor-element.elementor-element .elementor-menu-toggle.elementor-menu-toggle:focus,
.btc-header-root.btc-header-root .elementor-element.elementor-element .elementor-menu-toggle.elementor-menu-toggle:focus-visible,
.btc-header-root.btc-header-root .elementor-element.elementor-element .elementor-menu-toggle.elementor-menu-toggle:active{border:0 !important;outline:0 !important;box-shadow:none !important}