/* ==========================================================================
   GLOBAL FOOTER STYLES 
   ========================================================================== */
footer {
  width: 100vw;
  min-height: 45vh;
  display: grid;
  background-color: var(--color-dark-blue);
  /* Shifted from 4 to 5 equal responsive columns */
  grid-template-columns: repeat(5, 1fr);
  padding: 4rem 2rem;
  gap: 1.5rem;
}

/* Structural Header Layout elements within the Footer Blocks */
footer h4 {
  color: var(--color-text-white);
  font-size: var(--font-h5);
  margin-bottom: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Column 1: Logo Architecture */
.footerLogo {
  grid-column: span 1;
  height: 160px;
  place-self: center;
  position: relative;
  width: 100%;
}

#logo_surround,
#logo_insert {
  position: absolute;
  width: 32%; /* Boosted slightly to balance against new text rows */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#logo_insert {
  animation: spin 1.33s linear infinite;
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Column 2: Internal Quick Navigation Menu */
.footer-nav {
  place-self: center start;
}

.footer-nav ul {
  list-style: none;
}

.footer-nav li {
  margin-bottom: 0.65rem;
}

.footer-nav a {
  color: var(--color-text-white);
  text-decoration: none;
  font-size: var(--font-base);
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-nav a:hover {
  opacity: 1;
  color: var(--color-pinky-red);
}

/* Column 3: Conversion Container Element */
.footer-btn {
  grid-column: span 1;
  place-self: center;
  width: 100%;
}

/* Controls the maximum expansion of the button so it stays proportional */
footer .btn {
  width: auto;
  min-width: 160px;
  max-width: 100%;
  white-space: nowrap; /* Prevents text from awkwardly snapping to new lines */
  padding: 0.75rem 1.5rem; /* Slightly compact version for footer layout */
}

/* Column 4: Localized Geography Presentation Wrapper */
footer address {
  place-self: center start;
  color: var(--color-text-white);
  font-style: normal;
  font-size: var(--font-base);
  opacity: 0.85;
}

/* Column 5: Social Networking Profile Clusters */
.footer-social {
  place-self: center start;
}

.social-icons {
  display: flex;
  gap: 1.25rem;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(249, 249, 249, 0.08); /* Clean minimalist frosted background ring */
  color: var(--color-text-white);
  border-radius: 50%;
  font-size: 1.1rem;
  text-decoration: none !important; /* Explicitly kills hidden underlines */
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

/* Ensures Font Awesome specific glyph paths don't inherit layout lines */
.social-icons a i {
  text-decoration: none !important;
}

.social-icons a:hover {
  background-color: var(--color-pinky-red);
  color: var(--color-text-white);
  transform: translateY(-2px); /* Premium floating movement feedback */
}

/* Full Width Base Layer Trademark Block */
.copyright {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-white);
  align-self: end;
  font-size: 0.875rem;
  opacity: 0.5;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(249, 249, 249, 0.1); /* Subtle separating line above legal footer */
}

/* Mobile Responsiveness Stack Reset override rules */
@media (max-width: 991px) {
  footer {
    grid-template-columns: repeat(2, 1fr); /* 2x2 grid pattern for tablet devices */
    gap: 3rem 1.5rem;
  }
  .footerLogo, .copyright {
    grid-column: 1 / -1;
  }
}

@media (max-width: 799px) {
  footer {
    grid-template-columns: 1fr; /* Solid linear column structure for phone layouts */
    gap: 2.5rem;
    padding: 4rem 1.5rem;
    text-align: center;
  }
  
  .footer-nav, footer address, .footer-social {
    place-self: center;
  }
  
  .social-icons {
    justify-content: center;
  }

  footer .btn {
    width: 100%; /* Stretches safely to full width on mobile viewports for easier tapping */
  }
}