/* ==========================================================================
   FliserRent – Mobile Responsive Optimization
   Mobile-first: 375px–768px target range
   ========================================================================== */

/* ---------- Prevent Horizontal Scroll ---------- */

html, body {
	overflow-x: hidden;
	max-width: 100vw;
}

/* ---------- Sticky Mobile Phone CTA ---------- */

.fliserrent-mobile-cta {
	display: none;
}

@media screen and (max-width: 768px) {
	.fliserrent-mobile-cta {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 40;
		background: var(--fr-green);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
		padding: 0;
		align-items: stretch;
	}

	.fliserrent-mobile-cta a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		color: #fff;
		font-weight: 700;
		font-size: 1.1rem;
		text-decoration: none;
		padding: 0.9rem 1rem;
		flex: 1;
		transition: background 0.2s;
		min-height: 56px; /* Touch-friendly */
	}

	.fliserrent-mobile-cta a:first-child {
		background: var(--fr-green-dark);
	}

	.fliserrent-mobile-cta a:last-child {
		background: var(--fr-green);
	}

	.fliserrent-mobile-cta a:active {
		opacity: 0.85;
	}

	.fliserrent-mobile-cta .icon {
		font-size: 1.2rem;
	}

	/* Add bottom padding to body so footer content isn't hidden behind sticky CTA */
	body {
		padding-bottom: 56px;
	}

	/* ---------- Navbar Mobile Enhancements ---------- */

	.navbar-menu.is-active {
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
		padding-bottom: 1rem;
		max-height: 80vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.navbar-menu .navbar-item {
		padding: 0.85rem 1.25rem;
		font-size: 1.05rem;
		min-height: 48px;
		display: flex;
		align-items: center;
	}

	.navbar-menu .navbar-item:not(:last-child) {
		border-bottom: 1px solid var(--fr-border, #dbdbdb);
	}

	/* Navbar CTA button: full-width on mobile */
	.navbar-menu .navbar-item .button {
		width: 100%;
		justify-content: center;
		min-height: 48px;
		font-size: 1rem;
	}

	/* Hamburger: larger tap target */
	.navbar-burger {
		width: 52px;
		height: 52px;
	}

	/* ---------- Touch-Friendly Targets (min 44px) ---------- */

	.button,
	.tag,
	.card-footer-item {
		min-height: 44px;
	}

	.card-footer-item {
		padding: 0.85rem 0.75rem;
		font-size: 1rem;
	}

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

	.fliserrent-hero .hero-body {
		padding: 3rem 1rem 4rem;
	}

	.fliserrent-hero .title.is-1 {
		font-size: 1.75rem;
		line-height: 1.2;
	}

	.fliserrent-hero .subtitle.is-4 {
		font-size: 1rem;
		line-height: 1.5;
	}

	.fliserrent-hero .buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.fliserrent-hero .buttons .button {
		width: 100%;
		justify-content: center;
		margin-bottom: 0;
	}

	.fliserrent-hero .buttons .button.is-large {
		font-size: 1rem;
		padding: 0.85rem 1.5rem;
		min-height: 52px;
	}

	.hero-decoration {
		height: 40px;
	}

	/* ---------- Section Spacing ---------- */

	.section {
		padding: 2.5rem 1rem;
	}

	.section .mb-6 {
		margin-bottom: 1.5rem !important;
	}

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

	.service-card {
		margin-bottom: 1rem;
	}

	.service-card .card-content {
		padding: 1.25rem 1rem;
	}

	.service-card .title.is-4 {
		font-size: 1.15rem;
	}

	.service-icon {
		width: 64px;
		height: 64px;
	}

	.service-icon i {
		font-size: 1.75rem !important;
	}

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

	.ba-slider {
		aspect-ratio: 4 / 3;
		border-radius: 8px;
	}

	.ba-handle__circle {
		width: 48px;
		height: 48px;
		font-size: 1.1rem;
	}

	/* ---------- Trust Section ---------- */

	.trust-item {
		padding: 1.25rem 0.5rem;
	}

	.trust-item .title.is-5 {
		font-size: 1.05rem;
	}

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

	.testimonial-card .card-content {
		padding: 1.25rem 1rem;
	}

	.testimonial-card .is-italic {
		font-size: 0.95rem;
	}

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

	.coverage-section .columns {
		flex-direction: column;
	}

	.coverage-map-placeholder {
		min-height: 200px;
	}

	.tags .tag {
		font-size: 0.85rem;
	}

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

	.contact-box {
		padding: 1.25rem 1rem !important;
		border-radius: 8px;
	}

	.contact-box .input,
	.contact-box .textarea,
	.contact-box .select select {
		font-size: 16px; /* Prevent iOS zoom */
		min-height: 44px;
		padding: 0.5rem 0.75rem 0.5rem 2.25rem;
	}

	.contact-box .select.is-fullwidth select {
		padding-left: 2.25rem;
	}

	.contact-box .button[type="submit"] {
		width: 100%;
		min-height: 52px;
		font-size: 1.05rem;
	}

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

	.footer {
		padding: 2rem 1rem 1.5rem;
		padding-bottom: calc(1.5rem + 56px); /* Account for sticky CTA */
	}

	.footer .columns {
		gap: 0;
	}

	.footer .column {
		margin-bottom: 1.5rem;
	}

	.footer .column:last-child {
		margin-bottom: 0;
	}

	.fliserrent-area-list {
		columns: 2;
		column-gap: 1rem;
	}

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

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

	.fliserrent-topbar .level {
		padding: 0.25rem 0;
	}

	/* ---------- Page Templates (General) ---------- */

	.container {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	/* ---------- Accessibility: Focus States ---------- */

	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	textarea:focus-visible,
	select:focus-visible {
		outline: 3px solid var(--fr-green);
		outline-offset: 2px;
	}
}

/* ---------- Small Phones (375px and below) ---------- */

@media screen and (max-width: 375px) {
	.fliserrent-hero .title.is-1 {
		font-size: 1.5rem;
	}

	.fliserrent-hero .subtitle.is-4 {
		font-size: 0.95rem;
	}

	.section {
		padding: 2rem 0.75rem;
	}

	.service-card .title.is-4 {
		font-size: 1.05rem;
	}

	.title.is-2 {
		font-size: 1.5rem;
	}

	.fliserrent-mobile-cta a {
		font-size: 0.95rem;
		padding: 0.75rem 0.5rem;
	}
}

/* ---------- Dark Mode: Sticky CTA ---------- */

@media (prefers-color-scheme: dark) {
	.fliserrent-mobile-cta {
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
	}
}

html.dark-mode .fliserrent-mobile-cta {
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
}

html.dark-mode .navbar-menu.is-active .navbar-item:not(:last-child) {
	border-bottom-color: var(--fr-border);
}