/*
 * Modern UI polish layer for garden-lawn-care.
 * Only touches color depth, shadow, radius, spacing and motion —
 * no font-family / font-size rules live here, typography is untouched.
 */

:root{
	--radius-card: 16px;
	--radius-pill: 999px;
	--radius-soft: 10px;
	--shadow-soft: 0 4px 16px rgba(11, 61, 36, 0.08);
	--shadow-medium: 0 10px 28px rgba(11, 61, 36, 0.14);
	--shadow-lift: 0 18px 38px rgba(11, 61, 36, 0.2);
	--ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------
   1 + 6. Depth for the homepage service cards + circular badges
   --------------------------------------------------------------- */
.inner-box{
	transition: transform .35s var(--ease);
}
.inner-box .main-img{
	border-radius: var(--radius-card) !important;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	transition: box-shadow .35s var(--ease);
}
.inner-box .main-img img{
	transition: transform .5s var(--ease);
}

.service-icon{
	border-radius: 50%;
	box-shadow: var(--shadow-medium);
}
.service-icon:before{
	filter: blur(1px);
	opacity: .35;
}
.service-text{
	border-radius: var(--radius-soft);
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
	transition: background-color .3s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

/* ---------------------------------------------------------------
   2. Hover motion — cards lift, image zooms slightly, badge grows
   --------------------------------------------------------------- */
.inner-box:hover{
	transform: translateY(-6px);
}
.inner-box:hover .main-img{
	box-shadow: var(--shadow-lift);
}
.inner-box:hover .main-img img{
	transform: scale(1.06);
}
.inner-box:hover .service-icon{
	transform: translateY(-2px) scale(1.05);
	box-shadow: var(--shadow-lift);
}
.inner-box:hover .service-text{
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(0,0,0,.12);
}
.service-icon,
.service-icon-upper{
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

/* Buttons in general get a small, tasteful lift on hover */
.wp-block-button__link,
.info-row-inner .wp-block-image a{
	display: inline-block;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease) !important;
}
.wp-block-button__link:hover,
.info-row-inner .wp-block-image a:hover{
	transform: translateY(-2px);
}
.info-row-inner .wp-block-image img{
	border-radius: var(--radius-pill);
	transition: box-shadow .25s var(--ease);
}
.info-row-inner .wp-block-image a:hover img{
	box-shadow: var(--shadow-soft);
}

/* ---------------------------------------------------------------
   3. Consistent corner radius across recurring elements
   --------------------------------------------------------------- */
.info-head,
.footer-info-box,
.info-img,
.faq-detail-block,
.tstimonial-box,
.blog-box,
.about-img-box-inner{
	border-radius: var(--radius-card) !important;
}
.blog-box img,
.about-img-box-inner img{
	border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* ---------------------------------------------------------------
   4. More breathing room between sections
   --------------------------------------------------------------- */
.our-services,
.about-sec,
.faq-section,
.testimonial-section,
.latest-news{
	padding-top: clamp(48px, 6vw, 96px);
	padding-bottom: clamp(48px, 6vw, 96px);
}

/* ---------------------------------------------------------------
   5. Header CTA buttons (image-based) — already pill artwork,
      just make them feel clickable with lift + soft shadow (above)
   --------------------------------------------------------------- */
.wp-block-button__link{
	border-radius: var(--radius-pill) !important;
	letter-spacing: .2px;
}

/* ---------------------------------------------------------------
   7. Footer refinements — the dark contact band already has good
      contrast; just round its inner elements to match the new system
   --------------------------------------------------------------- */
.footer-widgets .wp-block-html iframe{
	border-radius: var(--radius-soft);
	box-shadow: var(--shadow-medium);
}
.wp-block-cover{
	box-shadow: 0 -12px 30px rgba(0,0,0,.08);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
	.inner-box,
	.inner-box .main-img,
	.inner-box .main-img img,
	.service-icon,
	.service-icon-upper,
	.service-text,
	.wp-block-button__link,
	.info-row-inner .wp-block-image a,
	.info-row-inner .wp-block-image img{
		transition: none !important;
	}
}