/* Femas HR VN — RWD (targets: 375 / 768 / 1280).
   The Claude Design export uses inline styles, so overrides use attribute
   selectors + !important. Verified breakpoints: 375, 768, 1280. */

*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}

/* ---------- TABLET  (≤ 980px, covers 768) ---------- */
@media (max-width:900px){
  /* every multi-column grid collapses to a single column ... */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  /* ... except the 4-up trust-stats bar, which reads better 2×2 */
  [style*="repeat(4,1fr)"]{grid-template-columns:1fr 1fr !important;}
  /* footer keeps a 2-column layout on tablet */
  footer [style*="grid-template-columns"]{grid-template-columns:1fr 1fr !important;}

  header > div{height:auto !important;flex-wrap:wrap !important;padding-top:10px !important;padding-bottom:10px !important;row-gap:8px !important;}

  h1{font-size:2rem !important;line-height:1.25 !important;}
  h2{font-size:1.5rem !important;line-height:1.35 !important;}

  section{padding-left:20px !important;padding-right:20px !important;}
  [style*="padding:84px"],[style*="padding:80px"],[style*="padding:90px"],[style*="padding:70px"]{
    padding-top:48px !important;padding-bottom:48px !important;}

  /* trust stats: reliable 2×2 on tablet & phone */
  div.trust-grid{grid-template-columns:1fr 1fr !important;}
}

/* ---------- PHONE nav: hamburger (< 768px) ---------- */
@media (max-width:767px){
  .fhr-burger{display:inline-flex !important;}
  header{position:relative;}
  header nav{
    display:none !important;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:2px solid #013C4A;flex-direction:column !important;
    align-items:stretch !important;gap:0 !important;padding:8px 20px 14px !important;
    box-shadow:0 16px 28px rgba(1,60,74,.14);max-height:74vh;overflow-y:auto;white-space:normal;
  }
  header nav.open{display:flex !important;}
  header nav > a,header nav .nav-dd{width:100%;padding:13px 6px !important;border-bottom:1px solid #EEF3F4;}
  header nav .nav-dd{display:block;}
  header nav .nav-dd-menu{display:none !important;} /* keep top-level links tidy on phone */
}

/* ---------- PHONE  (≤ 600px, covers 375) ---------- */
@media (max-width:600px){
  [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  footer [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  /* stats stay 2×2 — still comfortable at 375px (class beats generic by source order) */
  div.trust-grid{grid-template-columns:1fr 1fr !important;}

  h1{font-size:1.6rem !important;line-height:1.3 !important;}
  h2{font-size:1.3rem !important;}
  body{font-size:15px;}

  /* full-width, easy-to-tap CTAs and form controls */
  a[style*="padding:16px"],a[style*="padding:15px"],a[style*="padding:14px"]{
    display:block !important;text-align:center !important;justify-content:center !important;}
  input,select,textarea{width:100% !important;}

  /* the hero's decorative offset frame can push width past the viewport */
  section[style*="overflow:hidden"] [style*="inset:14px -14px"]{inset:8px 0 -8px 0 !important;}
}