/**
 * Base Styles
 *
 * Design tokens, utility classes, and global overrides.
 * This is the foundation for consistent styling across all patterns.
 */

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
	/* Spacing */
	--section-padding: clamp(3rem, 8vw, 5rem);
	--page-top-padding: clamp(2rem, 4vw, 3rem);
	--page-bottom-padding: 96px;
	--section-header-spacing: 2.5rem;
	--content-padding-mobile: 1rem;

	--spacing-xs: 0.5rem;
	--spacing-sm: 0.75rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2.5rem;
	--spacing-xl: 3rem;

	/* Cards */
	--card-radius: 12px;
	--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	--card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.1);

	/* Interactions */
	--lift-hover: translateY(-4px);
	--transition-fast: 0.2s ease;
	--transition-medium: 0.3s ease;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Screen reader only text - hide visually but keep accessible */
.screen-reader-text,
.skip-link.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus,
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--contrast);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--base);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Section Utilities
   ========================================================================== */

.section-padding {
	padding: var(--section-padding) 0;
}

.section-header {
	margin-bottom: var(--section-header-spacing);
}

/* ==========================================================================
   Card Grid System

   Usage: Add .card-grid to a wp:group container, .card-grid-item to children.
   Cards will be equal height with content pushed to bottom.

   Columns: 3 on desktop, 2 on tablet, 1 on mobile (override with modifiers)
   ========================================================================== */

