/* Indio Appraiser Website Styles */
/* Mobile-first responsive design with desert-inspired theme */

/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fdf4ff;
}

/* Color Variables - Rancho Mirage Sunset Theme */
:root {
    --primary-color: #7c2d92;      /* Deep Purple */
    --secondary-color: #a855f7;    /* Bright Purple */
    --accent-color: #ea580c;       /* Vibrant Orange */
    --light-bg: #fdf4ff;           /* Light Purple */
    --dark-text: #1f2937;          /* Dark Gray */
    --medium-text: #374151;        /* Medium Gray */
    --light-text: #6b7280;         /* Light Gray */
    --border-color: #d1d5db;       /* Light Gray */
    --hover-color: #6b21a8;        /* Purple Hover */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--dark-text);
    margin-bottom: 1rem;
    font-weight: 600;
}

h1 {
    font-size: 2rem;
    line-height: 1.2;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.3;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.4;
}

p {
    margin-bottom: 1rem;
    color: var(--medium-text);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--hover-color);
}

/* Layout Components */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header Styles */
.header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 1.5rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logo {
    font-size: 2rem;
    font-weight: 900;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.logo h1 {
    color: white;
    font-size: 2rem;
    font-weight: 900;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 1px;
}

/* Contact Form */
.contact-form {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin: 2rem 0;
}

.contact-form iframe {
    border-radius: 8px;
    min-height: 2500px;
}

.contact-info {
    background: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--accent-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.contact-info span {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-color);
    text-shadow: none;
}

.phone {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

/* Navigation */
.nav {
    background-color: var(--dark-text);
    padding: 0.5rem 0;
}

.nav-list {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.nav-item {
    margin: 0 1rem;
}

.nav-link {
    color: white;
    padding: 0.5rem 1rem;
    display: block;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

/* Main Content */
.main {
    padding: 2rem 0;
    min-height: calc(100vh - 200px);
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(139, 69, 19, 0.8), rgba(210, 105, 30, 0.8)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23f4f1eb" width="1200" height="600"/><path fill="%23e8dcc0" d="M0 300L50 280C100 260 200 220 300 200C400 180 500 180 600 190C700 200 800 220 900 210C1000 200 1100 160 1150 140L1200 120V600H1150C1100 600 1000 600 900 600C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V300Z"/></svg>');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
}

.hero h1 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    font-weight: 700;
}

.hero p {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* Content Sections */
.section {
    margin: 2rem 0;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.section-title {
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Grid Layouts */
.grid {
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.grid-2 {
    grid-template-columns: 1fr;
}

.grid-3 {
    grid-template-columns: 1fr;
}

/* Cards */
.card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* Pricing Lists */
.pricing-list {
    list-style: none;
    background: var(--light-bg);
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid var(--accent-color);
}

.pricing-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pricing-list li:last-child {
    border-bottom: none;
}

.price {
    font-weight: bold;
    color: var(--primary-color);
}

/* Pricing Grid Layout */
.pricing-grid {
    display: block;
    margin: 2rem 0;
}

.pricing-main {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.pricing-additional {
    background: var(--light-bg);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 4px solid var(--accent-color);
}

.pricing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.pricing-item:last-child {
    border-bottom: none;
}

.pricing-item .service {
    flex: 1;
    font-weight: 500;
}

.pricing-item .price {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.pricing-note {
    text-align: center;
    font-style: italic;
    color: var(--medium-text);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    /* Service Area */
    .service-area {
    background: var(--light-bg);
    border-radius: 8px;
    padding: 1.5rem;
}

.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

.city {
    background: white;
    padding: 0.5rem;
    border-radius: 4px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease;
}

.city:hover {
    background-color: var(--accent-color);
    color: white;
}

/* Contact Form */
.contact-form {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.contact-info {
    background: var(--light-bg);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.contact-item {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.contact-item strong {
    color: var(--primary-color);
    margin-right: 0.5rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
}

.btn:hover {
    background-color: var(--hover-color);
    transform: translateY(-1px);
    color: white;
}

.btn-secondary {
    background-color: var(--accent-color);
}

.btn-secondary:hover {
    background-color: var(--secondary-color);
}

/* Footer */
.footer {
    background-color: var(--dark-text);
    color: white;
    text-align: center;
    padding: 2rem 0;
    margin-top: 3rem;
}

.footer p {
    color: #ccc;
    margin-bottom: 0.5rem;
}

/* Responsive Design */
@media (min-width: 768px) {
    .container {
        padding: 0 2rem;
    }
    
    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }
    
    .grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .hero h1 {
        font-size: 3rem;
    }
    
    .hero p {
        font-size: 1.2rem;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .nav-list {
        justify-content: flex-start;
    }
    
    .header-content {
        flex-wrap: nowrap;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 3rem;
    }
    
    .main {
        padding: 3rem 0;
    }
    
    .section {
        padding: 3rem;
    }
    
    .hero {
        padding: 4rem 0;
    }
    
    .hero h1 {
        font-size: 3.5rem;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

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

.mb-2 {
    margin-bottom: 2rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.6s ease-in;
}

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

/* Print Styles */
@media print {
    .nav,
    .footer {
        display: none;
    }
    
    .main {
        padding: 0;
    }
    
    .section {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}