/* ==========================================================================
   FliserRent – Main Stylesheet
   ========================================================================== */

:root {
	--fr-green: #48c774;
	--fr-green-dark: #3ab367;
	--fr-dark: #1a1a2e;
	--fr-darker: #16162a;
	--fr-text: #2d2d2d;
	--fr-text-light: #555555;
	--fr-text-muted: #6b6b6b;
	--fr-bg: #ffffff;
	--fr-bg-alt: #f5f5f5;
	--fr-border: #dbdbdb;
	--fr-radius: 6px;
	--fr-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---------- Global ---------- */

html {
	scroll-behavior: smooth;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	color: var(--fr-text);
	background-color: var(--fr-bg);
}

img {
	max-width: 100%;
	height: auto;
}

/* ---------- Skip Link ---------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 9999;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	padding: 0.75rem 1.5rem;
	background: var(--fr-green);
	color: #fff;
	border-radius: var(--fr-radius);
	font-weight: bold;
	text-decoration: none;
}

/* ---------- Top Bar ---------- */

.fliserrent-topbar {
	font-size: 0.85rem;
}

.fliserrent-topbar a {
	color: #b5b5b5;
	transition: color 0.2s;
}

.fliserrent-topbar a:hover {
	color: var(--fr-green);
}

/* ---------- Navbar ---------- */

.navbar {
	box-shadow: var(--fr-shadow);
}

.navbar-item.site-title {
	font-size: 1.25rem;
	color: var(--fr-dark);
}

.navbar-item.site-title:hover {
	color: var(--fr-green);
}

.custom-logo {
	max-height: 50px;
	width: auto;
}

/* ---------- Hero ---------- */

.fliserrent-hero {
	background: linear-gradient(135deg, var(--fr-green-dark) 0%, #1a6b3a 50%, #2d8f56 100%);
	position: relative;
	overflow: hidden;
}

.fliserrent-hero .hero-body {
	position: relative;
	z-index: 2;
}

.fliserrent-hero .hero-headline {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	line-height: 1.15;
}

.fliserrent-hero .hero-area {
	display: inline-block;
	border-bottom: 3px solid rgba(255, 255, 255, 0.5);
}

.hero-decoration {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80px;
	background: var(--fr-bg);
	clip-path: ellipse(60% 100% at 50% 100%);
	z-index: 1;
}

.hero-image-wrapper {
	text-align: center;
}

.hero-feature-image {
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	max-height: 420px;
	object-fit: cover;
	width: 100%;
}

.hero-placeholder {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 4rem 2rem;
	border: 2px dashed rgba(255, 255, 255, 0.3);
}

/* ---------- Cards ---------- */

.card {
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow);
	transition: transform 0.2s, box-shadow 0.2s;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.card .card-content {
	flex: 1;
}

.card .card-footer-item {
	color: var(--fr-green-dark);
	font-weight: 600;
}

/* ---------- Footer ---------- */

.footer {
	padding: 3rem 1.5rem 2rem;
}

.footer a.has-text-light:hover,
.footer a.has-text-white:hover {
	color: var(--fr-green) !important;
}

.footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-menu li {
	margin-bottom: 0.5rem;
}

.footer-menu li a {
	color: #b5b5b5;
	transition: color 0.2s;
}

.footer-menu li a:hover {
	color: var(--fr-green);
}

.fliserrent-area-list {
	list-style: none;
	padding: 0;
	margin: 0;
	columns: 2;
}

.fliserrent-area-list li {
	color: #b5b5b5;
	margin-bottom: 0.35rem;
	padding-left: 1rem;
	position: relative;
}

.fliserrent-area-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--fr-green);
}

/* ---------- Services Section ---------- */

.services-section {
	padding-top: 4rem;
}

.service-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: none;
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 32px rgba(72, 199, 116, 0.15);
}

.service-icon {
	display: inline-flex;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(72, 199, 116, 0.1), rgba(72, 199, 116, 0.05));
	align-items: center;
	justify-content: center;
}

/* ---------- Before/After Slider ---------- */

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

.ba-image {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ba-image--before {
	width: 50%;
	z-index: 2;
	border-right: 2px solid #fff;
}

.ba-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-weight: 600;
	font-size: 1.1rem;
}

.ba-placeholder--before {
	background: linear-gradient(135deg, #e8d5b7, #c4a87a);
	color: #6b5533;
}

.ba-placeholder--after {
	background: linear-gradient(135deg, #a8e6cf, #7bc9a0);
	color: #2d6b4a;
}

.ba-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ba-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: 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;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fr-green-dark);
	font-size: 1rem;
	flex-shrink: 0;
}

/* ---------- Trust Signals ---------- */

.trust-section {
	background: var(--fr-bg);
}

.trust-item {
	padding: 2rem 1rem;
}

/* ---------- Testimonials ---------- */

.testimonials-section .testimonial-card {
	border: none;
	border-left: 4px solid var(--fr-green);
}

.testimonial-stars .icon {
	font-size: 0.85rem;
}

/* ---------- Coverage ---------- */

.coverage-map-placeholder {
	background: var(--fr-bg-alt);
	border-radius: 12px;
	border: 2px dashed var(--fr-border);
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.coverage-section .tags .tag {
	margin-bottom: 0.5rem;
}

/* ---------- Contact Form ---------- */

.contact-section {
	padding-bottom: 5rem;
}

.contact-box {
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ---------- Content ---------- */

.content h2,
.content h3,
.content h4 {
	color: var(--fr-dark);
}

/* ---------- Responsive ---------- */
/* Mobile-specific styles are in assets/css/mobile.css */

/* ---------- WordPress Overrides ---------- */

.wp-block-image img {
	border-radius: var(--fr-radius);
}

.alignwide {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
}

/* ---------- Readability Fixes ---------- */

/* Ensure all section titles are dark and legible */
.title,
.title.is-1,
.title.is-2,
.title.is-3,
.title.is-4,
.title.is-5 {
	color: var(--fr-dark);
}

/* Override Bulma's weak .has-text-grey with better contrast */
.has-text-grey {
	color: var(--fr-text-light) !important;
}

/* Subtitle text needs more contrast */
.subtitle {
	color: var(--fr-text-light);
}

/* Body copy in sections */
.services-section p,
.trust-section p,
.coverage-section p,
.testimonials-section p:not(.is-italic),
.before-after-section p {
	color: var(--fr-text);
	line-height: 1.7;
}

/* Testimonial quotes */
.testimonial-card .is-italic {
	color: var(--fr-text);
	font-size: 1.05rem;
	line-height: 1.6;
}

.testimonial-card .has-text-weight-bold {
	color: var(--fr-dark);
}

/* Contact section — ensure subtitle is readable on green-tinted bg */
.contact-section .subtitle {
	color: var(--fr-text);
}

/* Service card descriptions */
.service-card .card-content p {
	color: var(--fr-text-light);
	font-size: 0.95rem;
	line-height: 1.65;
}

/* Trust item descriptions */
.trust-item p {
	color: var(--fr-text-light);
	font-size: 0.95rem;
}

/* Coverage section paragraph */
.coverage-section p {
	font-size: 1.05rem;
}

/* Hero text: ensure white text is crisp */
.fliserrent-hero .title.is-1 {
	color: #ffffff;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.fliserrent-hero .subtitle {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 400;
}

/* Labels and form text */
.label {
	color: var(--fr-text);
	font-weight: 600;
}

/* Footer readability */
.footer .has-text-light,
.footer p {
	color: #d4d4d4 !important;
}

/* Mobile readability rules moved to assets/css/mobile.css */