/*
 * Mobile (phone) optimisation, layered on top of the template.
 *
 * Loaded LAST so it can correct the "Final type tuning" block at the end of
 * responsive.css. That block re-declares the type scale with
 * `clamp(<floor>, <vw>, <ceiling>) !important` to suit the local Gadazidvebi24
 * fonts, but every floor is a desktop value (body 18px, .text-size-100 40px,
 * .text-size-66 30px) and `!important` outranks the template's own
 * max-width:575px rules. The result on a phone: type never scales down.
 *
 * That matters more in Georgian than it would in English. Georgian has no
 * hyphenation and builds long single tokens, so a heading is often ONE word
 * that cannot break: at the 40px floor "საქართველოში" measures 398px, wider
 * than a 390px iPhone viewport. Every page therefore scrolled sideways
 * (home: 487px of content in a 390px window).
 *
 * Fixes below, in order:
 *   1. a phone tier for the clamped type scale (the overflow's root cause)
 *   2. last-resort wrapping so no single word can ever exceed its box
 *   3. 44x44 minimum touch targets (WCAG 2.5.8)
 *   4. container padding / spacing at phone widths
 *   5. iOS-specific input and safe-area handling
 *
 * Breakpoint is 767px: the template already treats <=767 as its phone tier.
 */

/* ------------------------------------------------------------------ *
   1. Type scale — phone tier
   ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
    /*
     * Re-clamp with phone-appropriate floors. `vw` units are kept as the
     * middle term so type still scales smoothly between 320px and 767px
     * instead of stepping at the breakpoint. !important is required to
     * outrank the trailing block in responsive.css.
     */
    body {
        font-size: clamp(15px, 4vw, 17px) !important;
        line-height: 1.6 !important;
    }

    p,
    .footer-con .middle_portion .contact a,
    .footer-con .middle_portion .contact p {
        font-size: clamp(15px, 4vw, 17px) !important;
        line-height: 1.62 !important;
    }

    /*
     * Headings. The floors here are what actually stop the sideways scroll:
     * at 22px, the longest word on the site fits inside a 320px viewport.
     */
    .text-size-100 {
        font-size: clamp(24px, 7.2vw, 34px) !important;
        line-height: 1.22 !important;
    }

    .sub-heading2 {
        font-size: clamp(22px, 6.4vw, 30px) !important;
        line-height: 1.24 !important;
    }

    .text-size-66 {
        font-size: clamp(22px, 6.2vw, 30px) !important;
        line-height: 1.26 !important;
    }

    .heading3 {
        font-size: clamp(18px, 4.8vw, 22px) !important;
        line-height: 1.4 !important;
    }

    .text-size-30 {
        font-size: clamp(18px, 4.8vw, 22px) !important;
        line-height: 1.38 !important;
    }

    .text-size-26,
    .faq-con .accordion-card .text-size-26,
    .services-con .service-text1 .text-size-26,
    .testimonials-con .carousel .text-size-26,
    .news-and-articles-con .text-size-26,
    .pricing-plans-con .pricing-box .text-size-26,
    .our-features-con .feature-box .text-size-26,
    .contact-info-con .contact-info-box .text-size-26,
    .privacy-policy-content-con .text-size-26 {
        font-size: clamp(17px, 4.4vw, 20px) !important;
        line-height: 1.44 !important;
    }

    .heading4,
    .text-size-22 {
        font-size: clamp(16px, 4.2vw, 19px) !important;
        line-height: 1.44 !important;
    }

    .text-size-20 {
        font-size: clamp(16px, 4.1vw, 18px) !important;
        line-height: 1.46 !important;
    }

    .text-size-18,
    .footer-con .middle_portion .contact p,
    .error-con p {
        font-size: clamp(15px, 4vw, 17px) !important;
        line-height: 1.58 !important;
    }

    /*
     * Form controls stay at 16px minimum: below that, iOS Safari zooms the
     * viewport on focus and the user is left scrolled sideways.
     */
    .text-size-16,
    .primary_btn,
    .elementary_btn,
    .track-btn,
    .submit-btn,
    .contact-btn {
        font-size: clamp(15px, 4vw, 17px) !important;
    }

    .contact-form ul li input,
    .contact-form ul li textarea,
    .contact-form ul li select {
        font-size: 16px !important;
    }

    .text-size-14,
    .small-text,
    .topbar-list li,
    .topbar-list li a {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .header-con .navbar-light .navbar-nav .nav-link,
    .header-con .navbar-light .navbar-nav .dropdown-menu .dropdown-item,
    .navbar-nav .nav-item a,
    .header-contact .contact-btn,
    .header-contact ul li a span.number,
    .footer-con .middle_portion .links li a,
    .footer-con .middle_portion .icon a,
    .footer-con span.footer-info-text,
    .footer-con .copyright-con p,
    .services-con .services-upper-content p,
    .our-features-con .feature-box p,
    .contact-info-con .contact-info-box a,
    .contact-info-con .contact-info-box p,
    .track-your-order-con .step p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    .special-text {
        font-size: clamp(15px, 4vw, 17px) !important;
        line-height: 1.45 !important;
    }

    /* Counters are decorative; they may shrink freely. */
    .stats-box .counter,
    .about-us-con .about-img-con .yellow-box span {
        font-size: clamp(30px, 9vw, 44px) !important;
    }

    .stats-box sup,
    .about-us-con .about-img-con .yellow-box sup {
        font-size: clamp(16px, 4.6vw, 22px) !important;
    }

    .why-choose-us-con .choose-content-con .heading3 {
        font-size: clamp(16px, 4.2vw, 19px) !important;
        line-height: 1.5 !important;
    }
}

