/*
 * 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.
 */

/* Custom styles for truncated content */
.description-container {
  line-height: 1.5;
  transition: max-height 0.3s ease-out;
}

.description-container p {
  margin-bottom: 0.75rem;
}

/* Ensure proper height calculations for the truncation feature */
[data-controller="truncated-content"] {
  position: relative;
}

/* Improve the fade effect for truncated content */
[data-truncated-content-target="gradient"] {
  pointer-events: none; /* Allow clicks to pass through */
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 8px solid white; /* Ensure the bottom is solid white */
}

/* Style the button to make it stand out better */
[data-truncated-content-target="button"] {
  display: inline-block;
  transition: all 0.2s ease;
}

[data-truncated-content-target="button"]:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

/* Add bottom padding to schedule content to prevent overlap with tab menu */
.schedule-content-container {
  padding-bottom: 6rem; /* Add significant bottom padding */
}

/* For larger screens, we can use less padding */
@media (min-width: 768px) {
  .schedule-content-container {
    padding-bottom: 3rem;
  }
}

/* Safe area insets for iOS devices - only apply when needed */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: 0; /* Remove global padding */
    padding-bottom: 0; /* Remove global padding */
  }

  /* Apply safe area insets only to elements that need them */
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.sticky-header {
  position: sticky;
  top: 0; /* Use normal top positioning */
  z-index: 1000;
  background-color: white;
}

/* Schedule date navigation - sticky below header on desktop, top on mobile */
.schedule-date-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
}

@media (min-width: 768px) {
  .schedule-date-nav {
    top: 4rem; /* 64px - height of fixed desktop nav */
  }
}