/*
Theme Name: RunPartner
Theme URI: https://runpartner.com
Author: RunPartner Team
Author URI: https://runpartner.com
Description: A bold, distinctive dark block theme for the RunPartner running community. Built with WordPress 6.9+ block editor and Interactivity API.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: runpartner
*/

/* RunPartner Theme Styles */

/* Compiled from CSS modules via PostCSS — do not edit directly */

/* Custom CSS Variables (only for values NOT in theme.json) */

:root {
	/* Transitions */
	--rp-transition-fast: 0.2s ease;
	--rp-transition-normal: 0.3s ease;
	--rp-transition-slow: 0.5s ease;
}

/* Animation Keyframes */

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes scaleUp {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Animation utility classes */

.fade-up {
	opacity: 0;
	transform: translateY(30px);
	animation: fadeUp 0.6s 0.3s ease forwards;
	animation: fadeUp 0.6s var(--rp-transition-normal) forwards;
}

.fade-in {
	opacity: 0;
	animation: fadeIn 0.6s 0.3s ease forwards;
	animation: fadeIn 0.6s var(--rp-transition-normal) forwards;
}

.slide-in-left {
	opacity: 0;
	transform: translateX(-40px);
	animation: slideInLeft 0.6s 0.3s ease forwards;
	animation: slideInLeft 0.6s var(--rp-transition-normal) forwards;
}

.slide-in-right {
	opacity: 0;
	transform: translateX(40px);
	animation: slideInRight 0.6s 0.3s ease forwards;
	animation: slideInRight 0.6s var(--rp-transition-normal) forwards;
}

.scale-up {
	opacity: 0;
	transform: scale(0.95);
	animation: scaleUp 0.6s 0.3s ease forwards;
	animation: scaleUp 0.6s var(--rp-transition-normal) forwards;
}

/* Staggered children animations */

.stagger-children > * {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeUp 0.5s 0.3s ease forwards;
	animation: fadeUp 0.5s var(--rp-transition-normal) forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }

.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }

.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }

.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }

.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }

.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }

.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }

.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }

/* Scroll-triggered animations */

.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.3s 0.3s ease,
		transform 0.3s 0.3s ease;
	transition: opacity 0.3s var(--rp-transition-normal),
		transform 0.3s var(--rp-transition-normal);
}

.animate-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Continuous motion effects */

.float {
	animation: float 3s 0.5s ease infinite;
	animation: float 3s var(--rp-transition-slow) infinite;
}

.pulse {
	animation: pulse 2s 0.3s ease infinite;
	animation: pulse 2s var(--rp-transition-normal) infinite;
}

/* Skeleton loading */

.skeleton {
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--accent-4) 0%,
		var(--wp--preset--color--accent-5) 50%,
		var(--wp--preset--color--accent-4) 100%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s 0.5s ease infinite;
	animation: shimmer 1.5s var(--rp-transition-slow) infinite;
}

/* Button hover and animation enhancements */

.wp-block-button__link {
	background-size: 200% 100%;
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--contrast) 50%,
		transparent 50%
	);
	background-position: 100% 0;
	transition: background-position 0.3s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
	transition: background-position var(--rp-transition-normal),
		transform var(--rp-transition-fast),
		box-shadow var(--rp-transition-fast);
	cursor: pointer;
}

.wp-block-button__link:hover {
	background-position: 0 0;
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--glow-accent);
}

.wp-block-button__link:active {
	transform: scale(0.97);
}

.is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--lime-green);
	color: var(--wp--preset--color--base);
}

.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--glow-primary);
}

/* Hover effects */

.hover-lift {
	transition: transform 0.2s ease,
		box-shadow 0.2s ease;
	transition: transform var(--rp-transition-fast),
		box-shadow var(--rp-transition-fast);
}

.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--md);
}

