/*
Theme Name:   Hello Elementor Child – ROOFINGBOX
Theme URI:    https://roofingbox.sayedsafi.me
Description:  Child theme for the ROOFINGBOX landing page. Holds brand setup, ACF field registration and the custom Roofing Cost Calculator.
Author:       Sayed MD Safiuddin Safi
Template:     hello-elementor
Version:      2.1.0
Text Domain:  roofingbox
*/

/* ==========================================================================
   Global helpers (kept minimal – all visual styling lives in Elementor globals)
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

/* Offset anchor targets so section titles are not hidden under the sticky header */
[id] {
	scroll-margin-top: 96px;
}

/* Sticky header – subtle shadow once it becomes sticky */
.rb-header.elementor-sticky--effects {
	box-shadow: 0 6px 24px rgba(47, 49, 34, 0.08);
}

/* Mobile menu (Elementor Pro nav) – full-width dropdown looks cleaner with a divider */
.rb-header .elementor-nav-menu--dropdown .elementor-item {
	border-bottom: 1px solid rgba(47, 49, 34, 0.06);
}

/* Footer link hover */
.rb-footer .elementor-icon-list-item a:hover {
	opacity: 0.8;
}

/* Service cards – keep the CTA link pinned to the bottom so all cards align */
.rb-card-body > .elementor-widget-button {
	margin-top: auto;
}

/* ==========================================================================
   "Why ROOFINGBOX" – sticky intro + stacking feature cards (desktop only)
   ========================================================================== */

.rb-hl {
	display: inline;
	background-image: linear-gradient(transparent 60%, rgba(217, 164, 65, 0.6) 60%, rgba(217, 164, 65, 0.6) 92%, transparent 92%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0;
}

@media (min-width: 1025px) {
	.e-con.rb-sticky {
		position: sticky;
		top: 140px;
	}

	.rb-stack .e-con.rb-stack-card {
		position: sticky;
		top: 130px;
	}

	/* Each card sits a little lower so the stack peeks through */
	.rb-stack .e-con.rb-stack-card:nth-child(2) { top: 150px; }
	.rb-stack .e-con.rb-stack-card:nth-child(3) { top: 170px; }
}