/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* Trix is now included separately */

.home.contact #nav-bar {
  background: #efefef;
  svg g {
    fill: var(--main-brand-color) !important;
  }
  a {
    color: var(--main-brand-color);
  }
  a.bg-\[\--main-brand-color\] {
    color: white;
  }
}
.container {
  max-width: 80%;
}

.theme-2026 .container {
  max-width: 1600px;
}

@media screen and (max-width: 768px) {
  .container {
    max-width: 90%;
  }
  .theme-2026 .container {
    max-width: 95%;
  }
}

/* Import global styles first */
@import 'global.css';
/* Import custom banner styles */
@import 'banner.css';
/* Import ticket carousel styles */
@import 'tickets.css';
/* Import newsletter styles */
@import 'newsletter.css';
/* Import team carousel styles */
@import 'team-carousel.css';
/* Import animation styles */
@import 'animation.css';
/* Import experiences mosaic styles */
@import 'experiences.css';
/* Import share styles */
@import 'share.css';
/* Import event styles */
@import 'events.css';
/* Import plan your festival styles */
@import 'plan_your_festival.css';

.agenda-block {
  position: relative;
  * { transition: all 0.3s ease; }
  img { mix-blend-mode: darken; saturate: 0; opacity: 1; border:2px solid #fff; }
  &:hover {
    img {
      opacity: 1;
      saturate: 100;
      mix-blend-mode: normal;
      transform: scale(1.05);
    }
  }
}