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

.text-muted {
  color: color-mix(in oklch, var(--color-base-content) 60%, var(--color-base-100));
}

/*
  = Background images (Propshaft rewrites the urls to digested asset paths)
*/
.css-bg-hero-001 {
  background: url("/assets/bg-hero-001-bdea0476.jpg") no-repeat center/cover;
}

.css-bg-hero-002 {
  background: url("/assets/bg-hero-002-de216683.jpg") no-repeat center/cover;
}

.css-bg-hero-003 {
  background: url("/assets/bg-hero-003-b998418c.jpg") no-repeat center/cover;
}

.css-bg-hero-004 {
  background: url("/assets/bg-hero-004-068d2958.jpg") no-repeat left center/cover;
}

.css-bg-hero-006 {
  background: url("/assets/bg-hero-006-1fd09f48.jpg") no-repeat center/cover;
}

.css-bg-hero-007 {
  background: url("/assets/bg-hero-007-9c16118e.webp") no-repeat center/cover;
}

/* Gated on [open] because daisyUI modals hide with visibility, not display, so an ungated rule downloads this image on every page load */
dialog[open] .css-bg-hero-008 {
  background: url("/assets/bg-hero-008-3da7bc94.webp") no-repeat center/cover;
}

.css-bg-hero-009 {
  background: url("/assets/bg-hero-009-d78e4585.webp") no-repeat center/cover;
}

.css-bg-hero-010 {
  background: url("/assets/bg-hero-010-c2a34727.webp") no-repeat right center/cover;
}

.css-bg-hero-011 {
  background: url("/assets/bg-hero-011-83df5eb3.jpg") no-repeat center/cover;
}

@media (width < 40rem) {
  .css-bg-hero-011 {
    background-position: left center;
  }
}

.css-bg-footer-001 {
  background: url("/assets/bg-footer-001-c2a51b13.jpg") center bottom/cover no-repeat;
}

/*
  = Calendar popover anchor
*/
.css-cally-anchor {
  anchor-name: --cally;
}

.css-cally-popover {
  position-anchor: --cally;
}

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

/*
  = Source logos
*/
.css-source-zig_tickets {
  height: 20px;
  width: auto;
}

.css-source-eventim {
  top: -4px;
  position: relative;
}

.css-source-ticket360 {
  width: 24px;
  height: 24px;
}

/*
  = Back-on-scroll (mobile): seta de voltar, sempre visível no canto inferior esquerdo.
  Entrada sutil de baixo para cima ao carregar a página.
*/
@keyframes back-on-scroll-enter {
  from {
    opacity: 0;
    transform: translateX(-1rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.back-on-scroll-btn {
  animation: back-on-scroll-enter 0.3s ease-out forwards;
}

/*
  = Entry card highlight (scroll-to from "Pegar ingresso" CTA)
*/
@keyframes entry-card-highlight {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 40, 233, 0);
  }

  25% {
    box-shadow: 0 0 10px 3px rgba(102, 40, 233, 0.4);
  }

  100% {
    box-shadow: 0 0 5px 0 rgba(102, 40, 233, 0);
  }
}

.entry-card-highlight {
  animation: entry-card-highlight 1.4s ease-out forwards;
}

/*
  = Steps (PWA install instructions): círculo com contorno em vez de preenchido
*/
.step-outline:before {
  width: 1px;
  border-width: 0;
}

.step-outline:after {
  background-color: var(--color-base-100);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/*
  = Sponsored Event card (EventListItemComponent)
  The .card in the selectors is only there to beat the bg-base-300 utility, which loads after this file
*/
.card.sponsored {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border: 2px solid var(--color-primary);
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;

  figure {
    position: relative;
  }

  .css-sponsored-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    gap: 0.25rem;
    padding-inline: 0.5rem;
    border: none;
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
  }

  /* The dot before the badge text */
  .css-sponsored-badge:before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--color-primary);
  }

  /* The Tags become a translucent white chip with black text over the purple card */
  .card-body .badge {
    background-color: color-mix(in oklab, var(--color-base-100) 65%, transparent);
    color: var(--color-base-content);
    border: none;
  }
}

/*
  = Event Description
*/
.css-event-description {

  ul,
  ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;

    li {
      margin-bottom: .5rem;
    }
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

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

/*
  = Editorial Description (content written in-house, e.g. artist bios)
*/
.css-editorial-description {

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol,
  dl,
  blockquote,
  pre,
  table,
  hr,
  li,
  dd {
    margin-bottom: .5rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
  }

  :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-top: 1rem;
  }

  ul,
  ol {
    margin-left: 1.5rem;
  }

  dl {
    margin-left: 1.5rem;

    dt {
      font-weight: 700;
    }
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  hr {
    opacity: .15;
    margin-top: 1rem;
  }

  a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  img {
    border-radius: var(--radius-box);
    max-width: 100%;
  }

  blockquote {
    padding-left: .5rem;
    border-left: 2px solid var(--color-base-300);
    font-style: italic;

    cite {
      display: block;
      margin-top: .5rem;
      font-style: normal;
      opacity: .7;
    }
  }

  code,
  kbd,
  samp {
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-field);
    background: var(--color-base-200);
    font-size: 0.875em;
  }

  pre {
    padding: .5rem;
    border-radius: var(--radius-field);
    background: var(--color-base-200);
    overflow-x: auto;

    code {
      padding: 0;
      background: none;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      padding: .375rem .5rem;
      border: 1px solid var(--color-base-300);
      text-align: left;
    }

    th {
      font-weight: 700;
      background: var(--color-base-200);
    }
  }

  del {
    opacity: .6;
  }

  small {
    opacity: .7;
  }
}

/*
  = Horizontal card strip (event recommendations)

  The cards leave the centered column and bleed to both edges of the screen, with a slice of the
  next card showing as the cue that the list scrolls. The constant subtracted in each width is the
  gap plus that slice, so the slice stays the same on every screen instead of shrinking with it
*/
.css-cards-strip {
  display: flex;
  gap: 1rem;
  padding-block: .5rem; /* room for the cards' hover scale, which the scroll container would clip */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  overflow-x: auto;
  scrollbar-width: none;

  > * {
    flex-shrink: 0;
    min-width: 0;
    width: calc(50% + 50vw - 4rem);
  }
}

.css-cards-strip::-webkit-scrollbar {
  display: none;
}

/* Two cards from sm, three once there is room for them */
@media (width >= 40rem) {
  .css-cards-strip > * {
    width: calc((50% + 50vw - 4.75rem) / 2);
  }
}

@media (width >= 860px) {
  .css-cards-strip > * {
    width: calc((50% + 50vw - 5.75rem) / 3);
  }
}

/* From xl the whole list fits at once, so it goes back to being a plain grid */
@media (width >= 80rem) {
  .css-cards-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 0;
    margin-inline: 0;
    overflow-x: visible;

    > * {
      width: auto;
    }
  }
}