/*
 * 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);
    }
  }
}

/* App Store Badges - side by side, same height */
.trix-content div:has(a img[alt*="App Store"]) {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.trix-content a:has(img[alt*="App Store"]),
.trix-content a:has(img[alt*="Google Play"]) {
  display: inline-block !important;
  flex: 0 0 auto !important;
}

.trix-content img[alt*="App Store"],
.trix-content img[alt*="Google Play"] {
  display: inline-block !important;
  height: 50px !important;
  width: auto !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}

/* App Screenshot Gallery - iPhone-style mockups with hero center layout */
.app-screenshot-gallery .trix-content,
.app-screenshot-gallery .trix-content > div {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  position: relative !important;
}

/* Target the wrapper divs around each image */
.app-screenshot-gallery .trix-content > div > div {
  display: inline-block !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  transition: transform 0.3s ease !important;
}

/* Hide empty spacer divs that ActionText creates */
.app-screenshot-gallery .trix-content > div > div > div:empty {
  display: none !important;
}

/* Base iPhone-style image styling */
.app-screenshot-gallery img {
  display: inline-block !important;
  border-radius: 40px !important;
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.4), 0 18px 36px -18px rgba(0, 0, 0, 0.3) !important;
  border: 10px solid #1a1a1a !important;
  width: auto !important;
  max-width: none !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
  transition: all 0.3s ease !important;
}

/* Reorder: 1st becomes center, 2nd becomes left, 3rd stays right */
/* Second image (now LEFT) - smaller, pushed behind */
.app-screenshot-gallery .trix-content > div > div:nth-child(2) {
  order: 1 !important;
  z-index: 1 !important;
  transform: translateX(40px) scale(0.85) !important;
}

.app-screenshot-gallery .trix-content > div > div:nth-child(2) img {
  height: 480px !important;
  opacity: 0.95 !important;
  box-shadow: 0 25px 50px -8px rgba(0, 0, 0, 0.35), 0 15px 30px -15px rgba(0, 0, 0, 0.25) !important;
}

/* First image (now CENTER) - larger, in front */
.app-screenshot-gallery .trix-content > div > div:nth-child(1) {
  order: 2 !important;
  z-index: 10 !important;
  transform: scale(1) !important;
}

.app-screenshot-gallery .trix-content > div > div:nth-child(1) img {
  height: 560px !important;
  box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.5), 0 30px 60px -30px rgba(0, 0, 0, 0.4) !important;
}

/* Third image (RIGHT) - smaller, pushed behind */
.app-screenshot-gallery .trix-content > div > div:nth-child(3) {
  order: 3 !important;
  z-index: 1 !important;
  transform: translateX(-40px) scale(0.85) !important;
}

.app-screenshot-gallery .trix-content > div > div:nth-child(3) img {
  height: 480px !important;
  opacity: 0.95 !important;
  box-shadow: 0 25px 50px -8px rgba(0, 0, 0, 0.35), 0 15px 30px -15px rgba(0, 0, 0, 0.25) !important;
}

@media (max-width: 1200px) {
  /* Left (was 2nd) */
  .app-screenshot-gallery .trix-content > div > div:nth-child(2) {
    transform: translateX(30px) scale(0.8) !important;
  }

  .app-screenshot-gallery .trix-content > div > div:nth-child(2) img {
    height: 400px !important;
  }

  /* Center (was 1st) */
  .app-screenshot-gallery .trix-content > div > div:nth-child(1) img {
    height: 480px !important;
  }

  /* Right (3rd) */
  .app-screenshot-gallery .trix-content > div > div:nth-child(3) {
    transform: translateX(-30px) scale(0.8) !important;
  }

  .app-screenshot-gallery .trix-content > div > div:nth-child(3) img {
    height: 400px !important;
  }

  .app-screenshot-gallery img {
    border-radius: 36px !important;
    border-width: 8px !important;
  }
}

@media (max-width: 900px) {
  /* Left (was 2nd) */
  .app-screenshot-gallery .trix-content > div > div:nth-child(2) {
    transform: translateX(25px) scale(0.75) !important;
  }

  .app-screenshot-gallery .trix-content > div > div:nth-child(2) img {
    height: 340px !important;
  }

  /* Center (was 1st) */
  .app-screenshot-gallery .trix-content > div > div:nth-child(1) img {
    height: 400px !important;
  }

  /* Right (3rd) */
  .app-screenshot-gallery .trix-content > div > div:nth-child(3) {
    transform: translateX(-25px) scale(0.75) !important;
  }

  .app-screenshot-gallery .trix-content > div > div:nth-child(3) img {
    height: 340px !important;
  }

  .app-screenshot-gallery img {
    border-radius: 32px !important;
    border-width: 7px !important;
  }
}

@media (max-width: 768px) {
  /* Horizontal swipeable carousel on mobile */
  .app-screenshot-gallery {
    overflow: visible !important;
    position: relative !important;
  }

  .app-screenshot-gallery .trix-content {
    overflow: visible !important;
  }

  .app-screenshot-gallery .trix-content > div {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px calc(50% - 130px) 40px !important;
    margin: 0 -20px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .app-screenshot-gallery .trix-content > div::-webkit-scrollbar {
    display: none !important;
  }

  .app-screenshot-gallery .trix-content > div > div:nth-child(1),
  .app-screenshot-gallery .trix-content > div > div:nth-child(2),
  .app-screenshot-gallery .trix-content > div > div:nth-child(3) {
    transform: none !important;
    z-index: auto !important;
    order: unset !important;
    flex: 0 0 auto !important;
    scroll-snap-align: center !important;
  }

  .app-screenshot-gallery .trix-content > div > div:nth-child(1) img,
  .app-screenshot-gallery .trix-content > div > div:nth-child(2) img,
  .app-screenshot-gallery .trix-content > div > div:nth-child(3) img {
    height: 500px !important;
    opacity: 1 !important;
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.35) !important;
  }

  .app-screenshot-gallery img {
    border-radius: 36px !important;
    border-width: 8px !important;
  }

  .app-screenshot-gallery::after {
    content: "← swipe →";
    display: block !important;
    text-align: center !important;
    color: #999 !important;
    font-size: 12px !important;
    margin-top: -30px !important;
    letter-spacing: 2px !important;
  }
}