/**
 * Organism: Site Footer
 * Global site footer with widgets, copyright, and navigation
 *
 * Extends: organisms.css author-social pattern, global.css tokens
 * Uses: .author-social-link pattern, .btn-ghost pattern, design tokens
 */

/* ==========================================================================
   Footer Container
   ========================================================================== */

   .site-footer {
    margin-top: auto;
    background: var(--color-white);
    color: var(--color-neutral-800);
    border-top: 1px solid var(--color-neutral-100);
  }

  .site-footer .nav-link:hover{
    background: unset;
  }

  /* ==========================================================================
     Footer Widgets Section
     ========================================================================== */

  .footer-widgets {
    padding: var(--spacing-12) 0;
    border-bottom: 1px solid var(--color-neutral-200);
  }

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

  .footer-widgets__column {
    min-width: 0;
  }

  /* Widget Styles - Using design system typography */
  .widget-title {
    margin-bottom: var(--spacing-4);
    font-family: var(--font-sans);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
  }

  /* Die Regel darüber gilt auch der Sidebar und muss dort dunkel bleiben. Im
     Footer nicht: sobald ein Deployment im Customizer eine Hintergrundfarbe
     setzt, steht die Überschrift auf dunklem Grund und `--color-neutral-900`
     ist dort fast unsichtbar. Der Customizer färbt `.site-footer h3` und `p`,
     die Spaltenüberschrift ist aber ein `h4` und fiel durch das Raster —
     sichtbar geworden bei TimberTime (#222222 auf #2B2520). Sie folgt deshalb
     der Textfarbe des Footers. */
  .site-footer .widget-title {
    color: inherit;
  }

  .footer-widgets__column p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
  }

  /* Widget List - Clean list styling */
  .footer-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer-widget li {
    margin-bottom: var(--spacing-2);
  }

  .footer-widget ul a {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .footer-widget ul a:hover {
    color: var(--color-neutral-900);
  }

  /* ==========================================================================
     Newsletter Form
     Extends .form-input, .btn-primary patterns from atoms.css
     ========================================================================== */

  .footer-widgets .fb-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
  }

  .footer-widgets .fb-newsletter-form-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
    margin-bottom: var(--spacing-2);
  }

  .footer-widgets .fb-form-field label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-700);
    margin-bottom: var(--spacing-1);
  }

  .footer-widgets .fb-newsletter-form-fields input[type="email"],
  .footer-widgets .fb-newsletter-form-fields input[type="text"] {
    width: 100%;
    padding: var(--spacing-3);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    background: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--card-border-radius, var(--radius-md));
    color: var(--color-neutral-900);
    transition: all var(--transition-fast);
  }

  .footer-widgets .fb-newsletter-form-fields input::placeholder {
    color: var(--color-neutral-400);
  }

  .footer-widgets .fb-newsletter-form-fields input:focus {
    outline: none;
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-500) 25%, transparent);
  }

  .footer-widgets .fb-form-row-privacy .fb-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    line-height: var(--line-height-relaxed);
  }

  .footer-widgets .fb-form-row-privacy input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
  }

  .footer-widgets .fb-form-row-privacy a {
    color: var(--color-neutral-700);
    text-decoration: underline;
  }

  .footer-widgets .fb-newsletter-submit {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-sans);
    color: var(--color-white);
    border: none;
    border-radius: var(--card-border-radius, var(--radius-md));
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
  }

  .footer-widgets .fb-newsletter-submit:hover {
    box-shadow: var(--shadow-glow-sm);
  }

  .footer-widgets .fb-newsletter-message {
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
  }

  footer .section-title{
    color: var(--color-neutral-900);
  }

  /* ==========================================================================
     Footer Navigation
     Menu location `footer`, rendered in footer.php between the widget columns
     and the footer bottom. Styled like the legal menu but one step larger —
     it carries site navigation, not fine print.
     ========================================================================== */

  .footer-nav {
    padding: var(--spacing-6) 0;
    border-bottom: 1px solid var(--color-neutral-100);
  }

  .footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-4) var(--spacing-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer-menu a {
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .footer-menu a:hover {
    color: var(--color-neutral-900);
  }

  /* ==========================================================================
     Footer Bottom Section
     ========================================================================== */

  .footer-bottom {
    padding: var(--spacing-8) 0;
  }

  .footer-bottom__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    align-items: center;
    text-align: center;
  }

  /* ==========================================================================
     Copyright
     ========================================================================== */

  .footer-copyright {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
  }

  .footer-copyright p {
    margin: 0;
  }

  .footer-brand {
    display: block;
    font-family: var(--font-logo);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-decoration: none;
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-2);
    transition: color var(--transition-fast);
  }

  .footer-brand:hover {
    color: var(--color-primary);
  }

  .footer-tagline {
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--color-neutral-500);
    margin: 0;
  }

  .footer-copyright a:not(.footer-brand) {
    color: var(--color-neutral-600);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .footer-copyright a:not(.footer-brand):hover {
    color: var(--color-neutral-900);
  }

  /* ==========================================================================
     Withdrawal button (§ 356a BGB) — printed by inc/withdrawal/loader.php
     Sits above the legal menu; the law wants it prominent on every page,
     so it is a bordered button, not a menu link.
     ========================================================================== */

  .footer-withdrawal {
    order: 0;
    margin: 0;
  }

  /* ==========================================================================
     Legal Menu
     Uses nav-link pattern from atoms.css
     ========================================================================== */

  .footer-legal-menu {
    order: 1;
  }

  .legal-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .legal-menu a {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .legal-menu a:hover {
    color: var(--color-neutral-900);
  }

  /* ==========================================================================
     Footer Social Icons
     Uses shared/social-icons.php template with --footer modifier
     ========================================================================== */

  .social-icons--footer {
    display: flex;
    gap: var(--spacing-3);
  }

  .social-icons--footer .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-touch-target);
    height: var(--size-touch-target);
    color: var(--color-neutral-600);
    background: var(--color-neutral-100);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
  }

  .social-icons--footer .social-icon:hover {
    color: var(--color-white);
    background: var(--color-brand-600);
  }

  /* ==========================================================================
     Footer Navigation Menu (optional)
     Uses wp_nav_menu for additional links
     ========================================================================== */

  .footer-navigation {
    order: 2;
  }

  .footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer-menu a {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .footer-menu a:hover {
    color: var(--color-neutral-900);
  }

  /* ==========================================================================
     Mobile Widget Separators
     ========================================================================== */

  @media (max-width: 639px) {
    .footer-widgets__column + .footer-widgets__column {
      padding-top: var(--spacing-6);
      border-top: 1px solid var(--color-neutral-200);
    }
  }

  /* ==========================================================================
     Tablet Breakpoint
     ========================================================================== */

  @media (min-width: 640px) {
    .footer-widgets__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom__inner {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
    }

    .footer-legal-menu {
      order: 0;
    }

    .footer-navigation {
      order: 0;
    }
  }

  /* ==========================================================================
     Desktop Breakpoint
     ========================================================================== */

  @media (min-width: 1024px) {
    .footer-widgets__grid {
      grid-template-columns: repeat(4, 1fr);
    }

    .footer-widgets {
      padding: var(--spacing-16) 0;
    }
  }