/* Font declarations */
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinema';
  src: url('../fonts/Cinema-Regular.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Base styles */
:root {
  --color-monte-ciocci: #0099E8;
  --color-san-cosimato: #FA7DE3;
  --color-cervelletta: #FF732B;
  /* --background-color: #FF9DEB; */
  --background-color: #FFF;
  --cta-color: #00599b;
  --table-bg: #fff;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  /* Prevents flash when tapping on elements in Safari */
}

html {
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  font-family: 'Neue Montreal', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--background-color);
  background-image: url('../img/2025/background.svg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  min-height: 100vh;
  touch-action: pan-x pan-y;
}

a {
  color: var(--cta-color);
  text-decoration: none;
}

a:not(nav a):not(.cta-link a):not(:has(img)) {
  position: relative;
  font-weight: 600;
  border-bottom: 1px dashed;
  width: max-content
}

a:not(nav a):not(.cta-link a):not(:has(img))::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background-color: var(--cta-color);
  transition: width .5s ease;
}

a:hover:not(nav a):not(.cta-link a):not(:has(img))::after {
  width: 100%;
}

.programma-cell a,
.calendar-item a,
.cinema-troisi-desc a {
  color: inherit;
  white-space: nowrap;
}

.programma-cell a::after,
.calendar-item a::after {
  background-color: #000 !important
}

.cinema-troisi-desc a::after {
  background-color: #fff !important
}

a .bubble-heading:hover {
  color: var(--color-cervelletta);
}

/* Site wrapper */
.site-wrapper {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  /* overflow-x: hidden; */
  /* Temporarily commented out for sticky test */
  /* Prevent horizontal overflow on mobile */
}

/* Top section with navigation */
.top-section {
  padding: 1.5rem 0 0;
}

/* Navigation */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.logo img {
  height: 80px;
  position: relative;
  z-index: 1001;
  padding: 0 1rem
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  font-size: clamp(0.875rem, 2.6vw, 2rem);
  color: var(--cta-color);
}

/* Bubble font effect headings */

.bubble-heading {
  font-family: 'Cinema', sans-serif;
  display: inline-block;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white,
    -2px -2px 0 white,
    2px -2px 0 white,
    -2px 2px 0 white,
    2px 2px 0 white,
    -3px -3px 0 white,
    3px -3px 0 white,
    -3px 3px 0 white,
    3px 3px 0 white;
  /*
  text-shadow:
    -3px -3px 0 white,
     3px -3px 0 white,
    -3px  3px 0 white,
     3px  3px 0 white,
    -3px  0px 0 white,
     3px  0px 0 white,
     0px -3px 0 white,
     0px  3px 0 white,
    -4px -4px 0 white,
     4px -4px 0 white,
    -4px  4px 0 white,
     4px  4px 0 white;
     */
}

.bubble-heading-san-cosimato {
  font-family: 'Cinema', sans-serif;
  display: inline-block;
  font-size: 1.6rem;
  color: #fff;
  text-shadow:
    -1px -1px 0 var(--color-san-cosimato),
    1px -1px 0 var(--color-san-cosimato),
    -1px 1px 0 var(--color-san-cosimato),
    1px 1px 0 var(--color-san-cosimato),
    -2px -2px 0 var(--color-san-cosimato),
    2px -2px 0 var(--color-san-cosimato),
    -2px 2px 0 var(--color-san-cosimato),
    2px 2px 0 var(--color-san-cosimato),
    -3px -3px 0 var(--color-san-cosimato),
    3px -3px 0 var(--color-san-cosimato),
    -3px 3px 0 var(--color-san-cosimato),
    3px 3px 0 var(--color-san-cosimato);
}

