@charset "utf-8";
/* CSS Document */
/*
  The banner background color is set to a rich green, and the
  text is white, matching the provided image style.
*/

:root {
  --banner-green: #386439; /* Rich green color */
  --banner-gold: #c3a055;  /* Gold/brass color for border */
  --animation-duration: 40s; /* How long one full scroll takes */
  --text-color: #fff;      /* White text */
  --font-size: 1.5rem;     /* Base font size for desktop */
}

/* 1. Container and Layout */
.ticker-wrap {
  /* Mimic the green background and gold border from the image */
  background-color: var(--banner-green);
  border: 4px solid var(--banner-gold);
  padding: 0.5rem 0; /* Vertical padding */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for 3D effect */
  
  /* Critical for the scrolling effect: Hides content that moves outside */
  overflow: hidden; 
  white-space: nowrap; /* Ensures text stays on a single line */
  box-sizing: border-box;
}

/* 2. Text Content Styling */
.ticker-text {
  display: flex; /* Arranges the duplicated spans side-by-side */
  width: 200%; /* Important: Must be large enough to hold duplicated content */
  font-family: 'Arial', sans-serif; /* A bold, clean, and common font */
  font-weight: bold;
  text-transform: uppercase;
  color: var(--text-color);
  font-size: var(--font-size);
  letter-spacing: 0.1em;
  
  /* Apply the animation */
  animation: scroll-left var(--animation-duration) linear infinite;
}

/* Make sure each duplicated span is treated as one large block of content */
.ticker-text span {
  /* This is essential. It tells each span to take up the full width 
    of the original content, which is 50% of the .ticker-text (200% total)
  */
  flex-shrink: 0;
  display: block;
}

/* 3. The Animation Definition */
/* Keyframes define the start (0%) and end (100%) states of the movement */
@keyframes scroll-left {
  0% {
    /* Start position: 0 (No offset) */
    transform: translateX(0);
  }
  100% {
    /* End position: Move left by exactly half the container width (100% of the content) */
    transform: translateX(-50%);
  }
}

/* 4. Responsiveness for smaller screens */
@media (max-width: 768px) {
  :root {
    --font-size: 1.1rem; /* Smaller font on mobile */
    --animation-duration: 30s; /* Faster scroll on smaller screens */
  }
  
  .ticker-wrap {
    padding: 0.3rem 0; /* Less padding on mobile */
  }
}