.hover-lift:focus {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

.hover-glow-primary {
	transition: box-shadow 0.3s ease;
	transition: box-shadow var(--rp-transition-normal);
}

.hover-glow-primary:hover {
	box-shadow: var(--wp--preset--shadow--glow-primary);
}

.hover-glow-accent {
	transition: box-shadow 0.3s ease;
	transition: box-shadow var(--rp-transition-normal);
}

.hover-glow-accent:hover {
	box-shadow: var(--wp--preset--shadow--glow-accent);
}

/* Text gradient */

.text-gradient {
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--lime-green) 0%,
		var(--wp--preset--color--orange) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Focus visible */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* Selection color */

::-moz-selection {
	background-color: var(--wp--preset--color--lime-green);
	color: var(--wp--preset--color--contrast);
}

::selection {
	background-color: var(--wp--preset--color--lime-green);
	color: var(--wp--preset--color--contrast);
}

/* Block-specific enhancements */

/* Image credit overlay on cover blocks */

.wp-block-cover__image-credit {
	position: absolute;
	bottom: 8px;
	right: 12px;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.75);
	background: rgba(0, 0, 0, 0.5);
	padding: 2px 8px;
	border-radius: 4px;
	z-index: 1;
	line-height: 1.5;
	pointer-events: none;
}

/* Image credit below post featured image portrait (coach/athlete) */

.wp-block-post-featured-image__credit {
	font-size: 0.7rem;
	color: var(--wp--preset--color--accent-4);
	margin-top: 6px;
	text-align: center;
	line-height: 1.4;
}

/* Post hero cover overlay gradient */

.post-hero.wp-block-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		var(--wp--preset--color--base) 0%,
		color-mix(in srgb, var(--wp--preset--color--base) 45%, transparent) 30%,
		transparent 100%
	);
	pointer-events: none;
}

/* Post title in hero cover — readability */

.post-hero .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Category terms in hero cover — pill badges */

.post-hero .wp-block-post-terms a {
	display: inline-block;
	padding: 0.2em 0.8em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-7);
	margin: 0 0.25em 0.25em 0;
	text-decoration: none;
}

/* Image zoom on hover */

.image-zoom img {
	transition: transform 0.3s ease;
	transition: transform var(--rp-transition-normal);
}

.image-zoom:hover img {
	transform: scale(1.05);
}

/* Quote border enhancement */

blockquote {
	position: relative;
}

blockquote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--wp--preset--color--accent-3);
}

/* Code block scrollbar */

pre {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--accent-4) var(--wp--preset--color--base);
}

pre::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

pre::-webkit-scrollbar-track {
	background: var(--wp--preset--color--base);
}

pre::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--accent-4);
	border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--accent-5);
}

/* Featured hero event readability against accent-7 background */

.featured-front-page-query .runpartner-event-subtitle-text {
	color: var(--wp--preset--color--contrast);
	font-weight: 400;
	font-style: normal;
	font-size: var(--wp--preset--font-size--large);
}

.featured-front-page-query .runpartner-event-hero-meta-text {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}

/* Site layout and structure */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Footer margin reset */

.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* News card — border, background, equal-height flex */

.news-card {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-4) 15%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--base) 97%, var(--wp--preset--color--accent-4));
	border-radius: 8px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.news-card .wp-block-post-featured-image {
	margin: 0;
}

.news-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	-o-object-fit: cover;
	   object-fit: cover;
	width: 100%;
}

.news-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.news-card-body > *:last-child {
	margin-top: auto;
}

.news-card .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--accent-5);
	font-weight: 500;
	text-decoration: none;
	display: inline-block;
	margin-top: 0.75rem;
	transition: opacity 0.2s ease;
}

.news-card .wp-block-post-excerpt__more-link:hover {
	opacity: 0.7;
}

/* Coach hero — blurred featured image background */

.coach-hero .wp-block-cover__image-background {
	filter: blur(200px);
	transform: scale(1.5);
}

/* Coach hero — portrait styling */

.coach-hero .wp-block-post-featured-image img {
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Coach excerpt card */

.coach-excerpt-card {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-4) 15%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--base) 97%, var(--wp--preset--color--accent-4));
	border-radius: 8px;
}

.coach-excerpt-card .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.coach-excerpt-card .wp-block-post-excerpt__more-link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	display: inline-block;
	margin-top: 0.75rem;
	transition: opacity 0.2s ease;
}

