/**
 * Footer Responsive Fixes
 * Vista Arenal Adventure Park
 *
 * Enhanced responsive design for footer across all devices,
 * particularly tablets and mobile landscape orientations.
 */

/* ===========================
   MOBILE PORTRAIT (< 576px)
   =========================== */

@media (max-width: 575px) {
  .site-footer {
    padding: var(--space-2xl) 0 var(--space-lg) !important;
  }

  .footer-content {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
  }

  .footer-brand {
    text-align: center !important;
    margin-bottom: var(--space-lg) !important;
  }

  .footer-links {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }

  .footer-column {
    text-align: center !important;
  }

  .footer-social {
    text-align: center !important;
  }

  .social-links {
    justify-content: center !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: var(--space-md) !important;
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
  }

  .footer-legal {
    flex-direction: column !important;
    gap: var(--space-sm) !important;
    align-items: center !important;
  }
}

/* ===========================
   MOBILE LANDSCAPE
   =========================== */

@media (max-height: 500px) and (orientation: landscape) {
  .site-footer {
    padding: var(--space-lg) 0 var(--space-sm) !important;
  }

  .footer-content {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-lg) !important;
  }

  .footer-brand {
    display: none !important; /* Hide logo in landscape to save space */
  }

  .footer-links {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
  }

  .footer-column {
    margin-bottom: 0 !important;
  }

  .footer-column h3 {
    font-size: 0.95rem !important;
    margin-bottom: var(--space-xs) !important;
  }

  .footer-column li {
    margin-bottom: var(--space-xs) !important;
    font-size: 0.85rem !important;
  }

  .footer-social h3 {
    font-size: 0.95rem !important;
    margin-bottom: var(--space-xs) !important;
  }

  .social-links {
    gap: var(--space-sm) !important;
  }

  .social-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .footer-bottom {
    padding: var(--space-sm) var(--space-md) !important;
    margin-top: var(--space-md) !important;
    gap: var(--space-sm) !important;
  }

  .footer-bottom p {
    font-size: 0.75rem !important;
  }

  .footer-legal a {
    font-size: 0.75rem !important;
  }
}

/* ===========================
   SMALL TABLETS (576px - 767px)
   =========================== */

@media (min-width: 576px) and (max-width: 767px) {
  .footer-content {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-xl) !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }

  .footer-links {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-lg) !important;
    grid-column: 1 / -1 !important;
  }

  .footer-social {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }

  .social-links {
    justify-content: center !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: var(--space-md) !important;
  }

  .footer-legal {
    justify-content: center !important;
  }
}

/* ===========================
   TABLETS PORTRAIT (768px - 1023px)
   =========================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer {
    padding: var(--space-3xl) 0 var(--space-xl) !important;
  }

  .footer-content {
    grid-template-columns: 1fr !important;
    gap: var(--space-2xl) !important;
    max-width: 600px !important;
    margin: 0 auto var(--space-2xl) !important;
  }

  .footer-brand {
    text-align: center !important;
  }

  .footer-links {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-xl) !important;
    text-align: left !important;
  }

  .footer-column h3 {
    font-size: 1.05rem !important;
  }

  .footer-social {
    text-align: center !important;
  }

  .social-links {
    justify-content: center !important;
    gap: var(--space-lg) !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: var(--space-md) !important;
    padding-left: var(--space-lg) !important;
    padding-right: var(--space-lg) !important;
  }

  .footer-legal {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}

/* ===========================
   TABLETS LANDSCAPE (768px - 1023px) LANDSCAPE
   =========================== */

@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .site-footer {
    padding: var(--space-2xl) 0 var(--space-lg) !important;
  }

  .footer-content {
    grid-template-columns: 1fr 2fr 1fr !important;
    gap: var(--space-2xl) !important;
    max-width: none !important;
    margin-bottom: var(--space-xl) !important;
  }

  .footer-brand {
    text-align: left !important;
  }

  .footer-links {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-lg) !important;
  }

  .footer-social {
    text-align: right !important;
  }

  .social-links {
    justify-content: flex-end !important;
  }

  .footer-bottom {
    flex-direction: row !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: var(--space-md) var(--space-lg) !important;
    gap: var(--space-lg) !important;
  }
}

/* ===========================
   DESKTOP (1024px - 1365px)
   =========================== */

@media (min-width: 1024px) and (max-width: 1365px) {
  .footer-content {
    grid-template-columns: 1.5fr 2.5fr 1fr;
    gap: var(--space-2xl);
  }

  .footer-links {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

/* ===========================
   LARGE DESKTOP (1366px+)
   Already handled in main responsive.css
   =========================== */

/* ===========================
   TOUCH DEVICE IMPROVEMENTS
   =========================== */

@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets for touch devices */
  .footer-column a,
  .social-links a {
    padding: var(--space-xs) 0;
    display: inline-block;
  }

  .social-icon {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ===========================
   PRINT OPTIMIZATIONS
   =========================== */

@media print {
  .site-footer {
    padding: 1rem 0;
    background: white !important;
  }

  .footer-content {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .social-links,
  .footer-bottom {
    display: none;
  }
}