/* ===========================================================
   MTL Electric - Shared site chrome
   Styles for the build-time header/footer partials
   (partials/header.html, partials/footer.html): design tokens,
   emergency strip, navigation, footer and mobile call bar.

   Loaded on EVERY page, before any page stylesheet. On the
   homepage it is followed by home.css (which reuses the tokens
   defined here); on inner pages by service.css plus the page's
   own stylesheet. The rules below are scoped to the chrome
   elements and do not restyle page content.
   =========================================================== */

/* -----------------------------------------------------------
   Design tokens
   ----------------------------------------------------------- */
:root {
    --navy: #0f2a63;
    --navy-deep: #0a1f4d;
    --ink: #1c2333;
    --orange: #f26b1d;
    --orange-dark: #d95a12;
    --peach: #f7a06a;
    --muted: #5b6473;
    --body: #414957;
    --number: #9aa1ad;
    --paper: #f5f4f0;
    --line: #e0e0db;
    --line-soft: #e6e6e2;
    --line-cell: #e8e8e4;
    --line-faq: #dcdbd5;
    --footer-bg: #1c2333;
    --footer-text: #c5cad3;
    --footer-muted: #8a92a0;

    --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;

    --wrap: 1280px;
    --gutter: 56px;
    --sec-y: 96px;
}

@media (max-width: 1024px) {
    :root { --gutter: 32px; --sec-y: 72px; }
}

@media (max-width: 768px) {
    :root { --gutter: 20px; --sec-y: 64px; }
}

/* -----------------------------------------------------------
   Layout helper
   ----------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Keep page-level link/paragraph styling out of the chrome */
.strip a, .nav a, .footer a, .callbar a { text-decoration: none; }
.footer p { margin: 0; }

/* -----------------------------------------------------------
   Buttons (scoped to the chrome; page-content buttons come from
   service.css or home.css)
   ----------------------------------------------------------- */
.nav .btn,
.footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    font: 600 14px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}

.nav .btn--sm { padding: 12px 22px; font-size: 13px; }

.nav .btn--orange,
.footer .btn--orange { background: var(--orange); color: #fff; }
.nav .btn--orange:hover,
.footer .btn--orange:hover { background: var(--orange-dark); color: #fff; }

/* -----------------------------------------------------------
   Emergency strip
   ----------------------------------------------------------- */
.strip {
    background: var(--navy);
    color: #fff;
}

.strip__desktop {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 10px 24px;
    font: 500 13px/1 var(--font-body);
    letter-spacing: .04em;
}
.strip__desktop a { color: #fff; font-weight: 600; }
.strip__desktop a:hover { color: var(--peach); }
.strip__dot { color: var(--peach); }

.strip__mobile {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 16px;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

@media (max-width: 768px) {
    .strip__desktop { display: none; }
    .strip__mobile { display: flex; }
}

/* -----------------------------------------------------------
   Navigation
   ----------------------------------------------------------- */
.nav {
    position: relative;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--line-soft);
}

.nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 84px;
}

.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 46px; width: auto; }

.nav__links {
    display: flex;
    gap: 32px;
    font: 600 14px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.nav__links a { color: var(--ink); transition: color .15s; }
.nav__links a:hover { color: var(--orange); }

/* Services dropdown trigger */
.nav__services-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.nav__caret {
    font-size: 10px;
    display: inline-block;
    transition: transform .2s;
}
.nav.mega-open .nav__services-toggle {
    color: var(--navy);
    border-bottom-color: var(--orange);
}
.nav.mega-open .nav__services-toggle .nav__caret { transform: rotate(180deg); }

/* Services mega menu (desktop) */
.nav__mega { display: none; }

@media (min-width: 1025px) {
    .nav.mega-open .nav__mega {
        display: grid;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        grid-template-columns: 1fr 1fr 1fr 300px;
        padding: 36px var(--gutter) 40px;
        background: #fff;
        border-bottom: 1px solid var(--line-soft);
        box-shadow: 0 30px 60px -30px rgba(10, 20, 45, .45);
    }
}

.nav__mega-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 32px;
}
.nav__mega-col:first-child { padding-left: 0; }
.nav__mega-col + .nav__mega-col { border-left: 1px solid var(--line-soft); }

.nav__mega-label {
    font: 600 12px/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 8px;
}

.nav__mega-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    color: var(--ink);
    transition: color .15s;
}
.nav__mega-link:hover { color: var(--orange); }
.nav__mega-title {
    font: 700 18px/1.1 var(--font-display);
    text-transform: uppercase;
}
.nav__mega-desc {
    font: 400 13px/1.4 var(--font-body);
    color: var(--muted);
}

