/* ============================================================================
   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 tables are now wrapped in .table-scroll by
       rich-content-tables.js — see the rule outside the media queries below.

       The rule that used to live here set `display: block` on the table
       itself. That does stop the page stretching, but it also stops the
       browser laying the element out as a table: column widths are dropped
       and cells stop lining up. That was the reported "tables scramble", so
       it is gone rather than merely narrowed. */

    /* 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;
    }
}

/* ============================================================================
   Rich-content tables — applies at EVERY width, not just mobile.

   rich-content-tables.js wraps each editor-authored table in .table-scroll.
   The table keeps normal table layout (so columns stay aligned); the wrapper
   is the thing that scrolls when the table is wider than the column it sits
   in. A desktop-width page with a very wide table needs this just as much as
   a phone does, which is why it lives outside the media queries.
   ============================================================================ */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
}

/* The wrapper owns the spacing now, so the table must not add its own. */
.table-scroll > table {
    margin: 0;
    /* Fill the space when it fits; grow past it (and scroll) when it does not.
       `width: 100%` alone would squeeze a wide table until the columns
       collapsed, which is the behaviour being fixed. */
    width: auto;
    min-width: 100%;
}

/* A scrollable box is invisible until you try it, so hint at the edge. */
.table-scroll {
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left,  #fff 30%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .14), transparent) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .14), transparent) right center;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ----------------------------------------------------------------------------
   Rich content pasted from a desktop-era editor often carries inline side
   margins (the Core HSA blue box had `margin: 12px 72px`). On a phone those
   72px eat most of the readable width, and there is no way to remove them from
   inside the editor UI, so the author is stuck with them.

   Horizontal inline margins are dropped on small screens. Vertical spacing is
   left alone, because that is usually deliberate.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    #productcontent div[style*="margin"],
    .section-block div[style*="margin"],
    .productdiv div[style*="margin"],
    .rich-content div[style*="margin"],
    .post-excerpt div[style*="margin"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ----------------------------------------------------------------------------
   Order buttons inside editor content: size to their text, and keep a gap.

   style.css carries a "side-by-side horizontal buttons on mobile" block that
   pins every `.rich-content` button to a fixed 125px box at 13px text, and a
   companion rule that sets `margin-left/right: auto`. Both sit OUTSIDE the
   `max-width: 991.98px` media query they were written for, so they applied at
   every width: on a desktop the two buttons under each HRA plan design were
   squeezed into identical 125px pills with `auto` margins computing to 0 —
   the two pills touched, with no gap at all. That is the "buttons look
   connected" report.

   Rather than re-cut that block (its table rules are deliberately global and
   are load-bearing elsewhere), restore sane sizing from 992px up. The 125px
   mobile treatment below 992px is untouched.

   The selectors must out-specify `.rich-content p a[style*="background-color"]`
   in that block — an attribute selector counts, which is why the plain
   `.rich-content a.ht-btn` form alone loses.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    .rich-content a.ht-btn,
    .rich-content .ht-btn,
    .rich-content p a.ht-btn[style],
    .rich-content a.ht-btn[style*="background-color"],
    .pd-info-sec a.ht-btn,
    .productdiv a.ht-btn,
    .order-form-section a.ht-btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        font-size: 15px !important;
        padding: 6px 24px !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .blog-page-type .rich-content a.ht-btn,
    #blogdetail a.ht-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* The gap itself, at every width. Adjacent-sibling so it only ever applies
   between two buttons that sit next to each other — a lone button keeps its
   own margins. Bootstrap's `ms-2` on the second button is defeated by the
   `margin-left: auto !important` rules above, so the gap has to be stated
   here with the same weight. */
.rich-content a.ht-btn + a.ht-btn,
.rich-content p a.ht-btn[style] + a.ht-btn[style],
.rich-content a.add-to-c-btn + a.add-to-c-btn {
    margin-left: 14px !important;
}