/* ==========================================================================
   FliseRens — Main Theme Styles
   Built on Bulma. Only component-specific overrides here.
   ========================================================================== */

:root {
	--fr-primary: #48c774;
	--fr-primary-dark: #3abb67;
	--fr-bg-alt: #f5f5f5;
	--fr-shadow: 0 2px 12px rgba(0,0,0,0.08);
	--fr-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
	--fr-radius: 12px;
}

/* ---------- Hero Section ---------- */
.fliserens-hero {
	background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #388e3c 100%);
	min-height: 80vh;
}
.hero-headline { font-size: 3rem; line-height: 1.15; font-weight: 800; }
.hero-area { color: var(--fr-primary); }
.hero-image-wrapper { border-radius: var(--fr-radius); overflow: hidden; box-shadow: var(--fr-shadow-lg); }
.hero-feature-image { width: 100%; height: auto; display: block; border-radius: var(--fr-radius); }
.hero-placeholder {
	display: flex; align-items: center; justify-content: center;
	height: 300px; background: rgba(255,255,255,0.05); border-radius: var(--fr-radius);
}

/* ---------- Before/After Slider ---------- */
.ba-section { background: var(--fr-bg-alt); }

.ba-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow);
	cursor: col-resize;
	user-select: none;
	-webkit-user-select: none;
	background: var(--fr-bg-alt);
}

/* After image: fills entire slider (background layer) */
.ba-image {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
.ba-image img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
}

/* Before image: clips from left, reveals the "before" */
.ba-image--before {
	width: 50%;
	z-index: 2;
	overflow: hidden;
}
/* Before img must match SLIDER width so clipping reveals properly */
.ba-image--before img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;   /* overridden by JS to slider.offsetWidth in px */
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* Handle (draggable divider line) */
.ba-handle {
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: translateX(-50%);
	pointer-events: none;
}
.ba-handle__line {
	flex: 1; width: 3px;
	background: #fff;
	box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.ba-handle__circle {
	width: 44px; height: 44px;
	background: #fff; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	color: #363636; font-size: 1rem; flex-shrink: 0;
}

.ba-placeholder {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	height: 100%; font-weight: 600;
}
.ba-placeholder--before { background: rgba(200,50,50,0.1); }
.ba-placeholder--after { background: rgba(50,200,50,0.1); }

/* ---------- Service Cards ---------- */
.service-card {
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow);
	transition: transform 0.2s, box-shadow 0.2s;
	height: 100%; border: none;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--fr-shadow-lg); }
.service-icon { color: var(--fr-primary); }

/* ---------- Trust Section ---------- */
.trust-icon {
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(72, 199, 116, 0.1);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 1rem; color: var(--fr-primary); font-size: 1.5rem;
}

/* ---------- Testimonials ---------- */
.testimonial-card { border-radius: var(--fr-radius); box-shadow: var(--fr-shadow); border: none; }
.testimonial-stars { color: #ffdd57; }

/* ---------- Coverage ---------- */
.coverage-area-tag {
	display: inline-block;
	background: rgba(72, 199, 116, 0.1); color: var(--fr-primary-dark);
	padding: 0.3em 0.8em; border-radius: 20px;
	font-size: 0.9rem; font-weight: 500; margin: 0.25rem;
}

/* ---------- Contact ---------- */
.contact-box { border-radius: var(--fr-radius); box-shadow: var(--fr-shadow-lg); }

/* ---------- Footer ---------- */
.fliserens-footer { background: #1a1a2e; color: #ccc; }
.fliserens-footer a { color: #fff; }
.fliserens-footer a:hover { color: var(--fr-primary); }

/* ---------- Map ---------- */
.fliserens-contact-map { border-radius: var(--fr-radius); }

/* ---------- Responsive ---------- */
@media screen and (max-width: 768px) {
	.hero-headline { font-size: 2rem; }
	.ba-slider { aspect-ratio: 4 / 3; }
}