/**
 * Responsive fixes.
 *
 * The Elementor export is already responsive at the layout level - no page
 * scrolls sideways at any width. What it does not handle is a handful of
 * widgets that keep their desktop padding / type size in the 768-1024px band,
 * where columns are still 3-up but only ~230px wide, so their text is clipped.
 * Loaded last, after every page stylesheet, so these overrides win.
 */

/* ---------------------------------------------------------------------------
   1. Nothing may ever be cut off. Long unbreakable tokens - "Local/Domestic",
      "SBLC/ Foreign BG", an email address - wrap instead of overflowing.
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
p, li, td, th,
.elementor-heading-title,
.elementskit-info-box-title,
.elementor-icon-box-title,
.elementor-icon-list-text {
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   2. Tablet band only (768-1024px). Below 768px Elementor stacks columns to
      full width and the desktop values are fine again, so these must not leak
      down to phones.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Home icon boxes carry 40px/60px side padding - in a 231px column that
       leaves 131px of text area and the label spills out of it. */
    .elementor-widget-icon-box > .elementor-widget-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Even trimmed, an icon sitting beside the text needs ~223px of a 191px
       column. Elementor already stacks these on phones via
       .elementor-mobile-position-top - do the same one breakpoint earlier. */
    .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper {
        align-items: unset !important;
        flex-direction: column;
        gap: var(--icon-box-icon-margin, 15px);
        text-align: center;
    }

    /* Service / Our Firm cards: a 24px headline cannot fit "Local/Domestic"
       in a 142px box, and the slash gives the browser no break opportunity. */
    .elementskit-info-box-title {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    .elementskit-info-box .box-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* About Us tab strip is a single nowrap row 448px wide in a 377px box. */
    .eael-advance-tabs .eael-tabs-nav > ul {
        flex-wrap: wrap !important;
    }
}

/* ---------------------------------------------------------------------------
   3. Phones (<=767px). The two floating partner badges are position:fixed at
      the hero's right edge; at 375px they land on top of the headline and the
      "Only the Best is all that Stays" line. Move them clear of the copy, into
      the bottom-right corner where a floating badge normally lives, and shrink
      them so they never take more than a quarter of the screen.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .elementor-element-6f80acb,
    .elementor-element-47ac3a2 {
        top: auto !important;
        right: 10px !important;
        left: auto !important;
        width: 92px !important;
        max-width: 92px !important;
        --container-widget-width: 92px;
    }

    .elementor-element-47ac3a2 { bottom: 14px !important; }   /* lower badge */
    .elementor-element-6f80acb { bottom: 76px !important; }   /* sits above it */

    .elementor-element-6f80acb img { height: auto !important; }

    /* No hover-scale on touch - it would push the badge off the screen edge. */
    .elementor-element-6f80acb > .elementor-widget-container:hover,
    .elementor-element-47ac3a2 > .elementor-widget-container:hover {
        --e-transform-translateX: 0;
        --e-transform-scale: 1;
    }
}