/* Protech mobile header / anchor UX fix — 2026-10-06 */
@media (max-width: 940px) {
  html {
    scroll-padding-top: 76px;
  }

  main section[id],
  main article[id],
  main form[id],
  main [data-scroll-target] {
    scroll-margin-top: 76px;
  }

  .nav {
    will-change: transform;
    transition:
      transform .28s ease,
      padding .35s ease,
      background-color .35s ease,
      border-color .35s ease,
      box-shadow .35s ease !important;
  }

  /* On small screens the header gets out of the way while reading/scanning.
     It returns as soon as the visitor scrolls up or opens/focuses the menu. */
  .nav.mobile-nav-hidden {
    transform: translate3d(0, -115%, 0);
  }

  /* Keyboard focus is handled in mobile-header-fix.js (focusin -> reveal).
     A CSS :focus-within rule is deliberately NOT used here: after tapping the
     menu button the button keeps focus on Android, which pinned the header
     open and silently disabled hide-on-scroll for the rest of the visit. */
  .nav.nav-menu-open {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 66px;
  }

  main section[id],
  main article[id],
  main form[id],
  main [data-scroll-target] {
    scroll-margin-top: 66px;
  }
}

/* Buy / rent heroes start directly under the fixed header. Their compact
   mobile padding used to be smaller than the header itself, which hid the
   breadcrumb and pushed the H1 against the bar. Keep both clear of it. */
@media (max-width: 1100px) {
  .commerce-hero {
    padding-top: 86px !important;
  }
}

@media (max-width: 640px) {
  .commerce-hero {
    padding-top: 80px !important;
  }
}

/* Site-wide (this file is loaded on every page, blog and fault pages
   included). iOS Safari zooms the whole page in when a focused field uses text smaller
   than 16px, and leaves the page zoomed (which looks like sideways overflow).
   Phones only: every text field, select and textarea gets a 16px font. */
@media (max-width: 640px){
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input:not([type]),
  select,
  textarea{
    font-size:16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav {
    transition: none !important;
  }
}