/**
 * Component: Site Footer
 * Extracted: 2025-11-10 (Compliance Fix)
 * Developer: James (Dev Agent)
 * Token Version: design-tokens.css v1.0
 * Approach: Mobile-first responsive design - 100% token compliant
 * Replaces: assets/footer/css/footer.css (desktop-first version)
 */

@import url("../../css/utilities.css");

/* ==========================================================================
   MOBILE STYLES (BASE - NO MEDIA QUERY)
   Mobile: < 768px (as per design-tokens.css --breakpoint-mobile-max: 767px)
   ========================================================================== */

/* Mobile Footer Container */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-8) 0 var(--spacing-5) 0;
}

/* Footer background with design token and transparency */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-base-dark); /* Using design token for background */
  opacity: 0.85; /* Semi-transparent effect */
  backdrop-filter: blur(10px); /* Blur effect for background */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  z-index: -1;
}

.footer-container {
  width: 100%;
  max-width: 420px; /* Mobile container exception - allowed per spec */
  margin: 0 auto;
  padding: 0 var(--spacing-2);
  position: relative;
  z-index: 1;
}

/* Mobile Glow Effect - Using glow-effect.png image */
.footer-glow {
  position: absolute;
  /* Positioned at bottom right — half off-screen */
  bottom: calc((var(--spacing-24) + var(--spacing-8)) * -1); /* -128px: half of 256px */
  right: calc((var(--spacing-24) + var(--spacing-8)) * -1); /* -128px */
  width: calc(
    var(--spacing-24) * 2 + var(--spacing-16)
  ); /* 256px */
  height: calc(
    var(--spacing-24) * 2 + var(--spacing-16)
  ); /* 256px */
  background-color: var(--color-primary); /* Site-specific glow color */
  border-radius: 50%;
  opacity: 0.08; /* Figma: 0.08 */
  filter: blur(64px); /* Figma: blur(64px) */
  z-index: -1;
  pointer-events: none;
}

/* Mobile Divider Lines */
.footer-divider {
  border: none;
  height: var(--border-width-thin); /* Using token for divider height */
  background-color: var(--color-base-mid-gray);
  margin: var(--spacing-8) 0;
  width: 100%;
}

/* Mobile Navigation Section */
.footer-main {
  margin: var(--spacing-8) 0;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-8);
  justify-content: start;
  margin: 0;
}

/* Columns flow in DOM order, which mirrors the WordPress menu order */
.footer-column {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-width: 0;
}

/* Mobile Typography */
.footer-heading {
  font-family: var(--font-family-header);
  font-size: var(--font-size-h7); /* 13px mobile - closest token */
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-light);
  margin-bottom: var(--spacing-3);
  margin-left: 0;
  line-height: var(--line-height-h7);
  /* Letter-spacing: Using em unit as no token exists - design requirement */
  letter-spacing: 0.05em; /* Documented exception: no letter-spacing tokens available */
  position: relative;
  padding-bottom: var(--spacing-4);
  width: 100%;
}

.footer-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--border-width-thin); /* Using token for divider */
  background-color: var(--color-base-mid-gray);
}

.footer-nav {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
}

.footer-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3); /* 12px gap for mobile - balanced spacing */
  margin: 0;
  padding: 0;
}

.footer-menu li {
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
}

.site-footer .footer-menu li a {
  color: var(--color-base-white);
  text-decoration: none;
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-p3-caption) !important; 
  font-weight: var(--font-weight-light) !important;
  line-height: 1 !important;
  transition: color 0.2s ease;
  display: block;
  padding: 0; /* No padding for tightest spacing */
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
}

.footer-menu a:hover,
.footer-menu a:focus {
  color: var(--color-base-ghost-white);
  outline: none;
}

/* Mobile Brand Section */
.footer-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-3);
  margin: var(--spacing-8) 0;
}

.footer-logo {
  width: var(--spacing-24); /* Fixed width: 96px */
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.footer-description {
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-p3-caption); /* 13px mobile */
  font-weight: var(--font-weight-regular);
  color: var(--color-base-white);
  line-height: var(--line-height-p3-caption);
  flex: 1;
  text-align: left;
  margin-block-end: 0;
}

/* Mobile Responsible Gaming Section */
.footer-responsibility {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
  margin: var(--spacing-8) 0;
}

.footer-responsibility > * {
  width: 100%;
}

.footer-responsibility-text {
  font-family: var(--font-family-header);
  font-size: var(--font-size-p3-caption); /* 11px mobile */
  font-weight: var(--font-weight-medium);
  color: var(--color-base-light-gray);
  line-height: var(--line-height-p3-caption);
  text-align: left;
  margin: 0;
  padding-left: 0;
}

.footer-responsibility-badges {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 0;
  margin-block-end: 0;
  margin-left: 0;
}

