/* =========================================================
   Websnoogie WHMCS Child Theme — ws-mods.css
   Responsive and layout overrides for twenty-one-mods
   ========================================================= */

/* Prevent horizontal overflow site-wide — body only, not html */
/* Setting overflow-x:hidden on BOTH html+body makes body a scroll container */
/* which clips vertical content on iOS Safari */
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Marquee — contain to viewport on all screen sizes */
/* Absolutely-positioned span with left:100% animation cannot inflate scrollWidth */
.marquee {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 32px !important;
    box-sizing: border-box !important;
}
.marquee span {
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    white-space: nowrap !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    animation: ws-scroll 60s linear infinite !important;
}
@media (max-width: 768px) {
    .marquee { height: 30px !important; }
    .marquee span { animation-duration: 40s !important; font-size: 16px !important; }
    #header { margin-top: 0 !important; }
}
@keyframes ws-scroll {
    0%   { left: 100%; }
    100% { left: -200%; }
}

/* Prevent Safari auto-zoom: inputs < 16px cause Safari to zoom the entire page */
@media (max-width: 767px) {
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* Newsletter announcement page — constrain images on mobile */
img[src*='/newsletters/'] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ── Announcement email mobile fix (2026-06-07) ───────────────────────── */
.ws-email-wrap > table { table-layout: fixed !important; width: 100% !important; max-width: 100% !important; }
.ws-email-wrap > table td > table { table-layout: fixed !important; width: 100% !important; }
.ws-email-wrap td.ws-logo-td { width: 220px !important; }
.ws-email-wrap img { max-width: 100% !important; height: auto !important; display: block; }
.ws-email-wrap td { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
@media only screen and (max-width: 640px) {
    .ws-email-wrap .ws-hero    { padding: 32px 20px 28px !important; }
    .ws-email-wrap .ws-tipbar  { padding: 16px 16px 16px 20px !important; }
    .ws-email-wrap .ws-tipbody { padding: 20px 20px 24px !important; }
    .ws-email-wrap .ws-section { padding: 28px 20px !important; }
    .ws-email-wrap .ws-footer  { padding: 16px 20px !important; }
    .ws-email-wrap .ws-h1      { font-size: 26px !important; }
}