.bubble-heading-cervelletta {
  font-family: 'Cinema', sans-serif;
  display: inline-block;
  font-size: 1.6rem;
  color: #fff;
  text-shadow:
    -1px -1px 0 var(--color-cervelletta),
    1px -1px 0 var(--color-cervelletta),
    -1px 1px 0 var(--color-cervelletta),
    1px 1px 0 var(--color-cervelletta),
    -2px -2px 0 var(--color-cervelletta),
    2px -2px 0 var(--color-cervelletta),
    -2px 2px 0 var(--color-cervelletta),
    2px 2px 0 var(--color-cervelletta),
    -3px -3px 0 var(--color-cervelletta),
    3px -3px 0 var(--color-cervelletta),
    -3px 3px 0 var(--color-cervelletta),
    3px 3px 0 var(--color-cervelletta);
}

.bubble-heading-monte-ciocci {
  font-family: 'Cinema', sans-serif;
  display: inline-block;
  font-size: 1.6rem;
  color: #fff;
  text-shadow:
    -1px -1px 0 var(--color-monte-ciocci),
    1px -1px 0 var(--color-monte-ciocci),
    -1px 1px 0 var(--color-monte-ciocci),
    1px 1px 0 var(--color-monte-ciocci),
    -2px -2px 0 var(--color-monte-ciocci),
    2px -2px 0 var(--color-monte-ciocci),
    -2px 2px 0 var(--color-monte-ciocci),
    2px 2px 0 var(--color-monte-ciocci),
    -3px -3px 0 var(--color-monte-ciocci),
    3px -3px 0 var(--color-monte-ciocci),
    -3px 3px 0 var(--color-monte-ciocci),
    3px 3px 0 var(--color-monte-ciocci);
}

.blue-cta {
  color: var(--cta-color);
}

.cinema-di-container,
.retro-arena-bubble {
  display: none
}

.cinema-di-container {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  text-align: center;
}

.cinema-di-top {
  font-size: 1rem;
}

/*
.cinema-di-bottom {
  font-size: 2rem;
}
  */

.retro-arena-bubble {
  position: absolute;
  top: 5%;
  left: 0;
  right: 0;
  text-align: center;
}

/* Card container */
.card-container {
  margin-bottom: 2rem;
}

/* Program card */
.program-card {
  background: white;
  border-radius: 1.5rem;
  overflow: visible;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  /* Create a new stacking context */
}

/* Program header */
.program-header {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
}

.time-info {
  margin-left: auto;
}

.time-info,
.entry-info {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}

/* Arena filters */
.arena-filters {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 2rem;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
  /* Allow scrolling on mobile */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

button.arena-filter {
  color: #000;
  appearance: none;
}

.arena-filters::-webkit-scrollbar {
  display: none;
}

.arena-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  /* Prevent wrapping on mobile */
}

.arena-filter::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.arena-filter[data-arena="san-cosimato"]::before {
  background: var(--color-san-cosimato);
}

.arena-filter[data-arena="cervelletta"]::before {
  background: var(--color-cervelletta);
}

.arena-filter[data-arena="monte-ciocci"]::before {
  background: var(--color-monte-ciocci);
}

.arena-filter.disabled::before {
  background: rgba(124, 124, 124, 1) !important;
}

/* Date sections Grid - Default (Desktop) styles moved here */
.date-section .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  justify-items: center;
}

/* Sticky Controls Wrapper - Apply sticky directly */
.sticky-controls {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

/* Calendar wrapper */
.calendar-wrapper {
  position: relative;
  padding-bottom: 0.5rem;
  background-color: #fff;
}

/* Calendar */
.calendar {
  position: relative;
  padding: 1rem 0;
}

.calendar>div {
  display: flex;
  gap: 1rem;
  padding: 0 3rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  align-items: center;
}

.calendar>div::-webkit-scrollbar {
  display: none;
}

/* Desktop calendar day styles - move these BEFORE the media query */
.calendar-day {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f3f3f3;
  cursor: pointer;
  transition: all 0.2s;
}

.calendar-day .day-number {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}

.calendar-day .month-abbr {
  font-size: 1rem;
  color: #000;
  font-weight: 700;
  margin-top: 0.25rem;
}

.calendar-day.active {
  background: #000;
  color: white;
}

.calendar-day.active .month-abbr {
  color: #ccc;
}

.calendar-day:hover:not(.active) {
  background: #e5e5e5;
}

/* Calendar separator and more indicator */
.calendar-separator,
.calendar-more {
  display: none;
}

/* Scroll buttons with better Safari compatibility */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  border: 1px solid #eee;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  outline: none;
}

