/* Base styles */
:root {
    --primary-color: #196d99; /* Keeping a default, can be overridden if 2018 has a specific theme color */
    --text-color: #333;
    --link-color: #fff;
    --link-hover-color: rgba(255, 255, 255, 0.8);
    --top-bar-bg: #fff; /* From screenshot, can be adjusted */
    --main-nav-bg: #fff;
    --program-bar-bg: #97c221; /* Green from screenshot */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff; /* Page background seems white in screenshot */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2017 Specific Header Styles */
.top-bar-2017 {
    background-color: var(--top-bar-bg);
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.top-bar-2017 .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left .top-bar-festival-logo {
    height: 70px;
    width: auto;
    display: block;
}

.top-bar-right {
    display: flex;
    align-items: center;
}

/* Banner Carousel */
.banner-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Placeholder for hero specific background if not using slides */
    /* background: url('./2017_files/HERO_BACKGROUND_IMAGE.jpg') no-repeat center center/cover; */
}

.hero-main-logo-2017 {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
    display: flex;
    flex-direction: column; /* Stack them if needed or row */
    align-items: flex-end;
    gap: 5px;
}

.hero-main-logo-2017 img {
    height: auto;
}
.hero-piccolo-america{
    width: 120px; /* Adjust */
}
.hero-roma-municipio{
    width: 100px; /* Adjust */
}

/* hero-top-logos (MIBACT/BNL) is removed from here and restyled below */

.carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slides .slide {
    min-width: 100%;
    display: none;
}

.carousel-slides .slide.active {
    display: block;
}

.carousel-slides img {
    width: 100%;
    height: auto;
    display: block;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
}

.carousel-control.prev {
    left: 10px;
}

.carousel-control.next {
    right: 10px;
}

/* Relocated Top Sponsors (formerly Regione Lazio/SIAE from top bar) */
.relocated-top-sponsors-2017 {
    padding: 20px 0 0;
    background-color: #fff; 
    text-align: center;
}

.relocated-top-sponsors-2017 .container {
    /* Container handles max-width and padding */
}

.relocated-sponsors-img {
    max-width: 100%; /* Ensure it's responsive */
    height: auto; /* Maintain aspect ratio */
    max-height: 70px; /* Adjust as needed */
}

/* Program Section */
.program-title-bar-2017 {
    background-color: var(--program-bar-bg);
    color: #fff;
    padding: 10px 0;
    margin-bottom: 0; /* Attach to program image */
}

.program-title-bar-2017 .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.program-title-bar-2017 span {
    font-size: 1.1em;
    font-weight: bold;
}

.program-title-bar-2017 small {
    font-weight: normal;
    font-size: 0.8em;
}

.program-gratuito {
    font-size: 0.9em !important;
}

.program {
    width: 100%;
    overflow: hidden;
    background-color: #fff; /* Assuming program image is on white */
}

.program img {
    width: 100%;
    height: auto;
    display: block;
}

/* Sponsor/Social Background Wrapper (Main Sponsors Grid) */
.sponsor-social-background { /* This will be for the grid of many sponsors */
    background-color: #fff; /* White background for main sponsors */
    padding: 30px 0;
    text-align: center;
}

/* Sponsors Section (Main Sponsors Grid) */
.sponsors.main-sponsors-grid-2017 .container {
    display: flex; /* Changed to flex for row layout */
    flex-direction: column; /* Stack rows */
    align-items: center; /* Center rows/images */
    gap: 20px;
    max-width: 1000px; /* Constrain width of logos */
}

.sponsors.main-sponsors-grid-2017 .sponsor-row img {
    max-width: 100%; /* Allow image to take full width of its parent row if needed */
    height: auto; /* Maintain aspect ratio */
    /* Adjust max-height if you want to control the visual size directly */
    max-height: 150px; /* Increased size */
    display: block; /* Ensure it behaves as a block for centering/margin */
    margin: 0 auto; /* Center if its width is less than container */
}

/* Footer Styles */
footer {
    background-color: #222; /* Darker gray from screenshot */
    color: #aaa; /* Lighter text for contrast */
    padding: 30px 0;
    font-size: 0.85em;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
    color: var(--program-bar-bg);
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 20px;
}

.footer-column {
    flex: 1;
    min-width: 280px; /* Ensure columns have enough space */
}

.footer-column-left-2017 .footer-logos {
    margin-bottom: 15px;
}

.footer-column-left-2017 .footer-logos img {
    display: block; /* Stack them */
    margin-bottom: 10px;
}

.footer-logo-pa {
    width: 150px; /* Adjust as needed */
    height: auto;
}

.footer-logo-roma {
    width: 100px; /* Adjust as needed */
    height: auto;
}

.footer-column p {
    margin-bottom: 8px;
    line-height: 1.5;
}

.footer-column strong {
    color: #fff;
}

.footer-patronage-logos {
    margin-top: 15px;
}

.footer-patronage-logos img {
    width: auto; 
    height: 40px; /* Adjust as needed */
    margin-right: 15px;
}

.footer-social-2017 ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 10px 0;
    text-align: center;
}

