/* ============================================================
   PLUSFAB -- "BRIGHT STEEL" FOOTER (2026-10-07, redesign phase 4)
   ------------------------------------------------------------
   A presentation layer over moretech-header-footer.css §8-§14.
   Loaded after that file and written at the same specificity, so
   these rules win by source order. The column grid and its
   breakpoints stay exactly as §13/§14 define them; this file only
   changes how the pieces look.

   The footer stays black: it is the one dark surface left, and it
   closes the bright page. The yellow does the work on it:
     - a yellow bar across the top edge
     - square yellow markers on the column headings
     - yellow cut-corner icon tiles and a yellow WhatsApp button
     - links that slide right behind a yellow "+" on hover
     - the map in full colour inside a cut-corner frame
     - the company name as a giant outlined wordmark
   (.mt-site-footer__wordmark is the one small addition to
   partials/site_footer.php. A back-to-top button was tried and
   removed on 2026-10-07: it sat under the floating chat launcher.)
============================================================ */

body.tpl-plusfab_industrial .mt-site-footer {
    --pf-ink:    #131619;
    --pf-yellow: var(--mt-accent, #FFCC00);
    border-top: 4px solid var(--pf-yellow);
    overflow: hidden;   /* the wordmark is wider than the screen on purpose */
}


/* ============================================================
   §1  BRAND COLUMN
============================================================ */
body.tpl-plusfab_industrial .mt-site-footer__name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

/* Contact lines: yellow tiles with one cut corner, black glyphs. */
body.tpl-plusfab_industrial .mt-site-footer__line { gap: 14px; }
body.tpl-plusfab_industrial .mt-site-footer__line i {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 0;
    background: var(--pf-yellow);
    color: var(--pf-ink);
    font-size: 0.85rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
body.tpl-plusfab_industrial .mt-site-footer__line a:hover { color: var(--pf-yellow); }

/* WhatsApp: the footer's one button -- yellow, cut corner, black text.
   Full width on phones (see §6). */
body.tpl-plusfab_industrial .mt-site-footer__whatsapp {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: var(--mt-space-4, 16px);
    padding: 15px 24px;
    border: 0;
    border-radius: 0;
    background: var(--pf-yellow);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--pf-ink);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    transition: background-color var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease),
                color var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease);
}
body.tpl-plusfab_industrial .mt-site-footer__whatsapp i {
    color: var(--pf-ink);
    font-size: 1.15rem;
    transition: color var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease);
}
body.tpl-plusfab_industrial .mt-site-footer__whatsapp:hover,
body.tpl-plusfab_industrial .mt-site-footer__whatsapp:focus-visible {
    background: #FFFFFF;
    color: var(--pf-ink);
    outline: none;
}

/* Social icons: square, yellow on hover. */
body.tpl-plusfab_industrial .mt-site-footer__social a {
    width: 42px;
    height: 42px;
    border-radius: 0;
    border-color: rgba(197, 203, 208, 0.30);
    background: transparent;
    color: #FFFFFF;
}
body.tpl-plusfab_industrial .mt-site-footer__social a:hover {
    border-color: var(--pf-yellow);
    background: var(--pf-yellow);
    color: var(--pf-ink);
}


/* ============================================================
   §2  COLUMN HEADINGS -- yellow square marker with a white offset
============================================================ */
body.tpl-plusfab_industrial .mt-site-footer__heading {
    gap: 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #FFFFFF;
}
body.tpl-plusfab_industrial .mt-site-footer__heading::before {
    width: 10px;
    height: 10px;
    background: var(--pf-yellow);
    box-shadow: 3px 3px 0 #FFFFFF;
}


/* ============================================================
   §3  LINKS -- a yellow "+" appears and the label slides right
============================================================ */
body.tpl-plusfab_industrial .mt-site-footer__links { gap: 2px; }
body.tpl-plusfab_industrial .mt-site-footer__links a {
    position: relative;
    display: inline-block;
    padding: 7px 0;          /* a comfortable tap target on phones */
    font-size: 0.95rem;
    color: #C5CBD0;
    transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease),
                padding-left var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease);
}
body.tpl-plusfab_industrial .mt-site-footer__links a::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mt-font-heading);
    font-weight: 800;
    color: var(--pf-yellow);
    opacity: 0;
    transition: opacity var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease);
}
body.tpl-plusfab_industrial .mt-site-footer__links a:hover,
body.tpl-plusfab_industrial .mt-site-footer__links a:focus-visible {
    padding-left: 18px;
    color: #FFFFFF;
}
body.tpl-plusfab_industrial .mt-site-footer__links a:hover::before,
body.tpl-plusfab_industrial .mt-site-footer__links a:focus-visible::before {
    opacity: 1;
}


