/* =============================================================================
   Footer — social icons (inc/footer-social.php) + mobile layout

   Clean circular icons sitting under the footer logo. Colours come straight
   from the footer's existing palette — the #F0F0F0 footer ground, #000 text,
   and the black-on-#F9D71E pairing already used by .btn-footer-inquiry — so
   the icons read as part of the same design rather than a bolted-on widget.

   Resting:  solid black circle, white glyph.
   Hover:    brand yellow circle, black glyph, slight lift.
   ========================================================================== */

/* The icons live directly in the existing .site-branding-custom column,
   right after the logo — no extra wrapper element. That column is a
   centred flex ROW in style.css (`display:flex; align-items:center;
   justify-content:flex-start`, all !important), which would put the icons
   beside the logo, so it is switched to a vertical stack here. The
   !important flags are required to outrank those declarations. */
.custom-footer .site-branding-custom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px;
    /* The column no longer needs to fill the row's height — stretching it
       only added dead space under the icons. */
    align-self: flex-start !important;
    margin-bottom: 0 !important;
}

/* Collapse the logo's letterboxing.
   style.css sets the footer logo to `width:450px; height:287px;
   max-width:85%; object-fit:contain`. The width is capped by that 85% (to
   ~217px in a col-md-3) but the 287px height is NOT capped, so the box ends
   up ~217x287 while the artwork — a 116:74 SVG — only fills ~217x138 of it.
   `contain` then centres the artwork, leaving roughly 74px of invisible
   space above AND below it, which is what pushed the icons so far from the
   logo and left the block looking loose.

   Letting the height follow the width removes both bands. The logo's visible
   size is unchanged (~217x138 either way); only the dead space goes. */
.custom-footer .site-branding-custom .footer-logo-mark {
    height: auto !important;
    max-height: none !important;
}

.custom-footer .footer-social-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.custom-footer .footer-social-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.custom-footer .footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #000000;
    color: #ffffff !important;
    text-decoration: none !important;
    line-height: 1;
    box-shadow: none;
    transition: background-color 0.25s ease, color 0.25s ease,
        transform 0.25s ease, box-shadow 0.25s ease;
}

.custom-footer .footer-social-link i {
    font-size: 18px;
    line-height: 1;
    /* Inherit the link colour so the hover swap needs one declaration. */
    color: inherit;
}

.custom-footer .footer-social-link:hover,
.custom-footer .footer-social-link:focus {
    background: #F9D71E;
    color: #000000 !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.custom-footer .footer-social-link:active {
    transform: translateY(0);
}

/* Keyboard users get a visible ring; mouse users don't. */
.custom-footer .footer-social-link:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Mobile: tighter icon metrics plus the container fix. Alignment and spacing
   for the whole footer live in the "Mobile: centred footer" section below. */