.responsibility-card {
  background-color: #2A2D32; /* Figma: 607:19330 — no matching token yet */
  border-radius: var(--radius-lg);
  padding: var(--spacing-4) var(--spacing-2);
  width: 100%;
  min-height: var(--spacing-12); /* ~48px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.responsibility-logos {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  justify-content: center;
  flex-wrap: wrap;
}

.responsibility-logo {
  height: var(--spacing-4); /* 16px - closest flexible size */
  width: auto;
  object-fit: contain;
  flex-shrink: 1;
  /* Using flexbox flex-basis for responsive sizing */
  flex: 0 1 calc(var(--spacing-20) - var(--spacing-1)); /* ~19% width (80-4=76px) */
}

/* Responsive logo sizing for mobile - maintains visual hierarchy using flex-basis */
.responsibility-logo:nth-child(1) {
  flex: 0 1 var(--spacing-24); /* Largest logo */
}
.responsibility-logo:nth-child(2) {
  flex: 0 1 calc(var(--spacing-20) + var(--spacing-3)); /* ~22% equivalent */
}
.responsibility-logo:nth-child(3) {
  flex: 0 1 calc(var(--spacing-16) + var(--spacing-4)); /* ~18% equivalent */
}
.responsibility-logo:nth-child(4) {
  flex: 0 1 var(--spacing-16); /* ~15% equivalent */
}
.responsibility-logo:nth-child(5) {
  flex: 0 1 var(--spacing-12); /* Smallest logo */
}

/* Mobile Legal Section */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  margin: var(--spacing-8) 0;
}

.footer-legal {
  font-family: var(--font-family-header);
  font-size: var(--font-size-p3-caption); /* 11px mobile */
  font-weight: var(--font-weight-regular);
  color: var(--color-primary-light);
  line-height: var(--line-height-p3-caption);
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}

.footer-legal a {
  color: var(--color-primary-light);
  text-decoration: underline; /* Add underline to legal links */
  transition: color 0.2s ease;
  display: inline;
}

.footer-legal a:hover,
.footer-legal a:focus {
  color: var(--color-base-ghost-white);
  outline: var(--border-width-medium) solid var(--color-primary);
  outline-offset: var(--border-width-medium);
}

.footer-copyright {
  font-family: var(--font-family-header);
  font-size: var(--font-size-h7); /* 13px mobile */
  font-weight: var(--font-weight-regular);
  color: var(--color-base-ghost-white);
  line-height: var(--line-height-h7);
  text-align: left;
}

.footer-copyright p {
  margin: 0;
}

/* ==========================================================================
   TABLET STYLES (≥768px)
   Tablet: 768px - 1279px (as per design-tokens.css)
   ========================================================================== */

