/*
 * npav-responsive.css
 * Responsive overrides — added AFTER all other CSS.
 * Only addresses genuine mobile breakage; does not touch desktop layout.
 */

/* ==========================================================
   1. FEEDBACK SIDEBAR — fixed 600px overflows phones
   ========================================================== */
@media (max-width: 767px) {
    #feedbackSidebar {
        width: 100% !important;
        max-width: var(--size-viewport-width) !important;
    }
}

/* ==========================================================
   2. LEGAL PAGES — subtitle nowrap must wrap on small screens
   ========================================================== */
@media (max-width: 576px) {
    body.npav-dark-legal .page-header-subtitle {
        white-space: normal !important;
        text-wrap: balance;
    }
}

/* ==========================================================
   3. PAGE HEADER — scale down title on very small screens
   ========================================================== */
@media (max-width: 375px) {
    .page-header-title {
        font-size: var(--font-size-xl) !important;
    }
    .page-header-subtitle {
        font-size: var(--font-size-sm) !important;
    }
}

/* ==========================================================
   4. NAVBAR — logo size on very small screens
   ========================================================== */
@media (max-width: 375px) {
    .navbar-brand img {
        height: var(--space-36);
        width: auto;
    }
}

/* ==========================================================
   5. TOP-BAR — already d-none d-md-block; ensure no bleed
   ========================================================== */
@media (max-width: 767px) {
    .top-bar {
        display: none !important;
    }
}

/* ==========================================================
   6. FOOTER — copyright text & social icons on small screens
   ========================================================== */
@media (max-width: 575px) {
    .footer-copyright {
        text-align: center;
    }
    .footer-copyright .col-md-8,
    .footer-copyright .col-md-4 {
        text-align: center !important;
    }
    .footer-copyright .social-icons {
        margin-top: var(--space-rem-sm);
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
    }
    /* footer CTA cards stack and don't overflow */
    .footer-cta-card {
        flex-direction: column;
        gap: var(--space-rem-sm);
    }
    .cta-arrow {
        display: none;
    }
}

/* ==========================================================
   7. FOOTER LINK COLUMNS — col-6 can be too narrow at 320px
   ========================================================== */
@media (max-width: 375px) {
    .single-footer-widget .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================================
   8. FORMS — inputs, textareas, selects full-width on mobile
   ========================================================== */
@media (max-width: 575px) {
    .form-control,
    .form-select,
    textarea {
        font-size: var(--font-size-base) !important; /* prevents iOS auto-zoom on focus */
    }
}

/* ==========================================================
   9. MODALS — prevent overflow on small phones
   ========================================================== */
@media (max-width: 575px) {
    .modal-dialog {
        margin: var(--space-rem-sm);
    }
    .modal-content {
        border-radius: var(--radius-base);
    }
}

/* ==========================================================
   10. CART MODAL — ensure it doesn't overflow mobile
   ========================================================== */
@media (max-width: 575px) {
    #cartModal .modal-dialog {
        margin: var(--space-0);
        max-width: 100%;
    }
    #cartModal .modal-content {
        border-radius: var(--space-0);
        min-height: var(--size-viewport-height-dynamic);
    }
}

/* ==========================================================
   11. PAGE SECTIONS — ptb-100 too tall on mobile
   ========================================================== */
@media (max-width: 575px) {
    .ptb-100 {
        padding-top: var(--space-60) !important;
        padding-bottom: var(--space-60) !important;
    }
    .ptb-50 {
        padding-top: var(--space-30) !important;
        padding-bottom: var(--space-30) !important;
    }
}

/* ==========================================================
   12. PRODUCT / BUY NOW TABS — already wrap at 768px;
       extra fix for 320–375px (2-column too tight)
   ========================================================== */
@media (max-width: 375px) {
    .tab.bunow-tab li.nav-item {
        flex: 0 0 100% !important;
    }
}

/* ==========================================================
   13. FEELTOCONNECT (thank-you / payment sections) —
       padding percentage causes overflow on very narrow screens
   ========================================================== */
@media (max-width: 575px) {
    section.thankyou .feeltoconnect .container-fluid,
    section.paymentcancel .feeltoconnect .container-fluid {
        padding: var(--space-rem-md) !important;
    }
    .feeltoconnect h6 {
        font-size: var(--font-size-md) !important;
    }
}

/* ==========================================================
   14. REGFORM CARD — padding too large on small screens
   ========================================================== */
@media (max-width: 575px) {
    .regform,
    .form-padds {
        padding: var(--space-rem-1-25) !important;
    }
}

/* ==========================================================
   15. TICKET PAGE — two-column layout already switches to
       single column at <992px; remove any bottom overflow
   ========================================================== */
@media (max-width: 575px) {
    .ticket-sidebar-card {
        padding: var(--space-14) !important;
    }
}

/* ==========================================================
   16. HERO CAROUSEL — ensure image fills correctly on mobile
   ========================================================== */
@media (max-width: 575px) {
    .hero-slider-area img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}

/* ==========================================================
   17. IMAGES — global safety net
   ========================================================== */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   18. PREVENT HORIZONTAL SCROLL (global safety net)
   ========================================================== */
/* Anchored to html only: setting overflow-x on body/.main-contain too used to
   force their overflow-y to compute as auto (CSS overflow-interaction rule),
   making them independent scroll boxes nested inside the real page scrollbar
   and producing two visible scrollbars. */
html {
    overflow-x: hidden;
}

/* ==========================================================
   19. SCROLL-TOP BUTTON — clear mobile bottom nav
   ========================================================== */
@media (max-width: 767px) {
    /* Was 74px, which put this right on top of the chat widget/feedback tab
       on mobile. 100px keeps clearance from both while still sitting above
       the mobile bottom nav this rule exists for. */
    #scrollTopBtn {
        bottom: var(--space-100) !important;
    }
}

/* ==========================================================
   20. MEGA MENU — on mobile it's static and inside collapse;
       max-height allows scrolling without overflowing viewport
   ========================================================== */
@media (max-width: 991px) {
    .mega-menu-qh {
        max-height: var(--size-mega-menu-max) !important;
    }
}

/* ==========================================================
   21. CONTACT PAGE — px-5 head-office card too tight on mobile
   ========================================================== */
@media (max-width: 575px) {
    .contactus .px-5 {
        padding-left: var(--space-rem-md) !important;
        padding-right: var(--space-rem-md) !important;
    }
}

/* ==========================================================
   22. CAREER PAGE — job title & experience text overflow at 320px
   ========================================================== */
.jobtitle,
.jobexperience,
.jobtype,
.jobdescip {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ==========================================================
   23. SITEMAP — nested list indentation overflow at 320px
   ========================================================== */
@media (max-width: 575px) {
    .sitemapsection ul ul {
        margin-left: var(--space-rem-md) !important;
        padding-left: var(--space-rem-0-75) !important;
    }
    .sitemapsection a {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ==========================================================
   24. ABOUT PAGE — expertise card flex-wrap on very small screens
       col-6 at 320px = 160px; reduce inner padding so icons breathe
   ========================================================== */
@media (max-width: 400px) {
    .clsbgabout {
        padding: var(--space-rem-0-75) !important;
    }
}