/* ETG Calculator shared site footer (supplied design). Every rule is scoped to #colophon. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url(../etg-tools/fonts/inter-var.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}
#colophon.site-footer{background:#0B2A4E;color:#C9D6EA;position:relative;padding:44px 0 0;margin:0;border:0;box-shadow:none;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
#colophon.site-footer *,#colophon.site-footer *::before,#colophon.site-footer *::after{box-sizing:border-box}
#colophon.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1E6FEB,#4E9CFF,#1E6FEB)}
/* defend against unscoped rules in page content or the theme leaking into the footer */
#colophon a,#colophon h5,#colophon ul,#colophon li,#colophon p,#colophon div{float:none;text-shadow:none}
#colophon ul,#colophon li{list-style:none;margin:0;padding:0;background:none;border:0;width:auto;max-width:none}
#colophon a{width:auto;min-width:0;max-width:none;height:auto;min-height:0}
/* full-width band; content container is max 1280px, centred (inner width 1200px at desktop, same as the header) */
#colophon .f-wrap{max-width:1280px;margin:0 auto;padding:0 clamp(24px,3.2vw,40px)}

/* four columns spread edge to edge: first column fixed, the link columns sized to their content, equal space between them */
#colophon .f-grid{display:grid;grid-template-columns:minmax(0,340px) auto auto auto;justify-content:space-between;gap:32px}
/* narrower desktops: keep four columns but tighten the headings so "ETG Calculator Tools" stays on one line */
@media (min-width:901px) and (max-width:1100px){#colophon .f-grid{gap:24px;grid-template-columns:1.15fr 1.1fr 1.1fr .9fr;justify-content:stretch}#colophon .f-col h5,#colophon .f-social h5{font-size:12px;letter-spacing:.06em}}
@media (max-width:900px){#colophon .f-grid{grid-template-columns:1fr 1fr;justify-content:stretch;gap:28px 32px}}
@media (max-width:560px){#colophon .f-grid{grid-template-columns:1fr;gap:28px}}

#colophon .f-brand{display:flex;align-items:center;gap:10px;min-height:30px;font-weight:800;font-size:17px;line-height:1.5;color:#fff}
#colophon .f-brand .sq{width:30px;height:30px;border-radius:8px;background:#1E6FEB;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
#colophon .f-tagline{margin:12px 0 0;padding-left:40px;font-size:13.5px;line-height:1.5;color:#9FB1CB;max-width:calc(34ch + 40px)}

/* every column starts on the same line: headings share the brand's 30px row height, so their centres and the first rows of links line up */
#colophon .f-col h5,#colophon .f-social h5{color:#fff;font-size:12.5px;font-weight:700;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;margin:0 0 12px;padding:0;border:0;min-height:30px;display:flex;align-items:center;gap:8px;font-family:inherit}
#colophon .f-col h5::before,#colophon .f-social h5::before{content:"";width:14px;height:2px;border-radius:2px;background:#1E6FEB}

/* hanging indent: the dash / logo hangs at the left edge, and everything under it lines up with the heading text */
#colophon .f-col ul{display:grid;gap:8px;padding-left:22px}
#colophon .f-col li{display:flex;line-height:1.35}
#colophon .f-col a{color:#B7C6DE;text-decoration:none;font-size:14px;font-weight:500;line-height:1.35;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:color .15s ease,gap .15s ease}
#colophon .f-col a::after{content:"›";opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease;color:#4E9CFF}
#colophon .f-col a:hover,#colophon .f-col a:focus-visible{color:#fff;text-decoration:none}
#colophon .f-col a:hover::after,#colophon .f-col a:focus-visible::after{opacity:1;transform:none}

/* left column: logo square at the edge, everything else (tagline, Social Links heading, icons) on one line under the logo text */
#colophon .f-social{margin-top:16px;padding-left:40px}
#colophon .f-social h5{min-height:0;margin:0 0 8px}
#colophon .f-social h5::before{display:none}
#colophon .f-social-row{display:flex;gap:8px;margin-top:0}
#colophon .f-social-row a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:background-color .18s ease,transform .18s ease}
#colophon .f-social-row a:hover,#colophon .f-social-row a:focus-visible{background:#1E6FEB;transform:translateY(-2px);color:#fff}
#colophon .f-social-row svg{width:16px;height:16px;display:block}

#colophon .f-bottom{margin-top:28px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
#colophon .f-bottom p{margin:0;font-size:12.5px;line-height:1.5;color:#8FA3C2;font-weight:400}
#colophon .f-legal{display:flex;gap:18px}
#colophon .f-legal a{font-size:12.5px;line-height:1.5;color:#8FA3C2;text-decoration:none}
#colophon .f-legal a:hover,#colophon .f-legal a:focus-visible{color:#fff;text-decoration:none}