/* ============================================================
   jk-mobile-fixes.css
   Mobile remediation for the 28 pages that EMBED their CSS in a
   page-level <style> block instead of linking /jk-site.css
   (testimonials, guides, home-valuation, transaction-history,
   mortgage-calculator, and template siblings).
   Loaded last in <head>, so equal-specificity rules win the cascade.
   Mirrors the 2026-07-05 audit fixes already applied to styles.css
   (sections 9-14) and jk-site.css (K1-K6). Design tokens unchanged.
   ============================================================ */

/* F1 ── Nav logo compressibility: .nav-logo-wrap{flex-shrink:0} plus the
        letter-spaced tagline fixed the nav row's min width and pushed the
        hamburger off-screen at 320-390. Logo may shrink; both lines
        truncate instead of clipping the menu button. */
@media(max-width:1140px){
  .hamburger{flex-shrink:0;}
  .nav-logo-wrap{flex-shrink:1;min-width:0;overflow:hidden;}
  .nav-logo-wrap,
  .nav-logo-wrap small{white-space:nowrap;text-overflow:ellipsis;}
  .nav-logo-wrap small{overflow:hidden;max-width:100%;}
}
@media(max-width:600px){
  #nav{padding:0 16px;gap:16px;}
  .nav-logo-wrap{font-size:13px;letter-spacing:0.14em;}
  .nav-logo-wrap small{font-size:8px;letter-spacing:0.08em;}
}

/* F2 ── Footer: legal and license text had a 7.5px mobile floor; the
        two-column mobile footer grid used 1fr 1fr, letting the
        letter-spaced brand line widen scrollWidth to 521px during
        webfont load. */
@media(max-width:768px){
  .footer-legal,.fc-lg,p.footer-legal{
    font-size:12px!important;line-height:1.6!important;letter-spacing:0!important;
  }
  .footer-copy{font-size:11px!important;}
  .fc-py{font-size:11px!important;}
}
@media(max-width:900px){
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
.footer-brand,.footer-tagline,footer .ft{overflow-wrap:anywhere;}

/* F3 ── Testimonials: review cards rendered as two 134px ribbons at 390px
        with 12px italic body. One column on phones, readable sizes. */
.review-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:640px){
  .review-grid{grid-template-columns:minmax(0,1fr);}
  .review-text{font-size:16px;line-height:1.75;}
  .review-attr{font-size:11px;}
  .review-stars{font-size:13px;}
}

/* F4 ── Valuation + contact forms: 12px inputs trigger iOS focus zoom
        (site convention elsewhere is 16px); choice buttons sat under the
        44px tap floor. */
.cf-input,.cf-select,.cf-textarea{font-size:16px!important;}
.hv-choice-btn{min-height:44px;}
@media(max-width:900px){
  /* hero grid is inline-styled 1fr 480px; collapse it and let the form
     card use the full width (same [style*=] pattern as styles.css) */
  .valuation-hero{padding:56px 20px!important;}
  .valuation-hero [style*="1fr 480px"]{grid-template-columns:minmax(0,1fr)!important;gap:36px!important;}
  .val-form{max-width:none;padding:28px 20px;}
}
@media(max-width:768px){
  /* inline micro type on the form: step eyebrows 9px, buttons 9.5px */
  .val-form [style*="font-size:9px"]{font-size:11px!important;letter-spacing:0.22em!important;}
  .val-form [style*="font-size:9.5px"]{font-size:12px!important;letter-spacing:0.14em!important;}
  .val-form [style*="font-size:10px"]{font-size:12px!important;}
  .val-form [style*="font-size:11px"]{font-size:13px!important;}
  .val-form [style*="font-size:12px"]:not(input):not(button){font-size:13px!important;}
  .val-form button{min-height:44px;}
  .valuation-hero [style*="font-size:12.5px"]{font-size:14.5px!important;}
  .valuation-hero [style*="font-size:14px"]{font-size:16px!important;}
}

/* F5 ── Long-form body floor at phone widths (guides and template siblings
        rendered 12-13px paragraphs; house standard is large, readable
        body type). Inline-styled copy uses the [style*=] remediation
        pattern; classed copy is lifted per selector. */
@media(max-width:768px){
  [style*="font-size:13px"],
  [style*="font-size:13.5px"],
  [style*="font-size:14px"]{font-size:16px!important;}
  .guide-body p,.gd-text,.content-section p{font-size:16px;line-height:1.75;}
}

/* F6 ── Micro-label floor and tap targets (mirrors jk-site.css K4/K5). */
.breadcrumb{font-size:11px;letter-spacing:0.16em;}
.mn-county-name a{font-size:11px;}
footer .fc-t{font-size:10.5px;letter-spacing:0.3em;}
.cf-submit{font-size:12px;letter-spacing:0.24em;}
@media(max-width:768px){
  .mcb-btn{font-size:11px;letter-spacing:0.14em;min-height:56px;}
  .mn-county-name a{display:inline-block;padding:13px 10px;margin:-10px -10px -13px 0;}
  .footer-col ul li a,
  footer .fc ul li a{display:inline-block;padding:10px 0;margin:-4px 0;}
  .footer-social{width:42px;height:42px;line-height:40px;}
}

/* F7 ── Transaction-history stat band: five cards in a two-column grid
        left a lone fifth cell; it now spans the row. Columns are
        overflow-safe. */
.stats-bar{grid-template-columns:repeat(5,minmax(0,1fr));}
@media(max-width:900px){
  .stats-bar .stat-item:nth-child(5):last-child{grid-column:1/-1;}
}

/* F8 ── Muted-text contrast on dark surfaces (gray-3 on near-black is
        4.06:1; gray-2 passes at 9.76:1). Same scope as jk-site.css K3. */
.review-attr,.breadcrumb,.breadcrumb a,
.footer-tagline,.footer-col ul li a,
footer .ft,footer .fc ul li a{color:var(--gray-2);}

/* F9 ── Inline micro-type floor (mirrors styles.css section 4; the
        transaction-history licensing block rendered at 7 and 7.5px). */
[style*="font-size:7px"],[style*="font-size:7.5px"],
[style*="font-size:8px"],[style*="font-size:8.5px"]{font-size:10px!important;}
[style*="font-size:9px"],[style*="font-size:9.5px"]{font-size:11px!important;}

/* F10 ── Inline-styled grids collapse on phones: the licensing footer's
        28px 1fr 1fr 1fr 1fr row was 475px wide at a 320px viewport, and
        the testimonial review pairs used an inline 1fr 1fr. */
@media(max-width:900px){
  [style*="grid-template-columns:28px 1fr 1fr 1fr 1fr"]{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr)!important;row-gap:18px!important;}
}
@media(max-width:640px){
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important;}
}

/* F11 ── Long mailto text wraps instead of widening the page; reading-size
        floors for the page lead, footer tagline, and 12.5px inline copy;
        footer logo pair scales under 400px (fixed 353px row otherwise). */
a[href^="mailto:"]{overflow-wrap:anywhere;}
@media(max-width:768px){
  .page-subtitle{font-size:16px;}
  .footer-tagline{font-size:13px;}
  [style*="font-size:12.5px"]{font-size:14.5px!important;}
}
@media(max-width:400px){
  footer img[src*="-logo"]{height:24px!important;}
}

/* F12 ── CTA-band supporting copy (transaction-history "Ready to Work
        Together?") read at 12px; lifted to reading size on phones. */
@media(max-width:768px){
  .cta-section p{font-size:16px;line-height:1.7;}
}
