/**
 * Header Notification Banner - Frontend Styles
 * Smooth, infinite marquee animation with no delays
 */

/* Main Banner Container */
#hn-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 9999; /* Default high stack order */
  box-sizing: border-box;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.6;
}

/* Banner Link Wrapper (when link is set) */
.hn-banner-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}

.hn-banner-link:hover {
  opacity: 0.85;
}

/* Marquee Container */
.hn-marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

/* Marquee Content - The scrolling element */
.hn-marquee-content {
  display: flex;
  width: max-content;
  animation: hn-scroll linear infinite;
  will-change: transform;
}

/* Marquee Group - Holds repeated instances of text */
.hn-marquee-group {
  display: flex;
  flex-shrink: 0;
}

/* Marquee Text Spans */
.hn-marquee-text {
  display: inline-block;
  padding-right: 0; /* Managed via dynamic setting in PHP */
  white-space: nowrap;
}

/* Smooth scrolling animation - seamless loop */
@keyframes hn-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Ensure banner appears at the very top */
body {
  margin-top: 0 !important;
}

/* Animation pause on hover (optional enhancement) */
.hn-marquee-container:hover .hn-marquee-content {
  animation-play-state: paused;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  /* Dynamic spacing applied via inline styles */
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hn-marquee-content {
    animation-duration: 60s !important; /* Slower for reduced motion preference */
  }
}

/* Print styles - hide banner when printing */
@media print {
  #hn-banner {
    display: none !important;
  }
}

/* RTL Support */
html[dir="rtl"] .hn-marquee-content {
  animation-name: hn-scroll-rtl;
}

@keyframes hn-scroll-rtl {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}

/* Smooth appearance animation */
#hn-banner {
  animation: hn-fade-in 0.5s ease-out;
}

@keyframes hn-fade-in {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Banner being closed animation */
#hn-banner.hn-closing {
  animation: hn-fade-out 0.3s ease-out forwards;
}

@keyframes hn-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* Ensure content stays inline */
.hn-marquee-text * {
  display: inline;
  white-space: nowrap;
}

/* Fix for any theme conflicts */
#hn-banner * {
  box-sizing: border-box;
}

#hn-banner a {
  color: inherit;
}

#hn-banner strong,
#hn-banner b {
  font-weight: bold;
}

#hn-banner em,
#hn-banner i {
  font-style: italic;
}