.nav__mega-all {
    margin-top: 14px;
    align-self: flex-start;
    padding-bottom: 6px;
    font: 600 13px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy);
    border-bottom: 2px solid var(--orange);
    transition: color .15s;
}
.nav__mega-all:hover { color: var(--orange); }

.nav__mega-cta {
    background: var(--navy);
    margin-left: 32px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nav__mega-eyebrow {
    font: 600 12px/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--peach);
}
.nav__mega-cta-title {
    font: 700 26px/1 var(--font-display);
    text-transform: uppercase;
    color: #fff;
}
.nav__mega-cta p {
    margin: 0;
    font: 400 14px/1.5 var(--font-body);
    color: rgba(255, 255, 255, .8);
}
.nav__mega-cta .btn { padding: 14px 18px; font-size: 13px; }

.nav__cta {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav__phone {
    font: 700 18px/1 var(--font-display);
    letter-spacing: .02em;
    color: var(--navy);
    transition: color .15s;
}
.nav__phone:hover { color: var(--orange); }

.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.nav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform .2s, opacity .2s;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__menu { display: none; }

@media (max-width: 1024px) {
    .nav__bar { height: 64px; gap: 12px; }
    .nav__logo img { height: 36px; }
    .nav__links,
    .nav__phone { display: none; }
    .nav__cta { gap: 12px; }
    .nav__cta .btn { padding: 14px 14px; font-size: 12px; }
    .nav__toggle { display: flex; }

    .nav__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: #fff;
        border-bottom: 1px solid var(--line-soft);
        box-shadow: 0 24px 40px -24px rgba(10, 20, 45, .35);
        max-height: calc(100vh - 110px);
        max-height: calc(100dvh - 110px);
        overflow-y: auto;
    }
    .nav.is-open .nav__menu { display: flex; }

    .nav__menu > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        min-height: 52px;
        font: 700 20px/1 var(--font-display);
        text-transform: uppercase;
        color: var(--ink);
        border-bottom: 1px solid var(--line-soft);
    }
    .nav__menu > a:hover { color: var(--orange); }

    /* Services accordion row */
    .nav__menu .nav__menu-services {
        color: var(--navy);
        background: var(--paper);
    }
    .nav__menu .nav__menu-services .nav__caret { font-size: 11px; }
    .nav__menu.services-open .nav__menu-services .nav__caret { transform: rotate(180deg); }

    /* Services submenu */
    .nav__submenu {
        display: none;
        flex-direction: column;
        background: var(--paper);
        border-bottom: 1px solid var(--line-soft);
        padding: 4px 0 8px;
    }
    .nav__menu.services-open .nav__submenu { display: flex; }

    .nav__submenu-label {
        font: 600 11px/1 var(--font-body);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--orange);
        padding: 14px 20px 6px;
    }
    .nav__submenu > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 12px 20px 12px 32px;
        min-height: 44px;
        font: 500 15px/1.2 var(--font-body);
        color: var(--ink);
    }
    .nav__submenu-arrow { color: var(--number); }
    .nav__submenu > a.is-active {
        background: #fff;
        border-left: 3px solid var(--orange);
        padding-left: 29px;
        font-weight: 600;
        color: var(--navy);
    }
    .nav__submenu > a.is-active .nav__submenu-arrow { color: var(--orange); }

    .nav__submenu .nav__submenu-all {
        margin: 10px 20px 6px;
        padding: 12px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        font: 600 13px/1 var(--font-body);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--navy);
        border-bottom: 2px solid var(--orange);
    }

    /* Menu footer CTA */
    .nav__menu-cta {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: var(--navy);
    }
    .nav__menu-call,
    .nav__menu-quote {
        display: block;
        text-align: center;
        font: 600 14px/1 var(--font-body);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #fff;
        transition: background-color .15s, color .15s;
    }
    .nav__menu-call {
        background: var(--orange);
        padding: 16px;
    }
    .nav__menu-call:hover { background: var(--orange-dark); }
    .nav__menu-quote {
        border: 2px solid rgba(255, 255, 255, .5);
        padding: 14px;
    }
    .nav__menu-quote:hover { background: #fff; color: var(--navy); }
    .nav__menu-note {
        text-align: center;
        font: 500 12px/1.4 var(--font-body);
        color: rgba(255, 255, 255, .7);
    }
}

