/* =====================================================================
   SV Infotech Software Solutions – Phase 6: mobile & layout fixes
   - NEW file. No existing CSS file is edited; this only overrides.
   - NO colour changes: only existing colours (var(--sv-primary, #ff156a), #fff, #333...).
   - "html body" prefix = wins over the old inline <style> in header.php
     without touching it.
   ===================================================================== */

/* ---------- 1. No sideways scrolling on phones ---------- */
html, body { overflow-x: clip; }
/* Portfolio + Cyber Security pages: their own style sets body{overflow-x:hidden} (+ height:100%),
   which turns <body> into its own scroll box -> the window never scrolls, so the sticky white
   header never switches on and page content shows behind the menu. 'clip' hides sideways
   overflow the same way but does not create a scroll box. */
html body { overflow-x: clip; overflow-y: visible; }
.learning-experience, .creative-benefits { overflow-x: clip; }   /* course pages: decorative circles */

/* ---------- 2. Buttons: old rule forced EVERY .btn to exactly 158 x 60 px ---------- */
html body .btn {
    width: auto;
    min-width: 158px;
    height: auto;
    min-height: 60px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}
html body .btn-seo-tools { min-height: 48px; white-space: nowrap; }
@media (max-width: 575.98px) {
    html body .btn { min-width: 0; min-height: 48px; padding-left: 18px; padding-right: 18px; }
}

/* ---------- 3. "Get In Touch" panel ----------
   Desktop: unchanged (side tab).
   Phones/small tablets: the 171px pink tab covered page content and buttons.
   Now: small pill at the bottom-left; the form slides up as a bottom sheet. */
@media (max-width: 767.98px) {
    html body .custom-sticky-form {
        top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; max-width: 100%;
        transform: translateY(100%);
        border-radius: 16px 16px 0 0; border-bottom: 0;
        padding: 6px 18px 18px !important;
        z-index: 1000;
    }
    html body .custom-sticky-form.active { right: 0; transform: translateY(0); box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
    html body .custom-sticky-form .form-wapper { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    html body .custom-sticky-form h3 { font-size: 19px !important; }
    html body .toggle-sticky {
        top: -58px; left: 14px; height: 44px; width: auto; line-height: 44px;
        transform: none; border-radius: 22px; padding: 0 18px;
        box-shadow: 0 6px 18px rgba(var(--sv-primary-rgb, 255,21,106), .35);
    }
    html body .toggle-sticky span.sticky-btn {
        transform: none; width: auto; height: auto; font-size: 14px; line-height: 44px; white-space: nowrap;
    }
    html body .toggle-sticky.active { height: 44px; width: 44px; padding: 0; left: auto; right: 14px; border-radius: 50%; }
    html body .toggle-sticky.active::before { border-radius: 50%; }
    /* inputs: 16px stops iPhone from zooming into the form */
    html body .custom-sticky-form .form-control { font-size: 16px; }
}

/* ---------- 4. Forms on phones ---------- */
@media (max-width: 767.98px) {
    html body .form-control, html body .form-select { font-size: 16px; }
}
@media (max-width: 360px) {
    html body .g-recaptcha { transform: scale(.88); transform-origin: 0 0; }
}

/* ---------- 5. Mobile menu: bigger tap targets, scroll if long ---------- */
@media (max-width: 991.98px) {
    html body #navbarNav { max-height: calc(100vh - 90px); overflow-y: auto; }
    html body .navbar-nav .nav-link { padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* ---------- 6. Footer ----------
   The theme's Isotope script also grabs the footer's ".grid" boxes and sets their
   height to 0, so columns overlapped the phone numbers (hidden by huge 190/450/670px gaps).
   Undo that here, plus the inline negative margins / fixed 300px width. */
html body footer .grid { height: auto !important; position: static !important; }
html body footer .grid > * { position: static !important; left: auto !important; top: auto !important; transform: none !important; }
html body footer .navs-container { gap: 28px !important; }
html body footer .footer-links > div { margin-left: 0 !important; }
html body footer .footer-links li { max-width: 100%; }

html body footer .phone-numbers { flex-wrap: wrap; gap: 12px 24px; }
@media (min-width: 768px) {
    html body footer .footer-links { grid-template-columns: 1fr 1fr 1.7fr !important; }
}
@media (max-width: 767.98px) {
    html body footer .footer-links li[style*="300px"] { width: auto !important; }
    html body footer .footer-links > div:last-child { grid-column: 1 / -1; }   /* Contacts full width */
    html body footer .phone-numbers { flex-direction: column; align-items: flex-start; }
    html body footer .footer-links a.contact { font-size: 13px; letter-spacing: 0; }   /* long e-mails fit on one line */
    html body footer .phone-numbers span img { width: 36px; height: 36px; }
    html body footer .phone-numbers span a { padding-top: 8px; font-size: 14px; }
}

/* ---------- 7. Stats counters (About / Services): centred 2 x 2 on phones ---------- */
@media (max-width: 575.98px) {
    html body .row > [class*="col-"]:has(> .counter) { width: 50%; flex: 0 0 50%; }
    html body .counter.style-2 { text-align: center; margin-bottom: 26px; }
    html body .counter.style-2 img { display: block; margin: 0 auto 8px; height: 64px; width: auto; object-fit: contain; }
    html body .counter.style-2 .count-number { font-size: 34px; }
    html body .counter.style-2 h5 { font-size: 14px; }
}

/* ---------- 8. Small-screen typography rhythm ---------- */
@media (max-width: 575.98px) {
    html body h1, html body .h1 { word-wrap: break-word; }
    html body .page-title-pattern { left: 0; right: 0; }
    html body .page-title-pattern img { max-width: 100%; height: auto; }
    html body iframe { max-width: 100%; }
}

/* ---------- 9. Accessibility: visible keyboard focus (brand pink) ---------- */
html body a:focus-visible, html body button:focus-visible, html body .btn:focus-visible,
html body input:focus-visible, html body textarea:focus-visible, html body select:focus-visible {
    outline: 3px solid var(--sv-primary, #ff156a); outline-offset: 2px;
}

/* ---------- 10. Phase 7: case-study title is now the page <h1> (SEO) ----------
   Keep exactly the old <h2> look: those pages have their own "h1:after" underline
   and inline-block rule, which must not apply to the project title. */
html body h1.project-title { display: block; letter-spacing: 2px; }
html body h1.project-title::after { content: none; display: none; }