/* =====================================================================
   HOME PAGE — Feature 344 / US-001
   Landing-page sections that complete the home story: the "View All
   Services" link under the services grid, the "Shop Hours" band with a
   live Open/Closed badge, the closing Call/Book CTA band, and a
   mobile-only sticky CTA bar.

   Every colour, space, radius and shadow comes from the shared design
   tokens in style.css so these sections track the theme (including
   [data-theme="dark"]) instead of hardcoding a palette.
   ===================================================================== */

/* ---------------------------------------------------------------------
   "View All Services" link (under the services grid)
   ------------------------------------------------------------------- */
.home-services-more {
	margin: var(--space-6) 0 var(--space-2);
	text-align: center;
}

.home-services-more__link {
	gap: var(--space-2);
}

.home-services-more__link span {
	transition: transform var(--duration-normal) var(--ease-default);
}

.home-services-more__link:hover span,
.home-services-more__link:focus span {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------
   Shop Hours band
   ------------------------------------------------------------------- */
.home-hours {
	background-color: var(--color-navy-deep);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-section);
}

.home-hours__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(var(--space-6), 5vw, var(--space-12));
	align-items: center;
}

.home-hours__eyebrow {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--color-accent);
}

.home-hours__title {
	margin: 0 0 var(--space-4);
	font-size: var(--text-3xl);
	color: var(--color-heading);
	letter-spacing: var(--letter-tight);
}

.home-hours__lead {
	margin: 0 0 var(--space-5);
	max-width: 46ch;
	color: var(--color-text);
	font-size: var(--text-lg);
}

.home-hours__status-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
}

.home-hours__status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
}

.home-hours__status--open {
	background-color: rgba(46, 160, 87, 0.18);
	color: #57d98a;
	border: 1px solid rgba(46, 160, 87, 0.45);
}

.home-hours__status--closed {
	background-color: rgba(214, 69, 69, 0.16);
	color: #f28b8b;
	border: 1px solid rgba(214, 69, 69, 0.42);
}

.home-hours__status-dot {
	width: 9px;
	height: 9px;
	border-radius: var(--radius-full);
	background-color: currentColor;
}

.home-hours__status--open .home-hours__status-dot {
	box-shadow: 0 0 0 0 rgba(87, 217, 138, 0.6);
	animation: home-hours-pulse 2.4s var(--ease-default) infinite;
}

@keyframes home-hours-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(87, 217, 138, 0.55); }
	70%  { box-shadow: 0 0 0 8px rgba(87, 217, 138, 0); }
	100% { box-shadow: 0 0 0 0 rgba(87, 217, 138, 0); }
}

.home-hours__status-detail {
	color: var(--color-muted);
	font-size: var(--text-base);
}

.home-hours__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.home-hours__panel {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(var(--space-5), 3vw, var(--space-8));
	box-shadow: var(--shadow-md, 0 12px 30px rgba(0, 0, 0, 0.35));
}

/* The reused widget-live-hours part already carries its own badge/list
   styles; drop its top spacing so it sits flush inside the card. */
.home-hours__panel .live-hours {
	margin: 0;
}

/* ---------------------------------------------------------------------
   Closing Call / Book CTA band
   ------------------------------------------------------------------- */
.home-cta {
	padding-block: var(--space-section);
	text-align: center;
	background:
		linear-gradient(180deg, rgba(232, 122, 47, 0.10), rgba(232, 122, 47, 0));
	background-color: var(--color-bg);
}

.home-cta__inner {
	max-width: 720px;
}

.home-cta__eyebrow {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--color-accent);
}

.home-cta__title {
	margin: 0 0 var(--space-4);
	font-size: var(--text-3xl);
	color: var(--color-heading);
	letter-spacing: var(--letter-tight);
}

.home-cta__text {
	margin: 0 auto var(--space-6);
	max-width: 56ch;
	color: var(--color-text);
	font-size: var(--text-lg);
}

.home-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

/* ---------------------------------------------------------------------
   Mobile-only sticky Call / Book bar
   Hidden on tablet and up; the header already carries the phone there.
   z-index sits below the mobile drawer (1050) so an open menu covers it.
   ------------------------------------------------------------------- */
.home-sticky-cta {
	display: none;
}

.home-sticky-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	flex: 1 1 0;
	min-height: 52px;
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	text-decoration: none;
	transition: background-color var(--duration-normal) var(--ease-default);
}

.home-sticky-cta__btn--call {
	background-color: var(--color-graphite-light);
	color: var(--color-white);
}

.home-sticky-cta__btn--call:hover,
.home-sticky-cta__btn--call:focus {
	background-color: var(--color-graphite);
}

.home-sticky-cta__btn--book {
	background-color: var(--color-orange);
	color: var(--color-navy-deep);
}

.home-sticky-cta__btn--book:hover,
.home-sticky-cta__btn--book:focus {
	background-color: var(--color-orange-dark);
}

.home-sticky-cta__btn:focus-visible {
	outline: 3px solid var(--color-white);
	outline-offset: -4px;
}

@media (max-width: 767px) {
	.home-hours__inner {
		grid-template-columns: 1fr;
	}

	.home-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: flex;
		border-top: 1px solid var(--color-border-strong);
		background-color: var(--color-navy-deep);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	/* Keep the sticky bar from covering the last of the page content. */
	.site-main--front {
		padding-bottom: 64px;
	}
}

/* ---------------------------------------------------------------------
   Motion preferences
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.home-hours__status--open .home-hours__status-dot {
		animation: none;
	}

	.home-services-more__link span {
		transition: none;
	}
}