/**
 * FLRHUB — Clean light redesign for demo2.flrhub.com.au
 * ---------------------------------------------------------------------------
 * A single, disciplined stylesheet. No animations, no gradients-on-text, no
 * glow, no flash-on-load. Front-end only (never the Elementor editor).
 *
 * Design system modelled on countryblinds.com.au/flooring-adelaide:
 *   - Light, airy, trustworthy. Lato typeface.
 *   - Green primary (#3DAE2B) with a darker hover; charcoal text.
 *   - Terracotta accent used sparingly. Sharp corners (radius 0-4px).
 *   - Generous whitespace, clear hierarchy.
 *
 * Mechanism: the site's colours come mostly from Elementor GLOBAL colour vars
 * on `.elementor-kit-5`; we remap those (this file loads AFTER the kit, so it
 * wins). A few hardcoded per-element colours are overridden by their IDs.
 * Content, headings, links and schema are untouched — presentation only.
 */

/* ===================================================================== *
 * 0. Tokens
 * ===================================================================== */
:root {
	--c-green:      #3dae2b;   /* primary brand green            */
	--c-green-dark: #2f8d20;   /* hover / pressed                */
	--c-green-tint: #ebf7ea;   /* pale green section background  */
	--c-accent:     #d5622a;   /* terracotta accent (sparing)    */
	--c-ink:        #2d3130;   /* headings                       */
	--c-text:       #45494a;   /* body text                      */
	--c-muted:      #6f7573;   /* secondary text                 */
	--c-line:       #e4e6e5;   /* hairline borders               */
	--c-bg:         #ffffff;   /* base background                */
	--c-bg-soft:    #f5f6f5;   /* soft grey section background    */
	--radius:       4px;
	--shadow:       0 10px 30px -18px rgba(45, 49, 48, 0.28);
	--shadow-hover: 0 18px 44px -20px rgba(45, 49, 48, 0.34);
	--maxw:         1200px;
}

/* ===================================================================== *
 * 1. Remap Elementor global colours (drives most of the UI)
 * ===================================================================== */
body[class*="elementor-kit-"],
.elementor-kit-5 {
	--e-global-color-primary:   var(--c-green);
	--e-global-color-secondary: var(--c-ink);
	--e-global-color-text:      var(--c-text);
	--e-global-color-accent:    var(--c-green);
	--e-global-color-8186167:   var(--c-green);   /* was teal   */
	--e-global-color-2f3cc35:   var(--c-ink);      /* dark heading */
	--e-global-color-6e4923b:   var(--c-bg-soft);  /* light band  */
	--e-global-color-b7f3060:   #ffffff;
}

/* ===================================================================== *
 * 2. Base
 * ===================================================================== */
body.elementor-page {
	font-family: "Lato", -apple-system, "Segoe UI", sans-serif;
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	line-height: 1.65;
}
.elementor-page :is(h1, h2, h3, h4, .elementor-heading-title) {
	font-family: "Lato", sans-serif;
	color: var(--c-ink);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(2.2rem, 4.4vw, 3.4rem);
}
.elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.elementor-page p,
.elementor-widget-text-editor { color: var(--c-text); }

/* ===================================================================== *
 * 3. Section backgrounds — calm alternating light rhythm.
 *    (Hero & quote keep their photo; content bands alternate white / soft.)
 * ===================================================================== */
.elementor-303 .e-con.e-parent:not(.elementor-element-a5ca13e):not(.elementor-element-6258e65) {
	background-color: var(--c-bg) !important;
	background-image: none !important;
}
/* Every 2nd content band gets a soft grey so sections read distinctly. */
.elementor-303 .elementor-element-62028b5,   /* stats band  */
.elementor-303 .elementor-element-e7b3ecb {   /* what's incl */
	background-color: var(--c-bg-soft) !important;
}
/* Reviews on a pale green tint for a gentle brand cue. */
.elementor-303 .elementor-element-aa62a00 {
	background-color: var(--c-green-tint) !important;
}

/* Hero & quote: keep photo, add a clean legibility overlay + white text. */
.elementor-303 .elementor-element-a5ca13e > .elementor-background-overlay,
.elementor-303 .elementor-element-6258e65 > .elementor-background-overlay {
	background-color: rgba(45, 49, 48, 0.52) !important;
}
.elementor-303 .elementor-element-a5ca13e :is(h1,h2,h3,.elementor-heading-title,p),
.elementor-303 .elementor-element-6258e65 :is(h1,h2,h3,.elementor-heading-title,p) {
	color: #fff !important;
}

/* ===================================================================== *
 * 4. Cards — icon-boxes & CTAs: clean, bordered, subtle lift (no gimmicks)
 * ===================================================================== */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-call-to-action .elementor-cta {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 28px 24px;
	box-shadow: var(--shadow);
	height: 100%;
	transition: box-shadow .2s ease, transform .2s ease;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover,
.elementor-widget-call-to-action .elementor-cta:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-3px);
}
.elementor-widget-icon-box .elementor-icon i,
.elementor-widget-icon-box .elementor-icon svg {
	color: var(--c-green) !important;
	fill: var(--c-green) !important;
}
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-call-to-action .elementor-cta__title { color: var(--c-ink) !important; }

/* ===================================================================== *
 * 5. Buttons — flat, solid green, darker-green hover (like the reference)
 * ===================================================================== */
