/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Basic Body Styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f0f2f5;
}

/* Section Title Styles */
.section-title {
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    color: #1f2937; /* Dark Gray */
    margin-bottom: 1.5rem; /* 24px */
    padding-bottom: 0.5rem; /* 8px */
    border-bottom: 3px solid #c2185b; /* Theme Color */
    display: inline-block;
}

/* Headline Ticker Styles */
.headline-ticker {
    background-color: #c2185b; /* Theme Color */
    color: white;
    padding: 0.5rem;
    overflow: hidden;
    white-space: nowrap;
}
.headline-ticker-content {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-scroll 90s linear infinite;
}
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Homepage Hero Slider Styles */
#image-slider .slide {
    display: none;
    transition: opacity 1s ease-in-out;
}
#image-slider .slide.active {
    display: block;
}

/* NOTE: The problematic rule for #tv-programs, #news, #events is DELIBERATELY OMITTED */
/* This will allow your Tailwind classes like 'my-8' to work correctly. */

/* You can add any other custom global styles here in the future. */