/* Additions on top of the original theme CSS. Loaded last by Layout.astro. */

/* Header dropdowns open on hover on desktop (the menu is expanded from 1200px). */
@media (min-width: 1200px) {
  .thema-header .navbar-nav .dropdown {
    position: relative;
  }

  .thema-header .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
    height: auto;
    top: 100%;
  }
}

/* Home slider price ticker (src/lib/quotes-ticker.js). The original scrolled with bxSlider;
   here the list is rendered twice and the track slides by half its width. */
.quotes-ticker {
  overflow: hidden;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  direction: ltr;
}

.quotes-ticker__track {
  display: flex;
  width: max-content;
  animation: quotes-scroll var(--quotes-duration, 120s) linear infinite;
}

.quotes-ticker:hover .quotes-ticker__track {
  animation-play-state: paused;
}

.quotes-ticker__list {
  display: flex;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.thema-main__homepage-slider__main-quotes-list .quotes-ticker__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 15px;
  white-space: nowrap;
}

.quotes-ticker__symbol {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quotes-ticker__price {
  color: #9d9d9d;
  font-size: 0.875rem;
  font-weight: 600;
}

.quotes-ticker__change {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-weight: 600;
}

.quotes-ticker__change::before {
  content: "";
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.quotes-ticker__change.is-up {
  color: #78c201;
}

.quotes-ticker__change.is-up::before {
  border-bottom: 5px solid #78c201;
}

.quotes-ticker__change.is-down {
  color: #ff4c44;
}

.quotes-ticker__change.is-down::before {
  border-top: 5px solid #ff4c44;
}

@keyframes quotes-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Economic calendar iframe fills the content column. */
.economic-calendar {
  display: block;
  max-width: 100%;
  border: 0;
  margin-bottom: 1rem;
}

/* Contact form: the "State Request" textarea spans the full row. */
.contact-us-wrapper .wpcf7-form-control-wrap,
.contact-us-wrapper textarea.wpcf7-textarea {
  display: block;
  width: 100%;
}

/* With the header search hidden, keep the language and login buttons on their own
   row under the menu on desktop, where the original layout had them. */
@media (min-width: 1200px) {
  .thema-header .navbar .menu-button-wrapper {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}