/* BF Farm public mobile typography system — sitewide public mobile scale, 2026-09-06.
   This file controls public-page typography only; Admin remains untouched.
   The mobile reading scale is intentionally more compact than the prior build
   while preserving comfortable form input sizing and existing desktop type.
   Runtime text-scale compensation remains active for hosts that enlarge text. */

html,
body,
#bf-public {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 760px) {
    :root {
        --bf-font-h1-design: 30px;
        --bf-font-h2-design: 25px;
        --bf-font-h3-design: 20px;
        --bf-font-h4-design: 17px;
        --bf-font-body-design: 14.5px;
        --bf-font-lead-design: 14.5px;
        --bf-font-label-design: 11px;
        --bf-font-fact-design: 15px;
        --bf-font-button-design: 12px;
        --bf-font-card-title-design: 19px;
        --bf-font-compact-design: 12.5px;
        --bf-font-input-design: 16px;

        /* Preserve the currently approved Chrome/mobile visual scale while
           allowing the same measured compensation to apply in alternate
           Chromium/WebView hosts. */
        --bf-font-home-hero-h1-design: clamp(27px, 7.6vw, 33px);
        --bf-font-home-hero-lead-design: clamp(13.5px, 3.6vw, 15px);
        --bf-font-home-hero-label-design: clamp(9px, 2.6vw, 11px);
        --bf-font-home-hero-button-design: clamp(11px, 3vw, 12px);
        --bf-font-hero-h1-design: clamp(24px, 6.5vw, 28px);
        --bf-font-hero-lead-design: 12px;
        --bf-font-hero-label-design: 9px;
    }

    html {
        font-size: 16px;
    }

    #bf-public#bf-public {
        font-size: var(--bf-font-body, var(--bf-font-body-design));
    }

    #bf-public#bf-public :is(h1, .type-h1) {
        font-size: var(--bf-font-h1, var(--bf-font-h1-design));
        line-height: 1.03;
        letter-spacing: -.035em;
    }

    #bf-public#bf-public :is(h2, .type-h2) {
        font-size: var(--bf-font-h2, var(--bf-font-h2-design));
        line-height: 1.1;
        letter-spacing: -.025em;
    }

    #bf-public#bf-public :is(h3, .type-h3) {
        font-size: var(--bf-font-h3, var(--bf-font-h3-design));
        line-height: 1.18;
        letter-spacing: -.015em;
    }

    #bf-public#bf-public :is(h4, .type-h4) {
        font-size: var(--bf-font-h4, var(--bf-font-h4-design));
        line-height: 1.2;
    }

    #bf-public#bf-public :where(
        p,
        li,
        blockquote,
        .article-description,
        .article-body,
        .prose,
        .richtext,
        .narrow-copy,
        .waitlist-copy,
        .piglet-pairing,
        .piglet-summary-copy,
        .piglet-parent-copy,
        .states-directory-hero__copy,
        .article-continuation__copy,
        .article-continuation__description,
        .editorial-featured-card__copy,
        .kb-help-choice__copy > span,
        .contact-admin-copy
    ) {
        font-size: var(--bf-font-body, var(--bf-font-body-design));
        line-height: 1.5;
    }

    #bf-public#bf-public :where(
        .hero-lede,
        .hero-tagline-tertiary,
        .article-description
    ) {
        font-size: var(--bf-font-lead, var(--bf-font-lead-design));
    }

    #bf-public#bf-public :is(
        .section-label,
        .eyebrow,
        .kb-help-choice__kicker,
        .kb-search-label,
        .review-public-badge,
        .piglet-parent-role,
        .piglet-availability,
        .piglet-buyer-badge,
        .piglet-value-proof__guarantee-label,
        .available-pig-status,
        .cart-summary-label,
        .cart-address-status,
        .paypal-status,
        .kb-search-status,
        .state-filter-status,
        .article-continuation__eyebrow,
        .editorial-featured-card__eyebrow,
        .review-voice-button-label,
        .review-voice-status,
        .checkout-buyer-summary-heading > span,
        .states-directory-hero__stat span,
        .header-cart-count,
        small,
        label,
        legend,
        th
    ) {
        font-size: var(--bf-font-label, var(--bf-font-label-design));
        line-height: 1.25;
    }

    #bf-public#bf-public dl dt,
    #bf-public#bf-public :is(
        .fact-list,
        .piglet-summary-facts,
        .piglet-parent-facts,
        .home-owner__facts,
        .cornerstone-facts,
        .checkout-buyer-details,
        .owner-passport-facts
    ) dt {
        font-size: var(--bf-font-label, var(--bf-font-label-design));
        line-height: 1.25;
    }

    #bf-public#bf-public dl dd,
    #bf-public#bf-public :is(
        .fact-list,
        .piglet-summary-facts,
        .piglet-parent-facts,
        .home-owner__facts,
        .cornerstone-facts,
        .checkout-buyer-details,
        .owner-passport-facts
    ) dd {
        font-size: var(--bf-font-fact, var(--bf-font-fact-design));
        line-height: 1.35;
    }

    #bf-public#bf-public :is(
        .kb-help-choice__copy > strong,
        .article-continuation__title
    ) {
        font-size: var(--bf-font-card-title, var(--bf-font-card-title-design));
        line-height: 1.2;
    }

    #bf-public#bf-public :is(
        .button,
        button:not(.nav-toggle):not(.bf-compare-close),
        [role="button"],
        .piglet-buy-button,
        .article-sales-cta,
        .piglet-value-proof__text-link,
        .article-continuation__link,
        .states-directory-card__copy > span,
        .kb-help-choice__copy > em,
        .text-link
    ) {
        font-size: var(--bf-font-button, var(--bf-font-button-design));
        line-height: 1.2;
    }

    #bf-public#bf-public :is(input, select, textarea) {
        font-size: var(--bf-font-input, var(--bf-font-input-design));
        line-height: 1.35;
    }

    #bf-public#bf-public :is(
        .review-voice-help,
        .review-public-fineprint,
        .waitlist-smart-help,
        .owner-passport-private,
        .field-optional,
        .checkout-selected-item span,
        .meta-line
    ) {
        font-size: var(--bf-font-compact, var(--bf-font-compact-design));
        line-height: 1.5;
    }

    #bf-public#bf-public .checkout-selected-item strong {
        font-size: var(--bf-font-fact, var(--bf-font-fact-design));
        line-height: 1.35;
    }

    #bf-public#bf-public .fact-row--microchip dd {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
    }

    /* Homepage keeps the visual scale that was accepted in normal Chrome. */
    #bf-public#bf-public.home-page .hero-copy-centered .hero-tagline-primary {
        font-size: var(--bf-font-home-hero-label, var(--bf-font-home-hero-label-design));
        line-height: 1.18;
    }

    #bf-public#bf-public.home-page .hero-copy-centered h1 {
        font-size: var(--bf-font-home-hero-h1, var(--bf-font-home-hero-h1-design));
        line-height: 1.03;
    }

    #bf-public#bf-public.home-page .hero-copy-centered .hero-lede {
        font-size: var(--bf-font-home-hero-lead, var(--bf-font-home-hero-lead-design));
        line-height: 1.42;
    }

    #bf-public#bf-public.home-page .hero-button,
    #bf-public#bf-public.home-page .hero-button > span {
        font-size: var(--bf-font-home-hero-button, var(--bf-font-home-hero-button-design));
        line-height: 1.2;
    }

    /* Interior hero copy uses its current compact phone scale. */
    #bf-public#bf-public.inner-page :is(
        .inner-main > .page-hero,
        .inner-main > .states-directory-hero,
        .inner-main > .state-guide-hero
    ) :is(h1, .type-h1) {
        font-size: var(--bf-font-hero-h1, var(--bf-font-hero-h1-design));
        line-height: 1.06;
        letter-spacing: -.025em;
    }

    #bf-public#bf-public.inner-page :is(
        .inner-main > .page-hero,
        .inner-main > .states-directory-hero,
        .inner-main > .state-guide-hero
    ) :is(.section-label, .eyebrow) {
        font-size: var(--bf-font-hero-label, var(--bf-font-hero-label-design));
        line-height: 1.2;
    }

    #bf-public#bf-public.inner-page :is(
        .inner-main > .page-hero,
        .inner-main > .states-directory-hero,
        .inner-main > .state-guide-hero
    ) :is(
        .hero-lede,
        .hero-tagline-tertiary,
        .page-hero__copy > p:not(.section-label),
        .kb-index-hero-copy > p:not(.section-label),
        .states-directory-hero__copy > p:not(.eyebrow),
        .hero-copy > p:not(.eyebrow),
        .shell > p:not(.section-label)
    ) {
        font-size: var(--bf-font-hero-lead, var(--bf-font-hero-lead-design));
        line-height: 1.38;
    }
}

@media (max-width: 420px) {
    :root {
        --bf-font-h2-design: clamp(24px, 6.8vw, 26px);
        --bf-font-home-hero-h1-design: clamp(26px, 7.5vw, 31px);
        --bf-font-home-hero-lead-design: clamp(13.5px, 3.5vw, 14.5px);
        --bf-font-home-hero-button-design: clamp(10.5px, 2.9vw, 11.5px);
    }
}