/* ==========================================
   Shropshire Recovery - Main Stylesheet
   Production-Ready CSS
   ========================================== */

/* Custom Material Icons Configuration */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    font-size: 24px;
}

/* Body Base Styles */
body {
    font-family: "Public Sans", sans-serif;
}

/* Custom Animations */
@keyframes pulse-ring {
    0% { 
        transform: scale(0.33); 
        opacity: 1; 
    }
    80%, 100% { 
        transform: scale(2); 
        opacity: 0; 
    }
}

.map-pulse {
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

/* Background Patterns */
.industrial-grid {
    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Button Styles - Shared across all pages */
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3rem;
    padding: 0 2rem;
    background-color: #f27f0d;
    color: white;
    font-weight: bold;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(242, 127, 13, 0.2);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #d96f0b;
    box-shadow: 0 10px 15px -3px rgba(242, 127, 13, 0.4);
    transform: translateY(-1px);
}

.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3rem;
    padding: 0 2rem;
    background-color: transparent;
    color: #1c2533;
    font-weight: bold;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: rgba(242, 127, 13, 0.05);
    border-color: #f27f0d;
}

.dark .btn-secondary {
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.dark .btn-secondary:hover {
    background-color: rgba(242, 127, 13, 0.1);
    border-color: #f27f0d;
}

/* Card Styles */
.card {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.dark .card {
    background-color: #2d241b;
}

/* Form Input Styles */
.form-input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    background-color: white;
    border: 1px solid #e8dbce;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #f27f0d;
    ring: 1px solid #f27f0d;
}

.dark .form-input {
    background-color: #2d241b;
    border-color: #3a2d20;
    color: white;
}

.form-textarea {
    width: 100%;
    min-height: 120px;
    padding: 1rem;
    background-color: white;
    border: 1px solid #e8dbce;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    resize: vertical;
    transition: all 0.2s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: #f27f0d;
    ring: 1px solid #f27f0d;
}

.dark .form-textarea {
    background-color: #2d241b;
    border-color: #3a2d20;
    color: white;
}

/* Navigation Active State */
.nav-link-active {
    color: #f27f0d !important;
    font-weight: 700 !important;
}

/* Utility Classes */
.text-primary {
    color: #f27f0d;
}

.bg-primary {
    background-color: #f27f0d;
}

.border-primary {
    border-color: #f27f0d;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary {
        width: 100%;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Selection Color */
::selection {
    background-color: rgba(242, 127, 13, 0.2);
    color: #1c2533;
}