/* ============================================
   DPG Footer - Enhanced Documentation
   ============================================

   ARCHITECTURE:
   - 3 equal-width columns (address, stamp logo, social links)
   - Flexbox layout with `flex: 1 1 0` ensures perfect centering
   - Same pattern as header for consistency
   - Mobile: stacks vertically in specific order

   BRAND COLORS:
   - Purple text: #1C074F (same as header background)

   NOTE:
   - This footer uses the SAME flexbox pattern as the header
   - Both use `flex: 1 1 0` and `justify-content: space-between`
   - Footer perfectly centers, header now matches this pattern
   ============================================ */

/* ============================================
   DESKTOP LAYOUT (> 767.98px)
   ============================================ */

/* Footer container: spacing around footer content */
.dpg-footer {
  margin: 0 auto;
  padding: 28px 12px; /* Vertical and horizontal padding */
}

.dpg-footer a:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--dpg-purple);
}

/* Footer text styling: purple brand color, bold weight */
.dpg-footer,
.dpg-footer p,
.dpg-footer a {
  color: var(--dpg-purple);
  font-weight: 600;
}

/* Main footer layout: 3 equal-width columns with space-between distribution
   This is the SAME pattern used in the header for consistency */
.footer-layout {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* Distributes columns evenly */
}

/* Each footer column: equal flex distribution
   flex: 1 1 0 = each column gets exactly 1/3 of the width
   This ensures the stamp logo in the center is perfectly centered */
.footer-layout > .footer-address,
.footer-layout > .footer-social,
.footer-layout > .footer-logo-wrapper {
  flex: 1 1 0 !important; /* Equal width distribution */
}

/* Column content alignment: center text within each column */
.footer-address,
.footer-social,
.footer-logo-wrapper {
  text-align: center !important;
}

/* Social icon links: remove default underlines */
.footer-logo-wrapper a {
  text-decoration: none;
}

/* Footer stamp logo: constrain maximum height */
.footer-logo {
  height: auto; /* Maintains aspect ratio */
  width: auto;
  max-height: 160px; /* Prevents logo from becoming too large */
}

/* ============================================
   MOBILE LAYOUT (≤ 767px)
   ============================================ */

@media (max-width: 767px) {
  /* Stack columns vertically on mobile */
  .footer-layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Each column takes full width on mobile */
  .footer-layout > .footer-address,
  .footer-layout > .footer-social,
  .footer-layout > .footer-logo-wrapper {
    width: 100%;
    margin-bottom: 1.25rem;
  }

  /* Explicit mobile stacking order - logo first, then address, then social links */
   .footer-logo-wrapper {
    order: 1;
  }
  .footer-address {
    order: 2;
  }

  .footer-social {
    order: 3;
  }


}