/* Water Services Inc. shared header/footer + typography for www.water-services.us
   Matches the SDS design system (sds.water-services.us). Loaded after the old site CSS.
   Note: the old site CSS sets html{font-size:10px}, so px are used here instead of rem. */
:root{--wsi-navy:#0047ab;--wsi-navy2:#0066cc;--wsi-teal:#00a0e3;--wsi-ink:#1e293b;--wsi-muted:#64748b;--wsi-line:#d5dde6;--wsi-paper:#f4f8fb;
  --wsi-font:"Source Sans 3","Segoe UI",Calibri,sans-serif}

/* ---------- Typography (site-wide) ---------- */
html body{font-family:var(--wsi-font)!important;font-size:16px;line-height:1.5;color:var(--wsi-ink);background:var(--wsi-paper);margin:0}
body *:not(svg):not(path){font-family:var(--wsi-font)!important}
body p,body li,body td,body th{line-height:1.5}
body h1{font-size:28px;line-height:1.25;color:var(--wsi-navy);font-weight:700;margin:16px 0 10px}
body h2{font-size:22px;line-height:1.3;color:var(--wsi-navy);font-weight:700;margin:16px 0 8px}
body h3{font-size:18px;line-height:1.35;color:var(--wsi-navy);font-weight:700;margin:14px 0 6px}
body h4,body h5,body h6{font-size:16px;line-height:1.4;color:var(--wsi-ink);font-weight:600;margin:12px 0 6px}
/* old <font size> tags -> one scale */
font[size="1"],font[size="-2"]{font-size:13px}
font[size="2"],font[size="-1"]{font-size:14px}
font[size="3"]{font-size:16px}
font[size="4"],font[size="+1"]{font-size:18px}
font[size="5"],font[size="+2"]{font-size:22px}
font[size="6"],font[size="+3"]{font-size:26px}
font[size="7"]{font-size:30px}
/* links: one color, no purple-blue */
body a,body a font,body a span,body a b{color:var(--wsi-navy)}
body a:hover{color:var(--wsi-navy2)}
.auto-style1,.auto-style2,[style*="rgb(38, 22, 222)"],font[color="#2616DE"],font[color="#2616de"],font[color="#0066ff"],font[color="#0066FF"]{color:var(--wsi-navy)!important}
/* images and old fixed-width layout tables shrink to the screen */
body img{max-width:100%;height:auto}
.wsi-topbar img,.wsi-foot img{height:auto}
@media (max-width:820px){
  body table,body tbody,body tr{max-width:100%!important}
  body table{width:auto!important;table-layout:auto}
  body td,body th{width:auto!important}
  body [style*="width: 2879px"],body [style*="width: 2497px"],body [style*="WIDTH: 717.3pt"],body table[width="956"],body table[width="669"]{width:auto!important}
  body td{word-break:break-word;overflow-wrap:anywhere}
  .wsi-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  body .container{width:auto!important;max-width:100%;padding-left:12px;padding-right:12px}
  body table td>img[width]{max-width:100%}
}