.coach-excerpt-card .wp-block-post-excerpt__more-link:hover {
	opacity: 0.7;
}

/* Athlete hero — blurred featured image background */

.athlete-hero .wp-block-cover__image-background {
	filter: blur(200px);
	transform: scale(1.5);
}

/* Athlete hero — portrait styling */

.athlete-hero .wp-block-post-featured-image img {
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Athlete excerpt card */

.athlete-excerpt-card {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-4) 15%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--base) 97%, var(--wp--preset--color--accent-4));
	border-radius: 8px;
}

.athlete-excerpt-card .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.athlete-excerpt-card .wp-block-post-excerpt__more-link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	display: inline-block;
	margin-top: 0.75rem;
	transition: opacity 0.2s ease;
}

.athlete-excerpt-card .wp-block-post-excerpt__more-link:hover {
	opacity: 0.7;
}

/* Tools CTA banner — full-width section separator */

.tools-cta {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-4) 12%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-4) 12%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--base) 98%, var(--wp--preset--color--accent-4));
}

/* Navigation — link hover effects */

.wp-block-navigation .wp-block-navigation-item__content {
	transition: color 0.3s ease;
	transition: color var(--rp-transition-normal);
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--lime-green);
}

/* Site title orange glow on hover */

.wp-block-site-title a {
	transition: color 0.3s ease, text-shadow 0.3s ease;
	transition: color var(--rp-transition-normal), text-shadow var(--rp-transition-normal);
}

.wp-block-site-title a:hover {
	color: var(--wp--preset--color--orange);
	text-shadow: 0 0 20px color-mix(in srgb, var(--wp--preset--color--orange) 50%, transparent);
}

/* Desktop pill links (≥600px — inline nav visible) */

@media (min-width: 600px) {

	.wp-block-navigation .wp-block-navigation__container {
		gap: 4px;
	}

	.wp-block-navigation .wp-block-navigation-item__content {
		padding: 6px 18px;
		border-radius: 999px;
		transition: background 0.3s ease;
		transition: background var(--rp-transition-normal);
	}

	.wp-block-navigation .wp-block-navigation-item__content:hover {
		background: color-mix(in srgb, currentColor 12%, transparent);
	}
}

/* Mobile — hamburger and close buttons */

.wp-block-navigation__responsive-container-open {
	margin-left: auto;
	padding: 8px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	transition: background 0.3s ease;
	transition: background var(--rp-transition-normal);
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.wp-block-navigation__responsive-container-open svg {
	display: block;
	width: 24px;
	height: 24px;
}

.wp-block-navigation__responsive-container-close {
	padding: 8px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	transition: background 0.3s ease;
	transition: background var(--rp-transition-normal);
}

.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus-visible {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.wp-block-navigation__responsive-container-close svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* Mobile overlay (<600px) */

@media (max-width: 599px) {

	.wp-block-navigation__responsive-container {
		top: 12px;
		right: 12px;
		bottom: 12px;
		left: 12px;
		width: auto;
		height: auto;
		border-radius: 16px;
		background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent) !important;
		backdrop-filter: blur(12px);
	}

	.wp-block-navigation__responsive-container .wp-block-navigation__container {
		gap: 4px;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		padding: 12px 20px !important;
		border-radius: 999px;
		transition: background 0.3s ease;
		transition: background var(--rp-transition-normal);
	}

	.wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
		background: color-mix(in srgb, currentColor 12%, transparent);
	}
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	/* Ensure entrance-animation elements are visible from the start */
	.fade-up,
	.fade-in,
	.slide-in-left,
	.slide-in-right,
	.scale-up,
	.stagger-children > *,
	.animate-on-scroll {
		opacity: 1;
		transform: none;
		animation: none !important;
	}

	/* Stop continuous motion effects */
	.float,
	.pulse,
	.skeleton {
		animation: none !important;
	}
}

/* Responsive adjustments */

@media (max-width: 768px) {
	.stagger-children > * {
		animation: none;
		opacity: 1;
		transform: none;
	}
}