/* chrome.css — canonical header/footer for Canton Appliance Repair.
   Self-defending: every rule is scoped to .cx-* and sets its own values so it
   renders identically regardless of each page's inline styles. */

.cx-hdr, .cx-hdr *, .cx-ftr, .cx-ftr *{box-sizing:border-box}

/* ---------- header ---------- */
.cx-hdr{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #e5e7eb;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:#0f172a; line-height:1.4;
}
.cx-hdr__in{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cx-hdr__brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; min-width:0}
.cx-hdr__brand img{width:42px; height:auto; display:block; flex:0 0 auto; max-width:none}
.cx-hdr__name{margin:0; font-size:17px; font-weight:700; line-height:1.15; white-space:nowrap; color:#0f172a}
.cx-nav{display:flex; align-items:center; gap:6px; flex-wrap:nowrap; margin:0; padding:0}
.cx-nav a{
  display:inline-block; padding:8px 11px; border-radius:10px;
  font-size:14.5px; font-weight:600; text-decoration:none;
  color:#145A8D; background:transparent; border:1px solid transparent; white-space:nowrap;
}
.cx-nav a:hover{background:#eef4fa; text-decoration:none}
.cx-nav a.cx-on{background:#eef4fa}
.cx-nav a.cx-cta{background:#145A8D; color:#fff; border-color:#145A8D}
.cx-nav a.cx-cta:hover{background:#0d4a72}
.cx-nav a:focus-visible, .cx-ftr a:focus-visible{outline:2px solid #145A8D; outline-offset:2px}
@media (max-width:900px){
  .cx-hdr__in{flex-direction:column; align-items:flex-start; gap:8px}
  .cx-nav{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px}
  .cx-nav a{flex:0 0 auto}
  .cx-hdr__name{font-size:16px}
}

/* ---------- footer ---------- */
.cx-ftr{
  background:#fff; border-top:1px solid #e5e7eb; margin-top:36px; padding:26px 0 34px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:#4b5563; font-size:14.5px; line-height:1.65;
}
.cx-ftr__in{max-width:1200px; margin:0 auto; padding:0 16px}
.cx-ftr__cta{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px}
.cx-ftr__cta a{
  display:inline-block; padding:10px 16px; border-radius:11px; font-weight:700; font-size:15px;
  text-decoration:none; border:1px solid #145A8D; color:#145A8D; background:#fff;
}
.cx-ftr__cta a.cx-primary{background:#145A8D; color:#fff}
.cx-ftr__cta a:hover{text-decoration:none; opacity:.92}
.cx-ftr__cols{
  display:grid; gap:14px 28px; grid-template-columns:1fr; margin:0 0 14px;
  border-top:1px solid #eef1f5; padding-top:16px;
}
@media (min-width:760px){.cx-ftr__cols{grid-template-columns:1.4fr 1fr 1fr}}
.cx-ftr__cols h3{margin:0 0 6px; font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#0f172a}
.cx-ftr__cols p{margin:0 0 6px}
.cx-ftr__links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.cx-ftr a{color:#145A8D; text-decoration:none}
.cx-ftr a:hover{text-decoration:underline}
.cx-ftr__legal{border-top:1px solid #eef1f5; padding-top:14px; font-size:13.5px; color:#6b7280}
.cx-ftr__legal a{color:#4b5563}

/* ---------- mobile nav: hamburger instead of a scrolling strip ---------- */
.cx-burger{
  display:none; align-items:center; gap:8px; cursor:pointer;
  background:#fff; border:1px solid #cfd8e3; border-radius:10px;
  padding:9px 13px; font:600 14.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#145A8D;
}
.cx-burger:hover{background:#eef4fa}
.cx-burger svg{display:block}
@media (max-width:900px){
  .cx-hdr__in{flex-direction:row; align-items:center; justify-content:space-between; gap:12px}
  .cx-burger{display:inline-flex}
  .cx-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-top:1px solid #e5e7eb;
    box-shadow:0 12px 28px rgba(15,23,42,.12);
    padding:10px 14px 16px; overflow:visible; max-height:none;
  }
  .cx-nav.cx-open{display:flex}
  .cx-nav a{
    padding:13px 12px; border-radius:10px; font-size:16px;
    border-bottom:1px solid #f1f4f8;
  }
  .cx-nav a:last-child{border-bottom:none; margin-top:6px; text-align:center}
  .cx-hdr__name{font-size:16px}
}