/* ==========================================================================
   Jab Injuries Global - responsive / mobile polish
   Loaded last, so it wins over the Astra + Elementor output.

   The restored page was only partly responsive. Fixed here:
     1. the jVectorMap world map kept a fixed 1120px SVG and was cropped
        on every viewport narrower than that (tablet + phone)
     2. the country grid stayed 5-up on tablet (long names wrapped) and
        dropped to 1-up on phones (a ~3500px tall page)
     3. the two large call-to-action buttons kept 100px side padding
     4. the logo was locked to 50% width, tiny on a phone
   ========================================================================== */

/* --- never let anything scroll the page sideways ------------------------- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   1. World map
   jVectorMap writes width/height attributes on the <svg> in pixels and has
   no viewBox, so it cannot shrink. assets/js/responsive-map.js adds the
   viewBox and publishes the real aspect ratio as --jig-map-ratio; the rules
   below then let the container drive the size at any width.
   The !important is needed because the plugin's own resize handler keeps
   writing an inline pixel height on the container.
   -------------------------------------------------------------------------- */
.rvm-map-container {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: var(--jig-map-ratio, 1.5435268);
}

/* jVectorMap nests the drawing: .rvm-map-container > .jvectormap-container > svg */
.rvm-map-container .jvectormap-container {
    width: 100% !important;
    height: 100% !important;
}

.rvm-map-container svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* keep the zoom buttons comfortably tappable */
.jvectormap-zoomin,
.jvectormap-zoomout {
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   2. Country button grid
   Six inner sections of five `elementor-col-20` columns, plus two
   `elementor-col-16` sections. Elementor's own breakpoints only ever give
   5-up or 1-up, so re-flow them here.
   -------------------------------------------------------------------------- */

/* tablet / small laptop: 3 per row so long names stay on one line */
@media (max-width: 1024px) {
    .elementor-33 .elementor-section.elementor-inner-section > .elementor-container {
        flex-wrap: wrap;
    }

    .elementor-33 .elementor-column.elementor-col-20,
    .elementor-33 .elementor-column.elementor-col-16 {
        width: 33.3333% !important;
    }
}

/* phones: 2 per row - keeps the page a sane length and the labels readable */
@media (max-width: 767px) {
    .elementor-33 .elementor-column.elementor-col-20,
    .elementor-33 .elementor-column.elementor-col-16 {
        width: 50% !important;
        /* each inner section holds exactly 5 buttons, so 2-up leaves a single
           button on the last row; let it grow to fill instead of sitting in a
           ragged half-width gap */
        flex-grow: 1;
    }

    /* the empty spacer columns only add dead vertical space on a phone */
    .elementor-33 .elementor-column > .elementor-widget-wrap:not(.elementor-element-populated) {
        display: none;
    }

    /* tighten the gap between stacked button rows */
    .elementor-33 .elementor-section.elementor-inner-section .elementor-widget:not(:last-child) {
        margin-block-end: 10px;
    }
}

/* very narrow phones: one clear column rather than two cramped ones */
@media (max-width: 360px) {
    .elementor-33 .elementor-column.elementor-col-20,
    .elementor-33 .elementor-column.elementor-col-16 {
        width: 100% !important;
    }
}

/* country buttons: comfortable tap target, no squashed text */
@media (max-width: 1024px) {
    .elementor-33 #landing-button .elementor-button {
        min-height: 44px;
        padding-inline: 10px;
        line-height: 1.25;
    }

    .elementor-33 #landing-button .elementor-button .elementor-button-text {
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
   3. The two large call-to-action buttons
   post-33.css hard-codes `padding:20px 100px`, which forced the label onto
   two lines on a phone. Scale the padding down instead.
   The `.elementor-element` class is repeated here on purpose: post-33.css
   writes `.elementor-33 .elementor-element.elementor-element-07f9f0c ...`,
   so the selector has to match that specificity to win.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .elementor-33 .elementor-element.elementor-element-07f9f0c .elementor-button,
    .elementor-33 .elementor-element.elementor-element-6ba0c40 .elementor-button {
        padding: 18px 48px;
    }
}

@media (max-width: 767px) {
    .elementor-33 .elementor-element.elementor-element-07f9f0c .elementor-button,
    .elementor-33 .elementor-element.elementor-element-6ba0c40 .elementor-button {
        padding: 16px 18px;
        font-size: 15px;
        width: 100%;
        max-width: 340px;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   4. Logo - wp-custom-css pins it to 50%, too small on a phone
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .elementor .home-logo img {
        max-width: 82%;
    }
}

@media (max-width: 480px) {
    .elementor .home-logo img {
        max-width: 92%;
    }
}

/* --------------------------------------------------------------------------
   5. Odds and ends
   -------------------------------------------------------------------------- */

/* the login button sits alone at the top-left; centre it on a phone */
@media (max-width: 767px) {
    .elementor-33 .elementor-element-0f470d1 .elementor-button-wrapper {
        text-align: center;
    }
}

/* the visitor counters read as one row of two on a phone - keep them legible */
@media (max-width: 767px) {
    .ekit-wid-con .elementskit-funfact .funfact-content .number-percentage-wraper {
        font-size: 22px;
    }

    .elementskit-funfact-icon {
        font-size: 38px;
        margin: 10px;
    }
}

/* the page background is a wide banner; stop it stretching oddly on tall
   narrow screens (the original only handled >=1025px) */
@media (max-width: 767px) {
    body.elementor-page-33:not(.elementor-motion-effects-element-type-background) {
        background-size: 180% auto;
        background-repeat: no-repeat;
    }
}