/* ---------- Header (SDS topbar) ---------- */
.wsi-topbar{background:#fff;color:var(--wsi-navy);padding:14px 28px 12px;position:relative;z-index:20;box-shadow:0 4px 18px rgba(0,71,171,.10);border-bottom:4px solid var(--wsi-teal);font-size:16px;line-height:1.4;text-align:left}
.wsi-topbar-inner{max-width:1240px;margin:0 auto;display:flex;gap:14px 18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.wsi-brand{display:flex;gap:16px;align-items:center;min-width:220px;text-decoration:none}
.wsi-brand img.wsi-logo{height:64px;width:auto;max-width:240px;object-fit:contain;display:block;background:#fff}
.wsi-brand .wsi-title{display:block;margin:0;font-size:18px;font-weight:700;color:var(--wsi-navy)}
.wsi-brand .wsi-sub{display:block;margin:2px 0 0;font-size:13.5px;color:var(--wsi-muted)}
.wsi-top-shop{flex:1 1 200px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.wsi-top-shop-label{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wsi-muted)}
.wsi-top-actions{flex:0 1 auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
a.wsi-btn-ghost,a.wsi-btn-ghost:visited{appearance:none;cursor:pointer;border-radius:10px;padding:10px 14px;font-weight:650;font-size:14.5px;line-height:1.2;text-decoration:none;display:inline-block;background:#e8f4fc;color:var(--wsi-navy);border:1px solid #b9d8f0;white-space:nowrap}
a.wsi-btn-ghost:hover{background:#d5ecfa;color:var(--wsi-navy);text-decoration:none}
a.wsi-btn-navy,a.wsi-btn-navy:visited{display:inline-block;padding:12px 22px;background:var(--wsi-navy);color:#fff!important;border-radius:10px;text-decoration:none;font-weight:700}
@media (max-width:1180px){.wsi-top-actions{order:4;flex-basis:100%;justify-content:center}}
@media (max-width:820px){.wsi-top-shop{order:3;flex-basis:100%}.wsi-top-actions{order:4;flex-basis:100%;justify-content:center}}
@media (max-width:560px){.wsi-topbar{padding:10px 12px}.wsi-brand img.wsi-logo{height:52px}.wsi-brand{min-width:0}a.wsi-btn-ghost{padding:8px 10px;font-size:13.5px}}

/* ---------- Nav bar (navy, teal accent) ---------- */
.wsi-nav{background:var(--wsi-navy);border-bottom:3px solid var(--wsi-teal)}
.wsi-nav ul{max-width:1100px;margin:0 auto;padding:0 18px;list-style:none;display:flex;flex-wrap:wrap;gap:0}
.wsi-nav li{margin:0;padding:0}
.wsi-nav a,.wsi-nav a:visited{display:block;padding:11px 16px;color:#fff!important;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none}
.wsi-nav a:hover{background:var(--wsi-navy2);text-decoration:none}
.wsi-nav li.active a{background:var(--wsi-teal)}
@media (max-width:560px){.wsi-nav ul{padding:0 6px;justify-content:center}.wsi-nav a{padding:10px 10px;font-size:14px}}

/* ---------- Footer (SDS .foot) ---------- */
.wsi-foot{clear:both;background:#fff;border-top:4px solid var(--wsi-teal);margin-top:28px;padding:22px 18px 26px;text-align:center;font-size:14px;line-height:1.6;color:var(--wsi-muted)}
.wsi-foot a{color:var(--wsi-navy)}
.wsi-foot-inner{max-width:1100px;margin:0 auto}
.wsi-foot .wsi-foot-name{font-weight:700;color:var(--wsi-ink);font-size:15px}
.wsi-foot .wsi-foot-row{margin:2px 0}
.wsi-foot .wsi-foot-brands,.wsi-foot .wsi-foot-partners,.wsi-foot .wsi-foot-social{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;margin:0 0 16px;padding:0;list-style:none}
.wsi-foot .wsi-foot-brands li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--wsi-ink)}
.wsi-foot .wsi-foot-partners img{max-height:56px;width:auto;max-width:140px}
.wsi-foot .wsi-foot-social img{width:20px;height:20px}
.wsi-foot h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--wsi-muted);margin:0 0 10px;font-weight:700}
.wsi-foot .wsi-fine{display:block;margin-top:8px;font-size:12.5px}

/* Mobile: product grid + wide spec tables */
@media (max-width: 820px){
  .row{margin-left:0!important;margin-right:0!important}
  .row > .column{width:25%;overflow-wrap:anywhere}
  .row > .column img{height:auto}
  table[style*="1145px"]{display:block!important;width:auto!important;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body{overflow-wrap:break-word}
}
@media (max-width: 560px){
  .row > .column{width:50%}
}

/* Footer brand logos: equal boxes, one tidy row */
.wsi-foot .wsi-foot-brands{gap:12px 18px}
.wsi-foot .wsi-foot-brands li{width:120px}
.wsi-foot .wsi-logo-box{display:flex;align-items:center;justify-content:center;width:120px;height:48px;background:#fff}
.wsi-foot .wsi-foot-brands .wsi-logo-box img{width:100%!important;height:100%!important;max-width:none;max-height:none;object-fit:contain;display:block}
@media (max-width:560px){
  .wsi-foot .wsi-foot-brands{gap:10px 12px}
  .wsi-foot .wsi-foot-brands li{width:90px;font-size:11px}
  .wsi-foot .wsi-logo-box{width:90px;height:36px}
}