.scroll-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.scroll-left {
  left: 1rem;
}

.scroll-right {
  right: 1rem;
}

/* Events container */
.events-container {
  padding: 2rem;
}

/* Date sections */
.date-section {
  margin-bottom: 3rem;
  scroll-margin-top: 12rem;
}

.date-section h2 {
  font-size: 2rem;
  font-weight: 900;
  /* Make date headings thicker */
  margin-bottom: 1.5rem;
}

.date-section h2 .day-label {
  color: #7C7C7C;
  font-weight: 700;
}

.date-section h2 .date-number {
  color: #000;
  font-weight: 700;
}

/* Mobile grid for single column layout */
.mobile-grid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
}

.mobile-grid .arena-column {
  margin-bottom: 1.5rem;
}

/* Arena columns */
.arena-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%
}

/* Event cards */
.event-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 0 22.5px 2px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.3s ease;
  /* Consistent height for cards */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 180px;
}

.event-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.event-card>div {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.event-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Location-specific text colors */
.text-san-cosimato {
  color: var(--color-san-cosimato);
}

.text-cervelletta {
  color: var(--color-cervelletta);
}

.text-monte-ciocci {
  color: var(--color-monte-ciocci);
}

.event-card .text-gray-700 {
  font-size: 1rem;
  line-height: 1.5;
  flex-grow: 1;
}

.event-card .text-gray-500 {
  font-size: 0.875rem;
  color: #666;
  margin-top: 1rem;
}

/* Closed events */
.event-card.closed-card .text-gray-700 {
  font-style: italic;
  color: #7C7C7C;
}

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

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

.flex-row {
  flex-direction: row;
}

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

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

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

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

.space-x-4>*+* {
  margin-left: 1rem;
}

.space-x-6>*+* {
  margin-left: 1.5rem;
}

.space-y-4>*+* {
  margin-top: 1rem;
}

.space-y-6>*+* {
  margin-top: 1.5rem;
}

.space-y-8>*+* {
  margin-top: 2rem;
}

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

.grid img {
  width: 100%;
}

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

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

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

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

/* Spacing */
.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

/* Typography */
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.5rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}

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

.text-white {
  color: white;
}

.text-gray-600 {
  color: #4B5563;
}

.text-gray-700 {
  color: #374151;
}

.text-gray-800 {
  color: #1F2937;
}

.text-gray-900 {
  color: #111827;
}

/* Background */
.bg-white {
  background-color: white;
}

.bg-gray-50 {
  background-color: #F9FAFB;
}

.bg-gray-900 {
  background-color: #111827;
}

.bg-black {
  background-color: black;
}

.from-orange-400 {
  --tw-gradient-from: #FB923C;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 146, 60, 0));
}

.to-pink-500 {
  --tw-gradient-to: #EC4899;
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* Borders */
.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

/* Shadows */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Positioning */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.z-10 {
  z-index: 10;
}

/* Sizing */
.w-full {
  width: 100%;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-64 {
  height: 16rem;
}

.min-h-\[80vh\] {
  min-height: 80vh;
}

.max-w-md {
  max-width: 28rem;
}

/* Object fit */
.object-cover {
  object-fit: cover;
}

/* Overflow */
.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

/* Display */
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

/* Transitions */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Media queries */
@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row;
  }

  .md\:space-x-6>*+* {
    margin-left: 1.5rem;
  }

  .md\:space-x-8>*+* {
    margin-left: 2rem;
  }

  .md\:space-y-0>*+* {
    margin-top: 0;
  }

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

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

  .md\:mb-0 {
    margin-bottom: 0;
  }

  .md\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:min-w-0 {
    min-width: 0;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fadeIn 1s ease-in-out forwards;
}

.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-400 {
  animation-delay: 400ms;
}

.animation-delay-500 {
  animation-delay: 500ms;
}

.animation-delay-600 {
  animation-delay: 600ms;
}

/* Header styles */
header.sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: white;
  border-bottom: none;
  padding: 1rem 0;
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
}

