/* ============================================================================
   BUGFIX — Task #1291324
   Fixes: footer overflow (content bleeding past boundary), centering broken,
   white boxes around dropdown/accordion sections.
   Loads LAST in cascade — rules use !important to override prior CSS.
   ============================================================================ */

/* ── 1. FOOTER OVERFLOW FIX ──────────────────────────────────────────────── */
/* Root cause: .sr-ft-bottom-section uses width:100vw + left:50% + translateX(-50%)
   for full-bleed dark navy bar. This extends beyond the footer container,
   causing content to bleed past the footer background boundary.
   Fix: clip horizontal overflow on footer so the 100vw element is contained. */
footer.sr-ramsey-footer {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  position: relative !important;
}

/* Override content-visibility:auto set as inline style on the footer.
   content-visibility:auto creates layout containment which interacts badly
   with the 100vw full-bleed technique. The footer is always below the fold
   so the perf benefit is negligible. */
footer.sr-ramsey-footer {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* Constrain the bottom section so it doesn't overflow */
.sr-ft-bottom-section {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* ── 2. FOOTER CENTERING FIX ─────────────────────────────────────────────── */
/* Root cause: design-system-v4 sets text-align:center and max-width:560px
   on .sr-ft-about-brand but lacks margin:0 auto to center the block. */
.sr-ft-about-brand {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Footer inner wrapper — force consistent centering */
.sr-ft-inner {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Brand row — centered */
.sr-ft-brand-row {
  justify-content: center !important;
  text-align: center !important;
}
.sr-ft-brand-left {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Social links — centered */
.sr-ft-social-links {
  justify-content: center !important;
}

/* Trust badges — centered */
.sr-ft-trust-badges {
  justify-content: center !important;
}

/* Email capture — centered block */
.sr-ft-email-capture {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* SEO links — centered */
.sr-ft-seo-links {
  justify-content: center !important;
}

/* Trust strip — centered */
.sr-ft-trust-strip {
  justify-content: center !important;
}

/* Bottom bar — centered */
.sr-ft-bottom-bar {
  text-align: center !important;
  justify-content: center !important;
}

/* Share strip — centered */
.share-strip-footer {
  justify-content: center !important;
}

/* Google translate — centered */
#sr-translate-bar {
  text-align: center !important;
}

/* Columns grid — contained */
.sr-ft-columns {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 3. WHITE BOXES AROUND ACCORDION/DROPDOWN FIX ────────────────────────── */
/* Root cause: <details> elements lack explicit background:transparent.
   Browser defaults or cascade give them opaque white backgrounds,
   creating visible "boxes" against the grey #f9fafb footer background.
   Fix: force transparent background on all footer accordion elements. */
.sr-ft-col-details,
details.sr-ft-col-details,
.sr-ft-col-details[open],
.sr-ft-col-details > summary,
.sr-ft-col-details > summary.sr-ft-col-header {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Column containers — transparent, no box styling */
.sr-ft-col {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Links list — transparent */
.sr-ft-col-links {
  background: transparent !important;
  background-color: transparent !important;
}

/* Columns grid — transparent */
.sr-ft-columns {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── 4. MOBILE RESPONSIVE FIXES ──────────────────────────────────────────── */
@media (max-width: 768px) {
  footer.sr-ramsey-footer {
    overflow-x: hidden !important;
  }
  .sr-ft-brand-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .sr-ft-brand-left {
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sr-ft-social-links {
    justify-content: center !important;
  }
  .sr-ft-about-brand {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Accordion items — keep transparent on mobile too */
  .sr-ft-col-details,
  .sr-ft-col {
    background: transparent !important;
    background-color: transparent !important;
  }
}

/* Extra-small mobile (375px) */
@media (max-width: 480px) {
  footer.sr-ramsey-footer {
    overflow-x: hidden !important;
  }
  /* Column borders should be subtle, no white fill */
  .sr-ft-col {
    background: transparent !important;
    background-color: transparent !important;
  }
  .sr-ft-col-details {
    background: transparent !important;
    background-color: transparent !important;
  }
}