/*
 * Footer Module
 *
 * Layout rules for the footer area. Supports Subgrid, Container Queries and responsive behavior.
 * Combines traditional Grid layouts with modern CSS features and Design Tokens.
 */

/**
 * Footer Component
 * 
 * Footer components for websites and applications.
 * The footer contains additional navigation elements, contact information and legal notices.
 * 
 * @layer components.footer
 * 
 * Footer Types:
 * - .footer: Standard Subgrid-Layout (original)
 * - .footer-simple: Basic single-row footer
 * - .footer-columns: Multi-column layout
 * - .footer-stacked: Vertical stacking
 * - .footer-split: Left/right split layout
 * - .footer-minimal: Minimal single-line footer
 * 
 * Basic Usage:
 * <footer class="footer">
 *   <div class="logo">
 *     <img src="logo.png" alt="Logo">
 *   </div>
 *   <div class="content">
 *     <div class="section">
 *       <h4 class="heading">About Us</h4>
 *       <p>Brief company description</p>
 *     </div>
 *     <div class="section">
 *       <h4 class="heading">Links</h4>
 *       <ul class="links">
 *         <li><a href="#" class="link">Home</a></li>
 *         <li><a href="#" class="link">Products</a></li>
 *         <li><a href="#" class="link">About</a></li>
 *         <li><a href="#" class="link">Contact</a></li>
 *       </ul>
 *     </div>
 *     <div class="section">
 *       <h4 class="heading">Contact</h4>
 *       <address class="address">
 *         123 Example Street<br>
 *         12345 Example City<br>
 *         info@example.com
 *       </address>
 *     </div>
 *   </div>
 *   <div class="bottom">
 *     <p class="copyright">&copy; 2023 Company. All rights reserved.</p>
 *     <div class="social">
 *       <a href="#" class="social-link"><!-- Social Icon 1 --></a>
 *       <a href="#" class="social-link"><!-- Social Icon 2 --></a>
 *     </div>
 *   </div>
 * </footer>
 * 
 * Variants:
 * <footer class="footer light">...</footer>
 * <footer class="footer dark">...</footer>
 * <footer class="footer primary">...</footer>
 * 
 * Minimal Footer:
 * <footer class="footer minimal">
 *   <p class="copyright">&copy; 2023 Company</p>
 *   <ul class="legal">
 *     <li><a href="#">Imprint</a></li>
 *     <li><a href="#">Privacy</a></li>
 *     <li><a href="#">Terms</a></li>
 *   </ul>
 * </footer>
 */

