/* ============================================================
   .uk-footer — proposed canonical site footer (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the legacy declarations in style.css:
     .footer                      -> .uk-footer
     .footer-grid                 -> .uk-footer-grid
     .footer-brand                -> .uk-footer-brand
     .footer-brand .logo          -> .uk-logo (canonical from uk-site-nav.css)
     .footer-brand > p            -> .uk-footer-tagline
     .footer-links                -> .uk-footer-links (column)
     .footer-links h4             -> .uk-footer-links-title
     .footer-links ul / li / a    -> .uk-footer-links-list / -item / -link
     .footer-bottom               -> .uk-footer-bottom
     .footer-bottom p             -> .uk-footer-bottom-copy
     .footer-meta                 -> .uk-footer-meta
     .uptime-badge                -> .uk-footer-meta (consumer chooses content)

   Reuses .uk-logo + .uk-logo-img from uk-site-nav.css — single source
   of truth for the brand mark. Slot-based layout: brand block on the
   left (logo + tagline), one or more link columns on the right; bottom
   row carries copyright + optional meta (uptime badge, build hash, etc.).

   No radial-gradient. No JS.
   ============================================================ */

/* ============================================
   Root — top-bordered band at the bottom of the page
   ============================================ */
.uk-footer {
    padding: var(--space-4xl) 0 var(--space-xl);
    border-top: 1px solid var(--color-border);
}

/* ============================================
   Top grid — brand on the left, link columns on the right
   ============================================ */
.uk-footer-grid {
    display: grid;
    grid-template-columns: 2fr auto;
    gap: var(--space-3xl);
    align-items: start;
    margin-bottom: var(--space-3xl);
}

/* Multiple link columns side-by-side under the right slot. */
.uk-footer-grid > .uk-footer-cols {
    display: flex;
    gap: var(--space-3xl);
}

/* ============================================
   Brand block — logo + tagline
   ============================================ */
.uk-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 32rem;
}

.uk-footer-brand .uk-logo {
    margin-bottom: 0;
}

.uk-footer-tagline {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-relaxed);
    max-width: 32ch;
}

/* ============================================
   Link column — title + vertical list
   ============================================ */
.uk-footer-links {
    display: flex;
    flex-direction: column;
}

.uk-footer-links-title {
    margin: 0 0 var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.uk-footer-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.uk-footer-links-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-md);
    transition: color var(--transition-fast);
}

.uk-footer-links-link:hover {
    color: var(--color-text);
}

/* ============================================
   Bottom row — copyright + meta
   ============================================ */
.uk-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.uk-footer-bottom-copy {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    line-height: var(--line-relaxed);
}

.uk-footer-bottom-copy strong {
    color: var(--color-text);
    font-weight: 600;
}

.uk-footer-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
}

/* ============================================
   Responsive — collapse to single column at 768px
   ============================================ */
@media (max-width: 768px) {
    .uk-footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .uk-footer-grid > .uk-footer-cols {
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .uk-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        text-align: left;
    }
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .uk-footer-links-link {
        transition: none;
    }
}