/* Main CSS File - Imports all component styles */

/* Import all component stylesheets 
   Note: This file serves as the master stylesheet that imports all others.
   If you prefer, you can also link each CSS file individually in the HTML.
*/

/* Utilities first */
@import url('utilities/variables.css');
@import url('utilities/reset.css');

/* Components */
@import url('components/buttons.css');
@import url('components/header.css');
@import url('components/hero.css');
@import url('components/services.css');
@import url('components/commercial.css');
@import url('components/contact.css');
@import url('components/footer.css');

/* Responsive styles last */
@import url('utilities/responsive.css');

/* Global styles that don't fit in other components */

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Global focus styles */
*:focus {
    outline: 2px solid var(--accent-yellow);
    outline-offset: 2px;
}

/* Remove focus outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Global selection styles */
::selection {
    background: var(--accent-yellow);
    color: var(--primary-navy);
}

::-moz-selection {
    background: var(--accent-yellow);
    color: var(--primary-navy);
}

/* Scrollbar styles for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-yellow);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-orange);
}

/* Loading state for images */
img {
    transition: opacity 0.3s ease;
}

img.loading {
    opacity: 0.5;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-navy);
    color: var(--white);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1100;
}

.skip-link:focus {
    top: 6px;
}

/* Print styles */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    .nav-links,
    .mobile-menu,
    .cta-buttons,
    .contact-form {
        display: none !important;
    }
    
    .hero,
    .services,
    .commercial,
    .contact {
        page-break-inside: avoid;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.5);
        --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.6);
        --shadow-fun: 0 8px 25px rgba(0, 0, 0, 0.4);
    }
    
    .service-card,
    .contact-form,
    .contact-info {
        border: 2px solid var(--text-dark);
    }
    
    .btn {
        border: 2px solid var(--text-dark);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hero::before,
    .hero::after {
        animation: none;
    }
    
    .service-icon {
        transform: none !important;
    }
}

/* Dark mode support (optional - for future enhancement) */
@media (prefers-color-scheme: dark) {
    /* Uncomment and customize if you want dark mode support
    :root {
        --white: #1a1a1a;
        --light-gray: #2a2a2a;
        --text-dark: #e0e0e0;
        --soft-blue: #2a3a4a;
        --soft-purple: #3a2a4a;
        --soft-yellow: #4a4a2a;
        --soft-orange: #4a3a2a;
    }
    */
}

/* Custom properties for dynamic theming */
.theme-alternate {
    --primary-navy: #1a5f7a;
    --primary-purple: #57467b;
    --accent-yellow: #f9ca24;
    --accent-orange: #ff6348;
}

/* Utility classes for common layouts */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

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

.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none !important; }

/* Spacing utilities */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.5rem !important; }
.pt-2 { padding-top: 1rem !important; }
.pt-3 { padding-top: 1.5rem !important; }
.pt-4 { padding-top: 2rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.5rem !important; }
.pb-2 { padding-bottom: 1rem !important; }
.pb-3 { padding-bottom: 1.5rem !important; }
.pb-4 { padding-bottom: 2rem !important; }

/* Width utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-none { max-width: none; }

/* Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Z-index utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Opacity utilities */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Transform utilities */
.transform { transform: translateZ(0); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

/* Transition utilities */
.transition-none { transition: none; }
.transition-all { transition: all 0.3s ease; }
.transition-fast { transition: all 0.15s ease; }
.transition-slow { transition: all 0.5s ease; }

/* Border radius utilities */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--border-radius-small); }
.rounded { border-radius: var(--border-radius-medium); }
.rounded-lg { border-radius: var(--border-radius-large); }
.rounded-full { border-radius: 50%; }

/* Shadow utilities */
.shadow-none { box-shadow: none; }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-fun { box-shadow: var(--shadow-fun); }

/* Color utilities */
.text-primary { color: var(--primary-navy); }
.text-purple { color: var(--primary-purple); }
.text-yellow { color: var(--accent-yellow); }
.text-orange { color: var(--accent-orange); }
.text-gray { color: var(--medium-gray); }
.text-white { color: var(--white); }

.bg-primary { background-color: var(--primary-navy); }
.bg-purple { background-color: var(--primary-purple); }
.bg-yellow { background-color: var(--accent-yellow); }
.bg-orange { background-color: var(--accent-orange); }
.bg-white { background-color: var(--white); }
.bg-gray { background-color: var(--light-gray); }