/**
 * Footer-specific CSS
 * Styles for footer.php only
 * 
 * @package Astra Child
 * @since 1.0.0
 * 
 * CSS Version: 202412251500
 * Last Updated: 2024-12-25 15:00
 */

/* ============================================
   FOOTER CONTAINER
   ============================================ */

/* Footer background - white to match header */
footer#footer {
  background-color: white;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

/* Footer grid layout */
footer#footer .grid {
  display: grid;
}

/* Footer grid container - Desktop: 5 columns, Mobile: Single column */
footer#footer .footer-grid-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Desktop: Grid layout with 5 columns */
@media (min-width: 768px) {
  footer#footer .footer-grid-container {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Mobile: Single column layout - all sections stack vertically */
@media (max-width: 767px) {
  footer#footer .footer-grid-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
  
  /* Ensure all footer sections have proper spacing on mobile */
  footer#footer .footer-grid-container > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 2.5rem;
    flex-shrink: 0;
  }
  
  /* Remove any grid column spans on mobile */
  footer#footer .footer-grid-container > div[class*="col-span"],
  footer#footer .footer-grid-container > div[class*="md:col-span"] {
    grid-column: span 1 !important;
  }
  
  /* Footer headings spacing on mobile */
  footer#footer h5 {
    margin-bottom: 1rem;
    font-size: 10px;
  }
  
  /* Footer links spacing */
  footer#footer ul {
    margin-bottom: 0;
  }
  
  /* Footer text - ensure no overflow */
  footer#footer p,
  footer#footer li,
  footer#footer a,
  footer#footer span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
}

/* Email text wrapping */
footer#footer .email-text {
  word-break: break-all;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Footer text wrapping - prevent word cutting */
footer#footer {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

footer#footer * {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Footer links - ensure they wrap properly */
footer#footer a {
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
}

/* Footer list items */
footer#footer li {
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Footer grid gap adjustment */
footer#footer .grid.gap-8 {
  gap: 2rem;
}

/* ============================================
   FOOTER SECTIONS
   ============================================ */

/* Footer logo link styling - base styles in style.css */

/* Footer logo image styling */
footer#footer img[alt="EmbroideryPack Logo"] {
  height: 2.5rem; /* 40px on mobile */
  width: auto;
  max-width: none; /* Remove max-width constraint */
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* Larger logo on medium screens */
@media (min-width: 768px) {
  footer#footer img[alt="EmbroideryPack Logo"] {
    height: 3rem; /* 48px on tablet */
  }
}

/* Even larger logo on large screens */
@media (min-width: 1024px) {
  footer#footer img[alt="EmbroideryPack Logo"] {
    height: 3.5rem; /* 56px on desktop */
  }
}

/* Footer logo link spacing */
footer#footer a[href*="/"]:has(img[alt="EmbroideryPack Logo"]) {
  margin-bottom: 2rem;
}

/* Footer logo link - matching header layout */
footer#footer a.cursor-pointer {
  gap: 0.75rem;
}

/* ============================================
   SITE NAME STYLING (FOOTER)
   ============================================ */

/* Footer site name styles - base styles in style.css, only footer-specific overrides here if needed */

/* Section headings */
footer#footer h5 {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Footer links list - base styles (list-style, padding, margin) inherited from style.css */
footer#footer li {
  cursor: pointer;
}

/* ============================================
   SOCIAL MEDIA BUTTONS
   ============================================ */

/* Social media button container */
footer#footer button.rounded-full {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

footer#footer button.rounded-full:hover {
  transform: scale(1.1);
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */

/* WhatsApp floating button - Combined animation (glow + scale) */
#whatsapp-float-btn {
  animation: whatsapp-float-combined 2s ease-in-out infinite;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Override animation on hover for more pronounced scale */
#whatsapp-float-btn:hover {
  background-color: var(--color-whatsapp-hover) !important;
  animation: none; /* Stop continuous animation on hover */
  transform: scale(1.15) !important;
  box-shadow: 0 0 50px rgba(37, 211, 102, 0.8) !important;
}

/* WhatsApp button icon - always white, counter-scales to maintain size */
#whatsapp-float-btn i.fab.fa-whatsapp,
#whatsapp-float-btn i {
  color: white !important;
  animation: whatsapp-icon-counter-scale 2s ease-in-out infinite;
  transition: transform 0.2s ease;
}

/* Icon slight rotation on hover, counter-scale to maintain size */
#whatsapp-float-btn:hover i {
  animation: none; /* Stop counter-scale animation on hover */
  transform: rotate(5deg) scale(0.87); /* 1/1.15 to counter button's 1.15 scale */
}