.elementor-button,
a.elementor-button,
input[type="submit"],
#gform_submit_button_1,
#elementor-popup-modal-206 input#gform_submit_button_1 {
	background: var(--c-green) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--radius) !important;
	font-family: "Lato", sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	text-transform: none;
	padding: 15px 30px !important;
	box-shadow: none !important;
	transition: background-color .18s ease !important;
}
.elementor-button:hover,
a.elementor-button:hover,
input[type="submit"]:hover,
#gform_submit_button_1:hover,
#elementor-popup-modal-206 input#gform_submit_button_1:hover {
	background: var(--c-green-dark) !important;
	transform: none !important;
}

/* ===================================================================== *
 * 6. Stats / counters — solid green numbers, no gradient text
 * ===================================================================== */
.elementor-widget-counter .elementor-counter-number,
.elementor-widget-counter .elementor-counter-number-prefix,
.elementor-widget-counter .elementor-counter-number-suffix {
	color: var(--c-green) !important;
	font-weight: 900 !important;
}
.elementor-widget-counter .elementor-counter-title { color: var(--c-text) !important; }

/* ===================================================================== *
 * 7. FAQ accordion — clean bordered rows
 * ===================================================================== */
.elementor-widget-nested-accordion .e-n-accordion-item {
	background: #fff;
	border: 1px solid var(--c-line) !important;
	border-radius: var(--radius) !important;
	margin-bottom: 10px;
	overflow: hidden;
	box-shadow: none;
}
.elementor-widget-nested-accordion .e-n-accordion-item-title {
	padding: 18px 20px !important;
	font-weight: 700;
	color: var(--c-ink);
}
.elementor-widget-nested-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title,
.elementor-widget-nested-accordion .e-n-accordion-item-title:hover {
	background: var(--c-green-tint);
	color: var(--c-green-dark);
}
.elementor-widget-nested-accordion .e-n-accordion-item-title-icon { color: var(--c-green) !important; }

/* ===================================================================== *
 * 8. Reviews & ratings
 * ===================================================================== */
.elementor-widget-reviews .swiper-slide {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.elementor-star-rating i { color: #f5a623 !important; }   /* gold stars */

/* Google rating badge — keep it modest. */
.elementor-303 .elementor-element-eaf9df2 img,
.elementor-303 .elementor-element-0c21ecd img,
.elementor-303 .elementor-element-245a29f img {
	width: 150px !important;
	max-width: 150px !important;
	height: auto !important;
}

/* ===================================================================== *
 * 9. Gallery tiles — tidy, hover lift, thin frame
 * ===================================================================== */
.elementor-303 .elementor-element-f046d9a .e-con.e-child,
.elementor-303 .elementor-element-0f76bf2 .e-con.e-child {
	overflow: hidden;
	border-radius: var(--radius);
	transition: transform .25s ease;
}
.elementor-303 .elementor-element-f046d9a .e-con.e-child:hover,
.elementor-303 .elementor-element-0f76bf2 .e-con.e-child:hover {
	transform: scale(1.015);
}

/* ===================================================================== *
 * 10. Header — clean white sticky bar
 * ===================================================================== */
.elementor-46 .elementor-element-f1c5517,
.elementor-46 .elementor-element-f1c5517.elementor-sticky--active {
	background-color: #fff !important;
	box-shadow: 0 2px 12px -6px rgba(45,49,48,.25);
}

/* Dividers use the brand green, thin. */
.elementor-widget-divider .elementor-divider-separator {
	border-top-color: var(--c-green) !important;
}

/* Links & selection */
a { color: var(--c-green); }
a:hover { color: var(--c-green-dark); }
::selection { background: var(--c-green); color: #fff; }

/* ===================================================================== *
 * 11. Mobile — layout fixes carried over (header overlap, hero stack,
 *     gallery gap, header logo balance). Kept minimal & working-WITH Elementor.
 * ===================================================================== */
@media (max-width: 767px) {
	/* Header above the hero, opaque. */
	.elementor-46 .elementor-location-header,
	.elementor-46 .elementor-element-f1c5517,
	.elementor-46 .elementor-element-f1c5517.elementor-sticky--active {
		position: relative;
		z-index: 100 !important;
		background-color: #fff !important;
	}
	/* Balance the two header logos (brand primary, badge secondary). */
	.elementor-46 .elementor-element-e5520dc img { width: 120px !important; }
	.elementor-46 .elementor-element-0c8c998 img { width: 84px !important; }
	/* Header CTA stays inline (not full-width). */
	.elementor-46 .elementor-location-header .elementor-button {
		width: auto !important; display: inline-flex !important;
		padding: 10px 16px !important; font-size: 14px !important;
	}

	/* Hero stacks vertically, readable. */
	.elementor-303 .elementor-element-a5ca13e {
		flex-direction: column !important;
		--flex-direction: column;
	}

	/* Collapse the gap between the two gallery sections. */
	.elementor-303 .elementor-element-f046d9a,
	.elementor-303 .elementor-element-0f76bf2 {
		padding-top: 0 !important; padding-bottom: 0 !important;
		margin-top: 0 !important; margin-bottom: 0 !important;
	}

	/* Full-width buttons in body content (not header) for thumb reach. */
	.elementor-303 .elementor-button { width: 100%; justify-content: center; }

	.elementor-widget-heading h1.elementor-heading-title { font-size: clamp(1.9rem, 8vw, 2.5rem); }
}