/* ===================================================================
   FABRIXA FOOTER — rendered by [fbx_footer] shortcode
   Drop into: brighthub-fabrixa/assets/css/footer.css
   Auto-enqueued via the assets/css loader.
   =================================================================== */

.fbx-footer-cols {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 40px;
    width: 100%;
}

.fbx-footer-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fbx-footer-heading {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E95121;
    margin: 0 0 22px;
    padding: 0;
    line-height: 1.4;
}

.fbx-footer-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fbx-footer-links li {
    list-style: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

.fbx-footer-links a {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #F0F0F0;
    line-height: 1.5;
    text-decoration: none;
    transition: color .15s ease;
}

.fbx-footer-links a:hover,
.fbx-footer-links a:focus-visible {
    color: #E95121;
}

/* Sub-heading (mid-level menu item that has grandchildren).
 * Renders as a bold cream link, sits above its leaf links.
 * Tightened 2026-05-06: smaller fonts + reduced spacing so the dense
 * 3-level menu doesn't feel overwhelming. */
.fbx-footer-group {
    margin: 0 0 18px;
}
.fbx-footer-group:last-child {
    margin-bottom: 0;
}
.fbx-footer-subheading {
    display: block;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #F0F0F0;
    line-height: 1.35;
    margin: 0 0 8px;
    padding: 0;
    text-decoration: none;
    transition: color .15s ease;
}
.fbx-footer-subheading:hover,
.fbx-footer-subheading:focus-visible {
    color: #E95121;
}

/* Leaf links under a sub-heading — smaller, slate-coloured, tight */
.fbx-footer-group .fbx-footer-links {
    margin-bottom: 0 !important;
}
.fbx-footer-group .fbx-footer-links li {
    margin: 0 0 4px !important;
}
.fbx-footer-group .fbx-footer-links a {
    color: #9AA4B2;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
}
.fbx-footer-group .fbx-footer-links a:hover,
.fbx-footer-group .fbx-footer-links a:focus-visible {
    color: #E95121;
}

/* Flat link rows (mid-level items that have NO grandchildren) */
.fbx-footer-flat {
    margin: 0 0 10px !important;
}
.fbx-footer-flat li {
    margin: 0 !important;
}
.fbx-footer-flat a {
    font-weight: 600 !important;
    color: #F0F0F0 !important;
    font-size: 13px !important;
}

/* Tighter top column heading too */
.fbx-footer-heading {
    font-size: 11px !important;
    margin: 0 0 18px !important;
}

/* ----------------------------------------------------------- */
/* Brand block (logo + tagline) on the left should align to the
 * TOP of the row so its tagline reads alongside the column
 * headings, not stuck at the bottom. */
.fbx-footer-brand,
.fbx-footer-cols ~ .fbx-footer-brand,
.elementor-widget-text-editor:has(+ .elementor-widget-shortcode .fbx-footer-cols) {
    align-self: flex-start;
}

/* If the BrightHub footer template wraps brand + columns in a flex
 * row container (.elementor-row, .pxl-footer-row, etc.), force the
 * brand cell to the top */
body footer .elementor-row,
body footer .pxl-footer-row,
body footer .elementor-section .elementor-container {
    align-items: flex-start !important;
}
body footer .elementor-column,
body footer .elementor-widget-wrap {
    align-self: flex-start !important;
    justify-content: flex-start !important;
}

/* Tablet: collapse to 3 columns */
@media (max-width: 1100px) {
    .fbx-footer-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }
}

/* Small tablet: 2 columns */
@media (max-width: 720px) {
    .fbx-footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
    .fbx-footer-cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ----------------------------------------------------------- */
/* COLLAPSIBLE FOOTER COLUMNS ON MOBILE / SMALL TABLET (≤720px)
 *
 * Each column heading becomes a tappable accordion header with a
 * coral chevron. Content (sub-headings + leaf links) is hidden by
 * default and shown when the col has the `is-open` class.
 * Class toggle is driven by a tiny script in wp_footer.
 * ----------------------------------------------------------- */
@media (max-width: 720px) {
    .fbx-footer-cols {
        gap: 0;
    }
    .fbx-footer-col {
        border-bottom: 1px solid rgba(240, 240, 240, 0.06);
    }
    .fbx-footer-col:last-child {
        border-bottom: 0;
    }

    .fbx-footer-col .fbx-footer-heading {
        position: relative;
        cursor: pointer;
        padding: 18px 40px 18px 0 !important;
        margin: 0 !important;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .fbx-footer-col .fbx-footer-heading:focus-visible {
        outline: 2px solid #E95121;
        outline-offset: 4px;
        border-radius: 2px;
    }
    .fbx-footer-col .fbx-footer-heading::after {
        content: "";
        position: absolute;
        right: 8px;
        top: calc(50% - 6px);
        width: 9px;
        height: 9px;
        border-right: 2px solid #E95121;
        border-bottom: 2px solid #E95121;
        transform: rotate(45deg);
        transition: transform 0.25s ease;
    }
    .fbx-footer-col.is-open .fbx-footer-heading::after {
        transform: rotate(225deg);
        top: calc(50% - 3px);
    }

    /* Hide column content by default; show only when open */
    .fbx-footer-col > .fbx-footer-group,
    .fbx-footer-col > .fbx-footer-flat {
        display: none;
    }
    .fbx-footer-col.is-open > .fbx-footer-group,
    .fbx-footer-col.is-open > .fbx-footer-flat {
        display: block;
        padding-bottom: 16px;
    }
    .fbx-footer-col.is-open > .fbx-footer-group:first-of-type,
    .fbx-footer-col.is-open > .fbx-footer-flat:first-of-type {
        padding-top: 4px;
    }

    /* Trim space between collapsed columns and the legal/copyright row.
     * Aggressive — Elementor stacks several wrappers (section > container
     * > column > widget) each potentially with padding-top/bottom that
     * BrightHub theme options set via inline style. Reset them all on
     * mobile only.
     */

    /* The Elementor section that contains the [fbx_footer] shortcode */
    body footer .elementor-section:has(.fbx-footer-cols),
    body footer section:has(.fbx-footer-cols),
    body footer [data-element_type="section"]:has(.fbx-footer-cols) {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* And every wrapper inside that section */
    body footer .elementor-section:has(.fbx-footer-cols) .elementor-container,
    body footer .elementor-section:has(.fbx-footer-cols) .elementor-column,
    body footer .elementor-section:has(.fbx-footer-cols) .elementor-column-wrap,
    body footer .elementor-section:has(.fbx-footer-cols) .elementor-widget-wrap,
    body footer .elementor-section:has(.fbx-footer-cols) .elementor-widget,
    body footer .elementor-section:has(.fbx-footer-cols) .elementor-widget-shortcode {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
    }

    /* The Elementor section that COMES AFTER the columns section
     * (the one with the legal/copyright row). Trim its top padding. */
    body footer .elementor-section:has(.fbx-footer-cols) ~ .elementor-section,
    body footer .elementor-section:has(.fbx-footer-cols) + .elementor-section {
        padding-top: 16px !important;
        margin-top: 0 !important;
    }

    /* Belt-and-braces: the brand column on the left (logo + tagline +
     * socials) might have min-height: 100% set so it matches the column
     * heights on desktop — on mobile that creates extra vertical space.
     * Reset it. */
    body footer .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image),
    body footer .elementor-column:has(.fbx-footer-cols) {
        min-height: 0 !important;
        height: auto !important;
    }
    body footer .elementor-element {
        min-height: 0 !important;
    }
}