/* v94 — Contact Us desktop Service dropdown without form/layout reflow.
   Desktop: options float below the Service field at the exact field width.
   Mobile: retain the existing in-flow selector behavior from v93. */

@media (min-width:768px){
  #contact-form .contact-page-subject-field{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    align-self:start!important;
    z-index:40!important;
  }

  #contact-form .contact-page-mobile-select{
    position:relative!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    z-index:40!important;
  }

  #contact-form .contact-page-mobile-select-toggle{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Keep the options outside document flow so opening the dropdown never
     changes the Contact form/card width or height. */
  #contact-form .contact-page-mobile-select-menu{
    position:absolute!important;
    top:calc(100% + 6px)!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    max-height:230px!important;
    margin:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    z-index:999!important;
    box-shadow:0 14px 34px rgba(7,29,52,.18)!important;
  }

  #contact-form .contact-page-mobile-select-menu[hidden]{
    display:none!important;
  }

  /* The menu is allowed to float over the next field, but no parent may
     clip it and no grid column is allowed to resize when it opens. */
  #contact-form .contact-layout,
  #contact-form .contact-form-card,
  #contact-form .contact-form,
  #contact-form .form-row{
    overflow:visible!important;
    min-width:0!important;
  }

  #contact-form .form-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }

  #contact-form .form-row > *,
  #contact-form .contact-page-subject-field,
  #contact-form .contact-page-mobile-select{
    min-width:0!important;
    max-width:100%!important;
  }
}

@media (max-width:767px){
  /* Preserve the already-correct mobile behavior: the menu stays in flow
     and only the Service field expands. */
  #contact-form .contact-page-subject-field,
  #contact-form .contact-page-mobile-select{
    position:static!important;
    z-index:auto!important;
  }

  #contact-form .contact-page-mobile-select-menu{
    position:static!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:190px!important;
    box-shadow:none!important;
  }
}