/*
 * NEXA_PUBLIC_UX_V1
 * Readability and mobile first-screen fixes for the public pages. Loaded last in the public
 * layout; the leading `html` outranks the theme's `body.nexa-public-ui-v3 ...` rules, several of
 * which use !important (including the hero's inline styles in the page body).
 */

/* Secondary text was 7-10px; keep it at 10px or more. */
html body.nexa-public-ui-v3 .nexa-trust-strip__item strong {
    font-size: 12px !important;
}
html body.nexa-public-ui-v3 .nexa-trust-strip__item small {
    font-size: 11px !important;
    line-height: 1.35 !important;
}
html body.nexa-public-ui-v3 .nexa-admin-sync-slide .nexa-admin-sync-eyebrow {
    font-size: 11px !important;
}
html body.nexa-public-ui-v3 .nexa-admin-sync-title__brand {
    font-size: max(11px, .25em) !important;
}
html body.nexa-public-ui-v3 .nexa-admin-sync-trending__header p {
    font-size: 12px !important;
}
html body.nexa-public-ui-v3 .nexa-premium-product__type small {
    font-size: 10px !important;
}
html body.nexa-public-ui-v3 .nexa-premium-product__meta .reviews span {
    font-size: 11px !important;
}
html body.nexa-public-ui-v3 .nexa-trustpilot-v1__note span {
    font-size: 12px !important;
}

/* Blog "Recent Post" thumbnails are square: crop the 16:9 preview instead of squashing it. */
html body.nexa-public-ui-v3 .sidebar-widget-item .img-area img {
    object-fit: cover;
}

@media (max-width: 767px) {
    /* Features strip: all four items as a 2x2 grid. A swipeable row hid the last two, and the
     * older mobile rules cut the descriptions off with an ellipsis, so they wrap instead. */
    html body.nexa-public-ui-v3 .nexa-trust-strip__grid {
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow: visible !important;
    }
    html body.nexa-public-ui-v3 .nexa-trust-strip__item {
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 9px 10px !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }
    html body.nexa-public-ui-v3 .nexa-trust-strip__item strong,
    html body.nexa-public-ui-v3 .nexa-trust-strip__item small {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Cookie choices: a compact bar instead of a card covering a fifth of the screen. */
    html body.nexa-public-ui-v3 .nexa-cookie-banner {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        padding: 12px 14px !important;
        gap: 8px !important;
    }
    html body.nexa-public-ui-v3 .nexa-cookie-banner h2 {
        margin-bottom: 2px !important;
        font-size: 14px !important;
    }
    html body.nexa-public-ui-v3 .nexa-cookie-banner p {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }
    html body.nexa-public-ui-v3 .nexa-cookie-banner__actions button {
        min-height: 38px !important;
        padding: 7px 12px !important;
    }

    /* Footer text links: a larger hit area, balanced by negative margins so nothing moves.
     * The social icons (.social-box) are already 44px and keep their own spacing. */
    html body.nexa-public-ui-v3 .footer-widget ul:not(.social-box) li a {
        display: inline-block;
        margin: -10px 0;
        padding: 10px 0;
    }

    /* Newsletter: the theme makes the form a no-wrap flex row, so its full-width mobile
     * Subscribe button squeezed in beside the email field, 8px lower. Wrap it underneath. */
    html body.nexa-public-ui-v3 .newsletter-section .newsletter-form {
        flex-wrap: wrap;
    }

    /* Home hero: the Swiper is as tall as its tallest slide and its dots sit at the Swiper's
     * bottom, but each card only wrapped its own content, so on shorter slides the dots hugged
     * the card's bottom edge under a large gap. Every card now fills the slide, and the spare
     * height goes between the artwork and the text. */
    html body.nexa-public-ui-v3 .nexa-admin-sync-slider .nexa-admin-sync-slide {
        height: 100% !important;
        justify-content: space-between !important;
    }
}