/*------------------------------------------------------------------*\
    2. Base Styles - Typography
       Elementor Kit fluid overrides (390px → 3840px)
       Fluid values defined in helpers/vars.css (--fluid-* tokens)
\*------------------------------------------------------------------*/


html,
body {
    overflow-x: hidden;   /* fallback */
    overflow-x: clip;     /* modern — preserves position:sticky */
}


/* ── Global Headings ── */

h1, h2, h3, h4, h5, h6, p, a, .c-button .elementor-button {
    font-family: var(--font-primary) !important;
}

.elementor-kit-6 h1 {
    font-size: var(--fluid-h1) !important;
    font-weight: var(--font-light) !important;
    line-height: var(--line-height-50) !important;
}

.elementor-kit-6 h2 {
    font-size: var(--fluid-h2) !important;
}

.elementor-kit-6 h3 {
    font-size: var(--fluid-h3) !important;
}

.elementor-kit-6 h4 {
    font-size: var(--fluid-h4) !important;
}

.elementor-kit-6 h6 {
    font-size: var(--fluid-h6) !important;
}

.elementor-kit-6 footer a {
    font-size: var(--fluid-p) !important;
    line-height: var(--line-height-160) !important;
}

/* ── Body Text ── */

.elementor-kit-6 p {
    font-size: var(--fluid-p) !important;
    line-height: var(--line-height-160) !important;
}

/* .rb-clip-images paragraphs — like --fluid-p but 12px on mobile (token
   --fluid-p-clip; identical to --fluid-p from 1024px up). `!important` +
   higher specificity to beat the base `.elementor-kit-6 p` above. Both
   selector orders so it matches whether `.elementor-kit-6` is the ancestor
   (project convention, e.g. the rule below) or nested inside .rb-clip-images. */
.elementor-kit-6 .rb-container-motion p,
.rb-container-motion .elementor-kit-6 p {
    font-size: var(--fluid-p-clip) !important;
    text-transform: uppercase;
    line-height: var(--line-height-100) !important;
}

.elementor-kit-6 .miv-subtitle .elementor-heading-title {
    font-size: var(--fluid-subtitle) !important;
    font-weight: var(--font-bold) !important;
    letter-spacing: 27%;
}


/* ── Navigation ── */

.elementor-kit-6 .elementor-nav-menu--main .elementor-item {
    font-weight: var(--font-light) !important;
    line-height: 1.4;
}

@media screen and (min-width: 1024px) {
    .elementor-kit-6 .elementor-nav-menu--main .elementor-item {
        font-size: var(--fluid-nav-menu) !important;
        font-weight: var(--font-medium) !important;
        line-height: 1.4;
    }
}


.elementor-kit-6 .e-off-canvas__main .elementor-nav-menu--main {
    font-size: var(--fluid-nav-menu) !important;
    line-height: 1.2 !important;
}


/* ── Overlay / Off-Canvas ── */

.elementor-kit-6 .e-off-canvas__content h2 {
    font-size: var(--fluid-overlay-info-title) !important;
}

.elementor-kit-6 .e-off-canvas__content p {
    font-size: var(--fluid-overlay-info-desc) !important;
}


/* ── Header Box ── */

.elementor-kit-6 .header-box h2 {
    font-size: var(--fluid-header-box) !important;
    font-weight: var(--font-extrabold) !important;
}


/* ── Counters ── */

.elementor-kit-6 .counter_number {
    font-size: var(--fluid-counter-title) !important;
    font-weight: var(--font-bold) !important;
}

.elementor-kit-6 .counter_label {
    font-size: var(--fluid-counter-label) !important;
    text-transform: uppercase;
    line-height: 1.1;
}


/* ── Components ── */

.elementor-kit-6 .ekit-accordion-title {
    font-size: var(--fluid-accordion) !important;
    font-weight: var(--font-medium);
    line-height: 1.2;
}

.elementor-kit-6 .section-cta h2 {
    font-size: var(--fluid-cta-h2) !important;
}

.elementor-kit-6 .c-icon-box .elementor-heading-title {
    font-size: var( --fluid-h6) !important;
}

.elementor-kit-6 .c-icon-box p {
    font-size: var( --fluid-icon-box-desc) !important;
    text-transform: uppercase;
    line-height: var(--line-height-160) !important;
}

/* ── Grid / Services ── */

.elementor-kit-6 .services-grid__title {
    font-size: var(--fluid-grid-title) !important;
}

.elementor-kit-6 .section-steps .elementor-icon-box-title {
    font-size: var(--fluid-step-title) !important;
}

.elementor-kit-6 .section-steps .elementor-icon-box-description,
.elementor-kit-6 .section-steps p {
    font-size: var(--fluid-step-desc) !important;
    line-height: 1.2;
}

@media screen and (min-width: 2560px) {
    .elementor-kit-6 .section-steps .elementor-icon-box-title {
        font-size: clamp(2rem, 1.25vw, 3rem) !important;
    }

    .elementor-kit-6 .section-steps .elementor-icon-box-description {
        font-size: clamp(1.3125rem, 0.8203vw, 1.5rem) !important;
    }

    .elementor-kit-6 .section-icon-list .elementor-heading-title {
        font-size: clamp(2rem, 1.25vw, 3rem) !important;
    }

    .elementor-kit-6 .section-icon-list .elementor-icon-list-text {
        font-size: clamp(1.3125rem, 0.8203vw, 1.5rem) !important;
    }
}


/* ── Portfolio ── */

.elementor-kit-6 .miv-card-title h2 {
    font-size: var(--fluid-portfolio-title) !important;
}

.elementor-kit-6 .miv-card-subtitle h2 {
    font-size: var(--fluid-portfolio-subtitle) !important;
}


/* ── Forms ── */

.elementor-kit-6 label {
    font-size: var(--fluid-label) !important;
}

.elementor-kit-6 select {
    font-size: var(--fluid-select) !important;
}


/* ── Footer ── */

.elementor-kit-6 .section-footer .contacts-info h5 {
    font-size: var(--fluid-footer-subtitle) !important;
}

.elementor-kit-6 .section-footer .contacts-info h3 {
    font-size: var(--fluid-footer-h3) !important;
    font-weight: var(--font-semibold) !important;
}

.elementor-kit-6 .section-footer .slogan-text p {
    font-size: var(--fluid-footer-slogan) !important;
}

.elementor-kit-6 .section-footer .elementor-nav-menu--main .elementor-item {
    font-size: var(--fluid-footer-menu) !important;
    font-weight: var(--font-regular) !important;
}


/* ── Tall viewports — body text boost ── */

@media screen and (min-height: 1440px) {
    .elementor-kit-6 p {
        font-size: calc(var(--fluid-p) * 1.1) !important;
    }
}

@media screen and (min-height: 2160px) {
    .elementor-kit-6 p {
        font-size: calc(var(--fluid-p) * 1.15) !important;
    }
}