/* MCF's site header and footer, in the theme (inc/chrome.php), ported from mce-child 2026-10-24. Loaded only on pages it covers.
   Measured off the Elementor header/footer (2026-10-20): #F3F5F8 ground, navy #1C244B, gold #815C00,
   1000px content width, top strip 42px, main bar 60 / 58 / 56px (desktop / tablet / phone).
   Phone fixes Alicia asked for: the menu button sits dead centre; the open menu has room between lines;
   the footer wraps cleanly. Every rule is scoped to mch- / mcf- classes, which only this file styles. */
/* Roboto Flex, served from the theme (2026-10-24). Google's combined font request was being dropped by the page
   optimiser on the service and contact pages, so the header and those pages fell back to a plain system font (Arial
   on Windows) — Alicia: "too plain, like Arial". One variable file covers weights 300-700; the extended set downloads
   only for a page that uses its characters. Open Font License. */
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../fonts/roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../fonts/roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* MCF still runs Elementor, whose own site kit styles the page bodies, so the kit rules MCE carries are not needed here. */

/* Header & footer tokens — the Design panel's Global tab for the "Header & Footer" page writes these (and only these),
   so a value set there reaches every page's header and footer and can never touch a page body. Defaults = the values
   Alicia approved on 2026-10-20. */
:root{--ch-bg:#F3F5F8;--ch-ink:#1C244B;--ch-accent:#815C00;--ch-strip:#815C00;--ch-icon:#0C62A8;--ch-rule:#B6C9DB;--ch-cta-bd:#B6C9DB;
 --ch-top-fs:13px;--ch-nav-fs:13px;--ch-sub-fs:15px;--ch-cta-fs:13px;--ch-fmenu-fs:12.5px;--ch-fcontact-fs:13px;--ch-flegal-fs:11.5px;
 --ch-logo-w:60px;--ch-flogo-h:21px;--ch-mcx-h:18px;--ch-in:22px;--ch-ca:26px}
:root{--mce-hdr:60px}
@media(max-width:1024px){:root{--mce-hdr:58px}}
@media(max-width:767px){:root{--mce-hdr:56px}}

.mch-top,.mch-bar,.mcf-foot{font-family:"Roboto Flex",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--ch-bg);color:var(--ch-ink);-webkit-font-smoothing:antialiased;box-sizing:border-box}
.mch-top *,.mch-bar *,.mcf-foot *{box-sizing:border-box}
.mch-in{max-width:1024px;margin:0 auto;padding:0 12px} /* 1000px of content, 12px gutters below that — as the Elementor header measured */
.mch-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}

/* ── top strip: scrolls away ── */
.mch-top .mch-in{height:42px;display:flex;align-items:center;justify-content:flex-end;gap:20px} /* MCF: the search box alone, at the right */
.mch-top .mch-fx{font-size:var(--ch-top-fs);font-weight:300;letter-spacing:1.2px;text-transform:uppercase;color:var(--ch-strip);text-decoration:none;line-height:1.5}
.mch-top .mch-fx:hover,.mch-top .mch-fx:focus-visible{color:var(--ch-ink)}
.mch-top .mch-search{display:flex;align-items:center;width:140px;height:28px;margin:0;border-bottom:1px solid var(--ch-ink)}
.mch-top .mch-search:focus-within{border-bottom-color:var(--ch-accent)}
.mch-top .mch-search input{flex:1 1 auto;min-width:0;width:auto;height:27px;margin:0;padding:0 4px;border:0;border-radius:0;background:transparent;font:inherit;font-size:13px;color:var(--ch-ink);outline:0;-webkit-appearance:none;appearance:none;box-shadow:none}
.mch-top .mch-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.mch-top .mch-search button,.mch-top .mch-search button:hover,.mch-top .mch-search button:focus{flex:0 0 30px;width:30px;height:27px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ch-ink);display:grid;place-items:center;cursor:pointer}
.mch-top .mch-search button:hover{color:var(--ch-accent)}
.mch-top .mch-search svg{width:15px;height:15px;display:block}

