/**
 * Project: InnerLumen
 * File: inspire.css
 * Description: Provides the CSS for the inspire buttons, passages, images, etc
 * * Author: Eric Koski
 * Business: InnerLumen
 * Created: January 2026
 * * Note: Designed to be enqueued via functions.php using wp_enqueue_script.
 */

.inspire-body { 
    font-family: 'Georgia', serif; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-height: 100vh; 
    margin: 0; 
    overflow-x: hidden; /* Prevents accidental side-scrolling */
}

.inspire-back-btn { 
    text-decoration: none; 
    color: #444; 
    border: 2px solid #888; 
    padding: 12px 30px; 
    border-radius: 30px; 
    font-family: sans-serif; 
    font-weight: bold;
    background: rgba(255,255,255,0.7); 
    transition: all 0.3s;
}

.inspire-back-btn:hover { 
    background: white; 
    border-color: #333; 
    transform: translateY(-2px);
}

.inspire-about-donate-body { 
    font-family: sans-serif; 
    /* No background color needed, footer handles the shimmer! */
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center; 
    min-height: 100vh; 
    margin: 0; 
}

.inspire-about-donate-card {
    text-align: center; 
    background: white; 
    padding: 50px; 
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    max-width: 400px; 
    /* Add this magic line: */
    margin: auto 0; 
}

.inspire-button-grid { 
    width: 100%;
	display: grid; 
	grid-template-columns: repeat(5, 100px); 
	gap: 75px; 
	text-align: center; 
}

.inspire-button-icon { 
	width: 80px; 
	height: 80px; 
	border-radius: 22px; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	text-decoration: none; 
	color: white; 
	font-weight: bold; 
	font-size: 48px; 
	box-shadow: 0 8px 15px rgba(0,0,0,0.08); 
	transition: transform 0.2s; margin-bottom: 8px; 
}

/* Mobile-Specific Adjustments */
@media screen and (max-width: 600px) {
	.inspire-button-grid { 
		width: 100%;
		display: grid; 
		grid-template-columns: repeat(2, 100px); 
		gap: 20px; 
		text-align: center; 
	}
}

.inspire-button-icon:hover { transform: scale(1.1); }
.inspire-button-label { 
	font-size: 14px; 
	color: #444; 
	font-weight: 500;
	text-align: center;
	justify-content: center;
}

/* Modern Pastel Icon Colors */
.inspire-bg-btn-verse { background: #8da9c4; }   /* Slate Blue */
.inspire-bg-btn-image { background: #d5896f; }   /* Muted Terracotta */
.inspire-bg-btn-passage { background: #9db4a0; } /* Sage Green */
.inspire-bg-btn-about { background: #c28cae; }   /* Dusty Rose */
.inspire-bg-btn-donate { background: #b5a48b; }  /* Stone/Taupe */