/* ------------------------------------------------------------------ *
   2. Word wrapping — the safety net
   ------------------------------------------------------------------ */

/*
 * Smaller type alone is not a guarantee: content is editable, and one long
 * enough Georgian compound would overflow again at any size. `overflow-wrap`
 * breaks a word only when it cannot fit on a line by itself, so normal text
 * is unaffected and this never triggers on desktop.
 *
 * Applied at all widths deliberately — it is a correctness guard, not a
 * phone-only style.
 */
h1, h2, h3, h4, h5, h6,
p, li, a, span, dd, dt, figcaption, label,
.text-size-100, .text-size-66, .sub-heading2, .heading3, .heading4 {
    overflow-wrap: break-word;
}

@media screen and (max-width: 767px) {
    /*
     * The template hard-codes <br> inside several headings to control the
     * desktop line break. On a phone those breaks land mid-thought and waste
     * vertical space, so let the text reflow to the available width.
     */
    .heading-title-con .text-size-66 br,
    .heading-title-con .text-size-100 br,
    .banner-inner-con .text-size-100 br,
    .about-us-con .about-us-content-con .text-size-66 br,
    .send-us-content-con .text-size-66 br {
        display: none;
    }

    /* Last-resort guard for URLs / emails, which have no spaces at all. */
    .contact-info-con .contact-info-box a,
    .footer-con .middle_portion .contact a {
        word-break: break-word;
    }
}

/* ------------------------------------------------------------------ *
   3. Touch targets — WCAG 2.5.8 (minimum 24px), Apple HIG (44px)
   ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
    /*
     * The burger is the site's primary navigation control and measured
     * 30x24px. Its three bars switch to `position: absolute` when the menu is
     * open (the X animation in responsive.css), so growing the button with
     * padding would move them and break the cross. A pseudo-element instead
     * projects a 44x44 hit area from the button's centre, leaving both the
     * box and the bars exactly where they are.
     */
    .navbar-toggler {
        position: absolute;
    }

    .navbar-toggler::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        /*
         * 48px rather than 44: the button is pinned to the container's right
         * edge, so a 44px area centred on a 30px box leaves only ~7px of
         * overhang on the outer side. The extra width keeps the full 44px
         * reachable once the edge is accounted for.
         */
        width: 48px;
        height: 48px;
        transform: translate(-50%, -50%);
    }

    /* Keyboard focus must stay visible (the template removes the outline). */
    .navbar-toggler:focus-visible {
        outline: 2px solid var(--accent--color);
        outline-offset: 4px;
    }

    /* Collapsed-nav links: full-width rows that are comfortably tappable. */
    .header-con .navbar-light .navbar-nav .nav-item > .nav-link {
        display: block;
        padding: 11px 0 !important;
    }

    .header-con .navbar-light .navbar-nav .nav-dropdown-link {
        padding: 9px 0;
    }

    /* City pills inside the collapsed menu. */
    .header-con .navbar-light .navbar-nav .nav-submenu .nav-dropdown-link {
        padding: 7px 12px !important;
        line-height: 20px !important;
    }
}

