/*
 * Transporter — global footer chrome
 *
 * Scope note: the footer body is [transporter_footer] from transporter-core,
 * and every .trft* class is styled by the plugin's own footer.css (which has
 * its own breakpoints at 960px and 600px). This file styles ONLY the theme's
 * wrapper around it.
 *
 * Nothing here targets .trft internals. Restyling them from the theme would
 * mean two stylesheets fighting over the same selectors, and the plugin's copy
 * loads on Woodmart too — so a theme override would silently change the live
 * site as well.
 */

.tr-footer {
    background: var(--tr-black);
    color: var(--tr-text-invert);
}

/* The footer shortcode brings its own internal padding; this only guarantees
   separation from page content when a template ends flush against it. */
.tr-main + .tr-footer,
.tr-footer { margin-block-start: 0; }

/* ── Optional widget strip below the footer ── */

.tr-footer__extras {
    padding-block: 28px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

.tr-footer__extras .tr-widget + .tr-widget {
    margin-block-start: 20px;
}

.tr-footer__extras .tr-widget__title {
    margin-block-end: 10px;
    font-family: var(--tr-font-display);
    font-size: 18px;
    line-height: 1.2;
    color: var(--tr-white);
}

.tr-footer__extras a { color: var(--tr-text-muted); }
.tr-footer__extras a:hover { color: var(--tr-white); }

/* ── Mobile toolbar clearance ──
   --tr-toolbar (55px) is the measured mobile bottom bar. When that component
   lands it will be position:fixed, so the footer needs matching bottom space
   or its last row sits underneath it. Reserved here, applied only where the
   toolbar actually renders. */

@media (max-width: 1024px) {
    body.has-tr-toolbar .tr-footer {
        padding-block-end: var(--tr-toolbar);
    }
}