.card-grid.wp-block-group {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 1.5rem;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

/* Override WordPress is-layout-flow margins on grid children */
.card-grid.wp-block-group.is-layout-flow > * {
	margin-block-start: 0 !important;
}

/* Card items use flexbox column for consistent footer alignment */
.card-grid-item {
	display: flex !important;
	flex-direction: column;
}

/* Modifier: 2-column grid */
.card-grid--cols-2.wp-block-group {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1023px) {
	.card-grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.card-grid--cols-2.wp-block-group {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 767px) {
	.card-grid.wp-block-group,
	.card-grid--cols-2.wp-block-group {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   Card Utilities
   ========================================================================== */

.card {
	background: var(--wp--preset--color--neutral);
	border-radius: var(--card-radius);
	border: 1px solid transparent;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover {
	transform: var(--lift-hover);
	box-shadow: var(--card-shadow-hover);
	border-color: var(--wp--preset--color--border);
}

/* ==========================================================================
   Mobile Utilities
   ========================================================================== */

@media (max-width: 767px) {
	.mobile-padding {
		padding-left: var(--content-padding-mobile);
		padding-right: var(--content-padding-mobile);
	}
}

/* Tablet content padding for flow-layout pages.
   Sections keep edge-to-edge backgrounds; content gets breathing room. */
@media (min-width: 768px) and (max-width: 1023px) {
	.wp-block-post-content > .wp-block-group {
		padding-left: clamp(1rem, 5vw, 2rem);
		padding-right: clamp(1rem, 5vw, 2rem);
	}
}

/* ==========================================================================
   Reduced Motion (Global)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.card:hover {
		transform: none;
	}
}

/* ==========================================================================
   Primary Button Styles
   Consistent styling for all red CTA buttons across the site.
   ========================================================================== */

.wp-block-button__link.has-primary-background-color {
	position: relative;
	overflow: hidden;
	vertical-align: top;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(223, 59, 38, 0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Shimmer effect */
.wp-block-button__link.has-primary-background-color::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		120deg,
		transparent 30%,
		rgba(255, 255, 255, 0.2) 50%,
		transparent 70%
	);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}

/* Hover state */
.wp-block-button__link.has-primary-background-color:hover {
	color: #ffffff !important;
	background-color: var(--wp--preset--color--primary-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(223, 59, 38, 0.45);
}

.wp-block-button__link.has-primary-background-color:hover::before {
	transform: translateX(100%);
}

/* Focus state */
.wp-block-button__link.has-primary-background-color:focus {
	color: #ffffff !important;
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Active state */
.wp-block-button__link.has-primary-background-color:active {
	color: #ffffff !important;
	transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link.has-primary-background-color {
		transition: none;
	}

	.wp-block-button__link.has-primary-background-color::before {
		display: none;
	}

	.wp-block-button__link.has-primary-background-color:hover {
		transform: none;
	}
}

/* ==========================================================================
   Outline Button Styles
   Secondary button style with transparent background and border.
   ========================================================================== */

/* Ensure button groups align children properly */
.wp-block-buttons {
	align-items: center;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	border: 2px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast) !important;
	padding-top: 12px;
	padding-bottom: 12px;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base) !important;
	transform: translateY(-2px);
}

.wp-block-button.is-style-outline .wp-block-button__link:focus {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-outline .wp-block-button__link {
		transition: none;
	}

	.wp-block-button.is-style-outline .wp-block-button__link:hover {
		transform: none;
	}
}

/* ==========================================================================
   Icon Box
   64x64 centered icon container. Use for service icons, feature icons, etc.
   ========================================================================== */

.icon-box {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 64px;
	height: 64px;
	background: var(--wp--preset--color--base);
	border-radius: var(--card-radius);
	color: var(--wp--preset--color--primary);
	box-shadow: var(--card-shadow);
}

.icon-box svg {
	width: 32px;
	height: 32px;
}

.icon-box--neutral {
	background: var(--wp--preset--color--neutral);
}

.icon-box--mb {
	margin-bottom: 1rem;
}

.icon-box--center {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.25rem;
}

@media (max-width: 767px) {
	.icon-box {
		width: 56px;
		height: 56px;
	}
}

/* ==========================================================================
   Image Accent
   Image container with decorative corner brackets.
   Usage: <div class="image-accent"><img src="..." alt="..." /></div>
   ========================================================================== */

.image-accent {
	position: relative;
}

/* Decorative corner accents */
.image-accent::before,
.image-accent::after {
	content: '';
	position: absolute;
	width: 60px;
	height: 60px;
	border: 3px solid var(--wp--preset--color--primary);
	opacity: 0.6;
	pointer-events: none;
	z-index: 1;
}

.image-accent::before {
	top: -12px;
	left: -12px;
	border-right: none;
	border-bottom: none;
	border-radius: 8px 0 0 0;
}

.image-accent::after {
	bottom: -12px;
	right: -12px;
	border-left: none;
	border-top: none;
	border-radius: 0 0 8px 0;
}

.image-accent img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--card-radius);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

.image-accent-caption {
	text-align: center;
	color: var(--wp--preset--color--text);
	margin-top: 1rem;
	font-style: italic;
	font-size: 0.9375rem;
}

@media (max-width: 767px) {
	.image-accent::before,
	.image-accent::after {
		width: 40px;
		height: 40px;
		border-width: 2px;
	}

	.image-accent::before {
		top: -8px;
		left: -8px;
	}

	.image-accent::after {
		bottom: -8px;
		right: -8px;
	}
}

/* ==========================================================================
   Arrow Link
   Bold link with arrow that animates on hover.
   Usage: <a href="..." class="arrow-link">Learn more →</a>
   ========================================================================== */

.arrow-link {
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	transition: gap var(--transition-fast);
}

.arrow-link:hover {
	gap: 0.5em;
}

@media (prefers-reduced-motion: reduce) {
	.arrow-link {
		transition: none;
	}
}

/* ==========================================================================
   Star Rating
   Gold star display for reviews/ratings.
   Usage: <span class="star-rating">★★★★★</span>
   ========================================================================== */

.star-rating {
	color: #fbbf24;
	font-size: 1.25rem;
	letter-spacing: -1px;
}

@media (max-width: 767px) {
	.star-rating {
		letter-spacing: 0;
	}
}

/* ==========================================================================
   Section Intro
   Centered intro paragraph below section headings.
   Usage: <p class="section-intro">Description text here.</p>
   ========================================================================== */

.section-intro {
	text-align: center;
	color: var(--wp--preset--color--text);
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Page Hero
   Standardized hero section for content pages.
   Usage: Add "page-hero" class to hero wrapper group.
   ========================================================================== */

.page-hero {
	text-align: center;
	padding-bottom: 3rem;
}

.page-hero h1 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	position: relative;
	display: inline-block;
}

/* Red accent underline */
.page-hero h1::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	background: var(--wp--preset--color--primary);
	border-radius: 2px;
}

.page-hero-subtitle {
	max-width: 600px;
	margin: 1.5rem auto 0;
	color: var(--wp--preset--color--text);
	font-size: 1.125rem;
}

@media (max-width: 767px) {
	.page-hero {
		padding-bottom: 2rem;
	}

	.page-hero h1 {
		font-size: 1.75rem;
	}

	.page-hero h1::after {
		width: 60px;
		height: 3px;
	}

	.page-hero-subtitle {
		font-size: 1rem;
		margin-top: 1.25rem;
	}
}

/* ==========================================================================
   Animations
   ========================================================================== */

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

.fade-in-up {
	animation: fadeInUp 0.6s ease-out both;
}

.fade-in-up-delay-1 {
	animation-delay: 0.1s;
}

.fade-in-up-delay-2 {
	animation-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
	.fade-in-up,
	.fade-in-up-delay-1,
	.fade-in-up-delay-2 {
		animation: none;
	}
}

/* ==========================================================================
   Full-Width Background
   Breaks out of container to span full viewport width.
   Usage: Add to sections that need full-width colored backgrounds.
   ========================================================================== */

.full-width-bg {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

@media (max-width: 767px) {
	.full-width-bg {
		margin-left: calc(-1 * var(--content-padding-mobile)) !important;
		margin-right: calc(-1 * var(--content-padding-mobile)) !important;
		padding-left: var(--content-padding-mobile);
		padding-right: var(--content-padding-mobile);
	}
}

/* ==========================================================================
   Trust Items
   Horizontal list of trust signals (reviews, experience, etc.)
   Usage: <div class="trust-items"><span class="trust-item">...</span></div>
   ========================================================================== */

.trust-items {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text);
}

.trust-item strong {
	color: var(--wp--preset--color--contrast);
}

.trust-icon {
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.trust-items {
		flex-direction: column;
		gap: 0.75rem;
	}

	.trust-item {
		font-size: 0.875rem;
	}
}