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


/*
  = General Styles
*/
.bg-golden {
  background: linear-gradient(102.12deg, #FF9D9D -9.54%, #FFB744 41.33%, #F22F2F 104.23%);
}

/*
  = Header
*/
.css-edition {
  &:before, &:after {
    content: "";
    width: 21px;
    height: 32px;
    background: url("/assets/laurel-8307428e.svg") no-repeat center/cover;
  }
  &:after {
    transform: scaleX(-1);
  }
}

.css-navbar-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 18px;
  width: 0;
  margin-right: 2px;
  cursor: pointer;
  background-color: #e5e7eb;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'><path d='M6 6l8 8M14 6l-8 8'/></svg>");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 9999px;
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;

}

.css-navbar-search-input:not(:placeholder-shown):focus::-webkit-search-cancel-button {
  width: 18px;
  opacity: 0.6;
}

.css-navbar-search-input::-webkit-search-cancel-button:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.css-navbar-search-input::-webkit-search-cancel-button:active {
  transform: scale(1);
}

/*
  = Back-on-scroll (mobile): seta de voltar quando o hero sai do topo
  Entrada sutil de cima para baixo ao aparecer.
*/
.back-on-scroll-btn {
  transform: translateY(-1rem);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.back-on-scroll-btn.back-on-scroll-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/*
  = Event Description
*/
.css-event-description {
  ul, ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    list-style-type: disc;
    li {
      margin-bottom: .5rem;
    }
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  hr {
    opacity: .15;
    margin: 1rem 0;
  }
}