/**
 * FM Rental — Militant font preview UI fixes (client review)
 * Scoped to .font-preview-page only; does not affect production index.
 */

.font-preview-page {
    --fm-ui-radius: 10px;
    --fm-ui-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
    --fm-ui-section-y: 48px;
    --fm-ui-min-text: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .font-preview-page .geodir-category-listing,
    .font-preview-page .home-blog-section .post-item_wrap,
    .font-preview-page .home-testi-section .testi-item {
        transition: none !important;
    }

    .font-preview-page .geodir-category-listing:hover {
        transform: none !important;
    }
}

.font-preview-page .section-title h4,
.font-preview-page .menusb a {
    font-weight: 600 !important;
}

.font-preview-page .inline-facts h5,
.font-preview-page .inline-facts h6 {
    font-family: var(--fm-body-font) !important;
}

/* --- Desktop: hierarchy & rhythm --- */
.font-preview-page .home-hero-section .hero-section-container {
    padding: 148px 0 72px !important;
}

.font-preview-page .hero-section-title.hs_align-title {
    margin-top: 56px !important;
}

.font-preview-page .section-title,
.font-preview-page .section-title h2,
.font-preview-page .section-title h4,
.font-preview-page .section-title p {
    text-align: left !important;
}

.font-preview-page .section-title h2::before,
.font-preview-page .section-title h2::after {
    left: 0 !important;
    transform: none !important;
}

.font-preview-page .wide_section-title h3,
.font-preview-page .wide_section-title h5,
.font-preview-page .wide_section-title p {
    text-align: left !important;
}

.font-preview-page .home-trending-wrap .section-title p,
.font-preview-page .home-blog-section .section-title p {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.font-preview-page .geodir-category-listing,
.font-preview-page .home-blog-section .post-item_wrap,
.font-preview-page .home-testi-section .testi-item,
.font-preview-page .home-partners-carousel-wrap,
.font-preview-page .home-why-choose.boxed-content {
    border-radius: var(--fm-ui-radius) !important;
}

.font-preview-page .content_wrap,
.font-preview-page .boxed-content.home-about-section {
    padding-top: var(--fm-ui-section-y) !important;
    padding-bottom: var(--fm-ui-section-y) !important;
}

.font-preview-page .fm-sticky-actions {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

.font-preview-page .geodir-category-listing:focus-within,
.font-preview-page .htt-navbtn:focus-visible,
.font-preview-page .hpc-button:focus-visible,
.font-preview-page .hero-cta-dual:focus-visible,
.font-preview-page .gid_link:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

/* --- Mobile --- */
@media only screen and (max-width: 768px) {
    .font-preview-page .content {
        display: block !important;
    }

    .font-preview-page .home-hero-section,
    .font-preview-page .home-trending-wrap,
    .font-preview-page .home-categories-section,
    .font-preview-page .home-cta-banner,
    .font-preview-page .wide-section,
    .font-preview-page .home-about-section,
    .font-preview-page .home-trust-section,
    .font-preview-page .home-lower-section {
        order: unset !important;
    }

    .font-preview-page .home-hero-section .hs-scroll-down-wrap {
        display: none !important;
    }

    .font-preview-page .home-hero-section .hero-section-container {
        min-height: min(520px, calc(100svh - 96px)) !important;
        padding: 44px 0 40px !important;
    }

    .font-preview-page .home-hero-section .hero-section-title,
    .font-preview-page .home-hero-section .hero-section_categories,
    .font-preview-page .hero-slider .hst-sl-cta-row .hero-section-opt,
    .font-preview-page .home-hero-section .hero-section-title h2,
    .font-preview-page .home-hero-section .hero-section-title p {
        max-width: 100% !important;
    }

    .font-preview-page .home-hero-section .hero-section-title {
        padding-left: 14px !important;
    }

    .font-preview-page .home-hero-section .hero-section-title h2 {
        font-size: clamp(1.65rem, 7.4vw, 2.2rem) !important;
        line-height: 1.14 !important;
    }

    .font-preview-page .home-hero-section .hero-section-title p {
        font-size: 13px !important;
        line-height: 1.58 !important;
    }

    .font-preview-page .home-hero-section .hero-section_categories a:not(:first-child) {
        display: inline-flex !important;
    }

    .font-preview-page .home-hero-section .hero-section_categories a {
        font-size: 11px !important;
        min-height: 32px !important;
    }

    .font-preview-page .hero-slider .hst-sl-cta-row .hero-section-opt {
        max-width: 100% !important;
        width: 100% !important;
    }

    .font-preview-page .hero-slider .hst-sl-cta-row .hero-cta-dual {
        font-size: 0.8125rem !important;
        width: 100% !important;
    }

    .font-preview-page .hero-slider .hst-sl-cta-row .hero-cta-dual--outline {
        min-height: 44px !important;
        padding: 0 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.72) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        text-decoration: none !important;
        opacity: 1 !important;
    }

    .font-preview-page .hero-cta-dual__full {
        display: none !important;
    }

    .font-preview-page .hero-cta-dual__short {
        display: inline !important;
    }

    .font-preview-page .home-facts .inline-facts h5 {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .font-preview-page .home-hire-categories-wrap .cat-opt {
        font-size: 10px !important;
    }

    .font-preview-page .home-sector-chips a {
        font-size: 11px !important;
    }

    .font-preview-page .home-hire-categories-wrap .geodir-category-content > p {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .font-preview-page .home-hire-categories-wrap .gid_link--wa {
        display: inline-flex !important;
    }

    .font-preview-page .home-hire-categories-wrap .geodir-category-footer--trending-dual {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .font-preview-page .home-hire-categories-wrap .gid_link {
        width: 100% !important;
        font-size: 11px !important;
        min-height: 40px !important;
    }

    .font-preview-page .about-img-hotifer {
        display: block !important;
        position: relative !important;
        margin-top: 14px !important;
        padding: 14px 16px !important;
        border-radius: var(--fm-ui-radius);
    }

    .font-preview-page .about-img-hotifer p {
        font-size: 12px !important;
        line-height: 1.55 !important;
        margin-bottom: 6px !important;
    }

    .font-preview-page .home-why-choose .why-choose-body > p {
        display: block !important;
        font-size: 13px !important;
        line-height: 1.58 !important;
    }

    .font-preview-page .home-why-choose__slider {
        display: block !important;
        margin-top: 18px !important;
    }

    .font-preview-page .home-blog-section .home-blog-grid > [class*="col-"]:nth-child(n+3) {
        display: flex !important;
    }

    .font-preview-page .listing-grid_heroheader p {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .font-preview-page .home-testi-section .swiper-slide:not(.swiper-slide-active) {
        opacity: 1 !important;
    }

    .font-preview-page .home-trending-swiper .geodir-category-content-details {
        display: block !important;
    }

    .font-preview-page .home-trending-swiper .geodir-category-content-details li {
        font-size: 11px !important;
    }

    .font-preview-page .content_wrap,
    .font-preview-page .single-content-section,
    .font-preview-page .boxed-content.home-about-section {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
}

@media only screen and (max-width: 420px) {
    .font-preview-page .home-hero-section .hero-section-title h2 {
        font-size: clamp(1.5rem, 8vw, 1.85rem) !important;
        max-width: 100% !important;
    }

    .font-preview-page .home-hero-section .hero-section-title p,
    .font-preview-page .hero-slider .hst-sl-cta-row .hero-section-opt {
        max-width: 100% !important;
    }
}