/* ==========================================================================
   Alternivite Design System — Footer
   Enterprise footer: brand, newsletter, link columns, bottom bar
   ========================================================================== */

/* ==========================================================================
   MAIN FOOTER
   ========================================================================== */

.footer {
   background: var(--color-neutral-950, #0a0a0f);
   color: var(--color-neutral-400);
   padding-top: var(--space-16);
   padding-bottom: 0;
}

@media (min-width: 768px) {
   .footer { padding-top: var(--space-20); }
}

/* ==========================================================================
   TOP SECTION — Brand + Newsletter side by side
   ========================================================================== */

.footer-top {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-12);
   padding-bottom: var(--space-12);
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

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

@media (min-width: 900px) {
   .footer-top {
      grid-template-columns: 1.2fr 0.8fr;
      gap: var(--space-16);
   }
}

/* ==========================================================================
   BRAND COLUMN — Logo, description, social links
   ========================================================================== */

.footer-brand {
   max-width: 360px;
}

.footer-brand-logo {
   display: inline-flex;
   align-items: center;
   gap: var(--space-3);
   font-size: var(--text-xl);
   font-weight: var(--font-bold);
   color: #ffffff;
   margin-bottom: var(--space-4);
   text-decoration: none;
}

.footer-brand-logo svg {
   height: 36px;
   width: auto;
}

.footer-brand-desc {
   font-size: var(--text-sm);
   line-height: var(--leading-relaxed);
   color: var(--color-neutral-400);
   margin-bottom: var(--space-6);
}

/* Social icon links */
.footer-social {
   display: flex;
   gap: var(--space-3);
}

.footer-social-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   color: var(--color-neutral-400);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--radius-lg);
   transition: all var(--duration-normal) var(--ease-default);
   text-decoration: none;
}

.footer-social-link:hover {
   color: #ffffff;
   border-color: rgba(255, 255, 255, 0.2);
   background: rgba(255, 255, 255, 0.06);
}

.footer-social-link:focus-visible {
   outline: 2px solid var(--color-primary-400);
   outline-offset: 2px;
}

.footer-social-link svg {
   width: 18px;
   height: 18px;
}

/* ==========================================================================
   NEWSLETTER COLUMN — Email signup
   ========================================================================== */

.footer-newsletter {
   max-width: 400px;
}

.footer-newsletter-title {
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: #ffffff;
   margin-bottom: var(--space-2);
}

.footer-newsletter-text {
   font-size: var(--text-sm);
   color: var(--color-neutral-400);
   margin-bottom: var(--space-4);
   line-height: var(--leading-relaxed);
}

.footer-newsletter-form {
   display: flex;
   gap: var(--space-2);
}

.footer-newsletter-input {
   flex: 1;
   min-width: 0;
   padding: var(--space-3) var(--space-4);
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-lg);
   font-size: var(--text-sm);
   color: #ffffff;
   outline: none;
   transition: border-color var(--duration-normal) var(--ease-default),
               box-shadow var(--duration-normal) var(--ease-default);
}

.footer-newsletter-input::placeholder {
   color: var(--color-neutral-500);
}

.footer-newsletter-input:focus {
   border-color: var(--color-primary-400);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.footer-newsletter-btn {
   flex-shrink: 0;
   padding: var(--space-3) var(--space-5);
   background: var(--color-primary-600);
   color: white;
   border: none;
   border-radius: var(--radius-lg);
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   cursor: pointer;
   transition: background var(--duration-normal) var(--ease-default);
   font-family: inherit;
}

.footer-newsletter-btn:hover {
   background: var(--color-primary-500);
}

.footer-newsletter-btn:focus-visible {
   outline: 2px solid var(--color-primary-400);
   outline-offset: 2px;
}

.footer-newsletter-note {
   font-size: var(--text-xs);
   color: var(--color-neutral-500);
   margin-top: var(--space-2);
}

/* Stack form on very small screens */
@media (max-width: 480px) {
   .footer-newsletter-form { flex-direction: column; }
}

/* ==========================================================================
   LINK COLUMNS — 6-column nav grid
   ========================================================================== */

.footer-columns {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-10);
   padding: var(--space-12) 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

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

@media (min-width: 900px) {
   .footer-columns {
      grid-template-columns: repeat(6, 1fr);
      gap: var(--space-8);
   }
}

/* Column heading */
.footer-col-title {
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   color: #ffffff;
   text-transform: uppercase;
   letter-spacing: var(--tracking-wider);
   margin-bottom: var(--space-4);
}

/* Column link list */
.footer-col-links {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
}

.footer-col-link {
   font-size: var(--text-sm);
   color: var(--color-neutral-400);
   text-decoration: none;
   transition: color var(--duration-normal) var(--ease-default);
}

.footer-col-link:hover {
   color: #ffffff;
}

.footer-col-link:focus-visible {
   outline: 2px solid var(--color-primary-400);
   outline-offset: 2px;
   border-radius: 2px;
}

/* ==========================================================================
   BOTTOM BAR — Copyright + legal links + back to top
   ========================================================================== */

.footer-bottom {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
   align-items: center;
   padding: var(--space-6) 0;
}

@media (min-width: 768px) {
   .footer-bottom {
      flex-direction: row;
      justify-content: space-between;
   }
}

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

/* Bottom bar link group */
.footer-bottom-links {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--space-4) var(--space-6);
   align-items: center;
}

.footer-bottom-link {
   font-size: var(--text-sm);
   color: var(--color-neutral-500);
   text-decoration: none;
   transition: color var(--duration-normal) var(--ease-default);
}

.footer-bottom-link:hover {
   color: var(--color-neutral-300);
}

.footer-bottom-link:focus-visible {
   outline: 2px solid var(--color-primary-400);
   outline-offset: 2px;
}

/* Cookie Preferences — styled as text link but is a button */
.footer-cookie-btn {
   background: none;
   border: none;
   font-size: var(--text-sm);
   color: var(--color-neutral-500);
   cursor: pointer;
   padding: 0;
   font-family: inherit;
   transition: color var(--duration-normal) var(--ease-default);
}

.footer-cookie-btn:hover {
   color: var(--color-neutral-300);
}

.footer-cookie-btn:focus-visible {
   outline: 2px solid var(--color-primary-400);
   outline-offset: 2px;
}

/* Back to top — text link with upward arrow */
.footer-back-top {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--text-sm);
   color: var(--color-neutral-500);
   text-decoration: none;
   transition: color var(--duration-normal) var(--ease-default);
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   font-family: inherit;
}

.footer-back-top:hover {
   color: #ffffff;
}

.footer-back-top:focus-visible {
   outline: 2px solid var(--color-primary-400);
   outline-offset: 2px;
}

.footer-back-top svg {
   transition: transform var(--duration-normal) var(--ease-default);
}

.footer-back-top:hover svg {
   transform: translateY(-2px);
}

/* Separator dot between bottom links */
.footer-sep {
   color: var(--color-neutral-600);
   font-size: var(--text-xs);
}