header .time-info {
  font-size: 1rem;
  color: #6B7280;
}

/* Main content */
main {
  padding: 2rem 1.5rem;
  background: white;
  min-height: calc(100vh - 12rem);
  border-radius: 0 0 1.5rem 1.5rem;
  margin-bottom: 2rem;
}

/* Container */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* Additions for Retrospective Page */
.retrospettiva-page {
  padding-top: 1rem;
  /* Add some space below nav */
}

#retrospettiva-dates {
  text-align: right;
}

.retrospettiva-card {
  /* Inherit background, border-radius, shadow from program-card if identical style desired */
  /* background: white; */
  /* Removed */
  /* border-radius: 1.5rem; */
  /* Removed, assuming same as program-card */
  /* overflow: hidden; */
  /* Keep if needed, or remove if program-card is visible */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
  /* Removed */
  width: 100%;
  margin-bottom: 2rem;
  /* Space at the bottom */
  /* Add program-card class to the element in HTML if exact match is needed */
  /* Or copy necessary styles from .program-card here */
  border: 1px solid #eee;
  /* Example: adding a light border if needed */
  background: white;
  /* Re-adding white background as it might be needed */
  border-radius: 1.5rem;
  /* Re-adding radius */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Re-adding shadow */
  overflow: hidden;
  /* Keep hidden for clean look */
}

.retrospettiva-main {
  display: flex;
  flex-direction: column;
  /* Stack image and text by default */
  padding: 2rem;
  gap: 2rem;
}

.retrospettiva-image {
  flex-shrink: 0;
  width: 100%;
  /* Full width on mobile */
  max-width: 450px;
  /* Limit max width */
  margin: 0 auto;
  /* Center image container on mobile */
}

.retrospettiva-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1rem;
  /* Rounded corners for image */
}

.retrospettiva-details {
  flex-grow: 1;
}

/* New style for the header containing arena and dates */
.retrospettiva-location-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* Align text baselines */
  margin-bottom: 0.5rem;
  /* Space below this header */
}

#retrospettiva-arena {
  margin-bottom: 0;
  /* Remove bottom margin */
  font-size: 1.1rem;
}

#retrospettiva-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
  line-height: 1.2;
}

#retrospettiva-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1.5rem;
}

.retrospettiva-info {
  font-size: 1rem;
  color: #000;
  font-weight: 700;
  margin-top: 2rem;
  line-height: 1.5;
}

.retrospettiva-info strong {
  font-weight: 700;
}

.retrospettiva-info a {
  font-weight: 700;
}

.retrospettiva-calendar {
  padding: 2rem;
  border-top: 1px solid #eee;
}

.retrospettiva-calendar h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  /* Responsive columns */
  gap: 1.5rem;
}

.calendar-item {
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 0 12.5px 2px rgba(0, 0, 0, 0.15);
}

.calendar-date {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .retrospettiva-main {
    flex-direction: row;
    /* Image and text side-by-side */
    align-items: flex-start;
    /* Align items top */
  }

  .retrospettiva-image {
    width: 40%;
    /* Adjust width as needed */
    max-width: 450px;
    margin: 0;
    /* Reset margin */
  }

  .retrospettiva-details {
    width: 60%;
  }

  .calendar-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    /* Slightly larger items on desktop */
  }
}

@media (min-width: 1024px) {
  .calendar-grid {
    grid-template-columns: repeat(3, 1fr);
    /* Fixed 4 columns on large screens */
  }
}

/* Custom text color using CSS variable */
.text-cta {
  color: var(--cta-color);
}

/* Custom text color using CSS variable */
footer .text-cta {
  color: var(--cta-color);
}

.site-footer {
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1280px;
  margin: 0 auto;
}

.sponsor {
  background: var(--cta-color);
  padding: 2%;
  margin: 2% 0;
  border-radius: 1rem;
  box-sizing: content-box;
}