@layer tokens {
  :root {
    /* Footer spacing */
    --footer-padding: var(--space-8) var(--space-4);
    --footer-padding-compact: var(--space-6) var(--space-3);
    --footer-padding-spacious: var(--space-12) var(--space-6);
    --footer-gap: var(--space-6);
    --footer-gap-compact: var(--space-4);
    --footer-gap-spacious: var(--space-8);
    --footer-section-gap: var(--space-4);
    
    /* Footer colors */
    --footer-bg: var(--color-neutral-50);
    --footer-text: var(--color-neutral-700, #374151);
    --footer-heading: var(--color-neutral-900, #111827);
    --footer-link: var(--color-primary-600, #2563eb);
    --footer-link-hover: var(--color-primary-700, #1d4ed8);
    --footer-border: var(--color-neutral-200, #e5e7eb);
    
    /* Footer typography */
    --footer-font-size: var(--text-sm, 0.875rem);
    --footer-line-height: 1%.6;
    --footer-heading-size: var(--text-base);
    --footer-heading-weight: var(--font-semibold, 600);
    --footer-link-weight: var(--font-medium, 500);
    
    /* Footer layout */
    --footer-max-width: var(--container-7xl);
    --footer-columns: 4;
    --footer-column-gap: var(--space-8);
    --footer-min-height: auto;
    
    /* Footer themes */
    &[data-theme="dark"],
    &.theme-dark {
      --footer-bg: var(--color-neutral-900, #111827);
      --footer-text: var(--color-neutral-300, #d1d5db);
      --footer-heading: var(--color-neutral-100, #f3f4f6);
      --footer-link: var(--color-primary-400);
      --footer-link-hover: var(--color-primary-300);
      --footer-border: var(--color-neutral-700, #374151);
    }
    
    &[data-theme="primary"],
    &.theme-primary {
      --footer-bg: var(--color-primary-900);
      --footer-text: var(--color-primary-100, #dbeafe);
      --footer-heading: var(--color-white, #fff);
      --footer-link: var(--color-primary-200);
      --footer-link-hover: var(--color-white, #fff);
      --footer-border: var(--color-primary-700, #1d4ed8);
    }
    
    &[data-theme="minimal"],
    &.theme-minimal {
      --footer-bg: transparent;
      --footer-text: var(--color-neutral-600);
      --footer-heading: var(--color-neutral-800, #1f2937);
      --footer-link: var(--color-neutral-700, #374151);
      --footer-link-hover: var(--color-neutral-900, #111827);
      --footer-border: var(--color-neutral-300, #d1d5db);
      --footer-padding: var(--space-4) 0;
    }
  }
}

@layer components {
  /* Base footer styles for all footer types */
  .footer,
  .footer-simple,
  .footer-columns,
  .footer-stacked,
  .footer-split,
  .footer-minimal {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    container-type: inline-size;
    font-size: var(--footer-font-size);
    line-height: var(--footer-line-height, 1.5);
    padding: var(--footer-padding);
    width: 100%;
    
    /* Typography */
    & h1, & h2, & h3, & h4, & h5, & h6,
    & .heading {
      color: var(--footer-heading);
      font-size: var(--footer-heading-size);
      font-weight: var(--footer-heading-weight);
      margin: 0 0 var(--footer-section-gap) 0;
    }
    
    & p {
      margin: 0 0 var(--space-3) 0;
      
      &:last-child {
        margin-bottom: 0%;
      }
    }
    
    /* Links */
    & a,
    & .link {
      color: var(--footer-link);
      font-weight: var(--footer-link-weight);
      text-decoration: none;
      transition: color 0.2s ease;
      
      &:hover,
      &:focus {
        color: var(--footer-link-hover);
        text-decoration: underline;
      }
      
      &:focus {
        outline: 2px solid var(--footer-link);
        outline-offset: 2px;
      }
    }
    
    /* Lists */
    & ul, & ol,
    & .links {
      list-style: none;
      margin: 0;
      padding: 0;
      
      & li {
        margin-bottom: var(--space-2);
        
        &:last-child {
          margin-bottom: 0%;
        }
      }
    }
    
    /* Address */
    & .address {
      color: var(--footer-text);
      font-style: normal;
      line-height: 1.5;
    }
    
    /* Utility modifiers */
    &.compact {
      padding: var(--footer-padding-compact);
    }
    
    &.spacious {
      padding: var(--footer-padding-spacious);
    }
    
    /* Text alignment utilities */
    &.center {
      text-align: center;
    }
    
    &.left {
      text-align: left;
    }
    
    &.right {
      text-align: right;
    }
  }

  /* Original Subgrid Footer Layout */
  .footer {
    border-top: 1px solid var(--footer-border);
    display: grid;
    gap: var(--space-4);
    grid-column: span 12;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
    
    /* Logo area */
    & .logo {
      grid-column: span 3;
      
      & img {
        height: auto;
        max-width: 15%0px;
      }
    }
    
    /* Content areas */
    & .content {
      display: grid;
      gap: var(--space-6);
      grid-column: span 9;
      grid-template-columns: repeat(3, 1fr);
    }
    
    /* Sections */
    & .section {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    
    /* Bottom area */
    & .bottom {
      align-items: center;
      border-top: 1px solid var(--footer-border);
      display: flex;
      grid-column: span 12;
      justify-content: space-between;
      margin-top: var(--space-4);
      padding-top: var(--space-4);
    }
    
    /* Copyright */
    & .copyright {
      color: var(--footer-text);
      font-size: var(--text-sm, 0.875rem);
      margin: 0;
    }
    
    /* Social Media */
    & .social {
      display: flex;
      gap: var(--space-3);
      
      & .social-link {
        align-items: center;
        background-color: var(--color-neutral-100, #f3f4f6);
        border-radius: 50px;
        color: var(--color-neutral-600);
        display: flex;
        height: 2rem;
        justify-content: center;
        transition: background-color 150ms ease, color 150ms ease;
        width: 2rem;
        
        &:hover {
          background-color: var(--color-primary, #3b82f6);
          color: white;
        }
      }
    }
    
    /* Legal links */
    & .legal {
      display: flex;
      gap: var(--space-4);
      
      & a {
        color: var(--footer-text);
        font-size: var(--text-sm, 0.875rem);
        
        &:hover {
          color: var(--footer-link-hover);
        }
      }
    }
    
    /* Theme variants for original footer */
    &.light {
      background-color: var(--color-white, #fff);
    }
    
    &.dark {
      background-color: var(--color-neutral-900, #111827);
      
      & .heading {
        color: var(--color-white, #fff);
      }
      
      & .link, & .address {
        color: var(--color-neutral-300, #d1d5db);
      }
      
      & .link:hover {
        color: var(--color-primary-400);
      }
      
      & .bottom {
        border-top-color: var(--color-neutral-700, #374151);
      }
      
      & .copyright, & .legal a {
        color: var(--color-neutral-400, #9ca3af);
      }
      
      & .social-link {
        background-color: var(--color-neutral-700, #374151);
        color: var(--color-neutral-300, #d1d5db);
      }
    }
    
    &.primary {
      background-color: var(--color-primary, #3b82f6);
      color: var(--color-white, #fff);
      
      & .heading {
        color: var(--color-white, #fff);
      }
      
      & .link, & .address {
        color: var(--color-primary-100, #dbeafe);
      }
      
      & .link:hover {
        color: var(--color-white, #fff);
      }
      
      & .bottom {
        border-top-color: var(--color-primary-600, #2563eb);
      }
      
      & .copyright, & .legal a {
        color: var(--color-primary-200);
      }
      
      & .social-link {
        background-color: var(--color-primary-600, #2563eb);
        color: var(--color-white, #fff);
      }
    }
    
    &.minimal {
      background-color: transparent;
      border-top: none;
      padding: var(--space-4) 0;
      
      & .bottom {
        border-top: 1px solid var(--color-neutral-200, #e5e7eb);
        margin-top: 0%;
        padding-top: var(--space-4);
      }
    }
    
    /* Container Queries for original footer */
    @container (width <= 992px) {
      & .logo {
        grid-column: span 12;
        text-align: center;
      }
      
      & .content {
        grid-column: span 12;
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    @container (width <= 768px) {
      & .bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
      }
      
      & .legal {
        flex-direction: column;
        gap: var(--space-2);
      }
    }
    
    @container (width <= 576px) {
      & .content {
        grid-template-columns: 1fr;
      }
    }
  }
  
  /* Footer content wrapper for new footer types */
  .footer-simple,
  .footer-columns,
  .footer-stacked,
  .footer-split,
  .footer-minimal {
    & .footer-content {
      margin: 0 auto;
      max-width: var(--footer-max-width, 1280px);
      width: 100%;
    }
  }
  
  /* Footer Type: Simple */
  .footer-simple {
    & .footer-content {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: var(--footer-gap);
      justify-content: space-between;
      
      @container (width <= 768px) {
        flex-direction: column;
        gap: var(--footer-gap-compact);
        text-align: center;
      }
    }
    
    & nav ul {
      flex-direction: row;
      gap: var(--space-4);
      
      @container (width <= 768px) {
        flex-direction: column;
        gap: var(--space-2);
      }
    }
  }
  
  /* Footer Type: Columns */
  .footer-columns {
    & .footer-content {
      display: grid;
      gap: var(--footer-column-gap);
      grid-template-columns: repeat(var(--footer-columns), 1fr);
      
      @container (width <= 1024px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      @container (width <= 768px) {
        gap: var(--footer-gap);
        grid-template-columns: 1fr;
      }
    }
    
    &.cols-2 {
      --footer-columns: 2;
      
      @container (width <= 768px) {
        & .footer-content {
          grid-template-columns: 1fr;
        }
      }
    }
    
    &.cols-3 {
      --footer-columns: 3;
      
      @container (width <= 1024px) {
        & .footer-content {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      
      @container (width <= 768px) {
        & .footer-content {
          grid-template-columns: 1fr;
        }
      }
    }
    
    &.cols-4 {
      --footer-columns: 4;
      
      @container (width <= 1024px) {
        & .footer-content {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      
      @container (width <= 768px) {
        & .footer-content {
          grid-template-columns: 1fr;
        }
      }
    }
    
    & section {
      & h4 {
        border-bottom: 2px solid var(--footer-border);
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-2);
      }
    }
  }
  
  /* Footer Type: Stacked */
  .footer-stacked {
    & .footer-content {
      display: flex;
      flex-direction: column;
      gap: var(--footer-gap);
      text-align: center;
      
      & > * {
        border-bottom: 1px solid var(--footer-border);
        padding-bottom: var(--footer-gap);
        
        &:last-child {
          border-bottom: none;
          padding-bottom: 0%;
        }
      }
    }
    
    & nav ul {
      flex-flow: row wrap;
      gap: var(--space-4);
      justify-content: center;
      
      @container (width <= 768px) {
        flex-direction: column;
        gap: var(--space-2);
      }
    }
  }
  
  /* Footer Type: Split */
  .footer-split {
    & .footer-content {
      align-items: center;
      display: flex;
      justify-content: space-between;
      
      @container (width <= 768px) {
        flex-direction: column;
        gap: var(--footer-gap);
        text-align: center;
      }
    }
    
    & .footer-left {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      
      @container (width <= 768px) {
        align-items: center;
      }
    }
    
    & .footer-right {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      
      @container (width <= 768px) {
        align-items: center;
      }
    }
    
    & nav ul {
      flex-direction: row;
      gap: var(--space-4);
      
      @container (width <= 768px) {
        flex-direction: column;
        gap: var(--space-2);
      }
    }
  }
  
  /* Footer Type: Minimal */
  .footer-minimal {
    background-color: transparent;
    border-top: 1px solid var(--footer-border);
    padding: var(--space-4) 0;
    
    & .footer-content {
      align-items: center;
      display: flex;
      justify-content: space-between;
      
      @container (width <= 768px) {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
      }
    }
    
    & nav ul {
      flex-direction: row;
      gap: var(--space-4);
      
      @container (width <= 768px) {
        flex-direction: column;
        gap: var(--space-2);
      }
    }
  }
  
  /* Theme variants for all footer types */
  .footer-simple,
  .footer-columns,
  .footer-stacked,
  .footer-split,
  .footer-minimal {
    &.theme-dark {
      background-color: var(--color-neutral-900, #111827);
      color: var(--color-neutral-300, #d1d5db);
      
      & h1, & h2, & h3, & h4, & h5, & h6 {
        color: var(--color-neutral-100, #f3f4f6);
      }
      
      & a {
        color: var(--color-primary-400);
        
        &:hover,
        &:focus {
          color: var(--color-primary-300);
        }
      }
      
      & .footer-content section h4 {
        border-bottom-color: var(--color-neutral-700, #374151);
      }
      
      &.footer-minimal {
        border-top-color: var(--color-neutral-700, #374151);
      }
      
      & .footer-stacked .footer-content > * {
        border-bottom-color: var(--color-neutral-700, #374151);
      }
    }
    
    &.theme-primary {
      background-color: var(--color-primary-900);
      color: var(--color-primary-100, #dbeafe);
      
      & h1, & h2, & h3, & h4, & h5, & h6 {
        color: var(--color-white, #fff);
      }
      
      & a {
        color: var(--color-primary-200);
        
        &:hover,
        &:focus {
          color: var(--color-white, #fff);
        }
      }
      
      & .footer-content section h4 {
        border-bottom-color: var(--color-primary-700, #1d4ed8);
      }
      
      &.footer-minimal {
        border-top-color: var(--color-primary-700, #1d4ed8);
      }
      
      & .footer-stacked .footer-content > * {
        border-bottom-color: var(--color-primary-700, #1d4ed8);
      }
    }
    
    &.theme-minimal {
      background-color: transparent;
      color: var(--color-neutral-600);
      
      & h1, & h2, & h3, & h4, & h5, & h6 {
        color: var(--color-neutral-800, #1f2937);
      }
      
      & a {
        color: var(--color-neutral-700, #374151);
        
        &:hover,
        &:focus {
          color: var(--color-neutral-900, #111827);
        }
      }
      
      & .footer-content section h4 {
        border-bottom-color: var(--color-neutral-300, #d1d5db);
      }
      
      &.footer-minimal {
        border-top-color: var(--color-neutral-300, #d1d5db);
      }
      
      & .footer-stacked .footer-content > * {
        border-bottom-color: var(--color-neutral-300, #d1d5db);
      }
    }
  }
}

/* Fallback support for browsers without Container Queries */
@supports not (container-type: inline-size) {
  @media (max-width: 1200px) {
    .footer-columns.cols-4 .footer-content {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (width <= 1024px) {
    .footer-columns .footer-content {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-columns.cols-3 .footer-content {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 768px) {
    .footer-simple .footer-content {
      flex-direction: column;
      gap: var(--footer-gap-compact);
      text-align: center;
    }
    
    .footer-simple nav ul,
    .footer-stacked nav ul,
    .footer-split nav ul,
    .footer-minimal nav ul {
      flex-direction: column;
      gap: var(--space-2);
    }
    
    .footer-columns .footer-content,
    .footer-columns.cols-2 .footer-content,
    .footer-columns.cols-3 .footer-content,
    .footer-columns.cols-4 .footer-content {
      grid-template-columns: 1fr;
    }
    
    .footer-split .footer-content {
      flex-direction: column;
      gap: var(--footer-gap);
      text-align: center;
    }
    
    .footer-split .footer-left,
    .footer-split .footer-right {
      align-items: center;
    }
    
    .footer-minimal .footer-content {
      flex-direction: column;
      gap: var(--space-3);
      text-align: center;
    }
  }
}

/* Print styles */
@media print {
  .footer,
  .footer-simple,
  .footer-columns,
  .footer-stacked,
  .footer-split,
  .footer-minimal {
    background: white !important;
    border-top: 1px solid var(--color-neutral-900, #111827);
    color: var(--color-neutral-900, #111827) !important;
    
    & a {
      color: var(--color-neutral-900, #111827) !important;
      text-decoration: underline;
    }
    
    & .footer-content {
      gap: var(--space-4);
      
      & > * {
        break-inside: avoid;
      }
    }
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  .footer,
  .footer-simple,
  .footer-columns,
  .footer-stacked,
  .footer-split,
  .footer-minimal {
    border-top: 2px solid;
    
    & a {
      text-decoration: underline;
    }
    
    & .footer-content section h4 {
      border-bottom-width: 3px;
    }
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer,
  .footer-simple,
  .footer-columns,
  .footer-stacked,
  .footer-split,
  .footer-minimal {
    & a {
      transition: none;
    }
  }
}