:root {
    --dark-blue: #173950;
    --dark-purple: #6D264E;
    --bright-red: #E62145;
    --black: #000000;
    --white: #FFFFFF;
    --light-gray: #f4f4f4;
    --medium-gray: #ddd;
    --text-color: #333;
}

body {
    font-family: 'Patrick Hand', cursive; /* Changed default body font */
    margin: 0;
    padding: 0; /* Remove default padding, header will be fixed */
    background-color: var(--light-gray);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    width: 90%; /* Changed from 80% to 90% */
    margin: auto;
    overflow: hidden;
    padding: 20px;
}

/* Header Styles */
header {
    /* background: var(--dark-blue); */ /* Initially transparent */
    color: var(--white);
    padding: 0.5rem 0; /* Reduced vertical padding */
    /* border-bottom: var(--bright-red) 4px solid; */ /* Initially no border */
    position: fixed; /* Make header fixed */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure header is above other content */
    transition: background-color 0.3s ease, border-bottom 0.3s ease; /* Smooth transition */
}

header.header-transparent {
    background: transparent;
    border-bottom: none;
}

header.header-scrolled {
    background: var(--dark-blue);
    border-bottom: var(--bright-red) 4px solid;
}

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

/* Override .container styles for the header's main flex container */
/* to make logo and navigation spread to the viewport edges */
header > .container.header-flex {
    width: 100%;
    max-width: 100%; /* Ensure it spans full viewport width */
    margin: 0; /* Remove default margin from .container class */
    padding: 0 20px; /* Vertical padding 0, Horizontal padding 20px for spacing from viewport edges */
    box-sizing: border-box; /* Include padding in the width calculation */
}

.logo-column { /* Was header-right, now for logo on the left */
    /* No specific flex order needed as it's the first child */
}

.nav-column { /* Was header-left, now for nav & login on the right */
    display: flex;
    align-items: center;
    /* No specific flex order needed as it's the second child */
}

.main-nav a {
    color: var(--white);
    text-decoration: none;
    margin-right: 20px; /* This will space out nav items */
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--bright-red);
}

.login-icon {
    color: var(--white);
    font-size: 1.5rem; /* Increased size */
    margin-left: 10px; /* Spacing from nav */
    transition: color 0.3s ease;
}

.login-icon:hover {
    color: var(--bright-red);
}

.podcast-logo {
    height: 80px; /* Increased logo size */
    width: auto;
}

/* Hero Section Styles */
#hero-latest-episode {
    height: 100vh; /* Full viewport height */
    width: 100%;
    overflow: hidden; /* Hide parts of image that overflow */
    position: relative; /* For potential absolute positioning of children like text overlay */
    margin-bottom: 40px; /* Adjusted space after hero */
}

#hero-latest-episode .hero-link {
    display: block;
    height: 100%;
    width: 100%;
}

#hero-latest-episode .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, crop if necessary */
    display: block;
}

/* Main Content Styles */
.main-content {
    padding: 20px;
    background: var(--white);
    margin-top: 0; 
    border-radius: 5px;
    /*box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/ /* Optional shadow for depth */
    /* border-left: 5px solid var(--dark-purple); */ /* Removed border-left */
}

.main-content h2 {
    color: var(--dark-blue);
    border-bottom: 2px solid var(--bright-red);
    padding-bottom: 10px;
    margin-top: 0;
}

/* REMOVE OLD Episode List Styles */
/* .episode-list, .episode-list li, .episode-list li:hover, .episode-card-link (old), 
   .episode-card-image (old), .episode-card-content (old), .episode-list h3, .episode-list p,
   #episodes h2, .btn-card, .btn-card:hover, .btn, .btn:hover are removed or handled by Bootstrap + new styles */

/* Custom Card Styles (complementing Bootstrap) */
.episode-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid var(--medium-gray);
}

.episode-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15) !important;
}

.episode-card .card-title {
    color: var(--dark-blue);
    font-size: 1.1rem; 
    font-family: 'Patrick Hand', cursive; /* Ensure custom font */
}

.episode-card .card-text {
    font-size: 0.85rem;
    font-family: 'Patrick Hand', cursive; /* Ensure custom font */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(0.85rem * 1.6 * 3); 
}

.episode-card-image-wrapper {
    overflow: hidden; 
}

.episode-card-image-wrapper img.card-img-top {
    height: 180px; 
    object-fit: cover; 
    transition: transform 0.3s ease;
}

.episode-card:hover .episode-card-image-wrapper img.card-img-top {
    transform: scale(1.05); 
}

