/* ══════════════════════════════════════════════════════════════════════════════
   BUGFIX — Task #1317493
   Footer Accordion Inflating Pages to 21k–577k px on Mobile

   Root cause: The `overflow-y: visible !important` on footer.sr-ramsey-footer
   (from bugfix-footer-1291324.css) allows the footer to expand beyond its
   natural height. Combined with <details> element rendering issues on mobile
   where content is not properly hidden, this causes massive page height inflation.

   Fix: (1) Force `display: none` on accordion content with !important and
   max-height overflow, (2) Constrain the footer from inflating beyond reason.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. FORCE ACCORDION COLLAPSE ON MOBILE ────────────────────────────────── */
@media (max-width: 768px) {
  /* Hiding the accordion links content — must override all other rules */
  .sr-ft-col-details:not([open]) .sr-ft-col-links {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Explicitly close all footer <details> elements on mobile by default.
     This ensures that even if browser adds open attribute, it doesn't show content. */
  .sr-ramsey-footer details.sr-ft-col-details:not([open]) > .sr-ft-col-links {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  /* Also target the nav element inside */
  .sr-ft-col-details:not([open]) nav.sr-ft-col-links {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
}

/* ── 2. CONSTRAIN FOOTER HEIGHT ON MOBILE ─────────────────────────────────── */
@media (max-width: 768px) {
  footer.sr-ramsey-footer {
    /* Revert overflow-y: visible — this was causing the footer to inflate
       to contain all child content (including hidden accordions).
       Use auto so the footer only takes the space it needs for visible content. */
    overflow-y: auto !important;
    /* Constrain the footer from becoming extremely tall */
    max-height: 2000px;
  }
}

/* ── 3. FIX OVERFLOW VISIBLE ON FOOTER COLUMNS ────────────────────────────── */
@media (max-width: 768px) {
  .sr-ft-columns {
    overflow: hidden !important;
    max-height: none !important;
  }

  .sr-ft-col {
    overflow: hidden !important;
  }

  .sr-ft-col-details {
    overflow: hidden !important;
  }
}

/* ── 4. ENSURE ACCORDION CONTENT IS COLLAPSED ON ALL SCREENS ──────────────── */
.sr-ft-col-details:not([open]) .sr-ft-col-links {
  max-height: 0 !important;
  overflow: hidden !important;
}

/* ── 5. MOBILE-SPECIFIC MAX-HEIGHT CONSTRAINT ─────────────────────────────── */
@media (max-width: 768px) {
  .sr-ft-email-capture {
    flex-shrink: 0;
  }

  .sr-ft-columns {
    max-height: 2500px;
    overflow: hidden;
  }
}

/* ── 6. PREVENT PAGE HEIGHT EXPLOSION ─────────────────────────────────────── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  main, .sr-main-content {
    overflow: hidden;
  }
}