/* ══════════════════════════════════════════════════════════════════════════════
   BUGFIX — Task #1386476
   Footer bleeding beyond container edges

   Root cause:
   1. The trust strip (.sr-ft-trust-strip) inherits a green background from the
      CSS cascade (likely design-system-v4.min.css or consolidated-draft.css)
      causing it to render as a full-width emerald band that visually bleeds
      beyond the expected container boundary.
   2. The footer's inline content-visibility:auto + contain-intrinsic-size
      creates layout containment that can cause unexpected overflow behavior.
   3. The system status bar (#srSystemStatus) below the footer extends the page
      with unnecessary content that can appear as extra rows/lines.
   Fix:
   - Force the trust strip to have a white background (matching footer design)
   - Override content-visibility:auto to prevent containment issues
   - Ensure all footer children stay within container bounds
   - Contain the system status bar
   - Apply overflow:hidden on the footer to clip any stray content

   Loads LAST in cascade — rules use !important to override prior CSS.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. FOOTER CONTAINER — prevent content from bleeding out ────────────── */
footer.sr-ramsey-footer {
  overflow: hidden !important;
  position: relative !important;
  z-index: 2 !important;
  /* Override inline content-visibility:auto which creates layout containment
     that interacts badly with child elements and causes rendering artifacts */
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
  /* Ensure the footer background is always white */
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  /* Ensure footer is full-width but doesn't cause horizontal scroll */
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 2. TRUST STRIP — remove green background, keep within container ────── */
/* The trust strip was rendering with a bright green/emerald background
   from the CSS cascade, causing it to visually bleed beyond the container.
   Force white background to match the rest of the footer. */
.sr-ft-trust-strip {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.sr-ft-trust-strip .sr-ft-trust-item {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.sr-ft-trust-strip .sr-ft-trust-item svg {
  color: #00B37D !important;
}

/* Veteran-Owned badge — keep its navy color */
.sr-ft-trust-strip .sr-ft-trust-item[style*="1e3a8a"] {
  color: #1e3a8a !important;
  -webkit-text-fill-color: #1e3a8a !important;
}

/* 100% Satisfaction Guaranteed — keep its amber color */
.sr-ft-trust-strip .sr-ft-trust-item[style*="92400e"] {
  color: #92400e !important;
  -webkit-text-fill-color: #92400e !important;
}

/* ── 3. TRUST BADGES — also force white background ─────────────────────── */
.sr-ft-trust-badges {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 4. INNER CONTAINER — ensure proper containment ─────────────────────── */
.sr-ft-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ── 5. SECURITY & COMPLIANCE BANNER — contain within inner wrapper ─────── */
footer.sr-ramsey-footer [role="region"][aria-label="Security and compliance information"] {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ── 6. FOOTER SUB-SECTIONS — white backgrounds, no bleed ──────────────── */
.sr-ft-bottom-section,
.sr-ft-bottom-bar,
.sr-ft-email-capture,
.sr-ft-seo-links,
.sr-ft-columns {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.sr-ft-bottom-section {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}


/* ── 8. SYSTEM STATUS BAR — contain below footer ───────────────────────── */
#srSystemStatus {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ── 9. MOBILE: extra containment for small screens ─────────────────────── */
@media (max-width: 768px) {
  footer.sr-ramsey-footer {
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  .sr-ft-inner {
    overflow: hidden !important;
    padding: 0 16px !important;
    max-width: 100% !important;
  }

  .sr-ft-trust-strip {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  .sr-ft-trust-badges {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
  }

  /* Prevent footer accordions from inflating page height */
  .sr-ft-col-details:not([open]) .sr-ft-col-links {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
}


/* ── 11. EXTRA-SMALL MOBILE ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  footer.sr-ramsey-footer {
    overflow: hidden !important;
  }

  .sr-ft-inner {
    padding: 0 12px !important;
  }

  .sr-ft-trust-strip {
    background: #FFFFFF !important;
    padding: 12px 0 !important;
  }
}