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

html, body {
  margin: 0;
  min-height: 100vh;
}

main {
  margin-bottom: 60px;
}

footer {
  margin-top: auto;
  height: 90px;
}

button {
  cursor: pointer;
}

/* Hide scrollbar for webkit browsers */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Truncated text styles */
@supports (-webkit-touch-callout: none) {
  .truncated-text-component [data-truncated-text-target="overlay"] {
    background: linear-gradient(to top, var(--tw-gradient-from), transparent);
  }
}

/* Optional: Improve typography for better readability */
.truncated-text-component p {
  margin-bottom: 1rem;
}

.truncated-text-component p:last-child {
  margin-bottom: 0;
}

/* Smooth transition for height changes */
.truncated-text-component [data-truncated-text-target="content"] {
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.truncated-text-component [data-truncated-text-target="content"].expanded {
  transition: max-height 0.5s cubic-bezier(1, 0, 1, 0);
}

.highlighted-links a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}