/*
Theme Name: Levi's Landscaping
Description: Grassy block theme for the Levi's Landscaping lawn care demo.
Author: Adam Palma
Author URI: https://palma-tech.dev/
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
License: GPL-2.0-or-later
Text Domain: levis-landscaping
*/

/* Tuft of grass blades, repeated along the top edge of .ll-turf sections. */
:root {
	--ll-grass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg fill='%232E7D1F'%3E%3Cpath d='M4 40Q6 22 0 6Q10 20 12 40Z'/%3E%3Cpath d='M30 40Q34 18 26 0Q40 18 38 40Z'/%3E%3Cpath d='M62 40Q64 16 58 2Q72 18 70 40Z'/%3E%3Cpath d='M88 40Q92 20 100 8Q96 24 96 40Z'/%3E%3C/g%3E%3Cg fill='%237CC242'%3E%3Cpath d='M14 40Q16 20 12 4Q24 22 22 40Z'/%3E%3Cpath d='M44 40Q48 14 50 0Q56 20 52 40Z'/%3E%3Cpath d='M76 40Q78 22 86 4Q84 24 84 40Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Hero: slow-drifting gradient, dark enough behind the green letters, with a soft lime glow. */
.ll-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(135deg, #0E2A0B 0%, #1F4D1A 40%, #2E7D1F 75%, #4C9A2A 100%) 0 0 / 200% 200%;
	animation: ll-drift 18s ease-in-out infinite alternate;
}
.ll-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse 60% 55% at 50% 35%, rgb(155 210 60 / 0.22), transparent 70%);
	pointer-events: none;
}
@keyframes ll-drift {
	to { background-position: 100% 100%; }
}

/* The name: inline SVG; the grass blades and their grow/sway come from the #ll-grass filter in front-page.html. */
.ll-name {
	margin: 0 auto;
	max-width: none;
	width: min(88vw, 520px);
	line-height: 0;
}
.ll-name svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font-family: var(--wp--preset--font-family--display);
}

.ll-sub {
	color: #F6F8EE;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 4.5vw, 1.75rem);
	letter-spacing: 0.35em;
	text-transform: uppercase;
	margin-top: 0;
	/* Offset the trailing letter-spacing so the word stays centred. */
	padding-left: 0.35em;
}

/* Grass fringe along the top edge of a section. */
.ll-turf {
	position: relative;
}
.ll-turf::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 28px;
	background: var(--ll-grass) left bottom / 56px 100% repeat-x;
	pointer-events: none;
}

/* No gap above the footer, so its grass fringe sits on the photo above, not on a cream strip. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.ll-services {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}
/* Wider than the constrained layout's content size, which would otherwise cap it on the Services page. */
.is-layout-constrained > .ll-services {
	max-width: 1200px;
}
.ll-service {
	border-left: 6px solid var(--wp--preset--color--accent-1);
	padding-left: var(--wp--preset--spacing--30);
}
.ll-service h3 {
	margin: 0 0 0.25em;
}
.ll-service h3 a {
	text-decoration: none;
}
.ll-service h3 a:hover,
.ll-service h3 a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-1);
	text-decoration-thickness: 3px;
}
.ll-service p {
	margin: 0;
}


.ll-nav a {
	font-family: var(--wp--preset--font-family--display);
	text-decoration: none;
}
.ll-nav a:hover,
.ll-nav a:focus-visible {
	text-decoration: underline;
}

/* Phones: no room for the header button; every page has a quote button just below. */
@media (max-width: 600px) {
	.wp-site-blocks > header .wp-block-buttons {
		display: none;
	}
}

/* Hero text rises in after the grass has grown. */
.ll-hero .ll-sub,
.ll-hero .ll-name ~ p,
.ll-hero .wp-block-buttons {
	animation: ll-rise 0.7s cubic-bezier(.2, .7, .3, 1) both;
}
.ll-hero .ll-sub { animation-delay: 0.9s; }
.ll-hero .ll-sub + p { animation-delay: 1.1s; }
.ll-hero .wp-block-buttons { animation-delay: 1.3s; }
.ll-hero .wp-block-post-title { animation: ll-rise 0.7s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes ll-rise {
	from { opacity: 0; translate: 0 16px; }
}

/* Service cards: photo on top, lift on hover. */
.ll-service {
	transition: transform 0.25s, box-shadow 0.25s;
}
.ll-service:hover,
.ll-service:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px -12px rgb(18 48 14 / 0.45);
}
.ll-service__img {
	display: block;
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--20);
	border-radius: 6px;
}
.ll-service__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.4s;
}
.ll-service:hover .ll-service__img img {
	transform: scale(1.06);
}

.ll-feature {
	max-width: 720px;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--40);
}
.ll-feature img {
	border-radius: 8px;
}

.wp-element-button {
	transition: transform 0.2s, background-color 0.2s, color 0.2s;
}
.wp-element-button:hover,
.wp-element-button:focus-visible {
	transform: translateY(-2px);
}

/* Scroll reveal where supported; elsewhere everything is simply visible. */
@supports (animation-timeline: view()) {
	.ll-service,
	.ll-feature,
	.wp-block-cover .wp-block-heading {
		animation: ll-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}
	@keyframes ll-reveal {
		from { opacity: 0; translate: 0 28px; }
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}