/* Mobile-only footer collapse styles (<= 768px)
   - Scoped to small screens to avoid changing desktop layout.
   - Collapsed content hidden via max-height animations.
*/
@media (max-width: 768px) {
  /* Minimal mobile-only rules: keep desktop visuals intact.
     - JS injects a button (.mf-toggle) inside each h4 and wraps content in .mf-content.
     - We only set behavior/interaction styles (layout/visibility/animation) and
       ensure touch targets are at least 44px. We avoid changing colors, fonts, margins.
  */

  /* Reduce footer column gaps on mobile */
  .footer-content {
    gap: 4px;
    margin-bottom: 20px;
  }

  /* Reduce h4 spacing */
  .footer .footer-col h4 {
    margin-bottom: 8px;
  }

  .footer .footer-col h4 .mf-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    /* inherit desktop header typography so visual matches exactly */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    padding: 4px 0; /* reduced padding */
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px; /* compact but still touch-friendly */
  }

  .footer .footer-col h4 .mf-toggle:focus { outline: 2px solid rgba(0,0,0,0.08); }

  .footer .footer-col h4 .mf-toggle .chev { transition: transform .22s ease; margin-left: 8px; }
  .footer .footer-col h4 .mf-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

  .footer .mf-content { overflow: hidden; transition: max-height .28s ease; will-change: max-height; }
  .footer .mf-content[aria-hidden="true"] { max-height: 0 !important; }

  /* Reduce list item spacing while keeping tappable */
  .footer .footer-col ul { margin: 0; padding: 0; }
  .footer .footer-col ul li { 
    min-height: 36px; 
    margin-bottom: 2px;
    display: flex;
    align-items: center;
  }
  .footer .footer-col ul li a {
    padding: 6px 0;
    display: block;
    width: 100%;
  }

  /* Reduce footer bottom padding */
  .footer-bottom { padding-top: 16px; }
  .footer-watermark { margin-top: 16px; }
}