.episode-card .card-footer {
    background-color: var(--white); 
    font-family: 'Patrick Hand', cursive; /* Ensure custom font for button text if not overridden by BS */
}

/* Guest Section Styles */
#featured-guests .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

#featured-guests h2 {
    /* Inherits from .main-content h2 or Bootstrap, customize if needed */
}

.guest-list-scrollable-container {
    /* Wrapper for potential future additions like scroll arrows */
}

.guest-list-scrollable {
    /* overflow-auto, d-flex, flex-nowrap, pb-3 are handled by Bootstrap classes */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--medium-gray) var(--light-gray); /* Firefox */
}

.guest-list-scrollable::-webkit-scrollbar {
    height: 8px;
}

.guest-list-scrollable::-webkit-scrollbar-track {
    background: var(--light-gray);
    border-radius: 4px;
}

.guest-list-scrollable::-webkit-scrollbar-thumb {
    background-color: var(--medium-gray);
    border-radius: 4px;
}

.guest-list-scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--dark-purple);
}

.guest-card {
    border: 1px solid var(--medium-gray);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.guest-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
}

.guest-card-img { /* Style for the guest image */
    width: 130px;
    height: 130px;
    object-fit: cover;
    border: 4px solid var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.guest-card .card-body {
    padding-top: 1rem;
}

.guest-card .card-title {
    color: var(--dark-blue);
    font-family: 'Patrick Hand', cursive;
    font-size: 1.3rem;
    margin-bottom: 0.35rem;
}

.guest-card .card-text {
    font-family: 'Patrick Hand', cursive;
    font-size: 0.9rem;
    color: #555;
}

/* Styles for the horizontally scrollable episode list */
.episode-list-scrollable-container {
    /* Wrapper for potential future additions like scroll arrows */
}

.episode-list-scrollable {
    /* overflow-auto, d-flex, flex-nowrap, pb-3 are handled by Bootstrap classes */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--medium-gray) var (--light-gray); /* Firefox */
}

.episode-list-scrollable::-webkit-scrollbar {
    height: 8px;
}

.episode-list-scrollable::-webkit-scrollbar-track {
    background: var(--light-gray);
    border-radius: 4px;
}

.episode-list-scrollable::-webkit-scrollbar-thumb {
    background-color: var(--medium-gray);
    border-radius: 4px;
}

.episode-list-scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--dark-purple);
}