@media (max-width: 767px) {
    /* --- Keep the logo + icons inside the container ---------------------
       On mobile style.css zeroes the footer container's gutters
       (`.custom-footer .container { padding-left/right: 0 !important }`),
       but Bootstrap's `.row` still carries `margin: 0 -15px` and every
       column still carries 15px of padding. The row therefore hangs 15px
       off each edge and the column padding only brings content back to
       ~0 — so the logo and social icons sat flush against the viewport
       while nothing lined up with the rest of the footer.

       Cancelling the row's bleed lets the intended 16px gutter apply, which
       matches `.footer-content-wrapper` (padding: 0 16px) and
       `.footer-bottom-bar` (padding: 0 16px) — one shared left edge for
       every footer block. */
    .custom-footer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* style.css only sets padding-left here, so the column had no right-hand
       gutter at all. Both sides, same 16px as the blocks above. */
    .custom-footer .site-branding-custom {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .custom-footer .footer-social-list {
        gap: 10px;
    }

    .custom-footer .footer-social-link {
        width: 38px;
        height: 38px;
    }

    .custom-footer .footer-social-link i {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .custom-footer .footer-social-link {
        width: 36px;
        height: 36px;
    }

    .custom-footer .footer-social-link i {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .custom-footer .footer-social-link {
        transition: background-color 0.25s ease, color 0.25s ease;
    }

    .custom-footer .footer-social-link:hover,
    .custom-footer .footer-social-link:focus,
    .custom-footer .footer-social-link:active {
        transform: none;
    }
}


/* =============================================================================
   Mobile: centred footer
   =============================================================================
   Below 768px the footer stacks into one column and everything is centred —
   logo, social icons, heading, CTA, navigation, contact details and the
   bottom bar.

   style.css left-aligns all of these across five separate breakpoint blocks
   (768/767/480 at lines ~7777-9395), most with !important, so the rules here
   are the single authoritative override and need !important to win. This file
   is enqueued after style.css and css/main.css.

   Desktop is untouched: the footer there stays a two-column layout with the
   logo on the left.
   ========================================================================== */

@media (max-width: 767px) {

    /* --- Logo + social icons -------------------------------------------
       Also the one place the column's bottom spacing is set: style.css
       declares margin-bottom three times across breakpoints (20/30/18px) and
       Bootstrap's `mb-4` on the element adds another 24px. */
    .custom-footer .site-branding-custom {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 14px;
        margin-bottom: 22px !important;
    }

    .custom-footer .footer-social-list {
        justify-content: center;
        width: 100%;
    }

    /* --- Heading + CTA ------------------------------------------------- */
    .custom-footer .footer-content-top {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .custom-footer .footer-heading {
        text-align: center !important;
        margin-bottom: 14px !important;
    }

    .custom-footer .cta-wrap {
        width: 100%;
        text-align: center !important;
    }

    /* Hug the label instead of spanning the column.
       style.css has a shared "Global Buttons" rule inside
       @media (max-width: 576px) (line ~10509) that forces
       `width: 100% !important` on .btn-round, .who-we-are-btn,
       .btn-footer-inquiry and .category-card__btn together. Scoping the
       override to .custom-footer undoes it for this button only and leaves
       the other three full-width as intended. The button is already
       inline-flex, so `auto` sizes it to its text plus padding, and
       .cta-wrap's text-align centres it. */
    .custom-footer .btn-footer-inquiry {
        width: auto !important;
        max-width: 100%;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .custom-footer .footer-divider {
        margin: 22px 0 !important;
    }

    /* --- Contact + nav columns ----------------------------------------- */
    .custom-footer .footer-content-bottom {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .custom-footer .footer-col-nav,
    .custom-footer .footer-col-contact {
        width: 100%;
        text-align: center !important;
    }

    /* Navigation reads as a centred stack.
       The selector is deliberately as specific as style.css's
       `ul.footer-nav-list.list-unstyled` (line ~2782), which sets
       `align-items: flex-start !important` at (0,2,1) — a plain
       `.custom-footer .footer-nav-list` at (0,2,0) loses to it. */
    .custom-footer ul.footer-nav-list.list-unstyled {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        align-content: center !important;
    }

    .custom-footer .footer-nav-list li {
        width: 100%;
        text-align: center !important;
        margin: 0 0 12px 0 !important;
    }

    .custom-footer .footer-nav-list li:last-child {
        margin-bottom: 0 !important;
    }

    .custom-footer .footer-nav-list a {
        text-align: center !important;
        display: block;
    }

    .custom-footer .footer-col-nav {
        margin-bottom: 26px !important;
    }

    /* Contact rows: icon centred on its own line, text centred beneath it —
       the theme's default is a horizontal icon + text row. */
    .custom-footer .footer-contact-list li {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 18px !important;
    }

    .custom-footer .footer-contact-list li:last-child {
        margin-bottom: 0 !important;
    }

    .custom-footer .footer-contact-list .contact-icon {
        margin: 0 0 6px 0 !important;
        min-width: 0 !important;
    }

    /* style.css caps this at 180px for the left-aligned layout, which would
       force an odd early wrap once centred. */
    .custom-footer .footer-contact-list li span:not(.contact-icon) {
        max-width: 100% !important;
        text-align: center !important;
    }

    /* --- Bottom bar ---------------------------------------------------- */
    .custom-footer .footer-bottom-bar {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .custom-footer .copyright-text,
    .custom-footer .footer-legal-links {
        width: 100%;
        text-align: center !important;
    }

    .custom-footer .footer-legal-links .footer-legal-list {
        justify-content: center;
        width: 100%;
    }
}