/* Tillfällig driftinformation överst i headern (incident-banner/index.php) */

.vpx-incident {
  display: flex;
  align-items: center;
  height: 40px;
  overflow: hidden;
  background-color: var(--rental-gul, rgb(255, 220, 82));
  color: var(--ui-svart, #1b1b1b);
  font-family: "Titillium Web", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.vpx-incident__track {
  display: flex;
  width: max-content;
  animation: vpx-incident-scroll 100s linear infinite;
}

.vpx-incident:hover .vpx-incident__track {
  animation-play-state: paused;
}

.vpx-incident__group {
  display: flex;
  flex-shrink: 0;
}

.vpx-incident__item {
  white-space: nowrap;
}

/* Mellanrum efter varje mening, även den sista, så att loopen blir jämn */
.vpx-incident__item::after {
  content: "";
  margin: 0 8px;
}

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

/* Ingen rörelse: stillastående text som kan skrollas i sidled. Höjden hålls på 40px
   eftersom mobilmenyns förskjutning nedan räknar med den. */
@media (prefers-reduced-motion: reduce) {
  .vpx-incident {
    overflow-x: auto;
    padding-left: 16px;
  }

  .vpx-incident__track {
    animation: none;
  }

  .vpx-incident__group[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 478px) {
  .vpx-incident {
    font-size: 13px;
  }
}

/* Mobilmenyns panel är fixerad 10.5rem (= headern utan banner) från toppen i header-mallen.
   Flytta ner den med bannerns 40px, annars täcker panelen stängknappen. Höjden sätts inte på
   .hidden, där mallen själv sätter height: 0. */
@media (max-width: 1144px) {
  #brx-header .vpx-incident ~ section .mobile_menu__offcanvas .brx-offcanvas-inner {
    top: calc(10.5rem + 40px);
  }

  #brx-header .vpx-incident ~ section .mobile_menu__offcanvas .brx-offcanvas-inner:not(.hidden) {
    height: calc(100vh - 10.5rem - 40px);
  }
}