/*
Theme Name: RedGate Farms
Theme URI: https://redgatefarms.example
Author: RedGate Farms
Author URI: https://redgatefarms.example
Description: A warm, hand-tended block theme for RedGate Farms - a local farm and farmers market. Brand colors and typography are drawn straight from the RedGate gate-and-sunrise logo: barn red, field green, sun gold, deep brown, and cream. Includes parallax heroes, reveal-on-scroll motion, animated harvest stats, and a sticky shrink-on-scroll header. Fully editable in the WordPress Site Editor and Block Editor.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: redgate-farms
Tags: block-theme, full-site-editing, food-and-drink, business, agriculture, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, block-styles, wide-blocks
*/

/* ==========================================================================
   RedGate Farms - custom enhancements layered on top of theme.json
   ========================================================================== */

:root {
	--rg-shadow-soft: 0 18px 40px -24px rgba(62, 39, 25, 0.45);
	--rg-shadow-lift: 0 30px 60px -28px rgba(62, 39, 25, 0.55);
	--rg-radius: 18px;
	--rg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Smooth anchored scrolling for the in-page nav links */
html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Sticky, shrink-on-scroll header
   -------------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--cream);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--brown) 14%, transparent);
	transition: padding 0.35s var(--rg-ease), background-color 0.35s var(--rg-ease),
		box-shadow 0.35s var(--rg-ease);
}

.rg-header-scrolled .wp-site-blocks > header.wp-block-template-part {
	box-shadow: var(--rg-shadow-soft);
	background-color: color-mix(in srgb, var(--wp--preset--color--cream) 94%, white);
}

/* The site logo gently shrinks once the page is scrolled */
header.wp-block-template-part .wp-block-site-logo img {
	transition: width 0.35s var(--rg-ease), height 0.35s var(--rg-ease);
	width: clamp(56px, 8vw, 84px);
	height: auto;
}

.rg-header-scrolled header.wp-block-template-part .wp-block-site-logo img {
	width: clamp(46px, 6vw, 60px);
}

/* Navigation link hover - growing gold underline */
header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 4px;
}

header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s var(--rg-ease);
}

header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Parallax hero (core Cover "Fixed background" + extra polish)
   -------------------------------------------------------------------------- */
.wp-block-cover.has-parallax {
	background-attachment: fixed;
}

/* On touch devices fixed backgrounds break; fall back gracefully */
@media (hover: none) {
	.wp-block-cover.has-parallax {
		background-attachment: scroll;
	}
}

.rg-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Animated sun-ray badge used near hero / story headings */
.rg-sunburst {
	position: relative;
	display: inline-block;
}

.rg-sunburst::before {
	content: "";
	position: absolute;
	inset: -42% ;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--wp--preset--color--gold) 55%, transparent) 0%,
		transparent 62%
	);
	z-index: -1;
	animation: rg-pulse 6s ease-in-out infinite;
}

@keyframes rg-pulse {
	0%, 100% { transform: scale(1); opacity: 0.65; }
	50% { transform: scale(1.12); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll motion (JS toggles .rg-inview)
   -------------------------------------------------------------------------- */
.rg-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 0.7s var(--rg-ease), transform 0.7s var(--rg-ease);
	will-change: opacity, transform;
}

.rg-reveal.rg-inview {
	opacity: 1;
	transform: none;
}

/* Stagger children of a revealed group for a cascading feel */
.rg-stagger > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s var(--rg-ease), transform 0.6s var(--rg-ease);
}

.rg-stagger.rg-inview > * {
	opacity: 1;
	transform: none;
}

.rg-stagger.rg-inview > *:nth-child(1) { transition-delay: 0.05s; }
.rg-stagger.rg-inview > *:nth-child(2) { transition-delay: 0.13s; }
.rg-stagger.rg-inview > *:nth-child(3) { transition-delay: 0.21s; }
.rg-stagger.rg-inview > *:nth-child(4) { transition-delay: 0.29s; }
.rg-stagger.rg-inview > *:nth-child(5) { transition-delay: 0.37s; }
.rg-stagger.rg-inview > *:nth-child(6) { transition-delay: 0.45s; }
.rg-stagger.rg-inview > *:nth-child(7) { transition-delay: 0.53s; }
.rg-stagger.rg-inview > *:nth-child(8) { transition-delay: 0.61s; }

/* --------------------------------------------------------------------------
   Product / feature cards
   -------------------------------------------------------------------------- */
.rg-card {
	background-color: #fff;
	border-radius: var(--rg-radius);
	overflow: hidden;
	box-shadow: var(--rg-shadow-soft);
	transition: transform 0.4s var(--rg-ease), box-shadow 0.4s var(--rg-ease);
	height: 100%;
}

.rg-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--rg-shadow-lift);
}

/* Card image zoom on hover - the image lives in a cover block inside .rg-card */
.rg-card .wp-block-cover,
.rg-card .wp-block-image img {
	transition: transform 0.6s var(--rg-ease);
}

.rg-card:hover .wp-block-cover .wp-block-cover__image-background,
.rg-card:hover .wp-block-image img {
	transform: scale(1.07);
}

.rg-card .wp-block-image {
	overflow: hidden;
	margin: 0;
}

/* Little seasonal pill badge */
.rg-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3em 0.85em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--brown);
}

/* --------------------------------------------------------------------------
   Animated harvest stats (count-up)
   -------------------------------------------------------------------------- */
.rg-stat__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--red);
}

/* --------------------------------------------------------------------------
   Buttons - a touch more lift than the theme.json default
   -------------------------------------------------------------------------- */
.wp-block-button__link {
	transition: transform 0.25s var(--rg-ease), box-shadow 0.25s var(--rg-ease),
		background-color 0.25s var(--rg-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow: var(--rg-shadow-soft);
}

/* Buttons sitting on top of a photo (hero + cover sections) need to stand
   off the busy background so they read clearly. A solid drop shadow plus a
   subtle ring lifts them off the image and boosts contrast. */
.wp-block-cover .wp-block-button__link {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
	border: 2px solid rgba(255, 255, 255, 0.22);
}

.wp-block-cover .wp-block-button__link:hover,
.wp-block-cover .wp-block-button__link:focus {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
	border-color: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   Decorative wavy section dividers (field horizon feel)
   -------------------------------------------------------------------------- */
.rg-divider {
	display: block;
	width: 100%;
	line-height: 0;
}

.rg-divider svg {
	display: block;
	width: 100%;
	height: clamp(40px, 6vw, 90px);
}

/* --------------------------------------------------------------------------
   Accessibility - honor reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.rg-reveal,
	.rg-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.rg-sunburst::before { animation: none; }
	.wp-block-cover.has-parallax { background-attachment: scroll; }
}