/* ── main bar: stays at the top ── */
.mch-bar{position:-webkit-sticky;position:sticky;top:0;z-index:999}
body.admin-bar .mch-bar{top:32px}
@media(max-width:782px){body.admin-bar .mch-bar{top:46px}}
@media(max-width:600px){body.admin-bar .mch-bar{top:0}}
.mch-bar .mch-in{height:var(--mce-hdr);display:flex;align-items:center;position:relative}
.mch-bar .mch-logo{flex:0 0 auto;display:block;line-height:0;margin-right:auto}
.mch-bar .mch-logo img{width:var(--ch-logo-w);height:auto;display:block}
.mch-bar .mch-nav{margin-left:auto}
.mch-bar .mch-msearch{display:none} /* phones only: shown inside the open menu (max-width:767px below) */
.mch-bar .mch-nav ul{list-style:none;margin:0;padding:0}
.mch-bar .mch-nav>ul{display:flex;align-items:center}
.mch-bar .mch-nav li{position:relative;margin:0;padding:0}
.mch-bar .mch-nav>ul>li{display:flex;align-items:center}
/* Menu and Contact Us in tracked capitals, like the footer links (Alicia, 2026-10-24: option A, "clean sleek"). The drop-down
   lists keep normal case: long service names in capitals read heavy. */
