/* File: footer.css */
/* Styles specifically for the main footer */

/* ==========================================================================
   1. Root Variables (Required by Footer Styles)
   ========================================================================== */
:root {
  /* Define colors used in the footer */
  --color-black: #000000;
  --color-text-secondary: #a0a0a0;
  --color-text: #e0e0e0;
  --color-whatsapp-green: #25D366; /* For link hover */
  --color-border-dark: rgba(255, 255, 255, 0.15); /* For top border */

  /* Define specific footer colors for clarity */
  --color-footer-bg: var(--color-black); /* Deep dark footer */
  --color-footer-text: var(--color-text-secondary);
  --color-footer-link: var(--color-text);
  --color-footer-link-hover: var(--color-whatsapp-green);
  --color-footer-border: var(--color-border-dark);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* Typography */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-xs: 0.75rem;  /* 12px */

  /* Transitions */
  --transition-fast: 0.2s ease;
}

/* ==========================================================================
   2. Footer Styles
   ========================================================================== */
.main-footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: var(--space-xl) var(--space-lg); /* More padding */
    text-align: center;
    margin-top: var(--space-xxl); /* More margin */
    font-size: var(--font-size-sm);
    border-top: 1px solid var(--color-footer-border); /* Top border */
}

.footer-content {
    max-width: 1000px; /* Limit content width */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md); /* Consistent gap */
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg); /* Row and column gap */
    margin-bottom: var(--space-xs); /* Small margin below links */
}

.footer-links a {
    color: var(--color-footer-link); /* Use defined link color */
    text-decoration: none;
    opacity: 0.9;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.footer-links a:hover,
.footer-links a:focus {
    opacity: 1;
    color: var(--color-footer-link-hover); /* WA Green on hover */
    text-decoration: underline;
}

.footer-copyright {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

/* Optional: Basic style for mobile overlay if it's part of the footer template */
.mobile-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.mobile-overlay.active {
    opacity: 1; visibility: visible;
    transition: opacity 0.4s ease, visibility 0s linear 0s;
}

/* ==========================================================================
   3. Print Styles (Optional, but good practice)
   ========================================================================== */
@media print {
  .main-footer {
    background: white !important;
    color: black !important;
    border-top: 1px solid #ccc !important;
    margin-top: 2cm !important;
    padding: 1cm !important;
  }
  .footer-links a {
    color: #0000EE !important; /* Standard blue */
    opacity: 1 !important;
  }
  .footer-copyright {
    color: #333 !important;
    opacity: 1 !important;
  }
  .mobile-overlay { display: none !important; }
}