.footer-social-2017 li {
    display: inline-block;
    margin-right: 20px;
}

.footer-social-2017 li:last-child {
    margin-right: 0;
}

.footer-social-2017 li a {
    font-size: 1.4em; /* Make social icons a bit larger */
    color: #fff;
}

.footer-social-2017 li a i {
    transition: color 0.3s ease;
}

.footer-social-2017 li a:hover i {
    color: var(--program-bar-bg); /* #97c221 */
}

/* Screen-reader only class for icon text */
.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;
}

/* Mobile Styles Adjustments */
@media (max-width: 767px) {
    .top-bar-2017 .container {
        flex-direction: column; /* Stack logo and nav on mobile */
        gap: 15px; /* Space between logo and nav block */
    }
    .top-bar-left .top-bar-festival-logo {
        margin: 0 auto; /* Center logo if stacked */
    }
    .top-bar-right nav ul {
        flex-direction: column; /* Stack nav items on mobile */
        gap: 10px;
        align-items: center; /* Center nav items when stacked */
    }
    .hero-main-logo-2017 {
        top: 10px;
        right: 10px;
        align-items: flex-end;
    }
    .hero-piccolo-america { width: 100px; }
    .hero-roma-municipio { width: 80px; }

    .supporting-sponsors-2017 .container {
        flex-direction: column;
        gap: 20px;
    }
    .footer-columns {
        flex-direction: column;
    }
    .footer-column {
        min-width: unset;
    }
}

/* Green Divider */
.green-divider-2017 {
    height: 40px; /* Updated height */
    background-color: var(--program-bar-bg); /* #97c221 */
    margin: 20px 0; /* Adjust spacing as needed */
}

/* "AIUTACI A RIAPRIRE IL CINEMA TROISI" Section */
.aiutaci-troisi-2017 {
    background-image: url('./2017_files/1.4b.jpg');
    background-color: #9d2445; /* Fallback or underlay color */
    background-size: cover;
    background-position: center center;
    padding: 60px 0; /* Vertical padding on section, horizontal via container or direct on link */
    text-align: center;
    color: #fff;
}

.aiutaci-troisi-2017 .section-link-2017 {
    display: block;
    text-decoration: none;
    color: #fff;
    padding-left: 90px; /* Horizontal padding from original style */
    padding-right: 90px; /* Horizontal padding from original style */
}

.aiutaci-troisi-2017 .container {
    /* Container is already centered, this is more about internal layout */
}

.aiutaci-troisi-2017 .aiutaci-text-block {
    font-size: 36px;
    line-height: 1.3em;
    background-color: rgba(0,0,0,0.26);
    padding: 20px;
    margin-bottom: 20px; /* Space between the two blocks */
}

.aiutaci-troisi-2017 .aiutaci-text-block p strong {
    font-weight: normal; /* Changed from bold to normal */
}

.aiutaci-troisi-2017 .aiutaci-donation-button-block {
    font-size: 36px;
    line-height: 1.3em; /* Match the text block for consistency */
    background-color: #9d2445; /* Original button color */
    padding: 20px;
    display: inline-block; /* To contain it to text width + padding */
    color: #fff;
    text-decoration: none;
    font-weight: normal; /* Changed from bold to normal */
}

/* Remove old placeholder styles for donation button if any */
.donation-button-2017 {
    /* These were placeholders and are replaced by .aiutaci-donation-button-block */
    display: none; 
}

/* Remove or adjust old h2/p styles if they conflict */
.aiutaci-troisi-2017 h2,
.aiutaci-troisi-2017 p:not(.aiutaci-text-block p) { /* Target only the old p if it exists */
    display: none; /* Hide the old generic h2 and p within this section */
}