.footer-info {
  font-weight: 500
}

.footer-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background-color: white;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  color: var(--cta-color);
}

.footer-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-content>*+* {
  margin-top: 1.5rem;
}

footer ul {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
}

footer li {
  list-style: none;
  width: 40px;
}

footer ul li img:hover {
  opacity: .6;
}

.footer-left-column,
.footer-right-column {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex-shrink: 0;
}

.footer-right-column {
  align-items: flex-end;
}

/* Removed explicit height on logo container, size controlled by SVG class now */
.footer-logo-inline-svg {
  display: block;
  /* Ensure it behaves like a block */
  height: 2rem;
  /* h-8 */
  width: auto;
}

.footer-social-links,
.footer-left-column p,
.footer-right-column p {
  margin: 0;
}

.footer-info p {
  margin: 0;
}

.footer-left-column .footer-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* --- Footer Responsive Styles --- */
@media (min-width: 768px) {

  /* md: breakpoint */
  .footer-container {
    padding: 2.5rem;
    /* md:p-10 */
  }

  .footer-content {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
  }

  .footer-content>*+* {
    margin-top: 0;
    /* Reset vertical spacing */
    margin-left: 2rem;
    /* md:space-x-8 */
  }

  .footer-logo-inline-svg {
    height: 2.5rem;
    /* md:h-10 */
  }
}

/* Hamburger Menu Styles */
.nav-toggle {
  display: none;
  /* Hide the checkbox */
}

.hamburger {
  display: none;
  /* Hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  /* Ensure it's above other elements */
  position: relative;
  /* Needed for span absolute positioning */
  width: 45px;
  /* Fixed width for positioning spans */
  height: 45px;
  /* Fixed height */
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--cta-color);
  /* Match link color */
  margin: 5px auto;
  /* Center spans */
  transition: all 0.3s ease-in-out;
  position: absolute;
  /* Absolute positioning for animation */
  left: 10px;
  /* Adjust left positioning */
}

.hamburger span:nth-child(1) {
  top: 10px;
  /* Position top span */
}

.hamburger span:nth-child(2) {
  top: 18px;
  /* Position middle span */
}

.hamburger span:nth-child(3) {
  top: 26px;
  /* Position bottom span */
}

/* Prevent body scroll when menu is open (using :has) */
body:has(#nav-toggle:checked) {
  overflow: hidden;
}


/* Location-specific border-top */
.border-top-san-cosimato {
  border-top: 5px solid var(--color-san-cosimato);
}

.border-top-cervelletta {
  border-top: 5px solid var(--color-cervelletta);
}

.border-top-monte-ciocci {
  border-top: 5px solid var(--color-monte-ciocci);
}

/* Styles for Dove Siamo page */
.arena-info {
  display: none;
  margin-top: 20px;
  padding: 15px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.05);
}

.arena-info.active {
  display: block;
}

.arena-info ul {
  list-style: disc;
  margin-left: 20px;
}

.arena-info ul li ul {
  list-style: circle;
  margin-left: 20px;
}

.arena-info strong {
  display: block;
  margin-bottom: 10px;
}

.arena-selector {
  transition: transform 0.2s ease-in-out;
}

.arena-selector:hover {
  transform: scale(1.03);
}

.arena-selector img {
  transition: outline 0.2s ease-in-out;
  outline: 3px solid transparent;
  outline-offset: 4px;
  border-radius: 8px;
}

.arena-selector.active img {
  outline-offset: 4px;
  border-radius: 8px;
}

.arena-selector[data-arena="san-cosimato"].active img {
  outline-color: var(--color-san-cosimato);
}

.arena-selector[data-arena="cervelletta"].active img {
  outline-color: var(--color-cervelletta);
}

.arena-selector[data-arena="monte-ciocci"].active img {
  outline-color: var(--color-monte-ciocci);
}

.grid a {
  display: block;
}


@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* Programma info block styles - no border, flush with table */
.programma-info {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1.3fr;
  gap: 1.5rem 2rem;
  align-items: start;
  margin-top: 2.5rem;
  margin-bottom: 0;
}

