/* Graffiti Background Styles - Clean Gradient Version */

/* Hero Section - Brand gradient (handled by styles.css) */
.hero {
    position: relative;
    z-index: 0;
}

/* Upload Section - Dark gradient */
.upload-section {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
}

/* Gallery Section - Light */
.gallery-section {
    background: #ffffff;
}

/* Mosaic Section - Light grey */
.mosaic-section {
    background: #f8f9fa;
}

/* Exhibitions Section - White */
.exhibitions-section {
    background: #ffffff;
}

/* Shop Section - Light gradient */
.shop-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* About Section - Dark gradient */
.about-section {
    background: linear-gradient(135deg, #343a40 0%, #495057 100%);
    color: white;
}

/* Supporters Section - Light grey */
.supporters-section {
    background: #f8f9fa;
}

/* How It Works Section - White */
.how-it-works-section {
    background: #ffffff;
}

/* Lost Artworks Section - Light grey */
.lost-artworks-section {
    background: #f8f9fa;
}

/* Alternative backgrounds for variety */
.hero.alt-bg {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.6), 
        rgba(0, 0, 0, 0.4)
    ), url('../assets/backgrounds/graffiti-1.jpg');
}

.upload-section.alt-bg {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.7), 
        rgba(0, 0, 0, 0.5)
    ), url('../assets/backgrounds/graffiti-9.jpg');
}

/* Clean text without shadows */
.hero h2,
.hero p,
.about-section h2,
.about-section p,
.upload-section h2,
.upload-section p,
.mosaic-section h2,
.mosaic-section p {
    text-shadow: none !important;
    color: #333 !important;
}

/* Card overlays for better contrast */
.artwork-card,
.exhibition-card,
.collector-card {
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Text container cards for better readability */
.hero-content,
.how-it-works-intro {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2.5rem;
    margin: 2rem 0;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 5;
}

/* About content should not have background - only the text portion */
.about-content {
    background: none !important;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    margin: 2rem 0;
    box-shadow: none;
    border: none;
}

.upload-content,
.mosaic-projects .project-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 2rem;
    margin: 1.5rem 0;
    box-shadow: none;
}

/* Upload section needs card background for readability */
.upload-section .container,
.upload-section h2,
.upload-section > .container > p,
.upload-area,
.upload-form {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 2rem;
    margin: 1rem auto;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Make upload section container wrap everything */
.upload-section .container {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin: 2rem auto;
    max-width: 1000px;
}

.process-steps .step {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: none;
}

/* All section headings use graffiti font style with pill containers */
.graffiti-section-title,
h2.graffiti-section-title,
.lost-artworks-section h2,
.gallery-section h2,
.mosaic-section h2,
.exhibitions-section h2,
.supporters-section h2,
.how-it-works-section h2,
.about-section h2,
.upload-section h2 {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    padding: 1rem 2rem !important;
    border-radius: 50px !important;
    display: inline-block !important;
    margin: 0 auto 2rem auto !important;
    box-shadow: none;
    text-align: center !important;
    font-size: 2.8rem !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    color: #333 !important;
    font-family: 'Permanent Marker', cursive !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 5;
    text-shadow: 2px 2px 0px rgba(102, 126, 234, 0.2) !important;
}

/* Force center alignment containers for section headers */
.lost-artworks-section .container,
.gallery-section .container,
.mosaic-section .container,
.exhibitions-section .container,
.supporters-section .container,
.how-it-works-section .container,
.about-section .container,
.upload-section .container {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* Ensure section headers display as centered inline-blocks */
section h2 {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Highlight text styling for all section headings (red like SAVES) */
.graffiti-section-title .highlight-text,
.lost-artworks-section h2 .highlight-text,
.gallery-section h2 .highlight-text,
.mosaic-section h2 .highlight-text,
.exhibitions-section h2 .highlight-text,
.supporters-section h2 .highlight-text,
.how-it-works-section h2 .highlight-text,
.about-section h2 .highlight-text,
.upload-section h2 .highlight-text,
section h2 .highlight-text {
    color: #ff6b6b !important;
    text-shadow: 3px 3px 0px rgba(255, 107, 107, 0.3) !important;
    font-weight: normal !important;
}

/* Don't override polaroids - let them use their natural styling from styles.css */

/* Make the scrolling graffiti slideshow half see-through and layer it properly */
.hero::before {
    opacity: 0.5 !important;
    z-index: 2 !important;
    position: absolute !important;
    filter: none !important;
}

/* Ensure hero content (polaroids, cards, text) appears above the slideshow */
.hero .container {
    position: relative;
    z-index: 3 !important;
}

/* Fix any sections that lost their center alignment */
section.container,
section .container {
    text-align: center;
}

/* Ensure section intro text is centered */
section p:first-of-type,
.section-intro,
.intro-text,
.how-it-works-intro,
.how-it-works-intro .main-description,
.how-it-works-intro .sub-description,
.how-it-works-intro p {
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 800px;
}

/* Specific fix for How It Works section */
.how-it-works-section .container,
.how-it-works-section .how-it-works-intro {
    text-align: center !important;
}

.how-it-works-section p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fix database search and filter area alignment */
.artwork-search,
.historical-timeline,
.cause-filters {
    text-align: center !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Make sure stats are centered */
.database-stats,
.support-stats {
    text-align: center !important;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Force all section introductory paragraphs to center */
.how-it-works-section .main-description,
.how-it-works-section .sub-description,
.lost-artworks-section > .container > p,
.gallery-section > .container > p,
.mosaic-section > .container > p,
.exhibitions-section > .container > p,
.supporters-section > .container > p {
    text-align: center !important;
    margin: 1rem auto !important;
    max-width: 900px !important;
    display: block !important;
}

/* Hero subtitle and description need background for readability */
.hero-subtitle,
.hero-description {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    padding: 1rem 1.5rem !important;
    border-radius: 15px !important;
    margin: 1rem 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Artist story text needs background for readability */
.about-section .artist-story {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    padding: 2rem !important;
    border-radius: 15px !important;
    margin: 1rem 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .hero,
    .upload-section,
    .about-section,
    .mosaic-section {
        background-attachment: scroll;
    }
}

/* Parallax effect for desktop */
@media (min-width: 769px) {
    .hero,
    .upload-section,
    .about-section,
    .mosaic-section {
        background-attachment: fixed;
    }
}

/* Dynamic background rotation class */
.rotating-bg {
    animation: backgroundRotation 30s infinite;
}

@keyframes backgroundRotation {
    0% { background-image: url('../assets/backgrounds/graffiti-1.jpg'); }
    8.33% { background-image: url('../assets/backgrounds/graffiti-2.jpg'); }
    16.66% { background-image: url('../assets/backgrounds/graffiti-3.jpg'); }
    25% { background-image: url('../assets/backgrounds/graffiti-4.jpg'); }
    33.33% { background-image: url('../assets/backgrounds/graffiti-5.jpg'); }
    41.66% { background-image: url('../assets/backgrounds/graffiti-6.jpg'); }
    50% { background-image: url('../assets/backgrounds/graffiti-7.jpg'); }
    58.33% { background-image: url('../assets/backgrounds/graffiti-8.jpg'); }
    66.66% { background-image: url('../assets/backgrounds/graffiti-9.jpg'); }
    75% { background-image: url('../assets/backgrounds/graffiti-10.jpg'); }
    83.33% { background-image: url('../assets/backgrounds/graffiti-11.jpg'); }
    91.66% { background-image: url('../assets/backgrounds/graffiti-12.jpg'); }
    100% { background-image: url('../assets/backgrounds/graffiti-1.jpg'); }
}