.mch-bar .mch-nav>ul>li>a{display:block;padding:12px 18px;font-size:var(--ch-nav-fs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:20px;color:var(--ch-ink);text-decoration:none;white-space:nowrap}
.mch-bar .mch-nav>ul>li.has-sub>a{padding-right:4px}
.mch-bar .mch-nav>ul>li.is-cur>a,.mch-bar .mch-nav>ul>li>a:hover,.mch-bar .mch-nav>ul>li>a:focus-visible,.mch-bar .mch-nav>ul>li.has-sub:hover>a{color:var(--ch-accent)}
.mch-bar .mch-subbtn,.mch-bar .mch-subbtn:hover,.mch-bar .mch-subbtn:focus{display:grid;place-items:center;width:22px;height:30px;margin:0 10px 0 0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;cursor:pointer;box-shadow:none}
.mch-bar .mch-subbtn svg{width:14px;height:14px;transition:transform .2s}
.mch-bar li.has-sub:hover .mch-subbtn,.mch-bar li.is-cur .mch-subbtn{color:var(--ch-accent)}
.mch-bar li.sub-open>.mch-subbtn svg{transform:rotate(180deg)}

/* desktop + tablet dropdown */
@media(min-width:768px){
 .mch-bar .mch-sub{position:absolute;top:100%;left:0;min-width:270px;padding:8px 0;background:#fff;border:1px solid #E2E6EC;border-radius:10px;box-shadow:0 14px 34px rgba(28,36,75,.14);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility 0s .18s;z-index:2}
 .mch-bar li.has-sub:hover>.mch-sub,.mch-bar li.has-sub:has(:focus-visible)>.mch-sub,.mch-bar li.sub-open>.mch-sub{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
 .mch-bar .mch-sub a{display:block;padding:9px 18px;font-size:var(--ch-sub-fs);font-weight:400;line-height:1.35;color:var(--ch-ink);text-decoration:none;white-space:nowrap}
 .mch-bar .mch-sub a:hover,.mch-bar .mch-sub a:focus-visible{background:var(--ch-bg);color:var(--ch-accent)}
 /* MCF's third level (Electrical Failure Analysis → Transformer, Switchgear): indented under its parent */
 .mch-bar .mch-sub2{padding:0 0 4px}
 .mch-bar .mch-sub2 a{padding:7px 18px 7px 34px;font-size:calc(var(--ch-sub-fs) * .93)}
 .mch-bar .mch-burger{display:none}
}

.mch-bar .mch-cta,.mch-bar .mch-cta:visited{flex:0 0 auto;margin-left:46px;padding:11px 30px;border:1px solid var(--ch-cta-bd);border-radius:11px;background:var(--ch-bg);color:var(--ch-ink);font-size:var(--ch-cta-fs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:15px;text-decoration:none;white-space:nowrap;transition:color .15s,border-color .15s}
.mch-bar .mch-cta:hover,.mch-bar .mch-cta:focus-visible{color:var(--ch-accent);border-color:var(--ch-accent)}

/* tablet */
@media(max-width:1024px) and (min-width:768px){
 .mch-bar .mch-nav>ul>li>a{padding:9px}
 .mch-bar .mch-nav>ul>li.has-sub>a{padding-right:2px}
 /* MCF: Services is the second of three items and its list is wide (long service names), so at these widths it opens
    leftwards from the Services link; opened rightwards it ran 41px past the screen edge. */
 .mch-bar .mch-nav>ul>li:nth-last-child(-n+2)>.mch-sub{left:auto;right:0}
 .mch-bar .mch-subbtn{margin-right:6px}
 .mch-bar .mch-cta{margin-left:24px;padding:8px 15px}
}

/* phone: logo | menu button (dead centre) | Contact Us ── the menu drops below the bar */
@media(max-width:767px){
 .mch-top{display:none} /* MCF: the strip holds only the search box, which the open menu carries on a phone */
 .mch-bar .mch-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
 .mch-bar .mch-logo{justify-self:start;margin:0}
 .mch-bar .mch-burger,.mch-bar .mch-burger:hover,.mch-bar .mch-burger:focus{justify-self:center;grid-column:2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ch-ink);cursor:pointer;box-shadow:none}
 .mch-bar .mch-burger span{display:block;width:24px;height:2px;border-radius:2px;background:currentColor;transition:transform .22s,opacity .22s}
 .mch-bar.is-open .mch-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
 .mch-bar.is-open .mch-burger span:nth-child(2){opacity:0}
 .mch-bar.is-open .mch-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
 .mch-bar .mch-cta{grid-column:3;justify-self:end;margin:0;padding:9px 15px;font-size:calc(var(--ch-cta-fs) * .9333);line-height:14px}
 .mch-bar .mch-nav{position:absolute;top:100%;left:0;right:0;margin:0;background:var(--ch-bg);border-top:1px solid #E2E6EC;box-shadow:0 18px 30px rgba(28,36,75,.12);max-height:calc(100vh - var(--mce-hdr));max-height:calc(100svh - var(--mce-hdr));overflow-y:auto;-webkit-overflow-scrolling:touch;display:none}
 .mch-bar.is-open .mch-nav{display:block}
 /* the menu's own search box: the top strip's is hidden on phones. 16px text, or iPhones zoom in on tap. */
 .mch-bar .mch-msearch{display:flex;align-items:center;height:44px;margin:12px 16px 2px;border:1px solid #D5DCE6;border-radius:8px;background:#fff}
 .mch-bar .mch-msearch:focus-within{border-color:var(--ch-accent)}
 .mch-bar .mch-msearch input{flex:1 1 auto;min-width:0;width:auto;height:42px;margin:0;padding:0 12px;border:0;border-radius:8px 0 0 8px;background:transparent;font:inherit;font-size:16px;color:var(--ch-ink);outline:0;-webkit-appearance:none;appearance:none;box-shadow:none}
 .mch-bar .mch-msearch input::-webkit-search-cancel-button{-webkit-appearance:none}
 .mch-bar .mch-msearch button,.mch-bar .mch-msearch button:hover,.mch-bar .mch-msearch button:focus{flex:0 0 44px;width:44px;height:42px;margin:0;padding:0;border:0;border-radius:0 8px 8px 0;background:transparent;color:var(--ch-ink);display:grid;place-items:center;cursor:pointer;box-shadow:none}
 .mch-bar .mch-msearch svg{width:18px;height:18px;display:block}
 .mch-bar .mch-nav>ul{display:block;padding:6px 0 12px}
 .mch-bar .mch-nav>ul>li{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border-bottom:1px solid #E2E6EC}
 .mch-bar .mch-nav>ul>li:last-child{border-bottom:0}
 .mch-bar .mch-nav>ul>li>a,.mch-bar .mch-nav>ul>li.has-sub>a{flex:0 1 auto;padding:15px 4px;font-size:calc(var(--ch-nav-fs) * 1.1333);line-height:22px;text-align:center}
 .mch-bar .mch-nav>ul>li:not(.has-sub)>a{flex:1 1 100%}
 .mch-bar .mch-nav>ul>li.has-sub::before{content:"";flex:0 0 30px} /* balances the arrow on the right, so the word itself sits dead centre */
 .mch-bar .mch-subbtn,.mch-bar .mch-subbtn:hover,.mch-bar .mch-subbtn:focus{width:30px;height:52px;margin:0}
 .mch-bar .mch-subbtn svg{width:16px;height:16px}
 .mch-bar .mch-sub{flex:0 0 100%;display:none;padding:0 0 10px;text-align:center}
 .mch-bar li.sub-open>.mch-sub{display:block}
 .mch-bar .mch-sub a{display:block;padding:10px 20px;font-size:calc(var(--ch-sub-fs) * 1.0333);line-height:21px;color:var(--ch-ink);text-decoration:none;text-align:center}
 .mch-bar .mch-sub a:active,.mch-bar .mch-sub a:hover{color:var(--ch-accent)}
 .mch-bar .mch-sub2{padding:0 0 4px}
 .mch-bar .mch-sub2 a{padding:7px 20px;font-size:calc(var(--ch-sub-fs) * .93);color:var(--ch-ink)}
}

/* ── footer (Alicia, 2026-10-20) ──
   One centred block: MCF | links | MCX on top, drawn in toward the middle; under it the ways to reach MCE —
   address, phone, Service Request, Newsletter and LinkedIn beside it. The Canadian badge stands apart at the right,
   centred in the height of the two lines rather than on either. Then the small legal line.
   Scale: MCF 22px, MCX 19px (bold wordmark beside thin strokes, balanced by eye), LinkedIn 22px, badge 46px. */
.mcf-foot{padding:18px 0 18px}
.mcf-foot a{text-decoration:none}
.mcf-foot ul{list-style:none;margin:0;padding:0}
.mcf-foot li{margin:0;padding:0}
.mcf-grid{display:grid;grid-template-columns:62px 1fr 62px;grid-template-areas:"l top ca" "l contact ca" "base base base";column-gap:16px;row-gap:12px}
.mcf-top{grid-area:top;display:flex;align-items:center;justify-content:center;gap:40px}
.mcf-foot .mcf-contact{grid-area:contact}
/* The Canadian badge is a mark, not a sister brand (Alicia, 2026-10-24): small, beside the copyright line. */
/* Inline with the copyright text at every width (Alicia: "just inline with copyright"): it follows the last word,
   on whichever line that word lands, vertically centred on the text. */
.mcf-copyrow{margin-top:2px;text-align:center;font-size:var(--ch-flegal-fs);line-height:1.4} /* its own line height: it inherited the page's 24px, which set every copyright line's height */
.mcf-copyrow .mcf-copy{display:inline;margin:0}
.mcf-ca{display:inline-block;vertical-align:middle;line-height:0;margin:-6px 0 -6px 8px} /* negative block margins: the badge no longer makes its line taller */
.mcf-tail{white-space:nowrap} /* the badge travels with the last word: it never drops onto a line of its own */
.mcf-ca img{width:var(--ch-ca);height:var(--ch-ca);display:block}
.mcf-base{grid-area:base}
.mcf-logo{display:block;line-height:0;flex:0 0 auto}
.mcf-logo img{height:var(--ch-flogo-h);width:auto;display:block}
.mcf-mcx img{height:var(--ch-mcx-h)}
.mcf-menu ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}
.mcf-menu a{font-size:var(--ch-fmenu-fs);font-weight:400;letter-spacing:.7px;text-transform:uppercase;color:var(--ch-ink);line-height:1.6}
.mcf-menu a:hover,.mcf-menu a:focus-visible{color:var(--ch-accent)}
.mcf-foot .mcf-contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 24px}
.mcf-contact a{display:inline-flex;align-items:center;gap:7px;font-size:var(--ch-fcontact-fs);font-weight:300;line-height:1.5;color:var(--ch-ink)}
.mcf-contact a:hover,.mcf-contact a:focus-visible{color:var(--ch-accent)}
.mcf-contact svg{flex:0 0 13px;width:13px;height:13px;color:var(--ch-icon)}
.mcf-foot .mcf-reach{display:flex;align-items:center;gap:14px}
.mcf-foot .mcf-contact .mcf-in{color:var(--ch-icon);line-height:0}
.mcf-foot .mcf-contact .mcf-in:hover{color:var(--ch-accent)}
.mcf-foot .mcf-contact .mcf-in svg{flex:none;width:var(--ch-in);height:var(--ch-in);transform:translateY(-3px)} /* optical: the 'in' letters sit low in the icon (its dot sits high), so the icon lifts until the letters centre on the text's capitals (measured on drawn pixels, Alicia 2026-10-24) */
.mcf-base{margin-top:4px;padding-top:10px;border-top:1px solid var(--ch-rule);text-align:center}
.mcf-legal{display:flex;flex-wrap:wrap;justify-content:center;line-height:1.4} /* the list's own line height: without it the items inherited the page's 24px */
.mcf-legal li{display:flex;align-items:center}
.mcf-legal li+li::before{content:"";display:block;width:1px;height:11px;margin:0 12px;background:var(--ch-ink);opacity:.4}
.mcf-legal a{font-size:var(--ch-flegal-fs);font-weight:300;letter-spacing:.2px;line-height:1.4;color:var(--ch-ink)}
.mcf-legal a:hover,.mcf-legal a:focus-visible{color:var(--ch-accent)}
.mcf-copy{margin:4px 0 0;font-size:var(--ch-flegal-fs);font-weight:300;letter-spacing:.3px;line-height:1.4;color:var(--ch-ink);text-wrap:balance}

/* narrower than the one-line contact row: the address takes its own line; the logos sit either side of the links,
   and the badge keeps its own place at the right */
@media(max-width:1024px){
 .mcf-foot .mcf-contact .mcf-addr{flex:0 0 100%;display:flex;justify-content:center}
 .mcf-top{gap:28px}
}
/* phone (Alicia, 2026-10-24): the two brand logos in ONE centred row — the sister brand, then MCX. The Canadian
   badge is a mark, not a logo: it sits small beside the copyright line (above). The links get the full width under them, then the contact lines. */
@media(max-width:767px){
 .mcf-foot{padding:16px 0 18px}
 .mcf-grid{grid-template-columns:1fr auto auto 1fr;grid-template-areas:". mcf mcx ." "menu menu menu menu" "contact contact contact contact" "base base base base";column-gap:0;row-gap:18px;align-items:center}
 .mcf-top{display:contents}
 .mcf-mcf{grid-area:mcf;justify-self:center;margin:0 14px}
 .mcf-mcx{grid-area:mcx;justify-self:center;margin:0 14px}
 .mcf-menu{grid-area:menu}
 .mcf-menu ul{gap:6px 16px}
 .mcf-menu a{font-size:calc(var(--ch-fmenu-fs) * .96);letter-spacing:.6px;line-height:18px;display:block}
 .mcf-foot .mcf-contact{gap:6px 20px}
 .mcf-contact a{line-height:18px;text-align:center}
 .mcf-contact a span{text-wrap:balance}
 .mcf-base{margin-top:0;padding-top:12px}
 .mcf-foot .mcf-legal{display:grid;grid-template-columns:1fr 1fr;gap:2px 0;max-width:300px;margin:0 auto;line-height:16px}
 .mcf-legal li{display:block;text-align:center}
 .mcf-legal li+li::before{content:none}
 .mcf-legal a{line-height:16px}
 .mcf-copyrow{margin-top:6px;line-height:16px}
 .mcf-foot .mcf-contact .mcf-in svg{transform:translateY(-3.5px)}
 .mcf-copy{line-height:16px}
}
/* small phones: the four links break two and two, never three plus one */
@media(max-width:440px){.mcf-menu ul{max-width:300px;margin:0 auto}}