@media screen and (max-width: 767px) {
    /*
     * Topbar phone/email/address links were 24px tall. Vertical padding lifts
     * them to ~44px without changing the bar's visual rhythm.
     */
    .topbar-list li a {
        padding: 10px 0;
    }

    /*
     * Social icons. The circle itself stays 38px for visual weight; the <a>
     * around it carries the 44px target so the chip does not look oversized.
     */
    .topbar-list--social li a[aria-label] {
        min-width: 44px;
        justify-content: center;
    }

    .topbar-list--social li a[aria-label] i {
        width: 38px;
        height: 38px;
    }

    /*
     * Footer link lists. The links are ~23px of line box, so 11px of vertical
     * padding is what brings them to the 44px minimum.
     */
    .footer-con .middle_portion .links li a,
    .footer-con .middle_portion .contact a {
        display: inline-block;
        padding: 11px 0;
    }

    .footer-con .middle_portion .icon a {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Service/city pills: 30px tall -> 44px, and never narrower than 44px. */
    .service-city-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
    }

    .service-city-links {
        gap: 10px;
    }

    /*
     * Breadcrumb trails. These sit in a horizontal run, so they get height
     * via a min-height + flex rather than padding, which would otherwise
     * push the separators out of alignment.
     */
    .sub-banner-con .breadcrumb li a,
    .breadcrumb li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Buttons stretch to a thumb-friendly size. */
    .primary_btn,
    .elementary_btn,
    .track-btn,
    .submit-btn,
    .contact-btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /*
     * The film's "ვრცლად" chip was 25px tall in the tablet band. Below 576px
     * services-film.css stretches this link over the whole card (inset:0,
     * min-height:0) which is already a much larger target, so this is scoped
     * to leave that treatment alone.
     */
    @media screen and (min-width: 576px) {
        .services-film__card-link {
            min-height: 44px;
            display: inline-flex;
            align-items: center;
        }
    }
}

