/* ==========================================================
   YARDSIGNS247.COM — CUSTOM CSS (CLEAN + COPY/PASTE)
   ✅ Layout fixes kept
   ✅ Header message (.ys247-top-cta) kept
   ✅ OLD promo/awesome-bar/ticker CSS REMOVED
   ✅ NEW promo bar uses your custom HTML: .ys247-promo...
   ========================================================== */

/* =========================
   SITE LAYOUT FIXES (KEEP)
   ========================= */
.col-xl-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  display: block !important;
}

#middle-content{
  display: block !important;
}

#mt-footer {
  margin-top: 0 !important;
}

.top-header .mr-3 {
  margin-right: auto !important;
  margin-left: auto !important;
}

@media only screen and (min-width: 768px) {
  .navbar-brand { margin-right: 1rem !important; }
  .top-links .list-inline-item img {
    max-width: 45px;
    max-height: 35px;
  }
}


/* =========================
   HEADER MESSAGE (KEEP)
   ========================= */
.ys247-top-cta {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  padding:10px 16px !important;
  background:#ffffff !important;
  font-family:"Plus Jakarta Sans", sans-serif !important;
  font-weight:700 !important;
}

.ys247-top-cta *,
.ys247-top-cta span,
.ys247-top-cta strong {
  color:#0058A1 !important;
}

.ys247-top-cta .sep { opacity:.6; }

.ys247-top-cta .badge-24hr {
  background:#0058A1 !important;
  color:#ffffff !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
}

.ys247-top-cta a.call-bubble {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 18px !important;
  border-radius:999px !important;
  background:#FF6B35 !important;
  color:#ffffff !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:0 6px 18px rgba(255,107,53,0.45) !important;
  transition:all .2s ease !important;
  animation:ys247-pulse 1.8s ease-in-out infinite !important;
}

.ys247-top-cta a.call-bubble:hover {
  background:#E85A25 !important;
  transform:translateY(-1px) !important;
  animation:none !important;
}

@keyframes ys247-pulse {
  0%   { transform:scale(1); box-shadow:0 6px 18px rgba(255,107,53,0.4); }
  50%  { transform:scale(1.05); box-shadow:0 10px 28px rgba(255,107,53,0.6); }
  100% { transform:scale(1); box-shadow:0 6px 18px rgba(255,107,53,0.4); }
}


/* ==========================================================
   PROMO BAR (START FROM SCRATCH)
   Uses YOUR HTML:
   <div class="ys247-promo"><div class="ys247-promo__wrap">
     <div class="ys247-promo__track">... duplicated set ...</div>
   ========================================================== */

/* Ensure nothing clips the full-width promo bar */
header, .top-header, .navbar, .container, .row, [class*="col-"]{
  overflow: visible !important;
}

/* Full-width blue bar */
.ys247-promo{
  background:#0058A1 !important;
  color:#fff !important;

  width:100vw !important;
  max-width:100vw !important;
  margin-left:50% !important;
  transform:translateX(-50%) !important;

  position:relative !important;
  z-index:10000 !important;
  overflow:hidden !important;

  font-family:"Plus Jakarta Sans","DM Sans",system-ui,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
}

/* Viewport */
.ys247-promo__wrap{
  height:40px !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  width:100% !important;
}

/* Seamless loop track (works because Set 2 duplicates Set 1) */
.ys247-promo__track{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  width:max-content !important;
  will-change:transform !important;

  gap:32px !important;
  padding-left:32px !important;

  animation: ys247-loop 22s linear infinite !important;
}

/* Items */
.ys247-promo__item{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  color:#fff !important;
  text-decoration:none !important;
  font-size:13px !important;
  font-weight:800 !important;
}

.ys247-promo__item strong{
  color:#fff !important;
  font-weight:900 !important;
}

/* Phone pill (inside the ticker) */
.ys247-promo__phone{
  padding:6px 12px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,0.18) !important;
  border:1px solid rgba(255,255,255,0.25) !important;
  transition:transform .2s ease, background .2s ease !important;
}

.ys247-promo__phone:hover{
  background:rgba(255,255,255,0.28) !important;
  transform:translateY(-1px) !important;
}

/* Keyframes: -50% because content is duplicated back-to-back */
@keyframes ys247-loop{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* Mobile */
@media (max-width:640px){
  .ys247-promo__wrap{ height:36px !important; }
  .ys247-promo__item{ font-size:12px !important; }
  .ys247-promo__track{
    gap:24px !important;
    padding-left:24px !important;
    animation-duration:18s !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ys247-promo__track{ animation:none !important; }
}
/* ===== FIX ORANGE BLEED BEHIND .ys247-promo ===== */
/* (OnPrintShop awesome-bar wrapper is showing behind your bar) */

.awesome-bar,
.awesome-bar.bg-primary,
.awesome-bar .awesome-bar_container{
  background: #0058A1 !important;
}

/* remove theme padding that reveals the wrapper color */
.awesome-bar .awesome-bar_container{
  padding: 0 !important;
}

/* make sure your promo fills the wrapper height/width */
.ys247-promo{
  display: block !important;
  background: #0058A1 !important;
}

.ys247-promo__wrap{
  width: 100% !important;
}

/* optional: if you don’t want the close “x” at all */
.awesome-bar .awesome-bar_close{
  display: none !important;
}
/* =========================
   YS247 MODERN HEADER BUBBLES
   ========================= */

/* Target header utility links */
.top-header a,
.header-top a,
.top-links a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .25s ease !important;
}

/* Specific styling for Login/Register + Need Help */
.top-header a[href*="login"],
.top-header a[href*="register"],
.top-header a[href*="contact"],
.top-header a[href*="help"],
.top-header a[href*="user"],
.top-links a[href*="login"],
.top-links a[href*="register"]{
  
  background: rgba(0, 88, 161, 0.08) !important;
  border: 1px solid rgba(0, 88, 161, 0.18) !important;
  color: #0058A1 !important;
  backdrop-filter: blur(6px) !important;
}

/* Hover effect */
.top-header a[href*="login"]:hover,
.top-header a[href*="register"]:hover,
.top-header a[href*="contact"]:hover,
.top-header a[href*="help"]:hover,
.top-header a[href*="user"]:hover,
.top-links a[href*="login"]:hover,
.top-links a[href*="register"]:hover {

  background: #0058A1 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0,88,161,0.25) !important;
  transform: translateY(-2px) !important;
}

/* Space them nicely */
.top-header .list-inline-item,
.top-links .list-inline-item{
  margin-right: 8px !important;
}
/* =========================
   REMOVE PAGE HEADER + BREADCRUMB (ALL PAGES)
   ========================= */

/* Hide page header section */
.page-header h1,
#cms_page .page-header,
#cms_page h1 {
  display: none !important;
}

/* Hide breadcrumb container */
.breadcrumb_container,
.breadcrumb,
nav.breadcrumb,
.breadcrumb-container {
  display: none !important;
}

/* Remove extra spacing that was created */
#cms_page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#middle-content {
  padding-top: 0 !important;
}

/* Remove any divider line */
.page-header:after,
.page-header:before {
  display: none !important;
}


/* new css */

#middle-content .page-header{
    display: flex !important;
}