/* Hide scrollbar for episode list */
.episode-list-scrollable {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.episode-list-scrollable::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* Hide scrollbar for guest list */
.guest-list-scrollable {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.guest-list-scrollable::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* REMOVE old .btn and .btn:hover styles as Bootstrap is used now */
/* .btn { ... } */
/* .btn:hover { ... } */

/* Footer Styles */
footer {
    text-align: center;
    padding: 25px 20px;
    background: var(--black);
    color: var(--white);
    margin-top: 30px;
}

footer p {
    margin: 0;
}

/* Footer Styles - Modern Look */
.site-footer {
    background-color: var(--dark-blue); /* Dark background for the footer */
    color: var(--light-gray); /* Light text color for contrast */
    padding: 3rem 0 1rem; /* More padding at the top, less at the bottom */
    margin-top: 3rem;
    border-top: 3px solid var(--bright-red); /* Accent color top border */
    font-size: 0.9rem;
}

.site-footer .container {
    /* Bootstrap container will handle width and centering */
}

.footer-column {
    margin-bottom: 1.5rem;
}

.footer-column h4 {
    color: var(--white); /* White headings */
    margin-bottom: 1.25rem;
    font-size: 1.15rem;
    font-weight: bold;
    font-family: 'Patrick Hand', cursive; /* Consistent font */
    border-bottom: 1px solid var(--bright-red);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.footer-column p {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 0.6rem;
}

.footer-column ul li a {
    color: var(--light-gray); /* Light link color */
    text-decoration: none;
    transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
}

.footer-column ul li a:hover {
    color: var (--bright-red); /* Accent color on hover */
    padding-left: 5px;
}

.footer-column ul li a i {
    margin-right: 8px; /* Space between icon and text */
}

/* Social Icons */
.social-icons a {
    color: var(--light-gray);
    margin-right: 1rem; /* Spacing between icons */
    font-size: 1.5rem; /* Larger icons */
    text-decoration: none;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.social-icons a:hover {
    color: var(--bright-red); /* Accent color on hover */
    transform: scale(1.1);
}

/* Newsletter Form */
.newsletter-form input[type="email"] {
    background-color: #fff; /* White background for input */
    border: 1px solid var(--medium-gray);
    color: var(--text-color);
    font-family: 'Patrick Hand', cursive;
    padding: 0.375rem 0.75rem; /* Bootstrap-like padding */
    border-radius: 0.25rem; /* Bootstrap-like border-radius */
    margin-bottom: 0.5rem; /* Space below input */
    width: calc(100% - 90px); /* Adjust width to fit button */
    display: inline-block;
}

.newsletter-form .btn-primary {
    background-color: var(--bright-red);
    border-color: var(--bright-red);
    color: var(--white);
    font-family: 'Patrick Hand', cursive;
    /* padding: 0.375rem 0.75rem; */ /* Already handled by btn-sm from Bootstrap */
    width: 80px; /* Fixed width for button */
    display: inline-block;
    vertical-align: top; /* Align with input */
}

.newsletter-form .btn-primary:hover {
    background-color: var(--dark-purple);
    border-color: var(--dark-purple);
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--medium-gray); /* Lighter separator line */
    color: var(--medium-gray); /* Lighter text for copyright */
}

/* Responsive adjustments for footer columns if needed beyond Bootstrap's grid */
@media (max-width: 991px) { /* Target medium and smaller screens for newsletter form */
    .newsletter-form input[type="email"] {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .newsletter-form .btn-primary {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .footer-column h4 {
        font-size: 1.1rem;
    }
    .social-icons {
        margin-bottom: 1rem;
    }
    .footer-column {
        text-align: center; /* Center text in columns on small screens */
    }
    .footer-column ul {
        display: inline-block; /* Center list items */
        text-align: left;
    }
    .social-icons a {
        font-size: 1.3rem;
        margin: 0 0.5rem;
    }
}

/* Responsive Design */
@media(max-width: 768px) {
    .container {
        width: 95%;
    }

    .header-flex {
        flex-direction: column; /* Stack logo and nav-column vertically */
    }

    .logo-column {
        margin-bottom: 15px; /* Space below logo when stacked */
        text-align: center; /* Center logo on mobile */
    }

    .nav-column {
        flex-direction: column; /* Stack nav and login icon vertically */
        align-items: center; /* Center them when stacked */
    }

    .main-nav {
        margin-bottom: 10px; /* Space between nav and login icon when stacked */
        display: flex; /* Allow nav links to be stacked if needed or kept inline then centered */
        flex-direction: column; /* Stack nav links */
        align-items: center; /* Center nav links */
    }

    .main-nav a {
        display: block;
        margin-right: 0;
        margin-bottom: 8px; /* Space between stacked nav links */
        text-align: center;
    }

    .login-icon {
        margin-left: 0; /* Remove left margin when stacked */
        margin-top: 10px; /* Add some space above login icon if nav is present */
    }

    .podcast-logo {
        height: 50px;
    }

    .main-content h2 {
        font-size: 1.8rem;
    }
}

/* Stili per la Navbar */
.navbar {
    /* ...existing code... */
}

.navbar .navbar-brand img {
    /* ...existing code... */
}

.navbar .nav-link {
    color: #ffffff; /* Testo bianco per i link della navbar */
    font-size: 1.1rem; /* Aumentata la dimensione del font */
    padding-left: 1rem; /* Aggiunto padding a sinistra */
    padding-right: 1rem; /* Aggiunto padding a destra */
    /* ...existing code... */
}

.navbar .nav-link:hover,
.navbar .nav-link:focus { /* :focus per accessibilità e coerenza */
    color: #E62145; /* Colore al passaggio del mouse e focus */
}

.navbar .nav-item.active .nav-link, /* Per link attivi, se usi una classe .active */
.navbar .nav-link.active { /* Bootstrap 5 usa .active direttamente sul link */
    color: #E62145;
    /* Potresti voler aggiungere altri stili per il link attivo, es. font-weight: bold; */
}

/* Stili globali del sito SenzaFreni_cc */
header.header-transparent.scrolled {
    background-color: rgba(44, 27, 67, 0.98); /* Sfondo viola scuro semi-trasparente quando scrollato */
}

/* Stile per header solido specificamente in alcune pagine */
body.episodes-page-active header.header-transparent,
body.episode-detail-page-active header.header-transparent,
body.news-page-active header.header-transparent { /* Aggiunta la classe per la pagina news */
    background-color: var(--dark-blue);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-bottom: var(--bright-red) 4px solid;
    /* Rimuove la transizione per un cambio immediato se necessario */
    /* transition: none; */ 
}