/* Ensure WPFront bar is visible on mobile and above the header */
#wpfront-notification-bar,
.wpfront-notification-bar {
  z-index: 999999 !important;
}
/* Make sure the WPFront bar sits above the Glob header */
#wpfront-notification-bar,
.wpfront-notification-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  z-index: 999999 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

/* If you're logged in on mobile, nudge below the WP admin bar */
@media (max-width: 782px) {
  body.admin-bar #wpfront-notification-bar,
  body.admin-bar .wpfront-notification-bar {
    top: 46px !important;
  }
}

/* Glob header variants: stop them overlapping the bar on mobile */
@media (max-width: 768px) {
  /* Common Glob header classes – apply whichever exist in your theme */
  .site-header,
  .header,
  .header-main,
  .glob-header,
  .header--sticky {
    position: relative !important;
    top: auto !important;
    z-index: 9 !important; /* below the bar */
  }
}

/* Prevent layout jump by adding top space equal to the bar height */
@media (max-width: 768px) {
  body {
    padding-top: 56px; /* match your WPFront bar height */
  }
  /* If admin bar is present on mobile, add its height too */
  body.admin-bar {
    padding-top: 102px; /* 56 + 46 */
  }
}

@media (max-width: 768px) {
  .site-header,
  .glob-header,
  .header-main {
    transform: none !important;
    will-change: auto !important;
    overflow: visible !important;
  }
}

/* Make announcement bar text larger and nicely spaced */
#wpfront-notification-bar,
.wpfront-notification-bar {
  font-size: 18px;            /* try 18–20px */
  line-height: 1.35;          /* comfortable line spacing */
}

.wpfront-notification-bar .wpfront-message {
  font-weight: 600;           /* semi-bold for readability */
}

.wpfront-notification-bar .wpfront-button {
  font-size: 16px;            /* button text */
  padding: 10px 14px;         /* bigger tap target */
  border-radius: 6px;         /* optional */
}

/* On small screens, make it a touch larger */
@media (max-width: 640px) {
  #wpfront-notification-bar,
  .wpfront-notification-bar { font-size: 19px; }
}

/* Slide the bar in once on load */
.wpfront-notification-bar {
  transform: translateY(-100%);
  animation: io-bar-slide 1000ms ease-out forwards;
}
@keyframes io-bar-slide { to { transform: translateY(0); } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpfront-notification-bar { animation: none; transform:none; }
}

/* Subtle pulse to draw the eye */
.wpfront-notification-bar .wpfront-button {
  animation: io-pulse 3.5s ease-in-out infinite;
}
@keyframes io-pulse {
  0%,100% { transform: scale(1); filter: brightness(1); }
  50%     { transform: scale(1.03); filter: brightness(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .wpfront-notification-bar .wpfront-button { animation:none; }
}