/* ============================================================================
   responsive.css — mobile/tablet overrides only.
   Loaded AFTER style.css. Every rule is scoped inside a max-width media query
   so desktop (>= 1200px) rendering is never affected. Uses !important where an
   inline style= attribute or a page-level <style> block must be overridden.
   ============================================================================ */

/* ---------------------------------------------------------------- <= 1199px
   Below the desktop-nav breakpoint (mobile header is active). */
@media (max-width: 1199.98px) {

    /* Keep the mobile header row on one line and vertically centered */
    .header-right-box .mobile-search .search-form-top {
        margin-right: 0;
    }

    .mobile-navigation-icon {
        flex: 0 0 auto;
    }
}

/* ---------------------------------------------------------------- <= 991px */
@media (max-width: 991.98px) {

    /* Editor-authored (TinyMCE) tables in rich content have no
       .table-responsive wrapper — make them scroll inside their own box
       instead of stretching the page. */
    .rich-content table,
    #productcontent table,
    .post-excerpt table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Editor iframes keep a fixed pixel height — let them scale. */
    .post-excerpt iframe,
    .rich-content iframe {
        max-width: 100%;
    }

    /* BS4 leftover .embed-responsive has no aspect-ratio box in BS5 —
       let the media element size itself fluidly. */
    .embed-responsive {
        max-width: 100%;
    }

    .embed-responsive .embed-responsive-item {
        width: 100%;
        height: auto;
        max-height: none;
    }
}

/* ---------------------------------------------------------------- <= 767px */
@media (max-width: 767.98px) {

    /* --- Global guards ------------------------------------------------ */
    img,
    video,
    iframe {
        max-width: 100%;
    }

    /* Long unbreakable strings (emails, URLs, file names) must wrap. */
    .footercontactinfo,
    .footerpara,
    .post-excerpt,
    .rich-content {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* --- Header top bar ---------------------------------------------- */
    .headerlink {
        font-size: 15px;
        line-height: 30px;
        white-space: nowrap;
    }

    .header__logo img {
        max-width: 140px;
        height: auto;
    }

    /* --- Home / product blog cards ----------------------------------- */
    /* Pages pin .single-blog-lg-item to height:500px in their own <style>
       blocks; in a single-column phone layout that clips or stretches the
       cards — let content set the height. */
    .single-blog-lg-item {
        height: auto !important;
        max-height: none !important;
    }

    /* --- Testimonial slider (home) ----------------------------------- */
    /* Inline page CSS caps the card at 350px and hard-clips the quote;
       let the active slide grow with its text on phones. */
    .testimonial-slider__single {
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
    }

    /* --- Forms: legacy two-up field pairs ----------------------------- */
    /* Theme stacks .contact-input .contact-inner pairs only below 576px;
       stack them for the whole phone band. */
    .contact-input .contact-inner {
        float: none !important;
        width: 100% !important;
    }

    #plan_design .contact-input .contact-inner {
        width: 100% !important;
    }

    /* Carrier tag inputs (phiperson) leave room for the absolute-positioned
       "+" button. */
    .phiperson input {
        width: 88% !important;
    }

    /* Select2 / tagsinput fields must never exceed their container. */
    .select2-container {
        max-width: 100%;
    }

    .select2-container .select2-search__field,
    .bootstrap-tagsinput,
    .bootstrap-tagsinput input {
        max-width: 100% !important;
    }

    /* --- Auth / order form cards ------------------------------------- */
    .rowedit {
        padding-left: 0;
        padding-right: 0;
    }

    .bg-lightblue {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* --- Buttons ------------------------------------------------------ */
    /* Pill CTAs that sit side by side may wrap instead of overflowing. */
    .ht-btn {
        max-width: 100%;
        white-space: normal;
    }
}

/* ---------------------------------------------------------------- <= 575px */
@media (max-width: 575.98px) {

    /* Product gallery thumbnails: the rail column is narrow on phones. */
    .preview-thumbnail img.product-image,
    .preview-thumbnail.nav-tabs li img {
        width: 48px !important;
        height: 48px !important;
        max-width: 100%;
        object-fit: cover;
    }

    /* Footer widget columns: keep the two-up layout readable. */
    .footer-area-wrapper .mobwid {
        width: 50% !important;
    }

    .footer-widget__title {
        font-size: 18px;
    }

    /* Copyright line */
    .copyright-text {
        font-size: 14px;
        line-height: 22px;
        display: block;
    }

    /* Map iframe in footer */
    .footer-area iframe {
        height: 220px;
    }
}