/**
 * Main CSS Entry Point
 * 
 * LEARN: This file imports all CSS files in the correct order.
 * The order matters: reset first, then variables, then components, then pages.
 *
 * @package Codevall
 */

/* =============================================================================
 * BASE STYLES (Load First)
 * ============================================================================= */
@import 'base/reset.css';
@import 'base/variables.css';
@import 'base/typography.css';
@import 'base/animations.css';

/* =============================================================================
 * LAYOUT STYLES
 * ============================================================================= */
@import 'layouts/header.css';
@import 'layouts/footer.css';

/* =============================================================================
 * COMPONENT STYLES
 * ============================================================================= */
@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/forms.css';
@import 'components/accordion.css';
@import 'components/comments.css';
@import 'components/faq.css';
@import 'components/testimonials.css';
@import 'components/page-hero.css';
@import 'components/process-steps.css';
@import 'components/cta-banner.css';
@import 'components/breadcrumbs.css';
@import 'components/filter-bar.css';

/* =============================================================================
 * PAGE-SPECIFIC STYLES
 * ============================================================================= */
@import 'pages/home.css';
@import 'pages/services.css';
@import 'pages/portfolio.css';
@import 'pages/area.css';
@import 'pages/blog.css';
@import 'pages/about.css';
@import 'pages/contact.css';
@import 'pages/legal.css';

/* =============================================================================
 * UTILITY CLASSES
 * ============================================================================= */

/* Container */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

/* Section spacing */
.section,
.section-padding {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
    .section,
    .section-padding {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }
}

/* Tighten spacing between adjacent same-background sections */
.section + .section:not(.bg-alt),
.section-padding + .section:not(.bg-alt),
.section + .section-padding {
    padding-top: var(--space-8);
}

@media (min-width: 768px) {
    .section + .section:not(.bg-alt),
    .section-padding + .section:not(.bg-alt),
    .section + .section-padding {
        padding-top: var(--space-12);
    }
}

/* Restore full spacing when background changes (visual separator) */
.bg-alt + .section:not(.bg-alt),
.section:not(.bg-alt) + .bg-alt,
.bg-alt + .section-padding,
.section-padding + .bg-alt {
    padding-top: var(--space-16);
}

@media (min-width: 768px) {
    .bg-alt + .section:not(.bg-alt),
    .section:not(.bg-alt) + .bg-alt,
    .bg-alt + .section-padding,
    .section-padding + .bg-alt {
        padding-top: var(--space-20);
    }
}

/* Section headings */
.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-title {
    margin-bottom: var(--space-4);
}

.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Flexbox utilities */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-4 {
    gap: var(--space-4);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

/* Grid utilities */
.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .md\:grid-cols-1 {
        grid-template-columns: 1fr;
    }
    
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Spacing utilities */
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.pt-8 { padding-top: var(--space-8); }

/* Background utilities */
.bg-alt {
    background-color: var(--color-background-alt);
}

/* Section CTA wrapper - centered with proper spacing */
.section-cta {
    text-align: center;
    margin-top: var(--space-8);
}

/* Grid utilities for spanning columns */
.grid-full-width {
    grid-column: 1 / -1;
}

/* Process steps spacing (used on multiple pages) */
.process-steps-wrapper {
    margin-top: var(--space-12);
}

/* =============================================================================
   404 PAGE
   ============================================================================= */
.error-page-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: var(--space-16) 0;
}

.error-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: var(--space-6);
}

.error-page-title {
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: var(--font-extrabold, 800);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.error-page-subtitle {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.error-page-text {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 550px;
    margin: 0 auto var(--space-8);
    line-height: var(--leading-relaxed);
}

.error-page-search {
    max-width: 500px;
    margin: 0 auto var(--space-6);
}

.error-page-search__label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.error-page-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 300px;
    margin: 0 auto var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.error-page-divider::before,
.error-page-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.error-page-cta {
    justify-content: center;
    margin-bottom: var(--space-12);
}

.error-page-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.error-page-links {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    max-width: 500px;
    margin: 0 auto;
}

.error-page-links__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.error-page-links__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.error-page-links__list li a {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-background-alt);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.error-page-links__list li a:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* =============================================================================
   SEARCH RESULTS PAGE
   ============================================================================= */
.search-header {
    padding-bottom: var(--space-4);
}

.search-query {
    color: var(--color-primary);
}

.search-header__form {
    max-width: 600px;
    margin: var(--space-6) auto var(--space-4);
}

.search-header__count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.blog-card__type {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: capitalize;
}

.no-results {
    padding: var(--space-16) 0;
}

.no-results__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    background: var(--color-background-alt);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.no-results h2 {
    margin-bottom: var(--space-3);
}

.no-results p {
    color: var(--color-text-muted);
    max-width: 400px;
    margin: 0 auto;
}

/* Loading state for buttons */
.btn-loading {
    display: none;
}

/* Visibility utilities */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hide on specific screen sizes */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}