/* -----------------------------------------------------------
   Footer
   ----------------------------------------------------------- */
.footer {
    background: var(--footer-bg);
    color: var(--footer-text);
}

.footer__main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
    padding-top: 64px;
    padding-bottom: 48px;
}
.footer__links { display: contents; }

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* White lettering on the dark footer, no plate behind it
   (uses MTL-logo-white.svg, which is transparent). */
.footer__logo {
    height: 44px;
    width: auto;
    align-self: flex-start;
}
.footer__about {
    font: 400 15px/1.6 var(--font-body);
    color: var(--footer-text);
    max-width: 340px;
}
.footer__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 500 15px/1.4 var(--font-body);
}
.footer__contact a { color: #fff; }
.footer__contact a:hover { color: var(--peach); }

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font: 400 15px/1.4 var(--font-body);
}
.footer__col h4 {
    margin: 0 0 6px;
    font: 700 13px/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}
.footer__col a { color: var(--footer-text); transition: color .15s; }
.footer__col a:hover { color: #fff; }
.footer__col .btn {
    margin-top: 8px;
    align-self: flex-start;
    padding: 12px 20px;
    font-size: 13px;
    color: #fff;
}

.footer__bottom {
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font: 400 13px/1 var(--font-body);
    color: var(--footer-muted);
}
.footer__bottom .wrap {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}
.footer__legal {
    display: flex;
    gap: 24px;
}
.footer__legal a { color: var(--footer-muted); }
.footer__legal a:hover { color: #fff; }

@media (max-width: 1024px) {
    .footer__main { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer__brand { grid-column: 1 / -1; }
    .footer__links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .footer__main {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding-top: 48px;
        padding-bottom: 36px;
    }
    .footer__brand { gap: 16px; }
    .footer__logo { height: 40px; }
    .footer__links { gap: 28px; }
    .footer__col { gap: 10px; }
    .footer__col h4 { margin-bottom: 4px; font-size: 12px; }

    .footer__follow {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 18px;
        font: 500 14px/1 var(--font-body);
    }
    .footer__follow h4,
    .footer__follow .btn { display: none; }

    .footer__bottom {
        padding: 18px 0;
        font-size: 12px;
        line-height: 1.4;
    }
    .footer__bottom .wrap {
        flex-direction: column;
        gap: 8px;
    }
    .footer__legal { gap: 16px; }
}

/* -----------------------------------------------------------
   Mobile sticky call bar (shows on scroll down)
   ----------------------------------------------------------- */
.callbar { display: none; }

@media (max-width: 768px) {
    .callbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: 1fr 1fr;
        box-shadow: 0 -8px 24px rgba(10, 20, 45, .18);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s;
        will-change: transform;
    }
    .callbar.is-visible {
        transform: none;
        visibility: visible;
    }
    .callbar a {
        padding: 18px;
        text-align: center;
        font: 600 14px/1 var(--font-body);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #fff;
    }
    .callbar__call { background: var(--orange); }
    .callbar__call:hover { background: var(--orange-dark); }
    .callbar__quote { background: var(--navy); }
    .callbar__quote:hover { background: var(--navy-deep); }
}