/* ============================================================
   §4  MAP -- full colour, cut-corner frame, yellow edge behind it
============================================================ */
body.tpl-plusfab_industrial .mt-site-footer__map-col { min-width: 0; }
body.tpl-plusfab_industrial .mt-site-footer__map {
    position: relative;
    border: 0;
    border-radius: 0;
    background: var(--pf-yellow);
    padding: 0 0 6px 6px;      /* the yellow shows as a lower-left edge */
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
body.tpl-plusfab_industrial .mt-site-footer__map iframe {
    filter: none;
}


/* ============================================================
   §5  WORDMARK + BASE ROW
============================================================ */
/* The company name, very large and outlined, cropped by the footer's
   own edges. Decorative only (aria-hidden in the markup). */
body.tpl-plusfab_industrial .mt-site-footer__wordmark {
    display: block;
    margin: 0 0 var(--mt-space-6, 24px);
    font-family: var(--mt-font-heading);
    /* Reduced by a quarter on 2026-10-07 (was clamp(3.4rem, 17vw, 15rem)).
       "PLUS FAB" now ends at roughly two thirds of the footer's width, clear
       of the chat launcher fixed in the bottom-right corner. */
    font-size: clamp(2.55rem, 12.75vw, 11.25rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(197, 203, 208, 0.30);
    user-select: none;
    pointer-events: none;
}

body.tpl-plusfab_industrial .mt-site-footer__base {
    align-items: center;
}


/* ============================================================
   §6  LARGER SCREENS (the rules above are the phone layout)
============================================================ */
@media (min-width: 576px) {
    body.tpl-plusfab_industrial .mt-site-footer__whatsapp { display: inline-flex; }
}

@media (max-width: 575px) {
    body.tpl-plusfab_industrial .mt-site-footer__wordmark { -webkit-text-stroke-width: 1px; }
}

/* ------------------------------------------------------------
   PHONE FOOTER: A CENTRED COMPOSITION (2026-10-07)
   Below 576px the footer is one column. Left-aligned it read as
   the desktop footer stacked up; here every block is centred on
   one axis: company (name, statement, phone, email, WhatsApp),
   navigation, location (map, address), the wordmark, the legal
   lines. Nothing is removed. Tablet and desktop are not touched.
------------------------------------------------------------ */
@media (max-width: 575px) {
    body.tpl-plusfab_industrial .mt-site-footer {
        /* Room under the legal lines for the floating chat launcher, which
           is fixed in the bottom-right corner and covered their last words. */
        padding-bottom: 88px;
    }
    /* Vertical rhythm tightened on 2026-10-07 (groups 36 -> 28px, and the
       steps inside each group by about a quarter). */
    body.tpl-plusfab_industrial .mt-site-footer { padding-top: 40px; }
    body.tpl-plusfab_industrial .mt-site-footer__grid {
        gap: 28px;
        padding-bottom: 28px;
        text-align: center;
    }

    /* Company */
    body.tpl-plusfab_industrial .mt-site-footer__name { margin-bottom: 12px; }
    body.tpl-plusfab_industrial .mt-site-footer__statement {
        max-width: 34ch;
        margin: 0 auto 16px;
    }
    body.tpl-plusfab_industrial .mt-site-footer__line {
        justify-content: center;
        margin-bottom: 8px;
    }
    body.tpl-plusfab_industrial .mt-site-footer__base { padding-top: 18px; }
    /* WhatsApp: a centred button of a set width instead of a full-width bar. */
    body.tpl-plusfab_industrial .mt-site-footer__whatsapp {
        display: inline-flex;
        min-width: 240px;
        margin-top: 8px;
    }
    body.tpl-plusfab_industrial .mt-site-footer__social { justify-content: center; }

    /* Navigation + Location headings and lists */
    body.tpl-plusfab_industrial .mt-site-footer__heading {
        justify-content: center;
        margin-bottom: 12px;
    }
    body.tpl-plusfab_industrial .mt-site-footer__links { align-items: center; gap: 0; }
    body.tpl-plusfab_industrial .mt-site-footer__links a { padding: 6px 12px; }
    /* The hover "+" sits to the left of a left-aligned label; a centred
       list on a touch screen does not use it. */
    body.tpl-plusfab_industrial .mt-site-footer__links a::before { content: none; }
    body.tpl-plusfab_industrial .mt-site-footer__links a:hover,
    body.tpl-plusfab_industrial .mt-site-footer__links a:focus-visible { padding-left: 12px; }

    /* Map: centred, a little lower than on larger screens */
    body.tpl-plusfab_industrial .mt-site-footer__map {
        max-width: 420px;
        margin: 0 auto 12px;
    }
    /* The address is the last line of its group: no trailing gap. */
    body.tpl-plusfab_industrial .mt-site-footer__map-col .mt-site-footer__line { margin-bottom: 0; }
    body.tpl-plusfab_industrial .mt-site-footer__map iframe { height: 180px; }

    /* Wordmark: centred, and kept behind the real content in weight */
    body.tpl-plusfab_industrial .mt-site-footer__wordmark {
        margin-bottom: 16px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.tpl-plusfab_industrial .mt-site-footer__links a,
    body.tpl-plusfab_industrial .mt-site-footer__links a::before,
    body.tpl-plusfab_industrial .mt-site-footer__whatsapp { transition: none; }
}