/*
 * Riverside Asphalt Sealing & Striping - Custom Theme Styles
 * These styles enhance the Gutenberg block editor experience
 */

/* ========================================
   BASE & RESET
   ======================================== */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

/* ========================================
   NAVIGATION STYLES
   ======================================== */

.wp-block-navigation .wp-block-navigation-link a {
	transition: color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-link a:hover {
	color: var(--wp--preset--color--secondary) !important;
}

/* Mobile navigation overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link a {
	color: var(--wp--preset--color--white);
	font-size: 1.125rem;
	padding: 0.5rem 0;
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.wp-block-button__link {
	transition: all 0.3s ease;
	text-decoration: none;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   COVER / HERO STYLES
   ======================================== */

.wp-block-cover {
	position: relative;
}

.wp-block-cover::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--wp--preset--color--secondary), var(--wp--preset--color--accent));
}

/* ========================================
   CARD / GROUP HOVER EFFECTS
   ======================================== */

.wp-block-group[class*="has-surface-background-color"][style*="border-radius"] {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-group[class*="has-surface-background-color"][style*="border-radius"]:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* Dark cards (Why Choose Us section) */
.wp-block-group[class*="has-dark-background-color"][style*="border-radius: 12px"] {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-group[class*="has-dark-background-color"][style*="border-radius: 12px"]:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* ========================================
   SEPARATOR STYLES
   ======================================== */

.wp-block-separator.has-secondary-background-color {
	width: 60px;
	margin-left: auto;
	margin-right: auto;
	opacity: 1;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	border-bottom: none;
}

/* ========================================
   LIST STYLES
   ======================================== */

.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
}

.is-style-no-bullets li {
	padding-left: 0;
}

.is-style-no-bullets a {
	text-decoration: none;
	transition: color 0.2s ease;
}

/* ========================================
   FORM STYLES (for Contact Form plugins)
   ======================================== */

.wp-block-group input[type="text"],
.wp-block-group input[type="email"],
.wp-block-group input[type="tel"],
.wp-block-group textarea,
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	background-color: var(--wp--preset--color--white);
}

.wp-block-group input:focus,
.wp-block-group textarea:focus,
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 3px rgba(232, 131, 12, 0.15);
}

/* ========================================
   UTILITY ANIMATION CLASSES
   ======================================== */

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

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 781px) {
	/* Stack columns on mobile */
	.wp-block-columns {
		flex-wrap: wrap;
	}

	/* Reduce section padding on mobile */
	.wp-block-group[style*="padding-top: var(--wp--preset--spacing--80)"],
	.wp-block-group[style*="padding-top:var(--wp--preset--spacing--80)"] {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}

	/* Stack footer columns */
	.wp-block-group.has-dark-background-color .wp-block-columns {
		gap: 2rem;
	}

	/* Center text on mobile for footer */
	.wp-block-group.has-dark-background-color .wp-block-column {
		text-align: center;
	}

	/* Make buttons full width on mobile */
	.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-button {
		width: 100%;
	}

	.wp-block-button__link {
		display: block;
		text-align: center;
	}

	/* Adjust top bar for mobile */
	.is-not-stacked-on-mobile {
		flex-direction: column;
		text-align: center;
	}

	.is-not-stacked-on-mobile .has-text-align-right {
		text-align: center !important;
	}
}

@media (max-width: 480px) {
	/* Extra small screens */
	.wp-block-cover {
		min-height: 70vh !important;
	}

	h1.wp-block-heading {
		font-size: 2rem !important;
	}

	h2.wp-block-heading {
		font-size: 1.5rem !important;
	}
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
	.wp-block-cover {
		background-color: #fff !important;
		color: #000 !important;
		min-height: auto !important;
	}

	.wp-block-button {
		display: none;
	}

	.wp-block-navigation {
		display: none;
	}
}