.info-heading {
  font-weight: 700;
  font-size: 1.25rem;
}

.info-sub {
  font-size: 1.25rem;
  margin-bottom: 0.7em;
}

.info-subtitle-main {
  font-weight: 700;
  font-size: 1.25rem;
  display: flex
}

.speaker-icon {
  margin-right: 0.3em;
}

.info-subtitle-secondary {
  font-size: 1.25rem;
}

.info-note {
  color: #666;
  margin-top: 1.1em;
}

.troisi-block {
  align-self: start;
  text-align: right;
}

.troisi-block img:hover {
  opacity: .8;
}


/* Stili per il dropdown Edizioni Precedenti */
.edizioni-button {
  background-color: transparent;
  color: var(--cta-color);
  border: none;
  padding: 0;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  border-bottom: 1px dashed;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none
}

.edizioni-button::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background-color: var(--cta-color);
  transition: width .5s ease;
}

.edizioni-button:hover::after {
  width: 100%;
}

#edizioni-button-anchor {
  anchor-name: --edizioni-precedenti;
}

#edizioni-popover {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin: 0;
  box-sizing: border-box;
  anchor-default: --edizioni-precedenti;
  width: anchor-size(width);
  min-width: 143px;
  max-width: 100vw;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

#edizioni-popover.positioned {
  opacity: 1;
}

ul.popover-list {
  flex-direction: column
}

ul.popover-list li {
  width: auto;
}

a.footer-support-link.font-bold.text-cta,
footer button {
  margin: 0;
  display: inline-block;
  width: max-content;
}

.footer-left-column p,
.footer-right-column p {
  margin: 0;
}

/* MOBILE */
@media (max-width: 767px) {
  .date-section .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-content {
    align-items: center;
    text-align: center;
  }

  .sponsor {
    padding: 4%;
  }

  .time-info {
    white-space: nowrap;
    margin: 0 auto;
  }

  .nav-links {
    gap: 1rem;
  }

  .program-header {
    flex-direction: column;
  }

  .footer-left-column,
  .footer-right-column {
    align-items: center;
    text-align: center;
  }

  .footer-logo img {
    width: 80%
  }

  footer ul {
    justify-content: center;
  }

  .calendar-day {
    width: 4.5rem;
    height: 4.5rem;
  }

  .calendar-day .day-number {
    font-size: 2.3rem;
  }

  .events-container {
    padding: 1.5rem 1rem;
  }

  nav {
    /* No changes needed here */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
  }

  .hamburger {
    display: inline-block;
    z-index: 1001;
    /* Ensure hamburger is above overlay */
  }

  .nav-links {
    /* Default hidden state - simplified */
    display: none;
    flex-direction: column;
    /* Keep basic structure */
    align-items: center;
    width: 100%;
    padding: 0;
  }

  /* Styles for when the menu is open (checked state) */
  .nav-toggle:checked~.nav-links {
    display: flex;
    position: fixed;
    /* Position relative to viewport */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: var(--background-color);
    /* Use page background color */
    justify-content: center;
    /* Center links vertically */
  }

  /* Adjust link styling for full screen menu */
  .nav-toggle:checked~.nav-links a {
    padding: 1rem;
    font-size: 2.5rem;
    /* Apply requested font size */
    width: auto;
    border-bottom: none;
    color: var(--cta-color);
  }

  /* Keep hamburger animation */
  .nav-toggle:checked+.hamburger span:nth-child(1) {
    transform: rotate(45deg);
    top: 18px;
  }

  .nav-toggle:checked+.hamburger span:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
  }

  .nav-toggle:checked+.hamburger span:nth-child(3) {
    transform: rotate(-45deg);
    top: 18px;
  }

  .programma-info {
    grid-template-columns: 1fr;
  }

  .troisi-block {
    text-align: left;
  }

  .troisi-block img {
    margin: 0 auto;
    display: block;
  }

  .speaker-icon {
    display: none;
  }
}