/* ============================================================ SGFINANCECALCULATORS.COM — GLOBAL MOBILE FIX mu-plugin loads this in on every page ============================================================ */ /* 1. GLOBAL SAFE CONTAINER */ *,*::before,*::after{box-sizing:border-box;} html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;} /* 2. SITE LOGO — constrain the 512x512 logo on all screen sizes */ .custom-logo-link img, .custom-logo, .site-logo img, .header-logo img, .kadence-logo img{ max-height:48px !important; width:auto !important; max-width:160px !important; height:auto !important; display:block !important; object-fit:contain !important; } @media (max-width:768px){ .custom-logo-link img, .custom-logo, .site-logo img, .header-logo img, .kadence-logo img{ max-height:44px !important; max-width:140px !important; width:auto !important; height:auto !important; } } /* 3. SAFE WRAPPERS */ .tool-wrap,.input-panel,.results-panel, .calc-grid,.calc-section, .content-section,.fact-band, .ceiling-band,.formula-band{ box-sizing:border-box; max-width:100%; overflow-x:hidden; } /* 4. NUCLEAR: kill min-width on ALL tool descendants */ .tool-wrap *{min-width:0;box-sizing:border-box;} /* 5. Images, canvas, video always responsive */ img,canvas,video,svg{display:block;max-width:100%;} /* 6. GRID COLLAPSE — calculator two-column → single column at 900px */ @media (max-width:900px){ .calc-grid{ grid-template-columns:1fr !important; width:100% !important; max-width:100% !important; gap:16px !important; } .input-panel,.results-panel{ width:100% !important; max-width:100% !important; min-width:0 !important; position:static !important; top:auto !important; } canvas{width:100% !important;max-width:100% !important;} } /* 7. CONTENT GRIDS */ @media (max-width:768px){ .example-grid,.steps-grid,.trust-cards, .quick-cols,.sg-about-grid{grid-template-columns:1fr !important;} .related-grid{grid-template-columns:1fr 1fr !important;} .sg-silos{grid-template-columns:1fr 1fr !important;} } @media (max-width:480px){ .related-grid,.sg-silos,.sg-calc-grid{grid-template-columns:1fr !important;} } /* 8. BANDS — wrap chips on mobile */ @media (max-width:640px){ .ceiling-band-inner,.fact-band-inner{flex-wrap:wrap !important;gap:8px !important;} .ceiling-chip,.fact-chip{min-width:70px !important;} .formula-band-inner{flex-direction:column !important;align-items:flex-start !important;} } /* 9. TABLES */ @media (max-width:640px){ .sg-table{display:block !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;} } /* 10. TYPOGRAPHY & BUTTONS */ @media (max-width:640px){ .calc-btn{font-size:14px !important;padding:12px !important;} .action-row{flex-direction:column !important;gap:10px !important;} .btn-pdf,.btn-wa{width:100% !important;} input,select,textarea{font-size:max(16px,1rem) !important;} .input-wrap input,.input-wrap select{font-size:16px !important;} }