/**
 * Footer Component
 * =================
 *
 * Dark teal footer using wp:columns block layout.
 * Responsive: 4-col desktop → 2x2 tablet → stacked mobile.
 *
 * The footer markup uses wp-block-columns (WordPress block editor columns).
 * We style the .x-footer wrapper and the native column classes.
 *
 * Dependencies: custom-tokens.css, global-classes.css
 * Requirements: 5.4, 4.1
 */

/* ---------------------------------------------------------------------------
   FOOTER BASE
   --------------------------------------------------------------------------- */

.x-footer {
    background: var(--x-teal-900);
    color: var(--x-white);
    padding: var(--x-space-2xl) var(--x-space-md) 0 var(--x-space-md);
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   FOOTER COLUMNS (using wp-block-columns)
   --------------------------------------------------------------------------- */

.x-footer .wp-block-columns {
    gap: var(--x-space-lg);
    padding-bottom: var(--x-space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------------------------
   COLUMN HEADINGS
   --------------------------------------------------------------------------- */

.x-footer .wp-block-column h3 {
    font-family: var(--x-font-heading);
    font-weight: 800;
    line-height: 1.3;
    color: var(--x-white);
    margin: 0 0 var(--x-space-sm) 0;
}

/* ---------------------------------------------------------------------------
   FOOTER LINKS
   --------------------------------------------------------------------------- */

.x-footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.x-footer a:hover {
    color: var(--x-orange-500);
}

.x-footer a:focus-visible {
    outline: 2px solid var(--x-orange-500);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   FOOTER NAVIGATION LISTS
   --------------------------------------------------------------------------- */

.x-footer__nav-list,
.x-footer__legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.x-footer__nav-list li,
.x-footer__legal-list li {
    margin-bottom: var(--x-space-xs);
}

/* ---------------------------------------------------------------------------
   FOOTER DIVIDER
   --------------------------------------------------------------------------- */

.x-footer__divider {
    border-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   BOTTOM BAR
   --------------------------------------------------------------------------- */

.x-footer .wp-block-group:last-child {
    padding: var(--x-space-md) 0;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE: TABLET (768px – 991px)
   --------------------------------------------------------------------------- */

@media (max-width: 991px) and (min-width: 768px) {
    .x-footer .wp-block-columns {
        flex-wrap: wrap;
    }

    .x-footer .wp-block-columns > .wp-block-column {
        flex-basis: calc(50% - var(--x-space-lg) / 2) !important;
    }

    .x-footer .wp-block-columns > .wp-block-column:first-child {
        flex-basis: 100% !important;
    }
}

/* ---------------------------------------------------------------------------
   RESPONSIVE: MOBILE (<768px) → stacked single column
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .x-footer {
        padding: var(--x-space-xl) var(--x-space-md) 0 var(--x-space-md);
    }

    .x-footer .wp-block-columns {
        flex-direction: column;
    }
}