/* ==========================================================================
   FACTS mobile UX system v1  —  /css/facts-mobile-ux-v1.css
   Pilot: homepage, get-started, services/eca-service.
   Everything that changes rendering is inside @media (max-width:768px), so
   769px and above is byte-for-byte the same design as today.
   No overflow-x, no clip, no fixed element placed over page content.
   ========================================================================== */

/* The mobile Login and Email Support items are markup that did not exist
   before. Hiding both at every width by default means desktop renders exactly
   as it does today; the media query below is the only thing that reveals them.
   They are declared here, outside the query, precisely so that a desktop
   browser never has to evaluate the query to know to leave them alone. */
.mobile-portal-login,
.mobile-support-email { display: none; }

@media (max-width: 768px) {

  /* ---- 1. reclaim the first viewport -----------------------------------
     The contact/ISO bar wraps to 85-120px on phones and pushes the header and
     hero down. Measured: restoring it at 320px takes the document to 396px, a
     76px overflow, so it stays hidden.

     An earlier version of this comment claimed its phone, email and ISO
     content "all remain in the footer". That was wrong and the measurements
     say so. The phone number does survive - it appears four more times on the
     homepage and four more on ECA. The EMAIL DID NOT: on the homepage and on
     ECA the top bar held the only mailto on the page (Cloudflare
     email-protected on the homepage), so hiding the bar removed email contact
     from mobile entirely. That is what .mobile-support-email in section 4b
     exists to put back. The ISO badge is deliberately not restored: it is a
     trust signal that is repeated further down both pages, not a contact
     route, and re-exposing it is what made the bar too tall in the first
     place. */
  .top-bar { display: none; }

  /* The shared rule is .header .container{height:80px}. Releasing the fixed
     height lets the row size to its tallest child (the 44px logo + padding). */
  header.header .container {
    height: auto;
    min-height: 56px;
    gap: .25rem;
    flex-wrap: nowrap;
  }

  /* Two of the three pages carry style="height:80px" inline on the logo and
     one carries height="55" as an attribute; !important covers both. */
  header.header .logo img {
    height: 44px !important;
    width: auto !important;
  }

  /* ---- 2. hamburger: a real 44x44 target ------------------------------- */
  header.header .mobile-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  header.header .mobile-toggle span { margin: 3px 0; }

  /* The menu is positioned with top:80px, which was tied to the old fixed
     header height. 100% keeps it flush whatever the header now measures. */
  header.header .nav-menu.active { top: 100%; }

  /* ---- 3. menu items are tappable ------------------------------------- */
  header.header .nav-menu.active > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---- 4a. mobile Login, inside the hamburger menu ---------------------
     Distinct from Get Instant Quote / WhatsApp / Call / Chat: this is the
     returning-customer route into the portal, and it appears exactly once. */
  header.header .nav-menu .mobile-portal-login { display: block; }

  header.header .nav-menu .mobile-portal-login > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: .5rem 0 .25rem;
    padding: 0 1rem;
    border: 2px solid currentColor;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
  }

  /* ---- 4b. mobile Email Support ----------------------------------------
     Restores the contact route that hiding .top-bar took away, as a real
     navigation item rather than a re-exposed bar. It is styled as an ordinary
     menu row, not a second button, so it cannot compete with Login for the
     eye: Login keeps the bordered treatment, this is plain text at the same
     44px target height. Order in the markup is Contact -> Email Support ->
     Login, so the sequence reads as site nav, then support, then account. */
  header.header .nav-menu .mobile-support-email { display: block; }

  header.header .nav-menu .mobile-support-email > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  /* ---- 4c. the menu must be able to scroll -----------------------------
     Two extra rows plus a 32px root at 200% zoom can make the open menu taller
     than the viewport. Capping it at the space below the header and letting it
     scroll vertically keeps every item reachable. overflow-x stays visible:
     nothing here is allowed to hide horizontal overflow, it is only allowed to
     scroll the menu itself down. */
  header.header .nav-menu.active {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- 5. forms that do not fight the keyboard -------------------------
     iOS Safari zooms the viewport whenever a focused field is below 16px.
     Every field on the pilot pages is currently 14.4px. The :not() guards are
     load-bearing: a bare "body select" is specificity (0,0,2) and loses to the
     page's own .form-group select at (0,1,1). Measured, not assumed.

     The value is max(16px, 1rem), never a flat 16px. A flat 16px would pin the
     fields at 16px while the rest of the page grew, so a reader at 200% text
     zoom would see form text SHRINK from 28.8px to 16px - a WCAG 1.4.4 failure
     introduced by the fix itself. max() keeps the 16px iOS floor at default
     zoom and lets the fields scale with the root everywhere above it. The flat
     declaration above it is the fallback for engines without max(). */
  body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  body select:not([hidden]),
  body textarea:not([hidden]) {
    font-size: 16px;
    font-size: max(16px, 1rem);
  }

  /* Measured, not assumed: the homepage carries a textarea with the hidden
     attribute that :not([hidden]) correctly skips. It never renders and never
     receives focus, so it cannot trigger the iOS zoom this rule prevents. All
     eight rendered fields on the pilot pages resolve to 16px without any
     !important, so none is used here. */

  /* The chatbot's own message field is styled by #ft-input inside the widget's
     runtime stylesheet. An ID-level selector is the only thing that reaches it,
     and it zooms iOS on focus exactly like the page's own fields did. */
  body #ft-input {
    font-size: 16px;
    font-size: max(16px, 1rem);
    /* Once the field is allowed to scale with the root, its intrinsic
       min-content width grows too, and the widget's composer row is
       flex-wrap: nowrap. Measured at 320px / 200% zoom the input ran to 382px
       and the send button to 425px in a 320px viewport - both off-screen and
       unreachable. min-width: 0 lets the flex item shrink below its content
       size, which is the whole fix; the send button keeps its natural size. */
    min-width: 0;
    flex: 1 1 auto;
  }

  body #ft-send { flex: 0 0 auto; }

  /* ---- 6. visible focus ------------------------------------------------
     The pages carry outline:none on form fields with no replacement, and no
     :focus-visible rule anywhere. This restores a visible indicator without
     showing a ring on ordinary mouse clicks. */
  body a:focus-visible,
  body button:focus-visible,
  body input:focus-visible,
  body select:focus-visible,
  body textarea:focus-visible,
  body [tabindex]:focus-visible {
    outline: 3px solid #E8961E;
    outline-offset: 2px;
  }

  /* ---- 7. chat trigger, where a chatbot already exists -----------------
     These rules match #ft-trigger, which facts-chatbot.js creates at runtime.
     On pages with no chatbot they match nothing and introduce nothing.
     The widget writes "Get Instant Quote" into the button as a bare text
     node; zeroing the font collapses it so the chat control stops competing
     with the page's own quote CTA. The accessible name is set by the
     companion JS, because aria-label is an attribute CSS cannot reach. */
  body #ft-trigger {
    left: auto;
    right: calc(env(safe-area-inset-right, 0px) + 16px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    align-items: flex-end;
  }

  body #ft-trigger-btn {
    width: 56px;
    height: 56px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    justify-content: center;
    font-size: 0;
    line-height: 0;
  }

  body #ft-trigger-btn > svg { display: none; }

  body #ft-trigger-btn::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20 2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3v4l5.2-4H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='8' cy='10' r='1.5' fill='%23E8961E'/%3E%3Ccircle cx='12' cy='10' r='1.5' fill='%23E8961E'/%3E%3Ccircle cx='16' cy='10' r='1.5' fill='%23E8961E'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
  }

  body #ft-chat-window {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    max-height: calc(100vh - env(safe-area-inset-bottom, 0px) - 160px);
  }


  /* ---- 8. layout tracks that cannot fit a phone ------------------------
     Each of these was found by measuring at 320px with 200% text zoom and
     walking the box tree, not by guessing. Fixed at the track, never clipped.

     .steps-grid is pinned to two columns by the page's own
     "grid-template-columns: 1fr 1fr !important" at <=640px. Two ~175px
     min-content cards cannot fit a 280px container, so this needs equal
     weight to win. It is one of only four !important declarations here. */
  .steps-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .step-connector { display: none; }
  .step-card { min-width: 0; }

  /* .btn-lg carries padding 1rem 2.5rem; at a 32px root that is 160px of
     horizontal padding, wider than the container it sits in. */
  .btn-lg { padding-left: 1rem; padding-right: 1rem; }
  .cta-actions { flex-wrap: wrap; }

  /* footer.css sets min-width:280px on .new-footer-col.brand, which outranks
     a plain .new-footer-col rule and forces a 280px flex line inside a 240px
     wrapper. Matching weight, then stack the columns. */
  .new-footer-wrap .new-footer-col,
  .new-footer-wrap .new-footer-col.brand { min-width: 0; flex: 1 1 100%; }
  .new-footer-col .desc,
  .new-footer-col .addr,
  .new-footer-col .phone { min-width: 0; overflow-wrap: anywhere; }

  /* The homepage search row is display:flex / nowrap with the field at
     flex: 1 1 0% but min-width: auto, so it cannot shrink below its own
     min-content width. Measured at 320px the Search button already ran to
     321px before this pilot; raising the field to the 16px iOS floor pushed
     it to 332px. min-width: 0 is the whole fix - the field gives up the
     space instead of the button falling off the screen. */
  .search-wrap form { min-width: 0; }
  .search-wrap input { min-width: 0; }
  .search-wrap button { flex: 0 0 auto; }

  .facts-trustbar { flex-wrap: wrap; }
  .facts-trustbar span { white-space: normal; }

  .page-header .breadcrumb { overflow-wrap: anywhere; }

  /* ======================================================================
     FAMILY ADAPTERS
     Each is scoped to a class that already exists only on that page family,
     so no page needs a new body class and no adapter can leak onto another
     template. Canary 3 Rev 3.1 selectors are deliberately NOT reused here —
     that page is a different family with different markup.
     ====================================================================== */

  /* ---- adapter A: homepage  (hook: .ticker-wrapper / .hero-home) -------- */
  .ticker-wrapper { padding: 6px 0; }
  .ticker-track { font-size: 13px; }

  .hero-home { padding-top: 28px; }
  .hero-home .hero-text { padding-bottom: 32px; }
  /* The hero is a grid whose single track resolved to 312.8px inside a 288px
     content box at 320px / 200% zoom, because a grid item's min-width is auto
     and the badge and headline set a large min-content width at a 32px root.
     minmax(0, 1fr) lets the track shrink; min-width: 0 lets the items shrink
     inside it. Nothing is clipped and no type is reduced. */
  .hero-home .container {
    gap: 24px;
    padding-left: 16px;
    padding-right: 16px;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-home .hero-text,
  .hero-home .hero-text > * { min-width: 0; }

  .hero-home .hero-text h1,
  .hero-home .hero-text .hero-desc,
  .hero-home .hero-badge { overflow-wrap: anywhere; }
  .hero-home .hero-cta-row { gap: 10px; }
  .hero-home .hero-cta-row > a { min-height: 48px; }

  /* ---- adapter B: Get Started  (hook: .gs-hero / .quote-form) ----------- */
  .gs-hero { padding: 28px 0 24px; }
  .gs-hero .certs { gap: 6px; }
  .gs-hero .hero-cta-row > a { width: 100%; justify-content: center; min-height: 48px; }

  .quote-form { padding: 20px 16px; }
  .quote-form .btn-submit { min-height: 48px; }

  /* At 320px/200% zoom the contact list overflowed by 13px: the support email
     is a single unbreakable token next to a fixed 44px icon. Measured, then
     fixed by letting the row wrap and the text break, not by clipping. */
  .form-section .form-wrapper { min-width: 0; }
  .form-info .contact-item { flex-wrap: wrap; }
  .form-info .contact-text,
  .form-info .contact-text a { min-width: 0; overflow-wrap: anywhere; }

  /* eight service cards each ending in an identical "Call for Quote" is CTA
     crowding, but the labels are content and out of scope for this pilot;
     this only makes the existing targets reach 44px. */
  .services-section .service-card .card-cta { min-height: 44px; }


  /* .services-grid keeps a track wider than the viewport and .service-card
     has the default min-width:auto, so the card's min-content width (280px)
     wins over its 224px track. Measured at 320px/200%. */
  .services-section .services-grid { grid-template-columns: minmax(0, 1fr); }
  .services-section .service-card { min-width: 0; padding: 20px 16px; }
  .services-section .service-card h3,
  .services-section .service-card p { min-width: 0; overflow-wrap: anywhere; }

  /* Long single words in the headings overflow their box at 200% zoom and are
     then clipped by .gs-hero's own overflow:hidden. Breaking the text is the
     sanctioned fix; the type size is left alone. */
  .gs-hero h1,
  .gs-hero .subtitle,
  .services-section h2,
  .form-info h2,
  .bottom-cta h2,
  .testimonials-section h2 { min-width: 0; overflow-wrap: anywhere; }

  /* ---- adapter C: ECA service  (hook: .service-layout) ------------------
     At 320px/200% zoom this page overflowed by 233px, the worst on the site.
     Two measured causes, both fixed at source rather than clipped:
       1. .btn carries padding .85rem 2rem; at a 32px root that is 128px of
          horizontal padding inside a sidebar track narrower than that.
       2. #youtubeVideosContainer is written by the page's own inline script
          with grid-template-columns: repeat(auto-fill, minmax(280px,1fr)),
          pinning a 280px track. It is an inline style, so overriding it
          needs !important — the only !important outside the logo rule. */
  .service-layout .service-sidebar .uni-info-card { padding: 1rem; }

  .service-layout .service-sidebar .btn,
  .service-layout .service-sidebar .service-nav-item {
    padding-left: .75rem;
    padding-right: .75rem;
    min-width: 0;
    min-height: 44px;
    overflow-wrap: anywhere;
  }

  .service-layout .doc-list .doc-item,
  .service-layout .service-main li,
  .service-layout .service-main p,
  .service-layout .service-main h2 { overflow-wrap: anywhere; }

  #youtubeVideosContainer > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .facts-stats { padding: 28px 16px; }
  .facts-trustbar { gap: 8px 16px; }
}