/*
 * File: css/conf/01-layout/06.footer.css
 * Logic: Footer Regions, Grid & Dark Context.
 * Refactored from: 02.region-footer.css
 */

/* ==========================================================================
   1. FOOTER BASE
   ========================================================================== */
.wsdt-footer {
  background-color: var(--color-primary);
  padding: var(--space-xl) 0;
  /* Colors are handled automatically by Dark Context in 00.variables.css */
  content-visibility: auto; /* Optimization: Skip rendering when off-screen */
  contain-intrinsic-size: 1px 600px; /* Rough estimate to prevent scrollbar jump */
}

/* ==========================================================================
   2. FOOTER GRID LAYOUT
   ========================================================================== */
.wsdt-footer-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr; /* Mobile: Stacked */
}

@media all and (min-width: 768px) {
  .wsdt-footer-grid {
    grid-template-columns: repeat(2, 1fr); /* Tablet: 2 Columns */
  }
}

@media all and (min-width: 1024px) {
  .wsdt-footer-grid {
    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 Columns Side-by-Side */
    align-items: start;
  }
}

/* ==========================================================================
   3. FOOTER MENUS (Regions 1 & 2)
   ========================================================================== */
.wsdt-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wsdt-footer li {
  margin-bottom: var(--space-sm);
  border-bottom: var(--border-width-sm) solid var(--border-on-dark);
}

/* Specific Styling for Menu Regions */
.wsdt-region--footer-one a,
.wsdt-region--footer-two a {
  display: block;
  position: relative;
  padding: var(--space-xs) 0;
  overflow: hidden;
  transition: padding-left var(--transition-base), color var(--transition-base);
}

/* Disable Text Color Change & Add Slide Effect */
.wsdt-region--footer-one a:hover,
.wsdt-region--footer-two a:hover {
  color: var(--link-primary); /* Keep text white */
  padding-left: var(--space-xs); /* Slight movement */
}

/* Animated Border (Fill from Left) */
.wsdt-region--footer-one a::after,
.wsdt-region--footer-two a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--border-width-md);
  background-color: var(--color-secondary);
  transform: translateX(-101%);
  transition: transform var(--transition-base);
}

.wsdt-region--footer-one a:hover::after,
.wsdt-region--footer-two a:hover::after {
  transform: translateX(0);
}

/* ==========================================================================
   4. CONTACT INFO (Region 3)
   ========================================================================== */
.wsdt-contact-item {
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  color: var(--text-on-dark);
}

main .wsdt-footer-contact .wsdt-contact-item {
  color: var(--color-primary);
}
/* Contact Icons Styling */
.wsdt-footer-contact .wsdt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-md);
  margin-right: var(--space-xs);
}

.wsdt-footer .wsdt-footer-contact .wsdt-icon svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  stroke: currentColor;
}

/* ==========================================================================
   5. FOOTER BOTTOM (Copyright, Credits, Social)
   ========================================================================== */
.wsdt-footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--border-width-sm) solid var(--border-on-dark);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr; /* Mobile: Stacked */
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-on-dark);
}

/* Desktop Layout: Copy & Credits Side-by-Side, Social Below */
@media all and (min-width: 1024px) {
  .wsdt-footer-bottom {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  .wsdt-region--footer-bottom-credits {
    text-align: right;
  }

  /* Social centered below everything */
  .wsdt-region--footer-bottom-social {
    grid-column: 1 / -1; /* Full Width */
    display: flex;
    justify-content: center;
    margin-top: var(--space-sm);
  }
}

/* Social Icons Styling (SVG) */
.wsdt-region--footer-bottom-social .wsdt-social-list {
  justify-content: center;
}