/* =========================================
   FRP Announcement Bar – President's Day Patriotic Edition
   Simple + Enhanced patriotic vibes (red/white/blue + stars + stripes)
   ========================================= */

:root {
  --frp-announce-h: 48px;
  --frp-announce-h-mobile: 56px;
  --frp-header-h: 0px;             /* JS-computed */
  --frp-adminbar-h: 0px;
  --frp-marquee-speed: 20s;        /* Your preferred speed – good for longer messages */

  --color-red:    #B22234;         /* Classic flag red */
  --color-blue:   #3C3B6E;         /* Deep navy */
  --color-white:  #FFFFFF;
  --color-gold:   #FFD700;         /* Optional gold accent from presidential seal vibes */
  --text:         #FFFFFF;
}

/* Strong global overflow prevention */
html, body {
  overflow-x: hidden !important;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Target common Elementor wrappers (uncomment if needed) */
/*
.elementor,
.elementor-section,
.elementor-container,
.elementor-inner-section,
.elementor-widget-wrap {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
*/

/* Base Banner – patriotic gradient + subtle stars */
.frp-announce {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000006;
  height: var(--frp-announce-h);
  background: 
    /* Subtle stars overlay */
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.12) 1px, transparent 1px),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,0.1) 1.5px, transparent 1.5px),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,0.08) 1px, transparent 1px),
    /* Main patriotic gradient */
    linear-gradient(135deg, var(--color-blue) 0%, #1e2540 50%, var(--color-red) 100%);
  background-size: 60px 60px, 80px 80px, 50px 50px, cover; /* Stars spacing */
  border-block-end: none; /* Replaced with striped accent below */
  overflow: hidden;
  font-family: "Oxanium", system-ui, sans-serif;
  color: var(--text);
  text-align: center;
  line-height: var(--frp-announce-h);
  animation: frpAnnounceIn 0.4s ease-out;
}

.frp-announce--above_header {
  inset-block-start: var(--frp-adminbar-h);
}

.frp-announce--below_header {
  inset-block-start: calc(var(--frp-adminbar-h) + var(--frp-header-h));
}

/* Patriotic stripes accent at bottom (flag-inspired) */
.frp-announce::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-red) 0 20px,
    var(--color-white) 20px 40px,
    var(--color-blue) 40px 60px
  );
  opacity: 0.9;
}

/* Marquee container */
.frp-announce__inner--marquee {
  height: 100%;
  max-width: none;
}

.frp-marquee {
  width: 100%;
  overflow: clip;
  white-space: nowrap;
}

.frp-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  animation: frpMarqueeScroll var(--frp-marquee-speed) linear infinite;
  will-change: transform;
  min-width: 100%;
}

.frp-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0 16px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Optional: gold highlight for emphasis (add class="highlight" to <strong> in HTML) */
.frp-marquee__item strong.highlight {
  color: var(--color-gold);
  text-shadow: 0 0 6px rgba(255,215,0,0.5);
}

.frp-marquee__item strong {
  color: var(--color-red); /* Default red emphasis */
}

.frp-marquee__link {
  color: inherit;
  text-decoration: none;
}

.frp-marquee__link:hover {
  text-decoration: underline;
  color: var(--color-gold); /* Gold hover for extra pop */
}

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

/* Mobile adjustments */
@media (max-width: 768px) {
  .frp-announce {
    height: var(--frp-announce-h-mobile);
    line-height: var(--frp-announce-h-mobile);
  }
  .frp-marquee__track {
    gap: 30px;
  }
  .frp-marquee__item {
    font-size: 13px;
    padding: 0 12px;
    gap: 8px;
  }
  /* Smaller stripes on mobile */
  .frp-announce::after {
    height: 4px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .frp-marquee__track {
    gap: 20px;
  }
  .frp-marquee__item {
    font-size: 12px;
    padding: 0 10px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .frp-marquee__track {
    animation: none !important;
    transform: none !important;
  }
}

/* Entrance */
@keyframes frpAnnounceIn {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Elementor placement fixes */
body.has-frp-announce .elementor-location-header {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}

body.has-frp-announce.frp-announce--above_header .elementor-location-header {
  margin-block-start: var(--frp-announce-h) !important;
}

@media (max-width: 768px) {
  body.has-frp-announce.frp-announce--above_header .elementor-location-header {
    margin-block-start: var(--frp-announce-h-mobile) !important;
  }
}

body.has-frp-announce.frp-announce--below_header .elementor-location-header + * {
  margin-block-start: 0 !important;
}

/* =========================================
   Static Banner (style=banner) – cleaner + nicer CTA
   ========================================= */

/* Make the static banner feel less "marquee-like" */
.frp-announce--banner {
  /* calmer, premium background */
  background:
    radial-gradient(1200px 60px at 50% 0%, rgba(255,255,255,0.14), transparent 60%),
    linear-gradient(135deg, var(--color-blue) 0%, #1e2540 55%, var(--color-red) 120%);
  background-size: cover;
}

/* Center content and give it breathing room */
.frp-announce__inner--banner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* keeps long text from feeling cramped */
  padding: 0 14px;
}

/* Treat the banner link/text like a pill CTA */
.frp-announce__bannerlink,
.frp-announce__bannertext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  max-width: min(1100px, calc(100vw - 24px));
  padding: 10px 16px;
  border-radius: 999px;

  /* crisp type */
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;

  /* subtle glass look */
  /*background: rgba(255,255,255,0.10);*/
  /*border: 1px solid rgba(255,255,255,0.18);*/
  /*box-shadow: 0 10px 26px rgba(0,0,0,0.22);*/

  /* keep it readable */
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover/focus polish */
.frp-announce__bannerlink:hover {
  text-decoration: underline;
}

.frp-announce__bannerlink:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 3px;
}

/* Replace the bottom accent ONLY for banner style */
.frp-announce--banner::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 6px;

  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-red) 15%,
    var(--color-red) 85%,
    transparent 100%
  );

  opacity: 0.95;
}

/* Mobile: slightly larger tap target + allow wrap */
@media (max-width: 768px) {
  .frp-announce__bannerlink,
  .frp-announce__bannertext {
    padding: 12px 14px;
    font-size: 13px;
    white-space: normal;     /* allow wrap on small screens */
    line-height: 1.15;
    text-align: center;
  }

  .frp-announce--banner::after {
    height: 4px;
  }
}