/* ============================================================================
   Footer — Contact & Brand Information
   Telegram, Email, Logo, and Copyright
   ============================================================================ */

.footer {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: var(--space-64) var(--space-32);
  margin-top: auto;
  z-index: var(--z-base);
}

.footer__container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.footer__content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-48);
  align-items: center;
  grid-auto-flow: row;
}

/* Logo Section */
.footer__logo-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  order: 3; /* swapped to the right column */
}

.footer__logo {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Contacts Section */
.footer__contacts {
  display: flex;
  gap: var(--space-32);
  justify-content: center;
  flex-wrap: wrap;
  order: 2; /* middle column, between copyright (1) and logo (3) */
}

.footer__link {
  font-family: 'PT Mono', monospace;
  font-size: var(--font-size-24);
  font-weight: 400;
  color: var(--color-white);
  padding: var(--space-12) 0;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s ease-out, color 0.2s ease-out;
  display: flex;
  align-items: center;
  min-height: 44px;
}

.footer__link:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.footer__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-4);
}

/* Copyright Section */
.footer__copyright {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  order: 1; /* swapped to the left column */
}

.footer__brand-dot {
  color: var(--color-accent);
}

.footer__copyright p {
  font-family: 'PT Mono', monospace;
  font-size: var(--font-size-12);
  line-height: var(--line-height-tight);
  margin: 0;
  opacity: 0.8;
  letter-spacing: var(--letter-spacing-wide);
}

/* ============================================================================
   Responsive Behavior
   ============================================================================ */

/* Tablet: 768px and below */
@media (max-width: 768px) {
  .footer {
    padding: var(--space-48) var(--space-24);
  }

  .footer__content {
    grid-template-columns: 1fr;
    gap: var(--space-32);
    text-align: center;
  }

  .footer__logo-section {
    justify-content: center;
  }

  .footer__logo {
    width: 60px;
    height: 60px;
  }

  .footer__contacts {
    flex-direction: column;
    gap: var(--space-24);
  }

  .footer__link {
    font-size: var(--font-size-18);
    width: 100%;
    justify-content: center;
  }

  .footer__copyright {
    justify-content: center;
  }

  .footer__copyright p {
    font-size: var(--font-size-11);
  }
}

/* Mobile: 480px and below */
@media (max-width: 480px) {
  .footer {
    padding: var(--space-32) var(--space-16);
  }

  .footer__content {
    gap: var(--space-24);
  }

  .footer__logo {
    width: 51px;
    height: 51px;
  }

  .footer__contacts {
    gap: var(--space-16);
  }

  .footer__link {
    font-size: var(--font-size-16);
    padding: var(--space-8) 0;
  }

  .footer__copyright p {
    font-size: var(--font-size-10);
  }
}

/* Small mobile: 360px and below */
@media (max-width: 360px) {
  .footer {
    padding: var(--space-24) var(--space-12);
  }

  .footer__logo {
    width: 43px;
    height: 43px;
  }

  .footer__link {
    font-size: var(--font-size-14);
    padding: var(--space-8) 0;
  }
}

/* ============================================================================
   Dark Mode Support
   ============================================================================ */

/* Footer keeps the brand dark-blue (#28334A) surface at all times for a
   consistent fixed light-theme site (footer is a deliberate dark accent
   band, not a system-driven dark mode). */

/* ============================================================================
   Accessibility
   ============================================================================ */

/* Ensure sufficient color contrast */
.footer {
  /* Primary color #28334A on white would be insufficient contrast,
     but footer uses white text on dark primary, which passes WCAG AA (7:1+) */
}

.footer__link:visited {
  color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .footer__link {
    transition: none;
  }
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
  .footer {
    page-break-inside: avoid;
    border-top: 1px solid #28334A;
    background-color: transparent;
    color: #28334A;
  }

  .footer__link {
    color: #28334A;
    border-bottom-color: #28334A;
  }

  .footer__copyright p {
    opacity: 1;
  }
}