/* ════════════════════════════════════════════════════════════════
   MOBILE FIXES — loaded LAST (after components.css) on every page.
   Found in the mobile responsiveness audit.
════════════════════════════════════════════════════════════════ */

/* 1 ─ HAMBURGER MENU: main.js opens the menu by adding `is-open`, but the
   stylesheet only displayed `.open`, so the menu never appeared (and the JS
   still locked page scrolling). Support the class the script actually uses. */
.mobile-nav.is-open{display:flex}

/* 2 ─ BREADCRUMB (all screen sizes): the light-grey breadcrumb bar was getting
   white-at-40% text from components.css, i.e. practically invisible. */
.breadcrumb:has(.breadcrumb-inner){margin-bottom:0}          /* no white gap above the hero */
.breadcrumb > .container{width:100%}                          /* left-align instead of centering */
.breadcrumb-inner{flex-wrap:wrap;row-gap:0}
.breadcrumb-inner a{color:var(--blue,#3F6FB5) !important;display:inline-block;padding:10px 2px}
.breadcrumb-inner span{color:#6B7385 !important}
.breadcrumb-inner > :last-child{color:#1B2540 !important;font-weight:600}

/* 3 ─ HAMBURGER BUTTON: 38×32px → comfortable 44×44 touch target */
.nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}

/* 4 ─ VERY NARROW PHONES (≤360px): article pages' inline CSS made the brand
   name 14px, pushing the hamburger off-screen (23px sideways scroll). */
@media (max-width:360px){
  .nav-inner{gap:10px !important}
  .brand-name--light{font-size:11.5px !important;letter-spacing:0 !important}
  .nav-logo-mark{width:44px !important;height:44px !important}
  .nav-logo{gap:8px !important}
}

/* 5 ─ FORMS: 13.5px fields make iPhones zoom the page on focus. 16px stops it;
   46px height makes fields easy to hit. */
@media (max-width:768px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]),
  select,textarea{font-size:16px !important}
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]),
  select{min-height:46px}
}

/* 6 ─ FOOTER on phones: link groups side-by-side in a compact 2-column grid,
   tighter rows, duplicate hours/response lines hidden.
   (Works for both the shared footer and the hard-coded blog-article footer.) */
@media (max-width:600px){
  .footer{padding-top:40px !important}
  .footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:22px 16px !important;padding-bottom:26px !important}
  .footer .footer-grid > :first-child,
  .footer .footer-grid > :nth-child(4){grid-column:1 / -1}
  .footer .footer-brand-col .footer-hours,
  .footer .footer-brand-col .footer-desc.sm{display:none}   /* repeated in Quick Connect */
  .footer .footer-col-title{margin-bottom:4px !important;font-size:12px !important}
  .footer .footer-col-title.mt,
  .footer .footer-col-title[style*="margin-top"]{margin-top:14px !important}
  .footer .footer-links{gap:0 !important}
  .footer .footer-link{display:flex !important;align-items:center;min-height:40px;padding:8px 0 !important;line-height:1.3;font-size:13px}
  .footer .footer-link:hover{padding-left:0 !important}
  .footer .footer-bottom{gap:8px !important;padding:16px 0 !important}
  .footer .footer-bottom-links{gap:10px !important;flex-wrap:wrap;justify-content:center}
  .footer .footer-bottom-link{display:inline-block;padding:10px 6px}
  .footer .footer-cheat-wrap{margin:2px 0 !important}
}

/* 7 ─ LEGIBILITY: nothing smaller than 12px */
@media (max-width:768px){
  .footer-col-title,.footer-hours-label,.footer-legal,.eyebrow,.page-hero-eyebrow,
  .band-eyebrow,.hero-eyebrow,.job-tag,.form-note-fine,.form-hint,.trust-strip-label,
  .price-badge,.article-tag,.breadcrumb .current,
  [style*="font-size:10px"],[style*="font-size:10.5px"],[style*="font-size:11px"],[style*="font-size:11.5px"]{font-size:12px !important}
}

/* 8 ─ TAP TARGETS */
@media (max-width:768px){
  a.svc-link-work{display:inline-block;padding:12px 4px}
}