/* ============================================================
   Task #1317494: Promo Bar Text Stacking Fix — Mobile
   Root cause: combined.min.css [class*=\"flex\"] rule forces
   flex-direction: column on any element with \"flex\" in the
   class name at 480px mobile breakpoint, causing
   .announce-bar-inner children to stack vertically.
   Also: word-break: break-word on all text at 480px causes
   additional wrapping issues.
   Fix: Enforce row direction + nowrap for all promo/announce bar text.
   Load LAST (after combined.min.css) so overrides take effect.
   ============================================================ */

/* ── 1. ANNOUNCE BAR: Force row layout + nowrap on all breakpoints ── */
@media (max-width: 768px) {
  #announceBar .announce-bar-inner,
  .announce-bar-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #announceBar .announce-bar-msg {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    max-width: 55% !important;
  }

  #announceBar .announce-bar-cta {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ── 2. ANNOUNCE BAR 375px: tighter constraints ── */
@media (max-width: 375px) {
  #announceBar .announce-bar-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }

  #announceBar .announce-bar-msg {
    white-space: nowrap !important;
    max-width: 50% !important;
    font-size: 0.8rem !important;
  }

  #announceBar .announce-bar-cta {
    font-size: 0.8rem !important;
  }
}

/* ── 3. SR PRO BROWSE BANNER: prevent text wrapping on mobile ── */
/* The #sr-pro-browse-banner inner content message should stay inline */
@media (max-width: 480px) {
  #sr-pro-browse-banner {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  #sr-pro-browse-banner > div:first-child {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  #sr-pro-browse-banner > div:first-child > span:last-child {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Force message text to stay inline on mobile */
  #sr-pro-browse-banner .sr-pro-browse-msg {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ── 4. OVERRIDE COMBINED.MIN.CSS flex-direction rule for announce bar ── */
/* combined.min.css uses [class*=\"flex\"] which matches .announce-bar-inner */
/* This override ensures row layout is preserved at all breakpoints */
.announce-bar-inner {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ── 5. ANNOUNCE BAR CHILDREN: nowrap + no word-break ── */
.announce-bar-msg,
.announce-bar-cta {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  flex-shrink: 0 !important;
}

/* ── 6. OVERRIDE: Announce bar message at 600px and below ── */
@media (max-width: 600px) {
  .announce-bar-msg {
    white-space: nowrap !important;
    max-width: 55% !important;
    flex-shrink: 0 !important;
  }

  .announce-bar-cta {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ── 7. OVERRIDE: Announce bar message at 375px ── */
@media (max-width: 375px) {
  .announce-bar-msg {
    white-space: nowrap !important;
    max-width: 50% !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
  }
}

/* ── 8. PROMO BANNER TEXT: prevent word-break stacking on mobile ── */
@media (max-width: 480px) {
  .announce-bar,
  #sr-pro-browse-banner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* Ensure text inside promo bars doesn't stack one word per line */
  .announce-bar *,
  #sr-pro-browse-banner * {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* Override the combined.min.css word-break rule for announce bar text */
  .announce-bar-msg,
  .announce-bar-cta,
  .announce-bar-inner {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
  }
}