@media (min-width: 768px) {
  /* Tablet Footer Container */
  .footer-container {
    max-width: 698px; /* Tablet container exception - allowed per spec */
    padding: 0 var(--spacing-6);
  }

  /* Tablet Glow Effect - positioned at bottom right */
  .footer-glow {
    bottom: calc((var(--spacing-24) * 2) * -1); /* -192px: half of 384px */
    right: calc((var(--spacing-24) * 2) * -1); /* -192px */
    width: calc(var(--spacing-24) * 4); /* 384px */
    height: calc(var(--spacing-24) * 4); /* 384px */
  }

  /* Tablet Navigation - maintain 3-column layout */
  .footer-columns {
    gap: var(--spacing-10);
  }

  .footer-menu {
    gap: var(--spacing-2); /* 8px gap for tablet - slightly more spacing */
  }

  /* Tablet Typography */
  .footer-heading {
    font-size: var(--font-size-h6); /* 18px tablet */
    line-height: var(--line-height-h6);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
  }

  .site-footer .footer-menu li a {
    font-size: var(--font-size-p3-caption) !important; 
    font-weight: var(--font-weight-light) !important;
    line-height: var(--line-height-p3-caption) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tablet Brand Section */
  .footer-logo {
    width: 140px;
  }

  .footer-description {
    font-size: var(--font-size-p3-caption); /* 15px tablet */
    line-height: var(--line-height-p3-caption);
  }

  /* Tablet Responsible Gaming */
  .responsibility-card {
    padding: var(--spacing-4) var(--spacing-5);
    min-height: var(--spacing-12);
  }

  .responsibility-logos {
    gap: var(--spacing-4); /* Increased gap for better spacing */
    flex-wrap: nowrap; /* Ensure logos stay in one row */
    justify-content: center;
  }

  .responsibility-logo {
    height: var(--spacing-5); /* 20px height for better visibility */
    max-width: calc(var(--spacing-24) + var(--spacing-8)); /* 128px max width (96+32) */
    flex: 0 0 auto; /* Prevent flex grow/shrink */
  }

  /* Reset individual logo sizing for tablet - use auto sizing */
  .responsibility-logo:nth-child(1),
  .responsibility-logo:nth-child(2),
  .responsibility-logo:nth-child(3),
  .responsibility-logo:nth-child(4),
  .responsibility-logo:nth-child(5) {
    flex: 0 0 auto; /* All logos use natural size */
  }

  .footer-responsibility-text {
    font-size: var(--font-size-p3-caption); /* 12px tablet */
    line-height: var(--line-height-p3-caption);
  }
}

/* ==========================================================================
   DESKTOP STYLES (≥1280px)
   Desktop: 1280px+ (as per design-tokens.css)
   ========================================================================== */

@media (min-width: 1280px) {
  /* Desktop Footer Container */
  .site-footer {
    padding: var(--spacing-8) 0 var(--spacing-5) 0;
  }

  .footer-container {
    max-width: 1018px; /* Desktop container exception - allowed per spec */
    padding: 0 var(--spacing-8);
  }

  /* Desktop Glow Effect - positioned at bottom right */
  .footer-glow {
    bottom: calc(((var(--spacing-24) * 5 + var(--spacing-8)) / 2) * -1); /* -256px: half of 512px */
    right: calc(((var(--spacing-24) * 5 + var(--spacing-8)) / 2) * -1); /* -256px */
    width: calc(
      var(--spacing-24) * 5 + var(--spacing-8)
    ); /* 512px */
    height: calc(
      var(--spacing-24) * 5 + var(--spacing-8)
    ); /* 512px */
  }

  /* Desktop Divider Lines */
  .footer-divider {
    height: var(--border-width-thin); /* Using token consistently */
    margin: var(--spacing-8) 0;
  }

  /* Desktop Navigation - 4 column layout */
  .footer-main {
    margin: var(--spacing-5) 0 var(--spacing-10) 0;
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--spacing-8);
  }

  /* Desktop Typography */
  .footer-heading {
    font-size: var(--font-size-h6); /* 20px desktop */
    line-height: var(--line-height-h6);
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-6);
  }

  .footer-menu {
    gap: var(--spacing-3); /* 12px gap for desktop - comfortable spacing */
  }


  .footer-menu a:hover,
  .footer-menu a:focus {
    color: var(--color-primary);
    outline: var(--border-width-medium) solid var(--color-primary);
    outline-offset: var(--border-width-medium);
  }

  /* Desktop Brand Section */
  .footer-brand {
    gap: var(--spacing-6);
    margin: var(--spacing-5) 0;
  }

  .footer-logo {
    width: 180px;
  }

  .footer-description {
    font-size: var(--font-size-p3-caption); /* 16px desktop */
    line-height: var(--line-height-p3-caption);
  }

  /* Desktop Responsible Gaming Section */
  .footer-responsibility {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1);
    margin: var(--spacing-5) 0;
  }

  .footer-responsibility-text {
    font-size: var(--font-size-p3-caption); /* 13px desktop */
    line-height: var(--line-height-p3-caption);
    width: auto;
    max-width: calc(
      var(--spacing-24) * 2 + var(--spacing-12)
    ); /* 240px: 96*2 + 48 = 240 */
    margin-top: var(--spacing-5);
  }

  .footer-responsibility-badges {
    justify-content: flex-start;
    margin-bottom: var(--spacing-5);
  }

  .responsibility-card {
    padding: var(--spacing-5);
    width: fit-content;
  }

  .responsibility-logos {
    gap: var(--spacing-8); /* ~32px */
    flex-wrap: nowrap;
  }

  .responsibility-logo {
    height: var(--spacing-5); /* 20px */
    max-width: none;
  }

  /* Reset responsive sizing for desktop - use auto flex */
  .responsibility-logo:nth-child(1),
  .responsibility-logo:nth-child(2),
  .responsibility-logo:nth-child(3),
  .responsibility-logo:nth-child(4),
  .responsibility-logo:nth-child(5) {
    flex: 0 1 auto; /* Reset to auto sizing for desktop */
  }

  /* Desktop Legal Section */
  .footer-bottom {
    gap: var(--spacing-4);
    margin: var(--spacing-5) 0;
  }

  .footer-legal {
    font-size: var(--font-size-p3-caption); /* 16px desktop */
    line-height: var(--line-height-p3-caption);
  }

  .footer-copyright {
    font-size: var(--font-size-p3-caption); /* 13px desktop */
    line-height: var(--line-height-p3-caption);
  }
}

/* ==========================================================================
   ACCESSIBILITY & PROGRESSIVE ENHANCEMENT
   ========================================================================== */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .footer-menu a,
  .footer-legal a {
    transition: none;
  }

  /* Hide glow effect for users who prefer reduced motion */
  .footer-glow {
    display: none;
  }
}

/* High DPI Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .footer-logo,
  .responsibility-logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Landscape Orientation for Mobile */
@media (max-height: calc(var(--spacing-24) * 5 + var(--spacing-5))) and (orientation: landscape) {
  /* 500px height */
  .site-footer {
    padding: var(--spacing-5) 0 var(--spacing-2) 0;
  }

  .footer-divider {
    margin: var(--spacing-5) 0;
  }

  .footer-main,
  .footer-brand,
  .footer-responsibility,
  .footer-bottom {
    margin: var(--spacing-5) 0;
  }
}