/*
 * Hero slideshow typography — remotesensors.it child theme.
 *
 * Self-hosted Bebas Neue (no Google Fonts / no external CDN at runtime) plus the
 * responsive sizing of the hero headline and the spacing of its CTA button.
 *
 * Font and typography rules are scoped to `.hero-slideshow.hero-style-default`.
 * Additional scoped rules cover catalog headings, active category links, and Footer Style 5 motion.
 * Headings, menus, product cards and body copy elsewhere keep the parent theme's
 * fonts (DM Sans / theme_option typography).
 *
 * The url() below is relative to this file's published location,
 * public/themes/amerce-remotesensors/css/ -> ../fonts/bebas-neue/.
 * Same convention as the parent theme's public/css/fonts.css.
 *
 * Font: Bebas Neue Regular v2.000 by Dharma Type, SIL Open Font License 1.1.
 * License text ships next to the font file (fonts/bebas-neue/OFL.txt).
 */

@font-face {
    font-family: "Bebas Neue";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/bebas-neue/BebasNeue-Regular.woff2") format("woff2");
}

/* ------------------------------------------------------------------ *
 * Hero headline — `.title_sld` inside the style-default hero.
 * Overrides the parent `.text-display` (clamp 36-80px) and `.fw-medium`
 * (500) with three classes of specificity, so no !important is needed.
 * Desktop 1200-1999px values are the base declaration.
 * ------------------------------------------------------------------ */
.hero-slideshow.hero-style-default .title_sld {
    font-family: "Bebas Neue", "Arial Narrow", sans-serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 1.2px;
    max-width: 680px;
    text-wrap: balance;
    -webkit-font-synthesis: none;
    font-synthesis: none;
}

/* Centred alignment keeps the capped headline centred in the slide. */
.hero-slideshow.hero-style-default .content-sld_wrap.text-center .title_sld {
    margin-left: auto;
    margin-right: auto;
}

/* Very large screens. */
@media (min-width: 2000px) {
    .hero-slideshow.hero-style-default .title_sld {
        font-size: 72px;
        max-width: 760px;
    }
}

/* Tablet. */
@media (min-width: 768px) and (max-width: 1199px) {
    .hero-slideshow.hero-style-default .title_sld {
        font-size: clamp(64px, 7vw, 72px);
        max-width: min(760px, calc(100vw - 48px));
    }
}

/* Mobile. */
@media (max-width: 767px) {
    .hero-slideshow.hero-style-default .title_sld {
        font-size: 44px;
        max-width: 300px;
        line-height: 1;
        letter-spacing: 0.7px;
        text-wrap: balance;
    }
}

/* ------------------------------------------------------------------ *
 * Hero CTA spacing.
 * `hero-slideshow-cta` is a component class added only to the CTA anchor of
 * this child theme's hero partial; `.tf-btn` styling stays untouched and no
 * other button on the site is affected. The parent theme sets no bottom
 * margin on `.title_sld` for this slideshow variant (the
 * `.slider-wrap_2/_3/_4 .title_sld` margins belong to other variants), so
 * this margin-top is the whole gap.
 * ------------------------------------------------------------------ */
.hero-slideshow.hero-style-default .content-sld_wrap .hero-slideshow-cta {
    margin-top: 24px;
}

@media (max-width: 767px) {
    .hero-slideshow.hero-style-default .content-sld_wrap .hero-slideshow-cta {
        margin-top: 18px;
    }
}

.product-category-page-title .title {
    font-size: clamp(28px, 3.8vw, var(--h3-size, 40px));
    line-height: clamp(36px, 4.5vw, 48px);
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.section-product-single .product-infor-name {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.bb-product-filter-content .bb-product-category-link.active {
    color: var(--primary);
}

.tf-footer.footer-s5 .footer-hero-text {
    overflow-x: clip;
}

.tf-footer.footer-s5 .footer-hero-text .infiniteslide_wrap {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

@media (prefers-reduced-motion: reduce) {
    .tf-footer.footer-s5 .footer-hero-text .infiniteSlide {
        animation: none !important;
        transform: none !important;
    }

    .tf-footer.footer-s5 .footer-hero-text .infiniteSlide-slide:not(.infiniteslide_clone) {
        width: 100%;
    }

    .tf-footer.footer-s5 .footer-hero-text .infiniteslide_clone {
        display: none !important;
    }
}