/* Custom Properties */
:root {
    --anchor-navy: #1f2937;
    --coast-sky: #38bdf8;
    --sand-beige: #f2f2f0;
    --dark-text: #111827;
}

/* Tailwind Configuration */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base Styles */
@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Roboto', sans-serif;
        color: var(--dark-text);
        background-color: var(--sand-beige);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
    }
}

/* Custom Components */
@layer components {
    .container {
        @apply max-w-7xl mx-auto px-4;
    }

    .nav-link {
        @apply text-anchor-navy hover:text-coast-sky transition-colors duration-200 font-medium;
    }

    .nav-link.active {
        @apply text-coast-sky font-semibold;
    }

    .btn-primary {
        background-color: #f59e42;
        color: #fff;
        font-weight: 600;
        padding: 0.75rem 2rem;
        border-radius: 0.5rem;
        transition: background 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        display: inline-block;
    }

    .btn-primary:hover, .btn-primary:focus {
        background-color: #d97706;
        color: #fff;
        outline: none;
    }

    .cta-container {
        @apply bg-gradient-to-r from-anchor-navy/10 to-coast-sky/10 p-8 rounded-2xl
               border border-coast-sky/20 backdrop-blur-sm shadow-xl
               hover:shadow-2xl transition-all duration-300;
    }

    .service-card {
        @apply bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200;
    }

    .process-step {
        @apply bg-white p-6 rounded-lg shadow-md text-center;
    }

    .portfolio-item {
        @apply block bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-200;
    }

    .testimonial {
        @apply bg-white p-6 rounded-lg shadow-md mb-4;
    }

    .nav-button {
        background-color: #f59e42;
        color: #fff;
        font-weight: 600;
        padding: 0.5rem 1.5rem;
        border-radius: 0.5rem;
        transition: background 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        display: inline-block;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .nav-button:hover, .nav-button:focus {
        background-color: #d97706;
        color: #fff;
        outline: none;
    }

    .contact-submit-btn {
        background-color: #f59e42 !important;
        color: #fff !important;
        font-size: 1.25rem;
        font-weight: 700;
        padding: 1rem 2.5rem;
        border: 2px solid #d97706;
        box-shadow: 0 4px 16px rgba(245, 158, 66, 0.25), 0 2px 8px rgba(0,0,0,0.10);
        letter-spacing: 0.02em;
        transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    }

    .contact-submit-btn:hover, .contact-submit-btn:focus {
        background-color: #d97706 !important;
        color: #fff !important;
        outline: none;
        transform: scale(1.05);
        box-shadow: 0 6px 24px rgba(217, 119, 6, 0.25), 0 4px 16px rgba(0,0,0,0.12);
    }

    .btn-secondary {
        background-color: transparent;
        color: #1f2937;
        font-weight: 600;
        padding: 0.75rem 2rem;
        border-radius: 0.5rem;
        border: 2px solid #1f2937;
        transition: all 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        display: inline-block;
    }

    .btn-secondary:hover, .btn-secondary:focus {
        background-color: #1f2937;
        color: #fff;
        outline: none;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

/* Mobile Menu Overlay */
#mobile-menu {
    @apply hidden fixed inset-0 z-50 bg-white bg-opacity-95 flex flex-col items-center justify-center space-y-8 text-2xl font-poppins font-bold transition-all duration-300;
}
#mobile-menu nav a {
    @apply text-anchor-navy hover:text-coast-sky transition-colors duration-200 text-2xl py-2 px-6 rounded-lg;
}
#mobile-menu nav a:active {
    @apply bg-coast-sky text-white;
}

/* Form Styles */
input, textarea {
    @apply w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#38bdf8];
}

/* Scroll to Top Button */
#scroll-top {
    @apply fixed bottom-4 right-4 bg-[#1f2937] text-white p-3 rounded-full opacity-0 transition-opacity duration-300;
}

#scroll-top.visible {
    @apply opacity-100;
}

/* Testimonial Carousel */
.testimonial-carousel {
    @apply relative overflow-hidden;
}

.testimonial {
    @apply absolute inset-0 opacity-0 transition-opacity duration-300;
}

.testimonial.active {
    @apply opacity-100;
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        @apply text-3xl;
    }
    
    h2 {
        @apply text-2xl;
    }
    
    p {
        @apply text-base;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none;
    }
    
    body {
        background: white;
    }
    
    .container {
        max-width: none;
    }
}