/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.notification-bar {
  height: 4rem;
  background-color: var(--tertiary-d-2);
  font-family: Figtree;
  
  /* 🔑 Force the bar to ignore parent padding/constraints */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  
  overflow: hidden;
  display: flex;
  align-items: center;
}

.notification-bar {
  height: 4rem;
  background-color: var(--tertiary-d-2);
  font-family: Figtree;
  overflow: hidden;
}

.notification-bar__wrapper {
  width: 100%;
  overflow: hidden;
}

.marquee {
  width: 100%;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: 200%;              /* 🔑 force 2x width */
  animation: marquee 15s linear infinite;
}

.notification-text {
  flex: 0 0 50%;            /* each takes half */
  white-space: nowrap;
  padding-right: 3rem;
  color: var(--secondary);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* seamless animation */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee-track:hover {
  animation-play-state: paused;
}