/* ------------------------------------------------------------------ *
   4. Layout, spacing and media at phone widths
   ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
    /*
     * 30px of side padding costs 60px of a 320px screen. 16px keeps content
     * comfortably inset while giving the text meaningfully more room.
     */
    .padding-rl {
        padding-right: 16px;
        padding-left: 16px;
    }

    /*
     * NOTE: do NOT add `overflow-x: hidden` to html/body here.
     *
     * Setting overflow-x forces the used value of overflow-y to `auto`, which
     * turns the document element into a scroll container — and that disables
     * `position: sticky` for every descendant. The home page's scroll-driven
     * film (.services-film__stage) is sticky, so clipping here stops it
     * pinning to the viewport and the footage scrolls away instead of
     * holding still while the frames advance.
     *
     * The sideways scroll is fixed at the source instead: the type scale in
     * section 1 and the `overflow-wrap` guard in section 2.
     */
    body {
        max-width: 100%;
    }

    /* Media must never dictate layout width. */
    img,
    video,
    iframe,
    figure {
        max-width: 100%;
        height: auto;
    }

    /* Tables are the one thing better scrolled than squeezed. */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * Section rhythm. The template's desktop vertical padding leaves a phone
     * user scrolling through empty space between bands.
     *
     * .services-film is excluded: it is not a content band but a scroll track
     * whose child .services-film__stage is `position: sticky; top: 0`. Padding
     * on the track offsets where the stage comes to rest, so the film would
     * pin 46px below the top of the screen instead of filling it.
     */
    section:not(.services-film) {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    .heading-title-con {
        margin-bottom: 26px;
    }

    /* The homepage illustration is capped at 58% for the desktop badge. */
    .about-us-con .about-img-con {
        width: 100%;
    }

    /*
     * Stats tiles: 2x2 on phones (the markup carries col-6) instead of the
     * four stacked full-width rows Bootstrap's default would give.
     *
     * The template draws a divider with `border-right` on every
     * .col-lg-3.col-md-6 and clears it only on :last-child, which assumes a
     * single row. In a 2x2 that leaves a dangling rule down the middle of the
     * right-hand column, so the borders are re-drawn per grid position:
     * a right border only on the left column, a bottom border only on the
     * top row.
     */
    /*
     * Tile height.
     *
     * `align-items: stretch` only equalises columns within a single flex
     * line, and .row wraps — so the second pair sizes itself independently of
     * the first and the four tiles end up ragged (155 / 155 / 129 / 149).
     * A min-height on the tile itself is what makes all four agree: it is
     * set from the tallest case, a two-line label plus the counter.
     */
    .why-choose-us-con .col-lg-3.col-md-6 {
        border-right: none;
        padding-top: 22px;
        padding-bottom: 22px;
        display: flex;
    }

    /*
     * Labels are one or two lines depending on the phrase ("მუდმივი
     * მზადყოფნა" fits one, "ქალაქი საქართველოში" needs two), which left the
     * tiles ragged. Reserving two lines on every label makes all four agree
     * without hard-coding a tile height that would break if the copy changes.
     */
    .why-choose-us-con .stats-box p {
        min-height: 2.7em;
    }

    .why-choose-us-con .col-lg-3.col-md-6:nth-child(odd) {
        border-right: 2px solid var(--light--blue--color3);
    }

    .why-choose-us-con .col-lg-3.col-md-6:nth-child(-n + 2) {
        border-bottom: 2px solid var(--light--blue--color3);
    }

    /*
     * Equal-height tiles so the two rows line up even though the labels wrap
     * to different line counts ("შესრულებული გადაზიდვა" takes two lines,
     * "24/7" one).
     */
    .why-choose-us-con .stats-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /*
     * The counter and its superscript sit on one baseline. At two-up the
     * template's desktop offsets (sup: -32px) float the "+" clear of the
     * number, so both are pulled back in proportion.
     */
    .stats-box span.counter,
    .stats-text {
        font-size: clamp(34px, 10.5vw, 46px) !important;
        line-height: 1.05 !important;
        margin-bottom: 2px;
    }

    .stats-box sup {
        font-size: clamp(18px, 5.5vw, 24px) !important;
        top: -0.45em;
        right: 1px;
    }

    .stats-box p {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    /* Small type that was below the 14px legibility floor. */
    .city-base-badge {
        font-size: 14px;
    }

    /*
     * Nudged off the 11px floor for legibility. Only in the tablet band —
     * below 576px services-film.css deliberately shrinks this decorative
     * progress label to buy horizontal room on the rail.
     */
    @media screen and (min-width: 576px) {
        .services-film__rail-label {
            font-size: 13px;
        }
    }
}

@media screen and (max-width: 575px) {
    .padding-rl {
        padding-right: 14px;
        padding-left: 14px;
    }

    /* See the note above: the film's scroll track must keep zero padding. */
    section:not(.services-film) {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    /* Full-width CTAs read as buttons rather than stranded links. */
    .contact-form .submit-btn,
    .free-estimate-con .primary_btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ *
   5. iOS / touch platform details
   ------------------------------------------------------------------ */

/*
 * iOS inflates font sizes in landscape unless this is pinned, which would
 * undo the scale above.
 */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media screen and (max-width: 991px) {
    /*
     * Hover styling sticks after a tap on touch devices. Suppress the
     * template's transform-based hovers where a "stuck" state is visible.
     */
    @media (hover: none) {
        .services-con .services-box:hover,
        .our-features-con .feature-box:hover {
            transform: none;
        }
    }

    /* Remove the grey flash on tap, keeping :active styling meaningful. */
    a,
    button,
    .primary_btn,
    .elementary_btn {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Respect the notch / home indicator on modern iPhones. */
@supports (padding: max(0px)) {
    @media screen and (max-width: 767px) {
        .padding-rl,
        .topbar-inner {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
    }
}