/* fibrex.ge custom overrides — keep separate from bb.css so a Webflow re-export
   doesn't wipe these out.
   Loaded AFTER bb.css from top.php so it wins the cascade.
   Last updated: 2026-04-27 */

/* ----------------------------------------------------------------------------
 * Hero heading (.display-xl / .display / .display-l) on phones.
 *
 * bb.css line 5863 sets `.display, .display-xl { font-size: 10em }` inside
 * @media (max-width: 479px) — that's ~160px and clearly a Webflow export bug
 * (it should be SMALLER on small screens, not larger). The result: a long
 * Georgian heading like "მდგრადი, ფუნქციური და ესთეთიკური საფასადე გადაწყვე-
 * ტილებები" wrapped to ~5 letters per line on a 360px phone.
 *
 * Same problem with .display-l at 11.7em (~187px). Fix both.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .display,
    .display-xl {
        font-size: 3rem !important;       /* ~48px — readable, fits two-three words per line */
        letter-spacing: -0.01em;
        line-height: 1.05;
    }

    .display-l {
        font-size: 2.6rem !important;
        line-height: 1.05;
    }
}

@media screen and (max-width: 479px) {
    .display,
    .display-xl {
        font-size: 2.4rem !important;     /* ~38px on small phones */
        letter-spacing: -0.005em;
        line-height: 1.05;
    }

    .display-l {
        font-size: 2.1rem !important;
        line-height: 1.05;
    }
}


/* ----------------------------------------------------------------------------
 * Slider section header (h4) was 2rem (~32px) at <=991px. Long Georgian titles
 * like "ფიბერბეტონის ფასადები" measure ~390px at that size and overflow phones
 * narrower than ~400px — the user reported "only a few letters visible".
 * Bring it down for true mobile breakpoints.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .slider-surface_component h4,
    .slider-surface_component .h4-styling {
        font-size: 1.4rem;       /* ~22px — "ფიბერბეტონის ფასადები" ≈ 264px, fits >= 320px screens */
        line-height: 1.25;
        margin-top: 0;
    }
}

@media screen and (max-width: 479px) {
    .slider-surface_component h4,
    .slider-surface_component .h4-styling {
        font-size: 1.2rem;       /* ~19px for very narrow phones */
        line-height: 1.25;
    }
}

/* ----------------------------------------------------------------------------
 * Slide body text — defensive tweaks so the body copy never overflows the
 * slide on mobile, regardless of how long product names get.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .swiper-slide.is--slider-surface .small-rich-text,
    .swiper-slide.is--slider-surface .small-rich-text.max-width-75 {
        max-width: 100%;
        width: 100%;
    }

    .swiper-slide.is--slider-surface .small-rich-text p {
        font-size: 0.85rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .swiper-slide.is--slider-surface .small-rich-text strong {
        font-size: 0.92rem;
    }
}

@media screen and (max-width: 479px) {
    .swiper-slide.is--slider-surface .small-rich-text p {
        font-size: 0.78rem;
    }

    .swiper-slide.is--slider-surface .small-rich-text strong {
        font-size: 0.85rem;
    }
}

/* ----------------------------------------------------------------------------
 * Top navigation — kill the "background appears late" flash.
 *
 * The .navigation/.is--transparent toggle is JS-driven (navContextSwitcher in
 * bottom.php). It only fires once Webflow's JS chunks finish loading from the
 * CDN, so on slow networks the bar can briefly render in the wrong state and
 * the menu visually crashes into the hero heading or the slider text.
 *
 * Two cures:
 *  - shorten the CSS transition so any state flip is barely perceptible
 *  - give the transparent state a frosted-glass backdrop (low-alpha tint +
 *    backdrop-filter blur) so the bar is always visually separate from the
 *    content below, even before JS settles or whatever's behind has loaded.
 * -------------------------------------------------------------------------- */
.navigation {
    transition: background-color 0.15s ease, backdrop-filter 0.15s ease, -webkit-backdrop-filter 0.15s ease;
}

.navigation.is--transparent {
    background-color: rgba(15, 15, 15, 0.32);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}

/* While the Webflow JS bundle is still in flight, the bar lacks the
 * .is--transparent class on home (it sits over the dark hero) and shows the
 * default beige fill, which clashes with the hero photo. Soften the default
 * fill on phones where the perceived overlap is worst. */
@media screen and (max-width: 767px) {
    .navigation {
        background-color: rgba(252, 252, 251, 0.92);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

/* ----------------------------------------------------------------------------
 * Dropdown submenu — give it a subtle off-white tint and a soft separator
 * shadow so the user can see where the panel ends and the page below starts.
 * Without this, the menu blends into the page background.
 * -------------------------------------------------------------------------- */
.uui-navbar02_dropdown-list.w--open,
.uui-navbar02_dropdown-list {
    background-color: #f4f1ea;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.18),
                0 6px 12px -8px rgba(0, 0, 0, 0.08);
}

/* Make the inner padding slightly more generous so the tint reads as a panel
 * rather than a hairline strip. */
.uui-navbar02_dropdown-list .dropdown_container {
    padding-top: 24px;
    padding-bottom: 28px;
}